Cara memasang Kotak Media Sosial diatas header

Hai Bloggers... Di malam hari yang indah ini saya akan memberi tutorial Cara memasang Kotak Media Sosial diatas header. Apa kegunaanya? Ya untuk mempopulerkan situs original yang kita miliki. Media sosial disaat ini adalah media yang sangat banyak digunakan orang untuk bersaing secara modern. Contoh seperti banyak-banyakan followers,banyak-banyakan pengikut, dan masih banyak yang lain. Kotak media sosial ini bisa anda isi dengan akun pribadi milik anda.

Screenshot :

Cara memasang Kotak Media Sosial diatas header 1

GIF :

Cara Pertama :

1. Buka Blogger - Kemudian login.

2. Dashboard - Template.

3. Edit HTML.

Proses Pembuatan :

1. Temukan <CTRL+F> kode ]]></b:skin> atau </style>.

2. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>.


/* CSS Kotak Media Sosial atas header - DanAndroid-Download*/
#kotak_media_sosial_atas_header{width:100%;background:rgba(255, 255, 255, 0);;display:block;margin:0 auto;text-align:right}
#kotak_media_sosial_atas_header ul {background:#fff;display:block;height:32px;margin:0 auto;padding:5px;list-style:none;}
#kotak_media_sosial_atas_header li{opacity:0.5;display:inline-block;margin:0 auto;width:32px;height:32px;background-position:left top;text-align:center;margin-left:5px;transition:All 0.4s ease;}
#kotak_media_sosial_atas_header li:hover{opacity:1;background-position:left -32px;}
#kotak_media_sosial_atas_header li a{display:inline-block;width:32px;height:32px;}
#kotak_media_sosial_atas_header li a:hover{background:transparent;color:#ddd;box-shadow:none;}
#kotak_media_sosial_atas_header li a span{display:none;}
#kotak_media_sosial_atas_header li.facebook{background-image:url(http://4.bp.blogspot.com/-o_g8larFjdU/U4Y0XpgorCI/AAAAAAAADYg/0ZQbECBzU60/s1600/facebook.png);}
#kotak_media_sosial_atas_header li.twitter{background-image:url(http://3.bp.blogspot.com/-Ke4tQTtY3jI/U4Y0Zfg0N-I/AAAAAAAADYw/dlg4LjddJQE/s1600/twitter.png);}
#kotak_media_sosial_atas_header li.youtube{background-image:url(http://4.bp.blogspot.com/-4aom3PHdSCA/U4Y0aUmR75I/AAAAAAAADY8/V2bRVAX84Fc/s1600/youtube.png);}
#kotak_media_sosial_atas_header li.googleplus{background-image:url(http://4.bp.blogspot.com/-YiQrpkjpv7o/U4Y0XhoOmVI/AAAAAAAADZE/W1mDEl3fl-w/s1600/google.png);}
#kotak_media_sosial_atas_header li.instagram{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeUelYqPl8CbXplJBUjRLSPMqqbqSvaXwTQaDzdTLYdTm7Xs6DLDYBOhZYxH5G0d7K_bIZ2q9ANs1mWX6-C9io_pKo7iz0HAF63PPp4SD-gKf8MSubr2V7UoHZYorfYXo-8jyV6ryO4l-c/s1600/instagram.png);}
#kotak_media_sosial_atas_header li.linkedin{background-image:url(http://2.bp.blogspot.com/-9nf11_L6Ax0/U4Y0ZDh7ihI/AAAAAAAADYs/4g3M5XXuGas/s1600/linkedin.png);}

3. Temukan lagi <CTRL+F> kode <body>.
4. Copy&paste kode berikut ini, dan letakkan dibawah kode <body>.


<!--Kotak Media Sosial atas header-DanAndroid-Download-->
<div id='kotak_media_sosial_atas_header'>
<ul><!--Kotak Media Sosial atas header-DanAndroid-Download Started-->
<li class='sorting-01 facebook'><a href='#'><span class='inv'>Facebook</span></a></li>
<!--Ganti dengan Url di Facebook-->
<li class='sorting-02 twitter'><a href='#'><span class='inv'>twitter</span></a></li>
<!--Ganti dengan Url di Twitter-->
<li class='sorting-03 googleplus'><a href='#'><span class='inv'>googleplus</span></a></li>
<!--Ganti dengan Url di Google Plus-->
<li class='sorting-04 youtube'><a href='#'><span class='inv'>youtube</span></a></li>
<!--Ganti dengan Url di Youtube-->
<li class='sorting-05 instagram'><a href='#'><span class='inv'>instagram</span></a></li>
<!--Ganti dengan Url di instagram -->
<li class='sorting-06 linkedin'><a href='#'><span class='inv'>linkedin</span></a></li>
<!--Ganti dengan Url di Linked-->
</ul>
</div><!--Kotak Media Sosial atas header Started End-->

Note : "#" Silahkan anda isi dengan link sosial media anda.

5. Terakhir Simpan Template.

Sekian tutorial Cara memasang Kotak Media Sosial diatas header. Makasih udah berkunjung. Apabila ada kesalahan jangan sungkan berkomentar ya. Mohon di bagikan : Cara memasang Kotak Media Sosial diatas header. Dan Sampai jumpa di kesempatan berikutnya.

Bantu Donasi agar blog ini Update

Cara memasang Kotak Media Sosial diatas header

Posted by daniasyrofi On 10:27 PM with No comments