CARA MEMASANG TOMBOL MENU SOSIAL DI BAGIAN HEADER TEMPLATE BLOGSPOT NOTABLE

Trik ini saya modifikasi bagian CSSnya di sesuaikan dengan kebutuhan template baru yang lebih modern. Menu sosial adalah sekelompok ikon yang kita butuhkan agar halaman web terhubung ke media sosial milik kita sendiri sehingga blog memiliki sumber trafik organik yang tinggi.

Demikian harapannya. Tapi itu memang bisa berguna, karena akan menyintas jalan dari halaman web ke halaman medsos milik kita seperti Facebook, IG, Twitter, Pinterest dll.

Cara pemasangannya adalah sebagai berikut:

(note: credit pic: Freepik)

1. Masuk kepengaturan atau dasbor blogger

• Pilih tema
• Pilih (cari) tombol edit HTML

2. Tambahkan CSS

Pada halaman editor HTML blogspot cari kode </head> dan letakan kode CSS berikut ke atas kode tersebut.

<style>#social-icons {
margin-top:-30px;
width:100%;
clear:both;
z-index: 999;
position: fixedrelative;}
.social-media-icons {
display:table}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:left; z-index:9999}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
</style>

3. Tambahkan HTML/XML

Masih di halaman editor HTML template blogger cari kode berikut:

<b:include cond='data:imagePlacement != &quot;REPLACE&quot;' name='description'/>
</div> 

Lalu letakan kode berikut tepat di bawahnya:

<div class='social-media-icons' id='social-icons'>
<ul><li class='media_icon'><a href='http://www.facebook.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kDHQbyI8Mfh4AM1qRMIRzkv63hokM_Lu6X8B5y18gNIMgmVFRPGwyB6CAqAJt76Jr4bIgm2AsJGL6f9uzUR1DwyQjDY3sj5AKUAAoQ87Ay9F944xfrpGX_z0UpbEW538oNchA3dlnAo/s1600/Facebook.png'/></a></li>
<li class='media_icon'><a href='http://www.twitter.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAGPNP42CSmj6DPTl5J-OFIQnHLjezy6LEF7g3mhv8Z14UoaPUc-UY2o73l-TPtHZ8dKGqGZ_76sgy8sBQGVwYw88EeK7eghkRebRztaV7Km0A9H8TJrqvPdHf9Q5CWQ4L6CcdvMPTNo/s1600/Twitter.png'/></a></li>
<li class='media_icon'><a href='https://www.editblogtema.com'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDc64D1ysFxnbIMU78n2OYYfNsyKIeP5JHk0HVB6one5NrOfjfxDucxit6eM14li828v0i2qoU63kCaMBUlvkvHn62lt9VnPkIMrDKrZbJrVdacDI-oZb2-uzaj8x2zk2xpvxcdJ3EKvM/s1600/RSS.png'/></a></li>
</ul></div>

Save template.

Catatan: menggunakan ini mungkin kalian bisa mengabaikan deskripsi blog di bagian bawah judul. Sehingga tampilan tidak tampak tumpang tindih.

Lihat:

DEMO Click here 

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: