Adding jQuery Posts Slider To Blogger Blog

Adding jQuery Posts Slider To Blogger Blog

How to Install This Widget on Blogger?

Steps...

A. Adding CSS Theme Code

B. Adding Script Code

C. Adding HTML Code

Adding CSS Theme Code




In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.



Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

#slider {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcEh6r1F8voYJ40NopW9EpTAlh8WRo9Fw-45YIOcgJckELm_vMV0JDirlPRv0DgYjOA41X73KKg5hf7gyB5KxJVyT8sK-cf2fnCUCVCpYG0oQcVRZPSO3FyJSfNV8wZUS6iogIrSJ7pf4f/s1600/Adding+A+jQuery+Posts+Slider+To+Blogger+Blog.png);

height: 254px;

width: 983px;

overflow: hidden;

position: relative;

margin: 5px 0;

}



#mover {

width: auto;

position:absolute;

overflow:hidden;

}



.slide {

padding: 20px 0px;

width: 1000px;

float: left;

position: relative;

height:200px;

}



.slide h2 {

font-family:georgia, Helvetica, Sans-Serif;

font-size: 24px;

position: absolute;

top: 20px;

left: 1px;

color: #ac0000;

padding:0px 0px 0px 30px;

margin:0px 0px;

width:500px;

overflow:hidden;

}



.slide h2 a:link, .slide h2 a:visited {

color:#fff;

background-color: transparent;

}



.slide h2 a:hover {

color: #ddd;

background-color: transparent;

}



.slide p {

color: #999;

position: absolute;

top: 100px;

left: 1px;

font-size: 12px;

font-family:georgia, Helvetica, Sans-Serif;

line-height: 20px;

width: 500px;

padding:0px 0px 0px 30px;

margin:0px 0px;

}



.slide img {

position: absolute;

top: 20px;

left: 577px;

background:#fff;

padding:10px 10px;

}



#slider-stopper {

position: absolute;

font-family: Georgia, Helvetica, Sans-Serif;

top: 113px;

right: 55px;

color: #AC0000;

padding: 3px 8px;

font-size: 14px;

text-transform: uppercase;

z-index: 1000;

}

Adding Script Code


Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href='http://24work.blogspot.com' target='_blank' title='Blogger Widgets'><img alt='Blogger Widgets' border='0' src='http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png' style='position:absolute; top: 0px; right: 0px;'/></a>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/zinmag-primus-jquery-1.2.6.min.js' type='text/javascript'/>

<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/zinmag-primus-slider-01.js' type='text/javascript'/>

And now click Save Template 



Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<h2><a href='http://bdlab.blogspot.com/' title='26 free ebooks for bloggers '>26 Free eBooks For Bloggers </a></h2>
<p>A collection of 26 Free eBooks which cover almost all the aspects of Blogging and help you to create better blogs. These eBooks which have been written by experts are very useful for bloggers.</p>
<img alt='ebooks' src='http://i44.tinypic.com/2ef0odd.jpg'/>
</div>
<div class='slide'>
<h2><a href='http://bdlab.blogspot.com/' title='largest collection of rss icons '>Largest Collection Of RSS Icons </a></h2>
<p>This is the largest collection of RSS Icons in a post. Its a huge list containing more than 80 RSS Icon Sets.</p>
<img alt='rss icons ' src='http://i40.tinypic.com/2vl4bbm.jpg'/>
</div>
<div class='slide'>
<h2><a href='http://bdlab.blogspot.com/' title='50 beautiful templates converted from wordpress to blogger '>50 Beautiful Templates Converted From Wordpress To Blogger </a></h2>
<p>This is a collection of 50 Beautiful Templates which have been converted from Wordpress to Blogger. </p>
<img alt='blogger templates' src='http://i40.tinypic.com/6egfiu.jpg'/>
</div>
<div class='slide'>
<h2><a href='http://bdlab.blogspot.com/' title='remove the blogger navbar in a simple step'>Remove The Blogger Navbar In A Simple Step</a></h2>
<p>This is a simple copy paste method to remove the Blogger Navbar which is used in all the latest Blogger Templates </p>
<img alt='remove blogger navbar' src='http://i43.tinypic.com/2yvw4sx.jpg'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

And now click Save 

Now its time for you to put your favourite posts in the Posts Slider. If there are some alignment problems with the Post Title or Image or the Stop Button in the slider then dont worry, continue doing what I say. Search <!-- Slider --> in the blog template. Below it you will see

<div class='slide'>

<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>

<p>Post Description</p>

<img alt='image name' src='Image URL'/>

</div>

If you are having problem with the placement of the Image, search .slide img { in the template. The code will be as shown below

.slide img {

position: absolute;

top: 20px;


left: 577px;

background:#fff;

padding:10px 10px;

}

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.