Cara Membuat Social Media Keren Diblog

Assalamualaikum Syedara..!!

Pada kesempatan ini saya akan mengajari cara menambah fitur social media diblog yang unik dan keren tentunya. Memang banyak sekali bentuk social media dengan berbagai bentuk, namun saya hanya posting yang menurut saya sudah keren. :D Bentuk seperti gambar dibawah ini, salah satu tombolnya akan keluar kesamping jika disentuh mouse, keren kan sobat ? :D

Oke langsung praktek ya sobat..Cekidoot...

• Pertama login ke Blog, terus Edit HTMLnya ;
• Kemudian cari kode ]]></b:skin> , dan letak kode dibawah ini pas diatas kode ]]></b:skin> tadi.

#BT_social {width: 60px;margin: 5px 20px; position:fixed;     top:50px;float:left;left:0px    width:45px;};padding:5px;bottom:0%}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8qGA_64yz2rFouQDsYVsVH3eGxdA2lrcYWFSSPpG4ktWd8ch707ux6gByVQA6AsYfT93vwJH38VX2BUlWl0TxUCa3RoTjfKcKizfrMw27xp-41jCnteZcQKSrEb7dMAcVigFFLmZJXw0/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 45px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#BT_social span:hover {visibility: hidden;}#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}#BT_social .icon {color: #fafafa;overflow: hidden;}#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}#BT_social li:hover .icon {width: 160px;}#BT_social li:hover .icon {background-color: #d91e76;}#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}

• Setelah itu simpan templatenya,
• Kemudian tambahkan gadget html/javascript dan masukkan kode dibawah ini :

<div id="BT_social">

<li><a class="icon fb" href="http://www.facebook.com/deddydegazaa">Like us on Facebook</a></li>

<li><a class="icon twit" href="https://twitter.com/deddydegazaa">Follow us on Twitter</a></li>

<li><a class="icon google" href="https://plus.google.com/107155135394175494665">Follow us on Google+</a></li>

<li><a class="icon rss" href="http://www.feedburner.com/ilmu-bermanfaat23">Subscribe via RSS</a></li>

</div>

Ganti tulisan yang berwarna Merah dengan id masing Social Network sobat. Kemudian :

• untuk mengubah position nya menjadi disebelah kanan ubah pada float:left menjadi float:right.

• Untuk mengubah letaknya supaya dibawah ubah pada top:50px menjadi bottom:0px

• Kemudian simpan dan lihat hasilnya,,:D

BAGIKAN ARTIKEL : Facebook Twitter Google+ Linkedin