Cara Membuat Widget Button Media Sosial Pada Blog

Cara Membuat Widget Button Media Sosial Pada Blog - Hai teman-teman, apa kabar, semoga saja kalian yang sedang menyimak tutorial ini dalam keadaan yang sehat, pada kesempatan hari ini, admin akan membuat sebuah tutorial yang berjudul Cara Membuat Widget Button Media Sosial Pada Blog, widget media sosial ini menurut saya harus dipasang di setiap blog, agar para pengunjung yang sedang mencari admin blog tersebut lebih mudah, kebanyakan para pengunjung suka kepo terhadap profil yang mempunyai admin tersebut, secara umum para pengunjung suka menanyakan alamat rumah, dal lain - lain. maka dari itu, kita harus membuat widgetnya, kalian bisa simak artikel ini, supaya nantinya tidak akan kebingungan dalam pemasangan, oke langsung saja ke pembahasan tutorialnya.



  • Hal yang harus dilangkahi pertama adalah masuk ke akun blogger, jika kalian sudah login, kalian bisa lewati langkah ini.
  • lalu, kalian harus menuju ke tema atau theme
  • lalu, klik edit HTML
  • dalam pemasangan widget ini, di template blog kita harus sudah memasang font awesome, supaya nanti icon nya muncul, jika kalian belum memasangnya, kalian bisa copy kode dibawah ini, tetapi jika sudah, kalian bisa lewati langkah ini. kodenya ditempelkan di atas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
  • Lalu, kalian cari kode ]]></b:skin>, agar lebih mudah dalam pencarian kodenya, gunakan fungsi CTRL+F pada keyboard anda, lalu pastekan kode dibawah ini tepat diatas kode tersebut.

/* Sosial Media Widget */
#HTML68 .sosmedarl-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.sosmedarl-img{position:relative;max-height:140px;overflow:hidden}
.sosmedarl-img img {max-width:100%;width:100%;transition:all .6s;}
.sosmedarl-img:hover img{transform:scale(1.2) rotate(-10deg)}
.sosmedarl-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.sosmedarl-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.sosmedarl-float{text-align:center;display:table;width:100%;height:100%}
.sosmedarl-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}
.sosmedarl-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}
.sosmedarl-float a i{font-weight:normal;margin:0 5px 0 0}
.sosmedarl-wrpicon{display:block;margin:15px auto;position:relative;}
.sosmedarl-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .sosmedarl-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .sosmedarl-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .sosmedarl-icon i{font-family:fontawesome;margin:0 3px 0 0}
.sosmedarl-icon.fbl a{background:#3b5998}
.sosmedarl-icon.twitt a{background:#19bfe5}
.sosmedarl-icon.crcl a{background:#d64136}
.sosmedarl-icon.fbl a:hover,.sosmedarl-icon.twitt a:hover,.sosmedarl-icon.crcl a:hover{background:#404040}
.extender .sosmedarl-icon:hover a,.extender .sosmedarl-icon a:hover{color:#fff;}
.sosmedarl-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.sosmedarl-info p{margin:5px 0}
.sosmedarl-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.sosmedarl-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.sosmedarl-info h4:before,.sosmedarl-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.sosmedarl-info h4:before {margin-left:-50%;text-align:right;}
  • Tambahkan kode dibawah ini juga agar terlihat lebih rapih

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
  • Kemudian, tambahkan kode ini diatas kode </body>

<b:widget id='HTML68' locked='false' title='Sosial Media' type='HTML' visible='true'>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='sosmedarl-img'>
<img alt='Judul Blog' class='img-responsive' height='auto' src='http://4.bp.blogspot.com/-2rwSWagjHKw/Vi4YlEYYxRI/AAAAAAAADOI/e_-tJD_tgJc/s1600/x-theme.png' title='Judul Blog' width='300'/>
<div class='aboutfloat-img'><span class='sosmedarl-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
<div class='sosmedarl-info'>
  <h4><span>Judul Blog</span></h4>
<p>Deskripsi blog tulis di sini</p>
</div>
<div class='sosmedarl-wrpicon'>
<ul class='extender'>
<li class='sosmedarl-icon fbl'><a href='#' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></li>
<li class='sosmedarl-icon twitt'><a href='#' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</a></li>
<li class='sosmedarl-icon crcl'><a href='#' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/> Circle</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
</b:widget>
*Ganti kode yang sudah diwarnai dengan sesuai kebutuhan kalian | Script diatas lebih bagusnya diletakan di bagian sidebar blog.
Bagaimana dengan tutorial yang saya berikan? apakah mudah di pahami?
Jika kalian merasa postingan ini bermanfaat bagi kalian, saya berharap untuk membagikan postingan ini, agar teman kalian tahu dengan tutorial ini, sekian dari artikel hari ini, terimakasih.

1 Response to "Cara Membuat Widget Button Media Sosial Pada Blog"

  1. mantap tutornya, gan!!! makin rajin tulis artikelnya, mantap!!!

    ReplyDelete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh <em>Isin Komentar</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel