Jumat, 15 Maret 2013

Cara Membuat Tombol Jejaring Sosial di Blog

Button social yang saya maksud seperti social facebook, twitter, google plus dll.. pada postingan kali ini yaitu membuat button social di template (yang membedakannya adalah tata letak) dan mungkin ini sedikit berbeda (sedikit penambahan dalam memperkaya kreasi design blog).
Adapun langkah untuk membuat button social di template seperti yang saya punya adalah:




  1. Copy kode HTML social di bawah;
  2. Tempatkan di template sesuai dengan keinginan Anda, akan tetapi saya menempatkannya sejajar dengan Tabs page/laman yaitu pada HTML PageList (yang jelas dalam ruang/setelah kode <body>
  3. Jangan lupa login dan back up template terlebih dahulu sebagai pewaspadaan kesalahan.
  4. Dan untuk merapihkannya silakan gunakan kode CSS seperti di bawah ini, dan tempatkan sebelum/dalam ruang kode ]]></b:skin>
/* Kode CSS Button Social DX
----------------------------------- */
#subscribes {
float: right;
margin-right:0px;
margin-top: 0px;
position: relative;
}
#subscribes a {
padding-left:5px;
}
Di bawah adalah kode HTML nya, silakan copy langsung. dan ganti kata "alamat tautan/USER NAME" dengan id jejaring sosial keinginan Anda.
<div id='subscribes'>
<a href='http://www.twitter.com/YOUR_USERNAME'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhic0tuyhyphenhyphenF20B5_uTA7pSH8HXeIpB279ne9Ri00c8NsYSFuSXkAxyDWNB_ATF3x6gLIgXwJ7ZRUeMr4sOvKzxF0UVpY0dHRNIEaAKIPmgNBOUEZsynqAZ4Op3XGueKZ0yqtPKdxcHavPo/s0/twitter.png'/></a>
<a href='http://www.facebook.com/YOUR_USERNAME'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwh80ErXs-gnzlly4hCsmR0ppdsWCjY9qyvjA9yaEb1D6ho7GVUMWeubNQs487JAqAxbY9fu8I9xoUCe3VeZdl4-TtpcLVnPRzAiJGl-CzvXcj7JX1QLze-lzUl8jVOWUfu-HSlBiX198/s0/facebook.png'/></a>
<a href='http://plus.google.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXfeiAgcXhYbiCLcI793t-6vW-jIfyXR3nbw0ZPZ0C9n7dZDvOap7Db3sQRHrqBO4kQuQaJLHU4Hk-DbiTXZ7pz2lDePspfI8eoJwAXyPdsDTyrY35CBnqjMPdNojJr3V2NV0RYOI2ndc/s0/google%25252B%252525252b1%25252Bcopy.png'/></a>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqp7YKJJM-PqcaBrt2dhfTAEs1e4kxmG4RUVbcHIv3i12LTE1vlFFvc3AqY1Ov2OATLmXI9t2VuMTaY4olfa5Cexl2mDiPXOTE5QXvg6H9d5PR4p4bqRwVgINtuo5Dxrsh4Yp4OVjqozk/s0/subscribe.png'/></a>
</div>

Mudah bukan....
Selamat mencoba.

Tidak ada komentar:

Posting Komentar