Merubah Footer Template Linkmagz Mas Sugeng
Kebetulan saya lagi menyiapkan blog baru untuk sarana pemberian materi siswa, maka otomatis perlu cari-cari template apa kira-kira yang cocok saya pakai.
Setelah bongkar pasang beberapa template, akhirnya saya kembali gunakan template yang saya beli dari mas sugeng yaitu LinkMagz seperti yang digunakan pada blog ini.
Hanya saja kali ini sedikit saya modifikasi, dengan mengganti footer dari template campur-campur dari internet. Kebetulan saya punya koleksi download template Viomagz lama yang dioplos dengan Igniplex dan saya menyukai bagian footernya.
Maka kemudian saya cobakan adopsi footernya tersebut ke template LinkMagz versi 2.6 ini. Hasilnya tampil baik persis seperti yang saya inginkan. Jadilah punya template yang sedikit berbeda untuk blog saya yang baru, ya katakan saja seperti di blog-blog lainnya, template yang baru ini saya istilahkan dengan LinkMagz redesign footer.
Nah supaya nggak lupa saya buatkan catatan disini, siapa tau yang sudah punya template LinkMagz dari mas sugeng ini bisa mencoba hal serupa.
Footer 3 Kolom Untuk Template LinkMagz
1. Seperti biasa untuk melakukan perubahan template kamu bisa masuk ke Dashboard Blogger kemudian edit template.
2. Klik di bagian script template, kemudian tekan tombol Ctrl+F untuk masuk mode pencarian kata, cari kode berikut ]]></b:skin> selanjutnya sisipkan script atau kode berikut ini tepat diatasnya :
/* igniplex footer */
#igniplexFooter{
background-color: #263238;
background: #263238 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp84nDauFX56Gd8O9_f4G2ludDwTVi2r9I_l9YipMXuJ4OWv6UR25Bw01hRbGZ-TPCSVM5VIyzqQT5IKht1qXSEnevzBQft6CVSYeoQPXj7w_qLKr2g_5CDIY-PO3LlMsUOnXlBv7KcXDo/s320/footer-arik.png);
color:#ffffff;
margin-top:20px;
}
#igniplexFooter a{
color:#fff;
}
#igniplexFooter a:hover{
color:#fff;
}
#igniplexFooter .title{
background-color:transparent;
background-size:20px;
color:#fff;
margin-bottom:15px;
border-bottom:1px dashed rgba(255,255,255,.35);
padding-bottom:10px;
font-size: 15px;
}
#igniplexFooter .footer-inner{
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
align-items:flex-start;
justify-content:space-between;
max-width:calc(1130px + 60px);
margin:auto;
}
#igniplexFooter .footer-inner .section{
width:100%;
}
#igniplexFooter .footer-inner .section .widget{
margin:20px;
}
#igniplexFooter .footer-inner .section .widget:not(:first-child){
margin-top:40px;
}
#footer .widget .widget-content{
padding:10px;
}
#igniplexFooter .widget .title svg path{
fill:#ffeb3b;
}
#igniplexFooter .attribution{
font-size:.85rem;
display:block;
padding:15px 30px;
margin:auto;
border-top:1px solid rgba(0,0,0,.25);
background:#263238;
}
#igniplexFooter .attribution .left{
display:inline-block;
}
#igniplexFooter .attribution .right{
float:right;
}
.widget .title svg{
width:14px;
height:14px;
margin-right:3px;
}
#igniplexFooter li {
list-style: none;
}
#igniplexFooter li svg {
width: 17px;
height: 17px;
margin-right: 7px;
fill: #fff;
}
#igniplexFooter ul {
margin: 0;
}
@media screen and (max-width: 640px) {
#igniplexFooter .footer-inner {
display: block;
padding: 1px;
}
}
<footer id="footer-outer">
....
....
....
</footer>
Kamu blok semua kode footer dari atas sampai bawah kemudian hapus dan ganti dengan kode berikut ini:<footer id='igniplexFooter'>
<div class='footer-inner'>
<b:section class='footerLeft' id='footerLeft'>
<b:widget id='HTML7' locked='false' title='Tentang Situs' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>Blog ini adalah sarana pemberian materi dan modul bagi siswa-siswi khususnya Teknik Komputer Jaringan SMK Putra Bangsa Bontang untuk mempermudah ataupun menambah wawasan teknis. Isi didapat dari berbagai sumber dan telah melalui modifikasi penambahan dan pengurangan sesuai kebutuhan.</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><svg viewBox='0 0 24 24'><path d='M3,3H11V7.34L16.66,1.69L22.31,7.34L16.66,13H21V21H13V13H16.66L11,7.34V11H3V3M3,13H11V21H3V13Z'/></svg> <data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<b:section class='footerMiddle' id='footerMiddle'>
<b:widget id='HTML8' locked='false' title='Navigasi' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><ul>
<li><svg viewbox='0 0 24 24'>
<path d='M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z'></path>
</svg><a href='https://netcomtek.blogspot.com/p/about-me.html'>About</a></li>
<li><svg viewbox='0 0 24 24'>
<path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'></path>
</svg><a href='https://netcomtek.blogspot.com/p/contact.html'>Contact</a></li>
<li><svg viewbox='0 0 24 24'>
<path d='M12,1A5,5 0 0,0 7,6V8H6A2,2 0 0,0 4,10V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V10A2,2 0 0,0 18,8H17V6A5,5 0 0,0 12,1M12,2.9C13.71,2.9 15.1,4.29 15.1,6V8H8.9V6C8.9,4.29 10.29,2.9 12,2.9M11,11H13V15H11V11M11,17H13V19H11V17Z'></path>
</svg><a href='https://netcomtek.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
<li><svg viewbox='0 0 24 24'>
<path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z'></path>
</svg><a href='https://netcomtek.blogspot.com/p/disclaimer.html'>Disclaimer</a></li>
</ul></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><svg viewBox='0 0 24 24'><path d='M3,3H11V7.34L16.66,1.69L22.31,7.34L16.66,13H21V21H13V13H16.66L11,7.34V11H3V3M3,13H11V21H3V13Z'/></svg> <data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<b:section class='footerRight' id='footerRight'>
<b:widget id='HTML5' locked='false' title='Menu Site' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><ul>
<li><svg viewbox='0 0 24 24'>
<path fill="currentColor" d="M19,10C19,11.38 16.88,12.5 15.5,12.5C14.12,12.5 12.75,11.38 12.75,10H11.25C11.25,11.38 9.88,12.5 8.5,12.5C7.12,12.5 5,11.38 5,10H4.25C4.09,10.64 4,11.31 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12C20,11.31 19.91,10.64 19.75,10H19M12,4C9.04,4 6.45,5.61 5.07,8H18.93C17.55,5.61 14.96,4 12,4M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" /></path></svg><a href='#'>Off Topik</a></li>
<li><svg viewbox='0 0 24 24'>
<path fill="currentColor" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z" /></path></svg><a href='#'>Redesign</a></li>
<li><svg viewbox='0 0 24 24'>
<path fill="currentColor" d="M17.45,15.18L22,7.31V19L22,21H2V3H4V15.54L9.5,6L16,9.78L20.24,2.45L21.97,3.45L16.74,12.5L10.23,8.75L4.31,19H6.57L10.96,11.44L17.45,15.18Z" />
</path></svg><a href='#'>Traffic</a></li>
<li><svg viewbox='0 0 24 24'>
<path fill="currentColor" d="M3,5V19H22V5H3M5,7H20V11H5V7M5,17V13H9V17H5M11,17V13H20V17H11Z" />
</path></svg><a href='#'>Info Iklan</a></li>
</ul></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><svg viewBox='0 0 24 24'><path d='M3,3H11V7.34L16.66,1.69L22.31,7.34L16.66,13H21V21H13V13H16.66L11,7.34V11H3V3M3,13H11V21H3V13Z'/></svg> <data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='attribution'>
<div class='left'>
Copyright © 2020
</div>
<div class='right'>
<a href='https://www.netcomtek.blogspot.com/'><data:blog.title/></a>
</div>
</div>
</footer>
4. Simpan template dan lihatlah hasilnya, setelah itu silahkan edit sesuaikan beberapa link menu yang ada pada footer.Jika tidak ada kesalahan maka tampilannya akan nampak seperti gambar dibawah ini.
Nah demikian ya, sajian redesign footer untuk template LinkMagz versi 2.6 dari mas sugeng. Dengan ini kamu yang sudah punya template ini bisa memiliki nuansa baru untuk digunakan pada laman lainnya.
Kalau masih penasaran ingin lihat hasilnya, kamu bisa mengunjungi blog saya tersebut di netcomtek.blogspot.com
Sementara bagi kamu yang belum punya template LinkMagz bisa membaca ulasan saya di artikel Template LinkMagz Mas Sugeng tentang mengapa saya memilih template ini dibandingkan dengan template lainnya.
Update :
Sudah saya terapkan pada template Linkmagz versi 3.1, jika ada persamaan ID HTML saat template disimpan, silahkan sesuaikan dengan ID yang baru. (yang saya kasih background kuning).
8 comments for "Merubah Footer Template Linkmagz Mas Sugeng"
- Silahkan berkomentar yang baik ...