.....

3 Adding A jQuery Posts Slider To Blogger Blog








UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........
STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:
]]></b:skin>
And immediately before it, paste this code:




#slider {

background:url(http://2.bp.blogspot.com/-bYlvMGliFRI/TtMsHAjGnkI/AAAAAAAAANM/eRVwbQk8lU4/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;

}



Now find this code in the template:
</head>
And immediately before it, paste this code:



<script src='http://bloggerjavascripteffect.googlecode.com/files/primus-jquery-1.2.6.min.js' type='text/javascript'></script>

<script src='http://bloggerjavascripteffect.googlecode.com/files/primus-slider.js' type='text/javascript'></script>



Now comes the tricky part which will require some trial and error pasting. Search
</head>
in the template and you will have to paste the following code somewhere below it. As every template is different from the other, I cant tell you the exact location to paste the code.

But I guess that everyone wants to put the posts slider in the header part. So search for <div id='header-wrapper'> or <div id='header-wrap'> or <div id='header'> or something that is similar to the three examples that I have given. All you have to do is paste the code somewhere near them and save the template. If the end result isnt what you want, again go to the template and paste the code at a different place. Copy the code given below




<!-- Slider -->

<div id='slider'>

<div id='mover'>





<div class='slide'>

<h2><a href='http://www.cooltricksntips.com' title='Cool Tricks N Tips '>Post Slider By Cool Tricks N Tips </a></h2>

<p>If you liked this tutorial then please Subscribe to Our Feeds and dont forget to share it on Digg/Stumble Upon/Twitter</p>

<img alt='Cool Tricks N Tips' src='Image URL'/>

</div>





<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>





<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>





<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>













</div>

<!-- /Mover -->

</div>

<!-- /Slider -->


Now click Save Template 

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;

}





















Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets



Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

3 Responses So Far:

Nisarga said...

No friend the trick doesn't work..................

chetaru said...

Hi..
Thanks for sharing this information and resources it's really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

Dhruv said...

Nice tutorial, thanks a lot for helping us.

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger