Cara Membuat Button Social di Template Blog

Button social yang saya maksud seperti social facebook, twitter, google plus dll. Hal ini hampir sama dengan berbagai button share (berbagi) yang pernah saya posting sebelumnya, seperti Cara membuat button share di postingan atau cara membuat button like facebook di postingan. Akan tetapi pada postingan sekarang 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 keinginan Anda.
<div id='subscribes'>
<a href='http://www.twitter.com/YOUR_USERNAME'><img src='http://4.bp.blogspot.com/-3fTX6KmDXnM/TqVu_Ggm_BI/AAAAAAAAAmo/HYe21GPGxMk/s000/twitter.png'/></a>
<a href='http://www.facebook.com/YOUR_USERNAME'><img src='http://4.bp.blogspot.com/-OkJ0bsjMFsA/TqVu_Mq3pEI/AAAAAAAAAmw/8-1m0q7WoKU/s000/facebook.png'/></a>
<a href='http://plus.google.com'><img src='http://2.bp.blogspot.com/-2rvSGGJwmXo/TqVu_SlvwhI/AAAAAAAAAm4/rfKS9s1L2Ag/s000/google%25252B%252525252b1%25252Bcopy.png'/></a>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img src='http://1.bp.blogspot.com/-1K4Nwl94PNE/TqVu_dkwn2I/AAAAAAAAAnA/sqHEM-cNrFc/s000/subscribe.png'/></a>
</div>

Selamat Berkreasi - Dan untuk gambar icon Anda dapat mengunjungi atau dll.

0 komentar:

Posting Komentar

Cara menulis komentar
1. Ketik komentar Anda pada Kolom dibawah
2. Pilih account login Anda (Email)
3. Klik 'Poskan Komentar'
Saya harap Anda jangan berkomentar dengan bentuk SPAM, karena tidak akan dipublikasina. Jika Anda ingin menautkan link Blog, silakan be Follower (Baca:Cara menjadi followers blog)

Lebih diutamakan pada komentar yang bersifat ingin tahu (bertanya).