Yeay! Kali ini saya akan mempublikasikan sebuah trik yang di request teman saya lewat Facebook.Hihihi.Sebenarnya Saya bingung memilih nama artikel ini, guwe namakan "Membuat Footer Auto Hide di Blog" aja.Sebelumnya saya telah mempostingkan tentang "Post Bergetar saat di Sorot mouse".trik ini cukup sederhana dan sama dengan trik lainya masukan CSS dan HTML.Oh iya, sebenarnya ini cara pembuatanya di sidebar lalu saya ganti menjaid footer.hehehe.Wah, gimana yah Triknya ?? Simak Trik dibawah ini.
Cara Membuat Footer Auto Hide di Blog
- Login ke Blogger
- Dari Dasboard pergi ke menu Edit Template >> Edit HTML
- Lalu Cari Kode ]]></b:skin>
/* sidebarnya */
#sidebar-slide-main {
width:100%;
display:block;
}
#sidebar1 {
width:47%;
float:left;
padding:5px;
}
#sidebar2 {
width:50%;
float:right;
padding:5px;
}
#sidex1 h2,
#sidex2 h2 {position:relative;margin:0 0 5px}
#sidex1 h2 {
font-size: 17px;
color: #fff;
text-align: left;
padding-left: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#0052BE), to(#0052BE));
line-height: 32px;
font-weight: normal;
}
#sidex2 h2 {
font-size: 17px;
color: #fff;
text-align: left;
padding-left: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#0052BE), to(#0052BE));
line-height: 32px;
font-weight: normal;
}
#sidex2 h2:after {
content:"";
width:0;
height:0;
position:absolute;
top:100%;
left:50%;
border-width:10px;
border-style:solid;
border-color:#0070b0 transparent transparent transparent;
display:none;
}
#sidex1 h2:after {
content:"";
width:0;
height:0;
position:absolute;
top:100%;
left:50%;
border-width:10px;
border-style:solid;
border-color:#0070b0 transparent transparent transparent;
display:none;
}
#sidex1 .widget {
padding:0;
list-style:none;
}
#sidex1 .widget-content {
font: 13px/129% offside;
margin: 5px 0px /* <-- Jarak Antara Widget */ 10px 0px;
background: #fff;
padding: 10px;
border: 2px solid #0052BE;
margin-top: 0px;
}
#sidex1 ul li a:hover {
color:#AD3000;
list-style:none;
}
#sidex2 .widget {
padding:0;
list-style:none;
}
#sidex2 .widget-content {
font: 13px/129% offside;
margin: 5px 0px /* <-- Jarak Antara Widget */ 10px 0px;
background: #fff;
padding: 10px;
border: 2px solid #0052BE;
margin-top: 0px;
}
#sidex2 ul li a:hover {
color:#AD3000;
list-style:none;
}
/* slidenya */
#sidebar-slide {display:block}
#sidebar-slide-content {
background-color:#eee;
height:auto;
overflow:auto;
margin:0;
padding:0;
color:#333;
display:none;
}
.sidebar-slide-button {
position:relative;
cursor:pointer;
text-shadow:1px 1px 2px #000;
padding:7px 15px;
background-color:#0070b0;
color:white;
text-align:center;
}
.sidebar-slide-button:hover {
background-color:green;
color:white;
}
@media only screen and (max-width:490px){
#sidebar1,
#sidebar2 {
width:47%
float:none;
margin:0 auto;
}
}
- Kemudian letakan kode dibawah ini diarea footer kamu
<div id='sidebar-slide-main'>
<div id='sidebar-slide'>
<div id='sidebar-slide-content'>
<div id='sidebar1'>
<b:section id='sidex1'>
<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='sidebar2'>
<b:section id='sidex2'>
<b:widget id='HTML4' locked='false' title='BlogRoll' 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>
<div class='sidebar-slide-button'>
<span class='intext'>Tampilkan Footer</span>
<span class='intext' style='display:none;'>Tutup Footer</span>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.sidebar-slide-button').click(function() {
$('#sidebar-slide-content').slideToggle('slow');
$('.sidebar-slide-button span.intext').toggle();
});
});
//]]>
</script>
</div>
<div id='footer-column-divide'>
<div id='footer-left' style='width: 35%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='column-left' preferred='yes' style='float:left;'/>
</div>
<div id='footer-center' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='column-center' preferred='yes' style='float:left;'/>
</div>
<div id='footer-right' style='width: 35%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='column-right' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
- Simpan Template Sobat
Nah Gimana ?? Bermanfaat bukan ??.Oh, iya hampir kelupaan lagi Original Trik ini adalah "Sidebar Slide Panel".Saya edit-dikit-dikit.
Sekian dan Semoga bermanfaat..
Terimah Kasih
2 komentar
keren sob ane pingin nyoba..
Balasmantab
Silahkan mas.. :D
BalasTerima Kasih Telah Berkunjung Ke Blog yang Sederhana ini.Jika Anda ingin berkomentar mohon jangan Out Of Topic (OOT) dan sebarkan link-link porno dan sara.Sekian, Terimah Kasih.