Skip to content Skip to sidebar Skip to footer

Cara Mengubah Footer Linkmagz Seperti igniplex

 

Cara Mengubah Footer Linkmagz
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

  1. Pertama kamu harus masuk ke laman dashboard blogger, lalu klik Tema > Edit HTML
  2. Klik bagian scriptnya, lalu ketik CTRL+F untuk mencari kata kemudian cari kode ]]></b:skin>  kemudian tempelkan kodenya tepat diatasnya :
  3. /* 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;
    }
    }
  4. Kemudian cari kode dibawah ini :
  5. <footer id="footer-outer">
    ....
    ....
    ....
    </footer>
  6. Blok semua kode tersebut lalu gantikan dengan kode dibawah ini :
  7. 
     <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>
  8. Klik save dan lihat perbedaannya. Edit link sesuai kebutuhan
Nah demikian cara Mengubah footer Linkmagz versi 2.9.0 , Jika ada yang perlu ditanyakan silahkan berikan komentar dibawah ini.

3 comments for "Cara Mengubah Footer Linkmagz Seperti igniplex"

  1. Ini mah harus dipraktekkin pas lagu nyantai. Saya save dulu link-nya ya Kak

    ReplyDelete
  2. nice info ini, nanti saya coba deh..

    ReplyDelete
  3. mantap nih jadi 3 kolom ya, bisa dipasang recent post by widget jg nantinya. thanks

    ReplyDelete

Berlangganan via Email