MA NURUL HUDA
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> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script>
- 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'> <div id='lower'>
- 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> <script src='http://feflex.googlecode.com/files/jquery.js' type='text/javascript'/>
- Clik Save
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
</div>
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
Follow Me on Twitter or On Facebook
Posted in: 
1 comments:
Great writing like this is a pleasure to find.There are a lot of good resources here.Thanks for sharing this with all of us.
website design
Post a Comment