Tutorial : Sliding Panel

Ade yang mintak saya ajar untuk buat sliding panel macam dalam blog saya nih. Huhu . Jadi harinih saya buat tutonya .

Dashboard > Template > Edit HTML
Highlight mana2 code and tekan ctrl + F
Search code <head>
Copy code kat bawah nih bawah

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(document).ready(function() { $("#open").click(function(){$("div#panel").slideDown("slow");}); $("#close").click(function(){$("div#panel").slideUp("slow");}); $("#toggle a").click(function () {$("#toggle a").toggle();}); });</script> <b:if cond='data:blog.pageType != "item"'><style>body#layout #slide-top-panel {display:none !important;}</style></b:if>

Sekarang cari code </head> and tambah css bawah nih atas code </head>

<style>

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}

.clearfix {display: block;}

.clearfix {height: 1%;}

.clearfix {display: block;}

.tab {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJlW9UGRGwD04MhNWcadXTALKeNCJDLxhSQEuRs0cQfsXU6-Bm0eqLoWmHVVI0bS44Y79qWox8ev5vQ9Y07bQfsHFD-6t5LN1C7WHRSqPjUwXlUTC4J3V0waYhFHQXJxRZRQJEMPuG4SO/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/AVvXsEjzbhTrzaKCfmaXf9yWqGWk56q1aQHPYcJaHz6WrN973nLhYyCiHv6C0wnJMWI_vdo956MRGD98pYNc-NITSZM09PLFomWJ14N2cr0gMbw_KvOcv3v7AVkcZap1ITHdQAZfrWquRkHstyt9/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/AVvXsEi2cne0ZesL2UZEbVgXLO5jjT1sm5fsHF_GcKUo44UPBTmaMaOuT3uWZmV6foMpOcSXApBu5I-IbdXFOvhH9Bwi2c3UyUhfWs-ZHkL3y9fuZkwD2VQAfILvmIUGmbC_w3kxQKhNhuEaGd9P/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/AVvXsEiUC8HHTDR4pfUAY4sr-yILBSX3yJzOK8xPY86_WriAtYzhOVWUOKYy1kmWNGpQAbbc0QtFYzgZxvNWLu7D0jgACG2_We4PWGSRD_n-C6XhaYRTTjgF3xiOQRZ813uxG4QaDhWzNb202oIS/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/AVvXsEimaJlUEC5Z2RR8_JSzrmU_52gxDYLXDgNnRoUALEdI9t-2KXyHCMi5s2yqYzdQpRUuK-uc4oIR1fU8dbIZ5Vr6akxvXTmkmGo5hSdeILXtnYp9tXf9egas7vwl8R1RU3Dfi65CdwGQ7LLQ/s1600/button-open.png) no-repeat left 0;}

.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3gqOThcPI5Q-zLvGSQE00ZM1ONykz10WvXGaCwV4s6kt1qvX7ZfFgDkbIsZxSCR3I3up8cB-iOdtC9ArIqSlP8IRggJJnOCo9K_3M4WU5DnfXjInKXUYzxsv4k2VpWDfICQOywXg52My3/s1600/button-close.png) no-repeat left 0;}

.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimaJlUEC5Z2RR8_JSzrmU_52gxDYLXDgNnRoUALEdI9t-2KXyHCMi5s2yqYzdQpRUuK-uc4oIR1fU8dbIZ5Vr6akxvXTmkmGo5hSdeILXtnYp9tXf9egas7vwl8R1RU3Dfi65CdwGQ7LLQ/s1600/button-open.png) no-repeat left -19px;}

.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3gqOThcPI5Q-zLvGSQE00ZM1ONykz10WvXGaCwV4s6kt1qvX7ZfFgDkbIsZxSCR3I3up8cB-iOdtC9ArIqSlP8IRggJJnOCo9K_3M4WU5DnfXjInKXUYzxsv4k2VpWDfICQOywXg52My3/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/AVvXsEiqkYzRae_5qIW1fZDZpCzBMgA8tcYbsfdqI0VPbapczJx8HP7ov3mk3OwS89LO9nf1Ewvz0-F8wxMtv_ZkHrL5u7kn79q9BRHNtKWdRyKqmgEeKEX8j7oKqMSo5GL3QRa1icvtPFpWCPml/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/AVvXsEgv3q6GUM2bk7T7_VX14ya5Zr0QKMsSi063jkOOgjd0rWkyUli_S66jtEWy9m3WCXw_kqjF0EDIraQmRATLNQJZHXUbG6Wy_0zrFfqJ95cDbd7eynxvT7H6iobvHz9KiC3_Sp5S38oJ1SUH/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="text"] {

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="text"]: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;

}

</style>

Letak code dibawah lepas code <body> . Kalau tak jumpa cari code <body expr:class='"loading" + data:blog.mobileClass'>

<div id='slide-top-panel'> <div id='panel'> <div class='content clearfix'>  <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/AVvXsEj8dvYf8yQhTRZwe6EECo8iqYNHm3wo_C98qUwiVERBE1gfYtpv6QkrbExaC0P1bRA1egY_OWKGH3RjFZtnWy6bL6FI-cw3pwMSBccc-30Yqub8iGKYXT_h_3RKQm0tWzPuAKH5Zl-koLjs/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 method="get" action="/search" id="search-box22"> <input name="q" type="text" size="40" placeholder="Search..." /> </form> </div>  <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>  <div class='left right' align="center"> <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 title="Follow on Facebook" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKScm4CcIYjKYmStE8MVZx_f9CDGETIMO7AA-Vh87IKZ5gaP0LKU2Nmc1b2EvxNoFxiVm758KM3I0p0_Q82N9QexZrpjFGzCQPDhkhMG0Qafe77yFqNL7BFgDMNk81BggwGjbiv-J9WiZ_/s1600/Facebook.png' style='padding:5px;' width='32'/></a> <a href='http://blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqf49YAYj5OT2bpQZVKXTMw1TiPeeY92BqRRIEZmk98wXE4Tnvvj9uhC1hzuA-1u9ZUWnZq9hPCEDniMNthJFb-EOZ7aDQ2TdsOcGCFumVlEoIdHk4RNUC_Nk21fOV2xQ4jKD78B4TfSb1/s1600/RSS.png' style='padding:5px;' width='32'/></a> <a href='https://plus.google.com/username'><img title="Follow on Google" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8OwVQfSxqMWzlxkW_9YQwBK-PlCPXS2aCnViV7H0TiLoMcnPdRo9UpKvxYWJw_qsJJviF7Qd2zKq15hG0vKnfpT2-QnNCJLAKh_BT_SrAcJ5gQtNVctQAPrJq9NFXTXotdSBVOhoFbKwT/s1600/Google-plus.png' style='padding:5px;' width='32'/></a> <a href='http://twitter.com/username'><img title="Follow on Twitter" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGY0hxDALzw2qREK_yKXciyvf7J0k-CbCwTPnpfKrSXEJreS1fuFQPmi5rOcX31XwC7mPh6hmENnbtYKtveOWk_Lh3R5RePGJhW8ibrUTvVtuWhs8aEbmD0q9l6eSiXQQN1SMqKWlzFc2-/s1600/Twitter.png' style='padding:5px;' 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>

#PrayforMH370 .

Search

Little Milyy Shop

Follow me at

Tutorial : Sliding Panel

Comments

Post a Comment

Contact Form

@username