Cara Membuat Footer Widget Full Width
Konichiwa Minna-san !! ^^ , Siang ini mimin 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
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/AVvXsEhSgNrjJFpuIM5ZrrmTa1y3C2iR-zzeGeJ7VsDAx4ahCxxeTCFYIROEGhnADUbljI4LDmmtHlKmtbJVyWGT74KCmJPURa_sFCvGrmjGYDh9_IqIg5mRCbyoZGlUBPeNCb_7D4sMLPUbzmf6/s1600/rainbow.png) repeat-x;}
.copyright3 {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl1UYiQA371OkHSpEHDWtIF8D5WbGHIAryIIcKP93e4w-M9ST1_SN_U1Vg3u93MWKm64cuJg79g6o2eRk4N9rln9iiqD3m0OecuR34M6HPh2dOVuAzDdX9dfkrLiTTxzqAV3pmrRGVdp8/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 --> )
<!-- 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 != ""'>
<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 != ""'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<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='"label-size label-size-" + 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 != ""'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<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='"label-size label-size-" + 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
No comments