Cara Mengubah Footer Linkmagz Seperti igniplex

March 17, 2021 5 comments

mengubah footer linkmagz

Cara Mengubah Footer Linkmagz - Template Linkmagz merupakan template premium buatan Mas Sugeng yang sangat saya rekomendasikan buat para sahabat blogger yang ingin mengelola website atau blog yang mobile friendly namun juga responsif. Adanya fitur dark mode dan posisi penempatan iklan di tengah,atas dan bawah juga menjadikan template ini diminati para blogger karena tampilannya yang simpel dan mudah dimodifikasi tanpa mengubah kode css pada template ini.

Sesuai dengan judul pembahasan kita pada kesempatan kali ini,saya akan membagikan cara mengubah atau memodifikasi footer pada template Linkmagz. Untuk template Linkmagz yang saya gunakan untuk dimodifikasi adalah versi 2.9.0 dan untuk mendapatkannya kamu bisa memesan melalui website resmi milik mas sugeng. Kemudian untuk footer yang ingin saya redesingn saya menggunakan footer igniplex.

Desain footer template igniplex yang menarik membuat saya ingin menggabungkan template Linkmagz + footer Igniplex maka jadilah Template Linkmagz oplosan atau bisa dibilang Linkmagz redesign kecil-kecilan,hehe. Dan hasilnya pun sesuai dengan saya perkirakan.Oke tanpa menunggu waktu lama langsung saja saya bagikan cara mengubah footer Linkmagz menjadi igniplex.

Mengubah Footer Linkmagz

Pertama kamu harus masuk ke laman dashboard blogger, lalu klik Tema > Edit HTML
Klik bagian scriptnya, lalu ketik CTRL+F untuk mencari kata kemudian cari kode ]]></b:skin> kemudian tempelkan kodenya tepat diatasnya :

/* igniplex footer */
#igniplexFooter{
background-color: #263238;
background: #263238 url(https://3.bp.blogspot.com/-jlcKIZCfrDQ/WtzDK-6gopI/AAAAAAAABbM/G_i_u9ObEzUORoYivnCX0RJ-j3_AY3aNwCLcBGAs/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;
}
}

Kemudian cari kode dibawah ini :


  <footer id="footer-outer">
....
....
....
</footer>

Blok semua kode tersebut lalu gantikan dengan kode dibawah 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 tentang tutorial android maupun komputer. [Note : kalian bisa mengubah link-link footer ini di menu tata letak]</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://www.santosolusi.my.id/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://www.santosolusi.my.id/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://www.santosolusi.my.id/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://www.santosolusi.my.id/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.santosolusi.my.id/'><data:blog.title/></a>
</div>
</div>
</footer>

Klik save dan lihat perbedaannya. Edit link sesuai kebutuhan

DEMO

Nah demikian cara Mengubah footer Linkmagz versi 2.9.0 , Jika ada yang perlu ditanyakan silahkan berikan komentar dibawah ini.

5 comments for "Cara Mengubah Footer Linkmagz Seperti igniplex"

ceritaoryza.comMarch 22, 2021 at 9:26 PM
Ini mah harus dipraktekkin pas lagu nyantai. Saya save dulu link-nya ya Kak
RahmatullahMarch 26, 2021 at 9:16 PM
nice info ini, nanti saya coba deh..
CatatanDroidMarch 28, 2021 at 12:51 AM
mantap nih jadi 3 kolom ya, bisa dipasang recent post by widget jg nantinya. thanks
AbizarIDJanuary 11, 2023 at 7:48 AM
Tanks ilmunya bang
Various RecipesJanuary 15, 2023 at 7:50 PM
Makasih tutorialnya mas

yuk saling berbagi di kolom komentar