Cara membuat footer stylish untuk template Blogger contempo, emporio, soho dan Notable

Tapi baca dari awal ya, trik ini mungkin tidak efektif jika di gunakan buat template template yang lebih tua seperti PT. Keren Sekali, Jendela, Perjalanan, Sederhana dll. Memang bisa tapi kurang efektif. Demikian juga pada template template custom dan premium buatan pihak ketiga yang kalian beli di internet. 

Saya katakan 'bisa' namun pengaturan CSSnya harus di rombak terlebih dahulu jika ingin menerapkannya ke template template selain empat template yang telah saya sebutkan di atas.

Secara default footer ke empat template template seperti contempo,  soho,  emporio dan notable terlihat monoton, namun kita dapat menambahkan footer dengan gaya dan warna tertentu beserta widget atau gadget yang terinstegrasi didalamnya. Pembuatannya juga tidak sulit:

Pertama tambahkan HTML

1. Pilih tema
2. Pilih edit HTML
3. Pada halaman editor HTML blogger copy berikut:

<div class='editblog'><div class='editblogsocial-icons'> <ul> <li class='social-facebook'><a href='https://www.facebook.com/AnissaSufyan/' target='_blank' title='Facebook'>Facebook</a></li> <li class='social-twitter'><a href='https://twitter.com/sufyan331?s=09' target='_blank' title='Twitter'>Twitter</a></li> <li class='social-instagram'><a href='https://www.instagram.com/sufyan_yaan/?hl=en' target='_blank' title='Instagram'>Google+</a></li> <li class='social-pinterest'><a href='https://id.pinterest.com/sufyan_yaan/' target='_blank' title='Pinterest'>Pinterest</a></li> <li class='social-rss'><a href='https://www.google.com/bookmarks/' target='_blank' title='RSS'>RSS</a></li> <li class='social-youtube'><a href='https://www.youtube.com/user/Nayfus1' target='_blank' title='youtube'>youtube</a></li></ul>
</div></div>
<small><center>Copyright &#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>.
All rights reserved.</center></small>
<a class='trans color-hover' href='#' id='jump-top-button'>
<center><span class='block black color-hover'><svg style='width:34px;height:34px' viewBox='0 0 24 24'>
<path d='M7.41,18.41L6,17L12,11L18,17L16.59,18.41L12,13.83L7.41,18.41M7.41,12.41L6,11L12,5L18,11L16.59,12.41L12,7.83L7.41,12.41Z' fill='currentColor'/>
</svg></span>
<span class='block color-hover upper'/></center>
</a>

Untuk Template emporio letakan di atas kode:

 <b:template-script async='true' name='vegeclub' version='1.0.0'/> 

dibawah kode tersebut letakan kode berikut:

Kedua Tambahkan CSS style

Masih didalam editor HTML blogger cari kode </head> dan letakan kode berikut tepat diatasnya:

<style>.editblogsocial-icons { overflow: hidden;
text-align: center;
border-bottom: 1px solid rgb(133, 133, 133);
width: 230px;
display: block;
margin: 20px auto;
}
.editblogsocial-icons ul {
margin: 0px auto !important;
text-align: center;
padding: 0px !important;
display: inline-block;
}
.editblogsocial-icons ul li {
background: transparent none repeat scroll 0% 0% !important;
border: medium none !important;
float: left;
list-style-type: none !important;
padding: 0px !important;
margin: 0px 2px !important;
}
.editblogsocial-icons ul li::before,
.editblogsocial-icons ul li::after {
display: none !important;
}
.editblogsocial-icons ul li a, .editblogsocial-icons ul li a:hover {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0FDx3IIfd3LvM2GSdI1oUD9ml93vQcmTlpktJFFi_a4boUodPNWWghFLs4eEGMMMVHENVSMvv6pwTtkJWFg9wkT8-t2wU9kncEBHhVxV8nKajrahKr9e_GWtE5zMqj-eA_ZM2C9x73eP/s320/pkh1.png&quot;) no-repeat scroll 0 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block;
height: 34px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s;
width: 34px;
}

.editblogsocial-icons ul li.social-facebook a {
background-position: -62px 1px;
}

.editblogsocial-icons ul li.social-facebook a:hover {
background-color: #3b5998;
display: red;
}

.editblogsocial-icons ul li.social-twitter a {
background-position: -254px 1px;
}
.editblogsocial-icons ul li.social-twitter a:hover {
background-color: #00aced;
}

.editblogsocial-icons ul li.social-instagram a {
background-position: 0px 0px;
}
.editblogsocial-icons ul li.social-instagram a:hover {
background-color: #FF1493;
}
.editblogsocial-icons ul li.social-pinterest a {
background-position: -160px 1px;
}
.editblogsocial-icons ul li.social-pinterest a:hover {
background-color: #cb2027;
}
.editblogsocial-icons ul li.social-rss a {
background-position: -190px 0px;
}
.editblogsocial-icons ul li.social-rss a:hover {
background-color: #F87E12;
}
.editblogsocial-icons ul li.social-youtube a {
background-position: -287px 1px;
}
.editblogsocial-icons ul li.social-youtube a:hover {
background-color: #7FFF00;
}
</style>

Untuk mengganti ikon dengan warna hitam silahkan ganti:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiyFwM2RFP-XsDRDL0uL4_4LurLMvMUmh-h3wI1_2FC_cHOruK85Ihkj7PVX2MKC0c4CjIH61Vh8CC6oDyJtJ1S8fey6vp029VKFdRS9dGx61tRuTdd5hqC9W3Aw6HMAr_1XAEEFgCK1H/s1600/sprite_32x32.png

Dengan:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0FDx3IIfd3LvM2GSdI1oUD9ml93vQcmTlpktJFFi_a4boUodPNWWghFLs4eEGMMMVHENVSMvv6pwTtkJWFg9wkT8-t2wU9kncEBHhVxV8nKajrahKr9e_GWtE5zMqj-eA_ZM2C9x73eP/s320/pkh1.png

Untuk menerapkannya ke template template:

SOHO letakan kode pertama di atas: 

<b:template-script async='true' name='fancy' version='1.0.0'/> 

Contempo letakan kode pertama di atas:

<b:template-script async='true' name='indie' version='1.0.0'/>

Notable letakan kodenya di atas:

<b:template-script async='true' name='rockpool' version='1.0.0'/>

 Untuk merobah warna latar footer, silahkan ganti kode warna yang saya sorot (highlight) dengan kode warna css yang Kalian sukai. Cari kode warna di internet.

Save template. 

Harusnya ini bekerja dengan baik,  namun karena saya membuat konten menggunakan hape, kuatir ada kesalahan penulisan maka jika ada error dalam penerapannya tolong di komen! Saya akan menuntun Kalian sampai sukses dalam pemasangannya. 

ikuti terus trik, tips dan bahkan hack template melalui blog ini...