Cara Membuat Footer Widget Tiga Kolom Responsive di Blog. Demonya di blog CB Theme ini. Lihat bagian bawah, ada tampilan kayak gini:
Fungsi footer di blog antara lain:
- Pembatas content area
- Untuk menampilkan elemen penting blog, seperti profil, label, dan subscribe form.
- Menampilkan menu lainnya.
Cara Membuat Footer Widget Tiga Kolom Responsive di Blog
1. Klik Tema > Edit HTML2. Copas kode CSS berikut ini di atas kode ]]></b:skin>
#lower{margin:0 auto;padding:0;width:100%;background:#fff}
#lowerbar-wrapper #fawesomeicons a {color: #191919;}
#fawesomeicons {text-align:left;margin:10px 0}
#fawesomeicons a {background:transparent;color:#fff;display:inline-block;font-size:18px;width:30px;height:35px;line-height:35px;margin:0;}
#fawesomeicons a:hover{color:#ff6}
#lower-wrapper{margin:0 auto;padding:10px 0;max-width:900px;border-top: 2px solid #eee;}
#lowerbar-wrapper{float:left;margin:0 auto;padding-bottom:15px;width:32%;text-align:left;color:#666;font:bold 12px Arial,Tahoma,Verdana;line-height:1.4em;word-wrap:break-word;overflow:hidden;margin-right:10px}
#lowerbar-wrapper:last-child {margin:0;padding-right:0}
.lowerbar{margin:0;padding:0}
.lowerbar .widget{margin:0;padding:10px 20px 0 0}
.lowerbar .widget:last-child {margin:0;padding:10px 0 0 0}
.lowerbar h2{font:normal 300 16px Oswald,Arial,sans-serif;margin:10px 0;padding:7px 0;text-transform:uppercase;position:relative;color:#333}
.lowerbar ul{color:#666;margin:0 auto;padding:0;list-style-type:none}
.lowerbar li{display:block;color:#666;line-height:1.4em;margin-left:0!important;padding:7px 0;border-bottom:1px solid #222;list-style-type:none;text-align:left}
.lowerbar li:last-child{border-bottom:none}
.lowerbar li a{text-decoration:none;color:#666}
.lowerbar li a:hover{text-decoration:underline}
.lowerbar li:hover{display:block;background:#222}
@media screen and (max-width:800px) {
#lowerbar-wrapper {width:26%;margin: 0 20px 0}
}
@media screen and (max-width:600px) {
#lower,#lower-wrapper{overflow:hidden;width:100%}
#lowerbar-wrapper {overflow: hidden;width: 100%;padding: 10px;margin: 0 auto;}
}
3. Copas kode layout berikut ini di atas kode ]]></b:template-skin>
body#layout #lowerbar-wrapper {float: left;margin: 0;padding: 0}
body#layout #lowerbar1,body#layout #lowerbar2,body#layout #lowerbar3 {float: left}
4. Kode berikut ini harus di edit. Simpan dulu di bawah kode <footer>
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<b:widget id='Image1' locked='false' title='About' type='Image' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio7wfj1ceOCpkVTT1pQp0kIKRczbFSlFQ88Inx2MonRRR7l7YXs2SFNBFBt7IsjG_YYtRyIuOLl23mJlvbpHEcsASePliwQ6ZL3LhXaV_A5M49hACGhCf7-6IYCd_w2n1S2ue1BlB3UjU/s1600/testemplates.png</b:widget-setting>
<b:widget-setting name='displayHeight'>50</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>310</b:widget-setting>
<b:widget-setting name='link'>/p/about.html</b:widget-setting>
<b:widget-setting name='caption'>Blog berisi catatan tentang apa saja khususnya blogging. Sekadar berbagi informasi, pengalaman, atau pengetahuan.</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:tag cond='data:link' expr:href='data:link' name='a'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:tag>
<br/>
<b:if cond='data:caption'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML4' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><div id="fawesomeicons">
<a href="https://facebook.com/cbblogger" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/contohblogcb" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a>
<a href="https://instagram.com/" rel="nofollow" target="_blank" title="Instagram"><i class="fa fa-instagram"/></i></a>
<a href="https://feedburner.google.com/fb/a/mailverify?uri=contohblognih" rel="nofollow" target="_blank" title="RSS"><i class="fa fa-rss"></i></a>
<a href="https://www.youtube.com/c/CBBlogger" rel="nofollow" target="_blank" title="Youtube"><i class="fa fa-youtube"></i></a>
<a href="https://www.pinterest.com/cbblogger" rel="nofollow" target="_blank" title="Pinterest"><i class="fa fa-pinterest"></i></a>
<a href="https://www.linkedin.com/in/cbblogger" rel="nofollow" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a>
</div></b:widget-setting>
</b:widget-settings>
<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:includable>
</b:widget>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>CLOUD</b:widget-setting>
<b:widget-setting name='selectedLabelsList'>Blogging,Desain Blog,Foto,Google Adsense,Hiburan,Internet,Komputer,News,Sport,Template Blog,Tips,Video</b:widget-setting>
<b:widget-setting name='showType'>USER_SELECTED</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>
<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>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail' version='1'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='"window.open(\"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"' method='post' target='popupwindow'>
<table width='100%'>
<tr>
<td>
<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
</td>
<td width='64px'>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
</td>
</tr>
</table>
<input expr:value='data:feedPath' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div style='clear: both;'/>
</div>
</div>
5. Save! Simpan template.
Demikian Cara Membuat Footer Widget Tiga Kolom Responsive di Blog.
Masih ada satu desain lagi.
Cara Membuat Widget Footer 3 Kolom Responsive Blogger.
HANYA ada dua kelompok kode, yakni CSS dan HTML, untuk membuat Widget Footer 3 Kolom Responsive di Blogger.
1. Tema > Edit HTML
2. Tambahkan CSS berikut ini tepat di atas kode ]]></b:skin> atau </style>
#footer-wrapper{background:#242424;overflow:hidden;margin:0 auto;padding:20px 15px 0;color:#dddddd;} #footer-wrapper .left{float:left;width:34%} #footer-wrapper .center{float:left;width:34%} #footer-wrapper .right{float:right;width:32%} #footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both} #footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
@media screen and (max-width:768px){ #footer-wrapper .left{float:none;width:100%} #footer-wrapper .center{float:none;width:100%} #footer-wrapper .right{float:none;width:100%} #footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both} }
3. Copas kode HTML widget footer berikut ini di atas <div class='footer> atau <div clas='credit'>
<div id='footer-wrapper'>
<b:section class='left' id='left' preferred='yes'/>
<b:section class='center' id='center' preferred='yes'/>
<b:section class='right' id='right' preferred='yes'/>
</div><div class='clear'/>
Save!
CARA & DESAIN WIDGET FOOTER LAINNYA:
1. Blogger >> Tema >> Edit HTML >>
2. Simpan (Copas) kode di bawah ini di atas kode ]]></b:skin>
#footer-widgets {
padding: 20px 0 0 0;
}
.footer-widget-box {
width: 300px;
float: left;
margin-left: 15px;
}
.footer-widget-box-last {
}
#footer-widgets .widget-container {
color: #374142;
}
#footer-widgets h2 {
font-family: inherit;
text-shadow: none;
font-size: 16px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
border-bottom: 4px solid #444444;
padding-bottom: 10px;
}
#footer-widgets .widget ul {
list-style-type: none;
list-style: none;
margin: 0px;
padding: 0px;
}
#footer-widgets .widget ul li {
padding: 0 0 9px 0;
margin: 0 0 8px 0;
}
#footer-widgets-containerback {
width: 980px;
margin: auto;
}
#footer-widgets-container {
background: #484848;
border-top: 10px solid #66b381;
}
.footersec {
color: #A1A6AF;
font-size: 13px;
line-height: 18px;
}
.footersec .widget {
margin-bottom: 20px;
}
#footer-widgets-container { background: #484848; border-top: 10px solid #66b381; float: left; width: 100%; }
.footersec ul {
}
.footersec ul li {
}
3. Copy+Paste kode di bawah ini di atas kode </body>
<div id='footer-widgets-container'>
<div id='footer-widgets-containerback'>
<div class='clearfix' id='footer-widgets'>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec1' showaddelement='yes'>
<b:widget id='HTML15' locked='false' title='' 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>
</li>
</ul>
</div>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec2' showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='Gallery' 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>
</li>
</ul>
</div>
<div class='footer-widget-box footer-widget-box-last'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec3' showaddelement='yes'>
<b:widget id='HTML13' locked='false' title='About' 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>
</li>
</ul>
</div>
</div>
</div></div>
<div style='clear:both;'/>
4. Save!
Itu dia Cara Menambah Footer Widget 3 Kolom di Blogger.*
No comments:
Post a Comment