Cara Simpel Membuat Footer Widget Full Width

Cara Simpel Membuat Footer Widget Full Width

Blogger, Tips and Trik, Tutorial SEO 1 Komentar

Gambar Hanya Pemanis :D





Hallo sobat balik lagi di TenyomErectus, 
malam  ini mimin di  akan membuat Tutorial Baru nih :3
Tutorial cukup Simple dan mudah kok :3 
Kalau gk Work , coba ulangin lagi deh ^^

DEMO
Lihat Bagian Bawah Blog ini
Langsung saja ikuti caranya dibawahnya ~
Pertama , Silahkan Masukkan Kode CSS dibawah ini diatas </style> / </b:skin> 
 /*==== FOOTER MOE ====*/
#footer-wrapper {width: 100%;text-align: left;border-top: 2px solid #112121;overflow: hidden;background: #333;margin: -20px 0px 0px 0px;padding: 15px 0 0 0;}
#footer-widgetfix .footer-widget {width:30%;float:left;margin-left:30px;padding-top:10px;padding-bottom:15px;}
#footer-widgetfix {max-width:1140px;overflow:hidden;margin: 0 auto;}
#footer-wrapper h2 {font-family: "Open Sans";font-size: 14px;font-weight: 600;color: #888;padding: 5px 0;text-transform: uppercase;border-bottom: 1px solid #888;margin-top: -10px;}
#footer-wrapper .widget-content {text-align: left;font-family: 'Exo 2', Open sans, sans-serif;margin: 0 0 15px;color: #888;}
#footer-wrapper a {color: #DDD;font-weight: 700;font-family: "Open Sans";}#footer-wrapper a:hover{color:#dce1e2;text-decoration:underline;}
#footer-wrapper .widget-content li {margin-left:-14px;color:#888}
#footer-wrapper .widget li {margin:5px 0 0 0;padding:5px 0 0 0;display:block;}
.footer li a {font-size: 12px;font-weight: 400;font-family: 'Exo 2', Open sans, sans-serif;color: #eee;margin: 0;}
.footer li a:hover {color: #eee;text-decoration:underline;}
#footerfix {overflow:hidden;background:#111;padding:10px 5px;margin:15px 0 0 0;}
.cpleft {float:left;margin:10px;color:#888;font-size:11px;font-family:'Exo 2', Open sans, sans-serif;font-weight:400;}
#cpright {float:right;margin:10px;color:#888;font-size:11px;font-family:'Exo 2', Open sans, sans-serif;font-weight:400;}
.cpleft a,#cpright a {color:#dce1e2;text-decoration:none;}
.cpleft a:hover,#cpright a:hover {color:#ffa812;text-decoration:none;}
.footer-bottom {min-height:40px;}
#footx1,#footx2,#footx3 {margin:0 .2%}
.footer {font-weight:400;padding-bottom:.2em;}
.footer-bottom .recpost li{overflow:hidden;border-bottom:1px solid #333;padding:10px 0}
.footer-bottom .recpost li:first-child{padding-top:0}
.footer-bottom .recpost li:last-child{border-bottom:none}
.footer-bottom .recpost .arl-tmb{display:block;width:60px;height:60px;}
.footer-bottom .recpost .rcp-title{font-family:'Exo 2', Open sans, sans-serif;font-size:15px;font-weight:400;margin:5px 0 8px}
.footer-bottom .recpost .rcp-title a{color:#bbb;font-weight:700;font-size:14px}
.footer-bottom .recpost .rcp-title a:hover{color:#ffa812;text-decoration:none}
#footer-wrapper .label-size {color: #fff;display: block;float: left;font-size: 11px;transition: all .3s ease-out;}
#footer-wrapper .label-size a {display: inline-block;padding: 2px 3px;font-weight: 400;transition: all .3s ease-out;}
#footer-wrapper .label-size a:hover {color:#fff;}
#footer-wrapper .label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#fff;transition:all .3s ease-out;}
#footer-wrapper .label-size a:hover:before {content:"\f061";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#4791d2;}
#footer-wrapper .label-size:hover, #footer-wrapper-inner .label-size:hover{background:#111;color:#fff;border-color:#444;}
#footer-wrapper .label-count {white-space:nowrap;padding:3px;
background:#222;color:#fff!important;transition:all .3s ease-out;}
.pelangi {height: 6px;margin:20px 0px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrpz1zE2IPQSwVX0GvA1IQT1Oaf34K6qRdYFORSbS1IJFJ26bvIwZiNUiBnCe2xll9JaO0dUDam13Z54GzTZkOPM7umOlWgynftoloMcmFpl-qXasOKY4G97XORirE3a7WK8AI0pywh3zA/s1600/rainbow.png) repeat-x;}
.copyright3 {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Pn-n4T0jzkC8IBgDWWFKwIRP1eMlcckdqyjc9n7LYhvMG8buaVwu2_sZAXzUabbjNy048qmatD8urqoLj9jmMIbeMa1y2wUUL6Pxx1jxAakxvr3YDDp2s8nyF_z_WVxX4LMSvIDMaTY/s1600/Footer.png") #222 5px;color: #fff;height: 20px;padding: 25px 0px;text-align: center;font-family: "Open Sans",sans-serif;font-size: 13px;}


Sesudah diletakkan Kode CSSnya, Lalu letakkan HTMLnya
Tepat diatas HTML Credit anda, ( Kalau anda Memakai Template saya Maka Cari Kode <!-- END OUTER --> )

**Rekomendasi Dowload template : ImoeChanzs 
                                                              Tenyom Erectus  
   

 <!-- FOOTER WRAPPER -->
<div class='pelangi'/>
<footer id='footer-wrapper'>
<div class='footer-bottom'>
<div id='footer-widgetfix'>
<div class='footer-widget' id='footx1'>
<b:section class='footer' id='footer1'>
  <b:widget id='HTML5' locked='false' title='Fanpages' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><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='footer-widget' id='footx2'>
<b:section class='footer' id='footer2'>
  <b:widget id='Label2' locked='false' title='Categories Cloud' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
        <b:loop values='data:labels' var='label'>
          <li>
            <b:if cond='data:blog.url == data:label.url'>
              <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
            <b:else/>
              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </li>
        </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>
</b:section>
</div>
<div class='footer-widget' id='footx3'>
<b:section class='footer' id='footer3'>
  <b:widget id='Label4' locked='false' title='Categories List' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
        <b:loop values='data:labels' var='label'>
          <li>
            <b:if cond='data:blog.url == data:label.url'>
              <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
            <b:else/>
              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </li>
        </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>
</b:section>
</div>
</div>
</div>
</footer>


Lalu Save Template anda :)
Dan Lihat Hasilnya :)
Jika ada masalah silahkan Komentar dibawahnya :)
Jangan Lupa Tinggalkan Komentarnya yah ! xD
Dan Jangan Lupa Like Fanpages kami dan Share Post ini ! :D
Related post disini

1 komentar:

Hilal Pay mengatakan...

kalau aku buatnya pake html aja g pake blogspot jadinya seperti di https://hilal.id

11 Agustus 2019 pukul 15.09

Posting Komentar