Image Slider or Content Slider In Blogger Blog

Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to jQuery plugin file, set the content up and style it with css. Thanks to Alen Grakalic. See the live demo here.(demo will not work because i had used geocities for jQuery hosting, try yourself, follow these steps in your blogger template,it should work)



Step Needs to Add Easy Image Slider or Content Slider

Step 1. Login to Blogger-Dashboard

Step 2. Go to Layout >> Edit HTML

Step 3. Copy and Paste the following CSS code right above ]]></b:skin> tag

?

10 11 12 13 14 15 16 17 18 19 20 21

#slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider, #slider li{ width:500px; height:200px; overflow:hidden; } span#prevBtn{} span#nextBtn{}

Change Width and height according to your template design.

Step 4. Now Download easySlider.zip or here and link to these files as shown below and place these line of code right above </body>

?

10 11

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider.packed.js"></script>

Use google page creator or your own server to host jQuery plugins. I used Geocities. Geocities is not available now so the demo that i hv specified will not work. Try yourself. It should work.

Step 5. Copy and Paste following line of code right above </body> tag to start slider action

For Horizontal Slider

?

10 11 12 13 14

<script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script>

or

?

10 11 12 13 14 15 16 17 18

<script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ prevText:'Previous', nextText:'Next', orientation:'horizontal' }); }); </script>

For Vertical Slider

?

10 11 12 13 14 15 16 17 18

<script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ prevText:'UP', nextText:'DOWN', orientation:'vertical' }); }); </script>

You can change UP, DOWN, Previous and Next with your words.

Step 6. Now go to Layout and click on 'Add a Page Element' or 'Add a Gadget' , Popup window will open, in that select HTML/Javascript. Now place the following code with your content in the opened HTML/Javascript window and save changes.

?

10 11 12 13 14 15 16 17 18

<div id="slider"> <ul>   <li>content here...</li> <li>content here...</li> <li>content here...</li> ... </ul> </div>

Content may be image or text.

Simple Ways to Make Floating Ads with Close Button

Fellow bloggers may have seen this tutorial, indeed far as i know there are more complicated to use a lot of code, but here I try to give tips that much easier and very simple even for those of you bloggers who are new to coding could do it, ok i "to yours" will immediately provide tutor, ya just follow steps:

  


   1. Go to Blogger.com login with your account each Definitely
   2. Go to the Layout Tab
   3. Choose a Page Element
   4. Add Gadget Choose HTML / JavaScript
   5. And Copy the code below into it well




<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXcJNcVq-MbK5aXfzYqb7xNhXb3e5MevH2KJ2_w4hAWU86FEsKzfI3CEz4Dzg1v8fSnMVRt1mgmhpJWS4DUx_2HmN1gQH9kP4s8hyphenhyphenaW_5saU7DybpUg5tb7PC4Z3yxgE1SPfA94HTQbW4/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXcJNcVq-MbK5aXfzYqb7xNhXb3e5MevH2KJ2_w4hAWU86FEsKzfI3CEz4Dzg1v8fSnMVRt1mgmhpJWS4DUx_2HmN1gQH9kP4s8hyphenhyphenaW_5saU7DybpUg5tb7PC4Z3yxgE1SPfA94HTQbW4/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>


<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Enter the ad code or image that you want here

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

Enter the ad code or image that you want here

    6. Save

 Good luck:)