Laman

  • HOME
  • LOMBA BLOG
  • ARTIKEL
  • TUTORIAL
  • JUAL SUPERGREENFOOD

Cara Memasang Icon Sosial Media di Header Blog

Moocen Susan | Minggu, September 29, 2013 | | |
Cara Memasang Icon Sosial Media di header Blogfiuh akhirnya setelah mencari-cari caranya berhasil juga. Tadinya icon sosmed di header blogku cuma sebatas gambar tapi kini bisa ngelink lho. Hihi, puas banget rasanya bisa belajar hal baru dengan otodidak. 


Aku harus berterima kasih sama pemilik blog colourchoval, karena lewat tutorial beliau akhirnya aku berhasil meski ada sedikit modifikasi ukuran sana-sini. Untuk iconnya, udah aku downloadkan jadi tinggal copas aja. Tapi kalau mau cari icon sosmed lainnya, silakan browsing di internet sendiri ya. 

Ok, bagi yang berminat mencoba menerapkan di blognya simak tutorial saya berikut ini: 
1. Log in ke www.blogger.com 
2. Klik Template 
3. Klik Edit Template 
4. Centang Expand Widget 
5. Cari kode </header> di dalam kotak template dengan mengetik Ctrl+F → ketik → Enter 
6. Paste kode berikut ini tepat dibawah kode </header> . Dengan catatan ubah tulisan Link Facebook, twitter, dan blog dengan link akun sosial media Anda.
<div class='button-widget'><a class='postlink' href='LINK FACEBOOK' target='_blank'><img alt='' border='0' src='http://i1315.photobucket.com/albums/t590/agustinadiansusanti/facebook_64x64_zps64d1ee69.png'/></a>
<a class='postlink' href='LINK TWITTER' target='_blank'><img alt='' border='0' src='http://i1315.photobucket.com/albums/t590/agustinadiansusanti/twitter_64x64_zpsba5dbfe6.png'/></a>
<a class='postlink' href='LINK BLOG' target='_blank'><img alt='' border='0' src='http://i1315.photobucket.com/albums/t590/agustinadiansusanti/rss_64x64_zpse33ac042.png'/></a>

           <div>
7. Cari kode header-inner dengan cara mengetik Ctrl+F → header-inner → Enter 
8. Setelah ketemu kode seperti ini,
.header-inner .Header .descriptionwrapper { padding: 0 $(header.padding); }
9. Copy paste kode berikut ini dan letakkan di atas kode: .header .descriptionwrapper {
.button-widget {
float:right;
border:0;
margin-right:75px;
margin-top:-280px;
height:60px;
width:308px;
} .button-widget a img {
border:none;
}
.button-widget a:hover img {
border:none;
opacity:0.9;
filter:alpha(opacity=80);
-moz-opacity:0.90;
-khtml-opacity:0.9;
}
10. Klik Pratinjau dulu jika sudah sesuai dengan keinginan Anda, silakan disimpan.

NB : Anda dapat mengubah letak dan ukurannya sendiri 
Float = posisi icon 
Right = kanan 
Left = kiri 
Margin-right = untuk mengatur posisi icon ke kanan
Margin-top = untuk mengatur posisi icon ke atas

28 komentar:

  1. Ini bisa dipake di wordpress ga Mbak? Lg pgn dandanan blogku nih ;-)

    BalasHapus
    Balasan
    1. Coba dicoba dulu hehe saya kurang tahu bisa apa gaknya...:)

      Hapus
  2. trims infonya mbak sangat bermanfaat...
    mampir ke blog ane ya mbak iwanacakadut.blogspot.com

    BalasHapus
  3. maap gan,ane cari kode "< / header >" ko' kagak ada yahh ? adanya kode "< / head >"

    BalasHapus
    Balasan
    1. maaf mungkin template yang Anda gunakan berbeda. saya udah cek ada kok :) postingan ini juga ada sumbernya dan saya sudah cek bener kodenya, semua yang saya bagikan disini sudah terlebih dahulu saya coba dan terapkan. jd apabila di tempat Anda tdk ada berarti tempate kita berbeda.. :)

      Hapus
  4. mbak Centang widget itu yang mana? hehehe pusing masih awam :-)

    BalasHapus
  5. Maaf salah, Expend Widget maksudnya? hehehe

    BalasHapus
    Balasan
    1. mbak ikuti step by step tutorialnya, nanti muncul tulisan expand widget ada kotaknya dicentang aja. kalau baru pertama kali ganti template biasanya muncul tp kalau ga muncul ga usah dicentang gpp.

      Hapus
  6. wah ilmu banget nich vie coba yach mbak...terima kasih yach info nya

    BalasHapus
  7. thnak mba sharenya mau di praktekkan nih

    BalasHapus
  8. Please visist www.monixtuma.com

    BalasHapus
  9. terimakasih infonya mbak sangat bermanfaat :)

    BalasHapus
  10. kok gak bisa ya mba, sya coba masukin htnl ya dulu keluar icon nya pas css sya terapin malah ilang.

    BalasHapus
  11. Makasih tutornya Mantap, saya coba dulu nanti lapor lagi..

    BalasHapus
  12. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  13. mantap mbak,,, saya coba dulu di blog saya

    BalasHapus
  14. mba cara ganti logonya dimana ya biar sesuai ukuran dashboard saya? yg online mba linknya. thx

    BalasHapus
  15. Gimana bentukya mbak gak ada contoh gambarya..

    BalasHapus

Terima kasih sudah berkunjung. Silakan tuliskan komentar Anda di bawah ini. Komentar Anda sangat bermanfaat dan sangat saya hargai atau jika ada pertanyaan silakan tinggalkan pesan di livechat saya (sidebar kiri bawah)
Perhatian: saya akan menghapus otomatis komentar yang ada link hidupnya :D

Related Posts Plugin for WordPress, Blogger...