Cara Membuat Widget Social Media di Sidebar Blog - Kali ini admin akan memberikan sebuah tutorial untuk mempercantik tampilan blog kalian, tapi santai ini gak akan membebani loading blog kalian sob.
Widget ini berfungsi untuk menyimpan link dari akun sosial media kalian dengan tampilan yang menarik. Widget ini saya dapatkan tutorialnya dari Arlina Design yang sudah saya redesign untuk mengubah button social twitter menjadi button channel youtube.
Bagi yang merasa kurang puas dengan hasil screenshot widget diatas, bisa langsung lihat di sidebar blog saya, sudah saya terapkan pada blog ini. Bagi yang sudah tidak sabar ingin menerapkan widget ini, silahkan ikuti tutorial nya dibawah ini sampai selesai ya ...
Tutorial Pemasangan
- Masuk ke akun Blogger kalian terlebih dahulu.
- Setelah itu masuk Dasboard > Template > Edit HTML.
- Salin kode CSS dibawah ini sebelum kode ]]></b:skin> atau </style>
- Tambah kode widget dibawah ini, tepat sebelum kode <!-- sidebar wrapper start -->
Pada tahap ini lumayan ribet, kalian harus tahu dimana penempatan widget pada sidebar blog kalian, karena setiap template pasti berbeda kerangka.
- Simpan.
/* 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.yt a{background:#df2925}
.sosmedarl-icon.crcl a{background:#d64136}
.sosmedarl-icon.fbl a:hover,.sosmedarl-icon.yt 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;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
<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 != ""'>
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipkxSFITuaZScgdOfn2MhE50QP3zdvv1t8otcxqZHXYESaH-JizzGzYxW-QLa1BYNeg_hhbEsyq4Bf7wqHgH-l9Vl2Q3Po5N5HxrB97BLc2MJVjcI1EKpaCIlvN_XXr1Nj1RWXyXslLEk/s1600/Logo_1509093365572.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 Penulis</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 yt'><a href='#' target='_blank' title='Subscribe Our Channel'><i class='fa fa-youtube-play fa-fw'/> Channel</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>Silahkan ganti # dengan url kalian
Keterangan :
Dikarenakan widget ini menggunakan icon Font Awesome, silahkan masukkan kode html berikut ini, jika ditemplate kalian tidak ada, jika ada silahkan lewati.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>Jika dengan tutorial diatas yang saya berikan kalian masih bingung, silahkan tanyakan melalui kolom komentar dibawah artikel ini.
Sekian dulu artikel dari Cara Membuat Widget Social Media di Sidebar Blog, semoga bisa bermanfaat bagi kalian semua para blogger indonesia.
Terima Kasih