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