Widget HTML #1

Merubah Footer Template Linkmagz Mas Sugeng

LinkMagz

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;
}
}

3. Sama seperti langkah pertama, kali ini cari kode yang bertuliskan

<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 != &quot;&quot;'>
    <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'>&lt;ul&gt;
&lt;li&gt;&lt;svg viewbox=&#39;0 0 24 24&#39;&gt;
&lt;path d=&#39;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&#39;&gt;&lt;/path&gt;
&lt;/svg&gt;&lt;a href=&#39;https://netcomtek.blogspot.com/p/about-me.html&#39;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;svg viewbox=&#39;0 0 24 24&#39;&gt;
&lt;path d=&#39;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&#39;&gt;&lt;/path&gt;
&lt;/svg&gt;&lt;a href=&#39;https://netcomtek.blogspot.com/p/contact.html&#39;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;svg viewbox=&#39;0 0 24 24&#39;&gt;
&lt;path d=&#39;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&#39;&gt;&lt;/path&gt;
&lt;/svg&gt;&lt;a href=&#39;https://netcomtek.blogspot.com/p/privacy-policy.html&#39;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;svg viewbox=&#39;0 0 24 24&#39;&gt;
&lt;path d=&#39;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&#39;&gt;&lt;/path&gt;
&lt;/svg&gt;&lt;a href=&#39;https://netcomtek.blogspot.com/p/disclaimer.html&#39;&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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'>&lt;ul&gt;
&lt;li&gt;&lt;svg viewbox=&#39;0 0 24 24&#39;&gt;
&lt;path fill=&quot;currentColor&quot; d=&quot;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&quot; /&gt;&lt;/path&gt;&lt;/svg&gt;&lt;a href=&#39;#&#39;&gt;Off Topik&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;svg viewbox=&#39;0 0 24 24&#39;&gt;
&lt;path fill=&quot;currentColor&quot; d=&quot;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&quot; /&gt;&lt;/path&gt;&lt;/svg&gt;&lt;a href=&#39;#&#39;&gt;Redesign&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;svg viewbox=&#39;0 0 24 24&#39;&gt;
 &lt;path fill=&quot;currentColor&quot; d=&quot;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&quot; /&gt;
&lt;/path&gt;&lt;/svg&gt;&lt;a href=&#39;#&#39;&gt;Traffic&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;svg viewbox=&#39;0 0 24 24&#39;&gt;
&lt;path fill=&quot;currentColor&quot; d=&quot;M3,5V19H22V5H3M5,7H20V11H5V7M5,17V13H9V17H5M11,17V13H20V17H11Z&quot; /&gt;
&lt;/path&gt;&lt;/svg&gt;&lt;a href=&#39;#&#39;&gt;Info Iklan&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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 &#169; 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.

Footer Redesign

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"

  1. Comment Author Avatar
    gan mau tanya cara buat footer seperti di blog ente gimana ya? soalnya punya gw vertikal bentuknya bantu jawah
  2. Comment Author Avatar
    Baru tau kalau ada yang nanya, jika penempatan script benar pada posisinya seharusnya tidak ada masalah, mungkin vertical yang saya tangkap footernya berbaris ke bawah ya. Sebaiknya sebelum dipakai script htmlnya di backup dulu jadi kalau gak sesuai bisa dikembalikan dulu. Script di langkah no 2 sebenarnya hanya css nya saja, langkah no 3 menghapus script footer yang ada, langkah no 4 adalah script footer pengganti, pastikan tag awal hingga tag penutup footernya.
  3. Comment Author Avatar
    Kalo ganti warna caranya gimana gan? Blog agan bisa biru, orange. Tdk warna ori linkmagz caranya gimana?
    1. Comment Author Avatar
      Dari dashboard blogger, masuk ke menu theme atau tema kemudian masuk customize, kemudian cari menu gadgets sebelah kiri, didalamnya banyak menu untuk merubah tampilan halaman dan warna...
  4. Comment Author Avatar
    Cara merubah icon nya gimana kak? mohon bantuannya
    1. Comment Author Avatar
      Silahkan ganti file SVG pada skrip dengan layanan icon dari https://materialdesignicons.com/
  5. Comment Author Avatar

- Silahkan berkomentar yang baik ...