Yeah, Kali ini saya akan membagikan suatu tips blog.Tips ini namanya adalah "Cara Membuat Footer 3 Column di Blog".Footer ini memang saya ambil dari template orang.Namun, Dengan sedikit kerja keras saya sudah edit Footer 3 Column.Oh, ia jika ingin lihat demonya silahkan liat dibawah blog ini (footer).
Tipsnya:
- Masuk ke Blogger
- Lalu Masuk ke menu Edit Template > Edit HTML
- Lalu cari kode ]]></b:skin> atau </style> dan letakan kode dibawah ini tepat diatas kode tadi
/* Footer 3 Column */
#footer-column-divide {
background: #2F71AD; color:#fff; font-size:14px; clear:both;border-top:4px solid #004a7a
}
#footer-column-divide a {
color:#fff;
}
#footer-column-divide a:hover {
color:#333;
}
#footer-column-divide h2, #footer-column-divide h3 {
font-size: 20px;
color: #fff;
text-align: left;
padding: 4px 0px 3px 16px;
margin: -9px -10px 6px -9px;
background: #444;
border-bottom: 3px solid #2785C2;
font-family: BebasNeue;
font-weight: normal;}
.footer-column {
padding: 10px;background: #266996;
}
.footer-column .widget-content {
padding: 10px;
max-height: 100px;
overflow: auto;}
Lalu untuk HTMLnya silahkan ditaruh dibawah kode sidebar ditemplate sobat.
<!-- Footer 3 Column Start -->
<div id='footer-column-divide'>
<div id='footer-left' style='width: 32%; float:left; margin:10px; text-align:left;'>
<b:section class='footer-column' id='column-left' preferred='yes' style='float:left;'>
<b:widget id='HTML2' locked='false' title='Tutorial Blogger' 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 id='footer-center' style='width: 28%; float: left; margin:10px; text-align: left;'>
<b:section class='footer-column' id='column-center' preferred='yes' style='float:left;'>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<b:if cond='data:codeSnippet != ""'>
<h2 class='title'><data:title/></h2>
<b:else/>
<b:if cond='data:totalFollowerCount != ""'>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>
</b:if>
</b:if>
<div class='widget-content'>
<div expr:id='data:widget.instanceId + "-wrapper"'>
<b:if cond='data:codeSnippet != ""'>
<div style='margin-right:2px;'>
<data:codeSnippet/>
</div>
<b:else/>
<b:if cond='data:totalFollowerCount == ""'>
<span class='item-control following-not-admin'>
<b><data:failureSnippet/></b>
</span>
<span class='item-control blog-admin'>
<b><data:adminFailureSnippet/></b>
</span>
<b:else/>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>
<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:stopFollowingMessage/>
</a>
</div>
</b:if>
<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>
<!--
Relies on the js written out in navbar.gxp
-->
<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>
<div class='followers-canvas profile-link'>
<data:followersFooterMessage/>
<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>
<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>
</div>
</b:if>
</b:if>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='footer-right' style='width: 33%; float: right; margin:10px; text-align: left;'>
<b:section class='footer-column' id='column-right' preferred='yes' style='float:right;'>
<b:widget id='HTML1' locked='false' title='Template Blogger' 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:includable>
</b:widget>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<!-- Footer 3 Column End -->
- Simpan Template
Enjoy! Gimana Mudah dimengerti bukan ? Jika belum mengerti silahkan berkomentar dibawah ^_^ .
Sekian dan Terima Kasih. Semoga Bermanfaat. :D