add jquery enabled attractive slie panel to blogger
Your sidebar is full of widgets and ad spaces and you want to add a new widget to your blog and have no space left like facebook like box,Subcription box or a welcome message.So I have come up with a brilliant and eye catchy slide panel which will surely enhance your blog beauty , will force your blog visitor to click on it and more exposure & what I always prefer no compromise on your blog surfing performance or blog load speed and you can add whatever you want in the body of slide panel.

How  To Add Slide panel to Blogger ?


1:  Go to Templates >> Edit Html >> Search for <body>  by pressing CTRL + F and add the following code  just under it.
<div id="panel">     <div> Your Html comes here whatever you want to show in it</div></div> <p class="slide"><a href="#" class="btn-slide">Click Here :)</a></p>

  • Change the Red Colour line with the html of your content you want to be shown when slide is down.
  • Change the Orange colour line with the text you want to be shown on the button.


2: Now search for </body>  by typing in the search bar and add the following code just before it
<script type="text/javascript" src="http://slidepaneljquery1.googlecode.com/files/jquery.js"></script> <script type="text/javascript">$(document).ready(function(){             $(".btn-slide").click(function(){                        $("#panel").slideToggle("slow");                        $(this).toggleClass("active"); return false;            });     
});</script>
3: Now search for ]]></b:skin> in the search bar and add the following css code just before it
body
 {     margin: 0 auto;     padding: 0;     width: 570px;     font: 75%/120% Arial, Helvetica, sans-serif;}a:focus {     outline: none;}#panel {     background: #754c24;     height: 200px;     display: none;}.slide {     margin: 0;     padding: 0;     border-top: solid 4px #422410;     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCLPYjdO6aHS-vNQrO0XiNld4beF7f-2drIxNFNeJfOzt6YNCeR7KyDz2-KaKYdTUUK6W1clfSTFYvr5Rdg64kAYtckmGxmCpAd2GSCr2PONsAG68vVpu0DwAsKMVhfgx8lzj2Yfd_vl8/h93/btn-slide.gif) no-repeat center top;}.btn-slide {     background: url(bloggingheaven.com) 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;}

From  the Author`s Desk > > >
 I can surely say that this widget has solved your problem . And will surely enhance your blog beauty and exposure as well so if there is any problem you face just comment down here.I will always be there to help you till then stay blessed ,peace and happy sliding :)

0 comments:

Post a Comment

 
Top