How to Create a Slide Panel On Blogger

Bismillah (In The Name of Allah), Tutorial blog at this time I'll try to slide the panel on blogger using JQuery, I am interested in doing this when I was looking for tutorials Javascript Query Or in terms of popularity is often called JQuery. just okay to do. For Example Slide JQuery Clik Here

First you backup your blog template used
The second step you click edit HTML and and do not forget to check the sign Expand Widget Templates
After that look for the code ]]></b:skin> to speed up the search press Ctrl + F and enter the code you are looking for
After that you copy the below css code, and place her purse right code ]]></b:skin>

#panel { display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #422410; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZE9ci_WGHgbQCBm9JsUmw5mHsBV3pjR5J78pBh5gup-mUa3D-ZSvfCTYpNMRnzN7ANwNCJtcajlQmUkRCXFe-ElGj9v0FlofQczhbXKjcQgQaS8MBu-q_POCLI5UP8I_rF-fJKp1csDzF/) no-repeat center top; } .btn-slide { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI37bqbPFyfjUBzTPtcmyt3eaWdudJm-OSPWz7fAq3_q1VV6iCQdo76cpDvw1p4pQyDSzj8pnQEVTAquOp84ilUQ6cGvG9wILSxH93rKdTfD_Og31xdm0nmGPYIqYkgYsFu6Hmvf7fiTot/) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; } #lower { margin:auto; padding : 0px 0px 10px 0px; width: 100%; background:#333434; } #lower-wrapper { margin:auto; padding: 20px 0px 20px 0px; width: 960px; } #lowerbar-wrapper { border:1px solid #DEDEDE; background:#fff; float: left; margin: 0px 5px auto; padding-bottom: 20px; width: 32%; text-align: justify; font-size:100%; line-height: 1.6em; word-wrap: break-word; overflow: hidden; } .lowerbar {margin: 0; padding: 0;} .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} .lowerbar h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: left; color:#0084ce; text-transform:uppercase; font: bold 14px Arial, Tahoma, Verdana; border-bottom:3px solid #0084ce; } .lowerbar ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none; } .lowerbar li { margin: 0px 0px 2px 0px; padding: 0px 0px 1px 0px; border-bottom: 1px dotted #ccc; }

The next step, you are looking for tag </head> , And paste the code below, right under the tag </head>

Click save and take a break, OK to the next phase
Now you create a new widget, if you want to put this widget on the bottom, you are looking for code <div id='footer-wrapper'> <div id='header-wrapper'> to top <div id='sidebar-wrapper'> for in the sidebar (This standard template for blogspot) if you do not find these codes, please find a similar code
Confused? okay if confused copy the code below and place on the tag <div id='header-wrapper'>

Clik Save and Go To Layout
The layout of your blog there is a growing new widget that you Lay on the header-wrapper
After that you click the widget and add your content at will
Last step of calling JQuery
Put the code below after the tag <head>

Clik Save

About the Author

I'm Hung Duy, the founder of Xml Blogger Templates (XBT). I'm a freelance writer on topics related to Website Optimization (SEO), blogger customizations and making money online. I'm blogging since 2006 and I'm currently a guest blogger on Blogging With Success.
Follow Me on Twitter or On Facebook

Visit xmlbloggertemplates.com for more Blogger Templates