Cara Tambah Media Sosial Ikon Ke header Blogger

Microsoft Share |Berikut Cara Tambah Media Sosial Ikon Ke header Blogger | Tutorial kali ini akan membantu Anda untuk menambahkan ikon media sosial di sudut kanan atas halaman yang dapat meningkatkan kemungkinan bahwa pembaca dapat mengikuti melalui berbagai jaringan sosial. Ada beberapa cara untuk melakukan ini, seperti menambahkan bagian widget baru untuk header blog tapi sekarang, kita akan melakukannya dengan menggunakan daftar unordered yang menggunakan ikon Facebook, Twitter, Google+ dan feed blog, dan sebagai bonus, ikon akan berputar ketika Anda membawa atas mereka.

Anda dapat melihat demo dalam tes ini blog.


Menambahkan Social Media Ikon ke Blogger header

Langkah 1. Dari dashboard Blogger Anda, pergi ke Template dan klik pada tombol Edit HTML:

 Langkah 2. Untuk memperluas gaya, klik panah kecil di sebelah kiri <b:skin> ... </ b: skin> (screenshot 1), kemudian klik mana saja di dalam kode area untuk pencarian (menggunakan CTRL + F) untuk ]]> </ b: skin> tag (screenshot 2) dan menambahkan kode ini tepat di atasnya:

_________________________________________

/ * Ikon Sosial untuk Blogger
----------------------------------------------- * /

# sosial-ikon {
margin-bottom:-30px;
height: 50px;
width: 100%;
display: block;
clear: both;
z-index: 2;
position: relative;
}
sosial-media-ikon {.
display: table
}
sosial-media-ikon. ul {
text-align: right;
padding: 5px 5px 0 0
-image list-style: none;
list-style-position: luar;
list-style-type: none;
}
sosial-media-ikon. ul {
margin-bottom: 0;
padding: 0;
float: right;
}
sosial-media-ikon. li.media_icon {
margin-left: 6px;
padding-left: 0 penting;
background: none penting;
display: inline;
float: left;
}
. media sosial ikon-li: hover {
-moz-transform: rotate (360deg);
-webkit-transform: rotate (360deg);
-o-transform: rotate (360deg);
transform: rotate (-360deg);
-moz-transisi: semua 0.5s kemudahan-in-out;
-webkit-transisi: semua 0.5s kemudahan-in-out;
-o-transisi: semua 0.5s kemudahan-in-out;
-ms-transisi: semua 0.5s kemudahan-in-out;
transisi: semua 0.5s kemudahan-in-out;
}

______________________________________

Screenshot 1:

Screenshot 2: 

 

Langkah 3. Sekarang mencari baris ini

 _____________________________________________________________

     <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

______________________________________________________________


 
Langkah 4. Dan di atasnya, tambahkan kode ini:

_______________________________________________________________________________


     <div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExgKW0HnAvNBMAc4DnwqX-x3qjmY3h8n_ymECcgBcRdIKD20E44jLouMOw33O3UG2SkQ0S_UVnp3KL-aOxcyKyNr1It7NvGOa7RlQF2nlG0YfAV9AMN0ZLVslv5vGzhMRYqxpyj4ANb0/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpSeCm6Noui1lZvErrXzLQLyv0o2y0EeoaX97z39AE76KNnCDjtE8wjIGovp0WztfgX0Vf4HPsXklgGd-0HdK0N1HeA1OVTvCgiMUIrEDVrNGVoTlW7UPKtVvowzYSJsUq2DPyzCnO2Xs/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM5E9_wD-QbVifQqrH6V5Z9BCxt8D2nB_RvPp75wBi4WWF17lg9tBFuUR4r5uMbmRKvE_kkv1r8u9spQopxqSRjSdmVrWBLIAPfzuB560WYc45L4RcfUQrrEpe1wgfesSXzWaGInnpA4k/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://windowsblue-free.blogspot.com//feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivfl7K9TXjsvctIWcrAWZskjcOev7iGbJDSC_OfWY9_O5FchCkWXrmNtfbTSjARSkqTYXjiRPWR6AbpgvkJmdJ5VxtxtCDnEw4kPQU18tMsELndYdkDqGiDshtO9hgvb2ETA8KSbwz-5Y/s1600/RSS.png'/></a></li>

</ul></div>

_______________________________________________________________________________

 kustomisasi

- Perubahan apa yang ada di merah dengan username dan id: yang pertama adalah nama pengguna Facebook Anda, yang kedua adalah bahwa dari Twitter, di ketiga Anda harus mengubah X dengan ID profil Google+ Anda dan di keempat Anda akan menempatkan nama blog Anda.
- Untuk mengubah ikon, hanya mengganti url di biru dengan orang-orang gambar Anda.
- Anda dapat menambahkan ikon lebih jika Anda ingin, Anda hanya perlu menambahkan sebelum </ ul> </ div> baris seperti ini untuk setiap ikon tambahan yang Anda inginkan:
___________________________________________________________________________

     <li class='media_icon'> <a href='Link URL'> <img border='0' src='Image URL'/> </ a> </ li>
___________________________________________________________________________

Langkah 5. Akhirnya, Simpan Template untuk menerapkan perubahan.


(iklan)