Cara Membuat Sliding Panel Buka tutup Untuk Blogger

adscblog

Banyak sekali para blogger merias Template blog yang mereka punya,dengan berbagai gaya mereka terapkan agar dapat menarik perhatian Para pengunjung blog,dengan berbagai Trik dan juga gaya mereka terapkan guna untuk membuat para pengunjung betah di blog mereka

Salah satu nya dengan menerapkan Sliding Buka tutup di blog mereka,buka titip ini banyak di gunakan oleh para blogger baik itu di Blockquote atau bahkan di bagian Footer mereka terapkan sliding buka tutup ini,mungkin anda juga pernah melihat sliding buka tutup ini di bagian Footer suatu template

Akan tetapi untuk sliding buka tutup ini tidak banyak para blogger menerapkan nya di template mereka karena dengan berbagai alasan,tetapi bagi sebagian Blogger sliding buka tutup ini malah di manfaat kan untuk menarik perhatian para pengunjung blog nya tersebut

Dengan berbagi Variasi sliding ini di buat nya para blogger,seperti salah satu sliding yang sedang saya bahas di artikel ini,yaitu sliding buka tutup di bagian atas Header template,dan di sliding panel ini di selipkan beberapa Variasi seperti Photo Author,Categori,Search,Subcribe ataupun Social Media seperti Google,Facebook,twitter dan RSS Feed

Tutorial Pemasangan Sliding Panel Buka tutup di blog

Juga di bagian Categori ini dapat anda sisipkan sekitar 14 Categori blog anda sehingga tampilan nya menarik dan juga mempermudah para pengunjung untuk menelusuri isi blog anda,biasa nya anda melihat Categori ini di bagian Widget atau sidebar blog,tetapi dengan Sliding Panel buka tutup ini anda dapa menghapus Categori di bagian Sidebar blog dan menempatkan nya di sliding panel buka tutup ini Sehingga tampilan nya lebih menarik

Jika anda tertarik dengan sliding Panel buka tutup yang di tempatkan di bagian Header ini,anda dapat mengikuti langkah-langkah pemasangan sliding ini di antara nya

Seperti biasa masuk ke bagian Blogger dengan Email dan Juga Pasword
Setelah itu silahkan anda klik template yang berada di bagian kiri blogger
Kemudian silahkan anda klik lagi edit html
Setelah anda berada di peng editan Html silahkan anda cari kode </head> untuk mempermudah pencarian silahkan anda tekan tombol CTRL+F secara bersamaan,setelah itu silahkan letakan kode berikut sebelum kode tersebut

<script>$(document).ready(function() {
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});
});
</script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>

Setelah itu silahkan anda cari kode </b:skin> kemudian silahkan anda letakan kode berikut sebelum kode tersebut

.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPt0zVQ-ayelM49-tTpLWSlXFuAOxNV9_MVOraRvBLe-Z5CXNYrhmAU3Eqd2sRDXwRktEVjw3SCE7t_f4riEmFAPmG31lUKSlnMrllo_s2huf5Kghc-FcI6NsaNkUTJRaE6eGMtoPtyAwE/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRM-kIgr6xkI-c6UdkL7gMdwSrWy3Rgz59kdHIpDkZG6uCsKUMscsoVKHVbDJ8Th6RUozc3SjlfS7uswqoMfTxuaxpEtk2EhSSTt5LYX54j4eDhwbUS9v9WozUFQW6eVzzqkdBrnL8yK8x/s1600/sliding-panel-tab-left.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJmpsqA1ASZE2IF2TFIuqcxmBIlj4KHwV-EdeX_aDJ0LxO6PT9c7TCZThsxQiybnDQX2yewtV7URfazG7YLskGGME23L6ZLfi9-U6HbmyzDfwDtoYJQl9yF-yFOFe0iD5biG5G2x9fFFDx/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji9ez2eN01MkClOb3eT7-S8zIQZxGk0b21A7zDFFl8zK9XZVav4TRSf_8GtHOrDvPXvteUuibQKs1Ysyrlw5aHwu8OHx2kO_J-fjiADNLsyvWganAgBHQh1FNhP5nJKECEclkHIdIVLJCM/s1600/sliding-panel-tab.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkv6yeocFwzWanFzrGXgOq6-zM22wEVIh2nxLVetzg1LamZWls1lux0bbU5buKkkm7sRaI3K17EJlRM2wKCiCcyJuXGzmpR_0RgBI9cUMaYRPcrxwDiDYfPSKCLmE1MwTMq40NwNO4PLhO/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcS036iUX0qCABh8heoy-2UMiU2QPyRDf9h9KB8l54NGGwz5MYU3DIB0ISSEcH_wAplt6nf0LLM5g0HEhzq2XvrC3Cbd4S4jD_pdXpEeWpccoLYRbFX58DFJ_dgMStU_Wrrg1Gs47rhgR7/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkv6yeocFwzWanFzrGXgOq6-zM22wEVIh2nxLVetzg1LamZWls1lux0bbU5buKkkm7sRaI3K17EJlRM2wKCiCcyJuXGzmpR_0RgBI9cUMaYRPcrxwDiDYfPSKCLmE1MwTMq40NwNO4PLhO/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcS036iUX0qCABh8heoy-2UMiU2QPyRDf9h9KB8l54NGGwz5MYU3DIB0ISSEcH_wAplt6nf0LLM5g0HEhzq2XvrC3Cbd4S4jD_pdXpEeWpccoLYRbFX58DFJ_dgMStU_Wrrg1Gs47rhgR7/s1600/button-close.png) no-repeat left -19px;}

