Widget Tombol Social Media Keren Tampilan Slide



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">
<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>
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.

3. Langkah akhir klik Simpan..

Nanti tampilannya akan seperti di bawah ini :

0 komentar:

Posting Komentar

We Are Just Creative!

Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.

On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. .
...More

  • lion
  • lion
  • lion

Contact

Popular Posts

About the Blog