Cara Tambah Social Media Icons Untuk Blogger Header

Tutorial ini akan membantu Anda untuk menambahkan ikon media sosial di sudut kanan atas halaman yang bisa meningkatkan kemungkinan bahwa pembaca dapat mengikuti melalui berbagai jejaring 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 blog uji. 

MENAMBAHKAN SOCIAL MEDIA ICONS UNTUK 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 di mana saja di dalam area kode untuk mencari (menggunakan CTRL + F ) untuk]]> </ b: skin>tag (screenshot 2) dan menambahkan kode ini tepat di atasnya: 

 / * Sosial ikon 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
list-style-image: 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;
}
. Sosial-media-ikon li: hover {
-Moz-transform: rotate (360deg);
-Webkit-transform: rotate (360deg);
-O-transform: rotate (360deg);
transform: rotate (-360deg);
-Moz-transition: all 0.5s kemudahan-in-out;
-Webkit-transition: all 0.5s kemudahan-in-out;
-O-transition: all 0.5s kemudahan-in-out;
-Ms-transisi: all 0.5s kemudahan-in-out;
transisi: all 0.5s kemudahan-in-out;
}

Screenshot 1:

Screenshot 2:

Langkah 3. Sekarang cari baris ini 

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

Langkah 4 Dan tepat di atasnya, tambahkan kode ini.: 

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

<li class='media_icon'> <a href='http://facebook.com/ nama'> <img border = '0 '

<li class='media_icon'> <a href='http://twitter.com/#!/ nama'> <img border = '0 '

<li class='media_icon'> <a href='https://plus.google.com/ xxxxxxxxxxxxxxxxxx /about'> <img border = '0 '

<li class='media_icon'> <a href=' http://name-of-your-blog.com /feeds/posts/default'> <img border = '0 '

</ Ul> </ div>

Kustomisasi 

- Mengubah 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 dengan warna biru dengan yang gambar Anda. 
- Anda dapat menambahkan ikon 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. 

Efeknya dilakukan dengan CSS3, sehingga efek ini tidak akan bekerja di browser lama.