#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 18px;
color: #F2F2F2;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0DJZQs7sEhyMi8Ck5cwo54n9-j8GVSP7eV5mFuXXOHSH_EglH3n6Cj92LK9QMq18H0nJ_o0yT6awegGjeSj1yZcZNpXZ7GrjpE80gUj_fdih44fAh1i9bBpwNQ503nWBZl-Kztr4YTmGu/s1600/button-register.png) no-repeat 0 0;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhor-5pHJhT8AYwLoeE7iduSvusQkxBNY33gnkgiZYhMqQ-iFKA0Je9QUUM9956cQITkrhlhLLJfjySSm-QvBM72_2z0gNxY6NIfpcKm5FOjzCfHHfvqmHJX6uHDOCRWtk-f1gXgDJFlUA2/s1600/star-bullet.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 11px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}

#search-box22{
margin-top: 20px;
}

#search-box22 input[type=&quot;text&quot;] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search-box22 input[type=&quot;text&quot;]:focus {
width: 190px;
}

.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
}

Kemudian silahkan anda cari kode <body> dan letakan kode HTML berikut tepat di bawah kode <body> tersebut

<!-- Start sliding panel -->
<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>

<!-- first section -->
<div class='left' style='width:240px !important'>

<h4>Welcome to my blog!</h4>
<div class='about-author'>
<div class='authorbox'>
  <div class='authorinfo'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyG8DWhBWg11lcVwO7gcSNLLUQneR83-BVPEYG1FGlxLBrNGaTko1pgUExveHVRs2VIVv395JdhmlEcuLeqfRHrTNJhcx3WTwLyexfWt3CaSWndBq9uSm5-3BBMJHiuTuo0FgSMnUyyesH/s1600/profile-pic.png'/>
<h3 class='boxtitle'>Meet the Author</h3>
<p>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti.</p>
</div>
</div>
</div>
<p align='right' style='margin-top: 10px;'>Looking for something?</p>
<form action='/search' id='search-box22' method='get'>
  <input name='q' placeholder='Search...' size='40' type='text'/>
</form>
</div>

<!-- second section -->
<div class='left' style='width:320px !important'>
<h4>Categories</h4>
<div id='sliding-panel'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>

<div id='sliding-panel2'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>
</div>

<!-- third section -->
<div align='center' class='left right'>
<h4>Subscribe to this blog!</h4>
<p style='padding:0px 30px;'>Receive the latest posts by email. Just enter your email below if you want to subscribe!</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Feed-Name' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='en_EN'/>
<input class='button-register' type='submit' value='Subscribe'/></form>
<div align='center' style='clear: both;'>
<a href='http://www.facebook.com/username'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_vI7EQENcgJO1sTozcsbO1Etq1xSPlBZZGedxDKaiukBOC5sBopqmSTz9c4NCERzvjyPXlKnmBmksy0tLqU37M8z2TBxm7JkYBybbo-dBkLOI2GyD-2mOmPdedtWplDYLrJ8bcSHnYu6L/s1600/Facebook.png' style='padding:5px;' title='Follow on Facebook' width='32'/></a>
<a href='http://blog-address.blogspot.com/atom.xml'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVUue9Kb0Ys6T-1sjWM53k8wmUABzqcOIkT9qVTbVQAe2126v_QyBTro4kKNDi4bIkA4XSiSWjArST_ri9JqjQa3-5GCJtA8Xgxo3eAyEURqvvOKzG9hf1G8TNWuS_OAMYa_E3RokFyQG/s1600/RSS.png' style='padding:5px;' title='RSS Feed' width='32'/></a> 
<a href='https://plus.google.com/username'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicZu9E2-XMSxugLcDFHeUXa3cRwj2X38EZKhEV0HeeO6aGXiwO8X2xdtrbSL6VFVGdrxN_LBJ0QIfWgSG9qMPF7LW8Q37Lz_-HPHO7D_uSF1Vap1WKSzWLmZXP2HlFJp8adUodIBzcuWSH/s1600/Google-plus.png' style='padding:5px;' title='Follow on Google' width='32'/></a> 
<a href='http://twitter.com/username'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP6D1L_YobEsSTaP-KhktUP-bh5Gc7o1QJLD19xrPVZOdeKlOGQhYQEVXT6nWEDKji2PU4-KFXBBPnfnQyI5gbPV-Xrbbz6ohgqG1XZepsDj_k3IBoR2RzCuKw1aLPx1foGAyZ3A4v6WR3/s1600/Twitter.png' style='padding:5px;' title='Follow on Twitter' width='32'/></a>
</div>
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hello guest!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Open menu</a>
<a class='close' href='#' id='close' style='display: none;'>Close menu</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

Save Template

Silahkan anda lihat hasil nya di bagian atas Header,dan anda juga bisa menyesuaikan semua link yang berada di bagian sliding Panel buka tutup tersebut,selamat mencoba dan salam blogger

adscblog

ads1

Posted by Dede Ubed, Published at 30 Juni and have 0 komentar

GbloG

Cara Membuat Sliding Panel Buka tutup Untuk Blogger

Tutorial Pemasangan Sliding Panel Buka tutup di blog

Dede Ubed

Lagi Populer

Template

GbloG

Cara Membuat Sliding Panel Buka tutup Untuk Blogger

Tutorial Pemasangan Sliding Panel Buka tutup di blog

Previous

Next

Dede Ubed

Lagi Populer