Sebelum masuk ke Tutorial, anda perlu tahu jika Widget Social Media itu penting dan hampir di gunakan oleh setiap blogger di dunia. Karena Widget Social Media adalah salah satu metode yang masuk dalam Tekhnik SEO Offpage. Jadi untuk itu blog anda wajib pasang widget yang satu ini, langsung saja, berikut tutorialnya...
1. Copy dulu kode di bawah ini :
<div class="abt-social-slide">2. Masuk ke blog, pilih Tata Letak > Tambahkan Gadget > HTML/Javascript, kemudian pastekan kode yang anda copy tadi, tapi sebelum itu ubah dulu tulisan saya beri warna biru dengan ID milik anda.
<ul>
<li><a class="facebook" href="http://facebook.com/cengkramcom" target="_blank">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/cengkram_com" target="_blank">Twitter</a></li>
<li><a class="google-p" href="https://plus.google.com/107070865818520145665/posts" target="_blank">Google plus</a></li>
<li><a class="rss" href="http://feeds.feedburner.com/cengkram">Langganan</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHHePfSvtZouA7m-1PhLrmOoGBo-q7c9VH3JqCQFAnbxzgvYtwdMb9ycSt8Fk5UiS1LhXB5DARDUStnSU_ueOMYQ0txFDFdsbpotnOD2l0UgsdhyphenhyphenIG1YbIR1AK641MLpg81gSEdTc9ZQ/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHHePfSvtZouA7m-1PhLrmOoGBo-q7c9VH3JqCQFAnbxzgvYtwdMb9ycSt8Fk5UiS1LhXB5DARDUStnSU_ueOMYQ0txFDFdsbpotnOD2l0UgsdhyphenhyphenIG1YbIR1AK641MLpg81gSEdTc9ZQ/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIdUDkJZhQKM3vw9biAXYybZftTbHcZirZWIclVMtvKmYtJwUoWIAvZXPo_YqHtGuSRiPGNF0ozEDfazVCLQneWvRaWpf0StLCWW6ZTetJzafFaeKLVPyK0sz2VpBXz4TywInGeaCWkg/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIdUDkJZhQKM3vw9biAXYybZftTbHcZirZWIclVMtvKmYtJwUoWIAvZXPo_YqHtGuSRiPGNF0ozEDfazVCLQneWvRaWpf0StLCWW6ZTetJzafFaeKLVPyK0sz2VpBXz4TywInGeaCWkg/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggdDvCvx0QxCM7zDXXQz6s5bhkhLlGIgnNEQug4_TwGN1OQiavF3AT8VAX4fjJcCK0jmiY671NH6JCW0dCWjXuHrlIyHj0Kl8ANmQhPsIWMvQHjHf8lcMRtYqbQiY2ZnSPoC1j0YHPRg/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggdDvCvx0QxCM7zDXXQz6s5bhkhLlGIgnNEQug4_TwGN1OQiavF3AT8VAX4fjJcCK0jmiY671NH6JCW0dCWjXuHrlIyHj0Kl8ANmQhPsIWMvQHjHf8lcMRtYqbQiY2ZnSPoC1j0YHPRg/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSwnx1AWcONQft5oSosfOpeB0j9JlFKi8Vq0rkSgy_yBIb2p3UrStVxrYXdMFcZFRVFtFsXFQIMN7gnDcBqcKR-xXYx-iz29ZkvcdOs5eZrn_VYWOOGx3wG-zBIvIvWpNrBxltmCGVg/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSwnx1AWcONQft5oSosfOpeB0j9JlFKi8Vq0rkSgy_yBIb2p3UrStVxrYXdMFcZFRVFtFsXFQIMN7gnDcBqcKR-xXYx-iz29ZkvcdOs5eZrn_VYWOOGx3wG-zBIvIvWpNrBxltmCGVg/s1600/twitter.png) no-repeat 0 0}
</style>
3. Langkah akhir klik Simpan..
Nanti tampilannya akan seperti di bawah ini :
0 komentar:
Posting Komentar