May 2016 | Bloggerdaddy - A guide for new blogger

How to make all Links in Blog to Open in Another Tab

<div dir="ltr" style="text-align: left;" trbidi="on">
Many <a href="http://www.bloggerdaddy.tk/search/label/Widgets" target="_blank">Blogger Tricks and Widgets</a>
 have been shared on this blog recently. So today, I want to share a 
trick with you on how you can make all the links on your blog to show in
 a new tab. This trick can help increase blog page view and decrease 
your bounce rate. 
 
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgiuMNHOq4neQSkbxs3Pzn4bifnG3ZQj_tb1PO72v49jOXvTbgwzTDphT8HLq_sl3wLb9G2Z_6jIuQ4u4Dw6KXAvjqV8zD7lkAf-IREoLSMi15Vmprc41RQA8vKxGrOrK14rjjz3Q3M50/s1600/45+%25282%2529.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgiuMNHOq4neQSkbxs3Pzn4bifnG3ZQj_tb1PO72v49jOXvTbgwzTDphT8HLq_sl3wLb9G2Z_6jIuQ4u4Dw6KXAvjqV8zD7lkAf-IREoLSMi15Vmprc41RQA8vKxGrOrK14rjjz3Q3M50/s400/45+%25282%2529.png" /></a></div>
 
 
This trick is simple and easy to install on blogger blogs to make the
 entire link on your blog to open in another tab as default. Follow the 
process below to install it on your blog by adding a code to your 
template. 
 
==> Sign in to your blogger blog >> Template 
==> Search for <code><head></code> in your template by using CTRL+F and then after it add below code 
<code> </code>
<blockquote class="tr_bq">
<code><base target='_blank' /></code></blockquote>
<code> </code>
 
==>Finally save your template.

By now all the link on your blog will automatically open in another tab whenever it is clicked on.</div>

Tips Tricks Widgets How to make all Links in Blog to Open in Another Tab

Many Blogger Tricks and Widgets have been shared on this blog recently. So today, I want to share a trick with you on how you can make a...

How to Create a Sitemap or Table Of Contents Page For Blogger

2:53:00 PM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
Sitemap  is a page on your blog where all 
posts are arranged in accordance to their type, and it shows the links 
to all posts published on your blog so far. Sitemap (Table of Contents) 
is important for all bloggers to have on their blog. This make blog look
 professional, and it helps your blog visitors and readers to navigate 
through your blog post. 
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPo3Im1yv8KkwbXNszOU-0GNR0miHUNMo1x94TPyht5ZRUfTwJ7UnuPBuSBWp9SN8jQdxPzY_JTaGjjGL67vNXM39ZTYzF6JbRkyVS7UIZ5PS9ApRw49f4Ovp-jTENIBNYTSnLhvPJb4/s1600/20160529144225362.png" imageanchor="1"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPo3Im1yv8KkwbXNszOU-0GNR0miHUNMo1x94TPyht5ZRUfTwJ7UnuPBuSBWp9SN8jQdxPzY_JTaGjjGL67vNXM39ZTYzF6JbRkyVS7UIZ5PS9ApRw49f4Ovp-jTENIBNYTSnLhvPJb4/s320/20160529144225362.png" width="320" /></a> 
 </div>
 
Here is a script that saves time and helps to update all new posts 
made on your blog to your sitemap (Table of Contents) page 
automatically. This script will display all posts made on your blog 
under their specified categories (Labels). This widget also comes with a
 CSS & Jquery to make it attractive. 
<h4>

Steps To Add Automatic Sitemap (Table of Contents) Generator</h4>
 
1. Add the CSS code below to your template. This can be done by going to Blogger >>> Template, use (CTRL+F) to search for ]]></b:skin> in your template and finally paste the CSS code below above <code>]]></b:skin></code> tag. 
 
<blockquote class="tr_bq">
<code>/*--------bloggerdaddy.tk TOC-----*/</code><code>
.judul-label{</code><code>
background-color:#E5ECF9;</code><code>
font-weight:bold;</code><code>
line-height:1.4em;</code><code>
margin-bottom:5px;</code><code>
overflow:hidden;</code><code>
white-space:nowrap;</code><code>
vertical-align: baseline;</code><code>
margin: 0 2px;</code><code>
outline: none;</code><code>
cursor: pointer;</code><code>
text-decoration: none;</code><code>
font: 14px/100% Arial, Helvetica, sans-serif;</code><code>
padding: .5em 2em .55em;</code><code>
text-shadow: 0 1px 1px rgba(0,0,0,.3);</code><code>
-webkit-border-radius: .5em;</code><code>
-moz-border-radius: .5em;</code><code>
border-radius: .5em;</code><code>
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);</code><code>
-moz-box-shadow: 1px 1px 4px #AAAAAA;</code><code>
box-shadow: 0 1px 2px rgba(0,0,0,.2);</code><code>
color: #e9e9e9;</code><code>
border: 2px solid white !important;</code><code>
background: #6e6e6e;</code><code>
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));</code><code>
background: -moz-linear-gradient(top,  #888,  #575757);</code><code>
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');</code><code>
}</code><code>
.data-list{</code><code>
line-height:1.5em;</code><code>
margin-left:5px;</code><code>
margin-right:5px;</code><code>
padding-left:15px;</code><code>
padding-right:5px;</code><code>
white-space:nowrap;</code><code>
text-align:left;</code><code>
font-family:"Arial",sans-serif;</code><code>
font-size:12px;</code><code>
}</code><code>
.list-ganjil{</code><code>
background-color:#F6F6F6;</code><code>
}</code><code>
.headactive{</code><code>
    color: #fef4e9;</code><code>
    border: 2px solid white !important;</code><code>
    background: #1C8DFF;</code><code>
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));</code><code>
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);</code><code>
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');</code><code>
} </code></blockquote>
 
 
Save your Template after inserting the CSS 
 
2.    Create a Page: to create a new page, go to Blogger >>> Pages >>> New Page. Now give the page a title such as “Table of Contents” “Site Maps” or any title you wish. Click EDIT HTML button on the compose mode screen, now paste the code below in it. 
 
 
<blockquote class="tr_bq">
<script src="https://www.dropbox.com/s/20wu2kszj4droq8/Justnaira-tos-file.js?dl=1"></script> 
<script src="http://www.bloggerdaddy.tk/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script> 
<script type="text/javascript"> 
var accToc=true; 
</script><script src="https://www.dropbox.com/s/5m7gwnjqm4w5rft/oncordian-tos.js?dl=1" type="text/javascript"></script></blockquote>
 
Make sure you change http://www.bloggerdaddy.tk to your own blog URL and then publish the page. Visit the page link to view your awesome blog sitemap (Table of Contents). 
<h4>

Sitemap (Table of Contents) Customization</h4>
The color of the category when in active mode is blue while when it is inactive it appears as dark gray. 
 
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqCX7IRfbqzr2BEt5rJrW08Hxc63f15HQ-pXu0d-CVtIXnjb6HKDOWTuospVTQWLaUmdeqYAdG014VEPxD2kgIMl4BjkBB5O7dSoCWjQED1g1XxPqfvmrQqvfFHg6ppb1YVPMDEergc0/s1600/20160529144239952.png" imageanchor="1"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqCX7IRfbqzr2BEt5rJrW08Hxc63f15HQ-pXu0d-CVtIXnjb6HKDOWTuospVTQWLaUmdeqYAdG014VEPxD2kgIMl4BjkBB5O7dSoCWjQED1g1XxPqfvmrQqvfFHg6ppb1YVPMDEergc0/s400/20160529144239952.png" width="400" /></a></div>
 
So to change the active mode, simply change #9dc2e7 and #438cd2. Here is a <a href="http://www.bloggerdaddy.tk/2015/11/color-code-generator.html" target="_blank">color generator tool</a> that will aid you to select the best color code that you love. 
If you encounter any difficulties in the process of setting up your blog Sitemap, don’t hesitate to use the comment box below.</div>

Tricks Widgets How to Create a Sitemap or Table Of Contents Page For Blogger

Sitemap is a page on your blog where all posts are arranged in accordance to their type, and it shows the links to all posts published o...

Animated Colour changing Background for Blogger

6:47:00 PM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimw-3ELh0LDL-mgjwX4IosPR2WgIUtg3FzB15rxYmMafb89_zju647Qz8pZ3VRegKGFmqiL2HrjdJD5RVH031kSnh0XodvubmOPDijVn3-WAzNTLFA-qm2mK_QcXrWHnRUDJjxH09cApM/s1600/Animated+color+background.jpg" imageanchor="1"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimw-3ELh0LDL-mgjwX4IosPR2WgIUtg3FzB15rxYmMafb89_zju647Qz8pZ3VRegKGFmqiL2HrjdJD5RVH031kSnh0XodvubmOPDijVn3-WAzNTLFA-qm2mK_QcXrWHnRUDJjxH09cApM/s400/Animated+color+background.jpg" width="400" /></a></div>
 
<div style="text-align: justify;">
This post will tell you that how you 
can make your background change to different colours with animation 
using keyframes CSS. Inspite of using big images you can use these CSS 
codes which load extremely fast and you the user too gets too see some 
interaction on the background.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
<h3>
Removing existing code:</h3>
<div>
First of all you have to remove the existing background code to avoid 
any conflict in between and minimize excessive code. For this search the body selector from the CSS codes in your blog. Under that search for background property and remove the property with the value (Do Not Remove the Selector). </div>
<div>
 </div>
<div>
<h3 style="text-align: left;">
Adding the code:</h3>
</div>
<div>
Now we have to add the animation codes in the blog template. For this paste the below given code just above ]]></b:skin> <</div>
<div>
 </div>
<blockquote class="tr_bq">
body { 
    animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */ 
     -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */ 
      -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */ 
        -o-animation: colorBackground 20s infinite; /* Opera 12.00 */ 
} 
@keyframes colorBackground { 
      0% { background-color: #fbcf61; color: #fbcf61; } 
     20% { background-color: #6bd57e; color: #6bd57e; } 
     40% { background-color: #ff6f6f; color: #ff6f6f; } 
     60% { background-color: #57cff4; color: #57cff4; } 
     80% { background-color: #0ed4c8; color: #0ed4c8; } 
    100% { background-color: #fbcf61; color: #fbcf61; } 
} 
@-webkit-keyframes colorBackground { 
      0% { background-color: #fbcf61; color: #fbcf61; } 
     20% { background-color: #6bd57e; color: #6bd57e; } 
     40% { background-color: #ff6f6f; color: #ff6f6f; } 
     60% { background-color: #57cff4; color: #57cff4; } 
     80% { background-color: #0ed4c8; color: #0ed4c8; } 
    100% { background-color: #fbcf61; color: #fbcf61; } 
} 
@-moz-keyframes colorBackground { 
      0% { background-color: #fbcf61; color: #fbcf61; } 
     20% { background-color: #6bd57e; color: #6bd57e; } 
     40% { background-color: #ff6f6f; color: #ff6f6f; } 
     60% { background-color: #57cff4; color: #57cff4; } 
     80% { background-color: #0ed4c8; color: #0ed4c8; } 
    100% { background-color: #fbcf61; color: #fbcf61; } 
} 
@-o-keyframes colorBackground { 
      0% { background-color: #fbcf61; color: #fbcf61; } 
     20% { background-color: #6bd57e; color: #6bd57e; } 
     40% { background-color: #ff6f6f; color: #ff6f6f; } 
     60% { background-color: #57cff4; color: #57cff4; } 
     80% { background-color: #0ed4c8; color: #0ed4c8; } 
    100% { background-color: #fbcf61; color: #fbcf61; } 
} 
}</blockquote>
Code Source - Immam Vel 
 
<div class="content section" id="content">
<div class="widget Blog" data-version="1" id="Blog1">
<div class="blog-posts hfeed masonry">
<div class="date-outer">
<div class="date-posts">
<div class="post-outer">
<div class="post hentry">
<div class="post-body entry-content" id="post-body-4898190721721462044">
<div dir="ltr" style="text-align: left;" trbidi="on">
After
 adding the code, save the template. You are done now. Now you and your 
visitors can see this animated colour changing background in your 
blogger blog.
 
<h3 style="text-align: left;">
<a href="http://www.bloggerdaddy.tk/2016/05/facebook-popup-like-box-widget-for.html" target="_blank">Facebook Popup Like Box Widget For Blogger</a></h3>
</div>
<div style="margin-top: 5px; margin: 0 auto;">
<ins class="adsbygoogle" data-ad-client="ca-pub-2958296951649807" data-ad-slot="2165359970" data-adsbygoogle-status="done" style="display: inline-block; height: 60px; width: 468px;"> </ins></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Tips Tricks Animated Colour changing Background for Blogger

This post will tell you that how you can make your background change to different colours with animation using keyframes CSS. Inspite...

Facebook Popup Like Box Widget For Blogger

11:33:00 AM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq3ewfF0fsUHk5wms5HIXPtNU37rYzma2dzuU78D24xx53_5kw8qLuRinYtJDGdyEPG922w78UMgGvU0PrrqFrawHcSN61DQBA9-KknkKpbGKW9rRT_d4Mve_GFtXrPdOAmQMc3Lft_fU/s1600/20160524113002664.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq3ewfF0fsUHk5wms5HIXPtNU37rYzma2dzuU78D24xx53_5kw8qLuRinYtJDGdyEPG922w78UMgGvU0PrrqFrawHcSN61DQBA9-KknkKpbGKW9rRT_d4Mve_GFtXrPdOAmQMc3Lft_fU/s400/20160524113002664.png" /></a></div>
<h2 class="tr_bq" style="text-align: left;">
<div style="text-align: left;">
 </div>
How to Add the Facebook popup Like Box Widget</h2>
 1. Log into your Blogger account and select your blog > go to 'Layout' & click the 'Add a Gadget' link on the right side 2. Once the popup window is open, select the HTML/JavaScript gadget from the list: 
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJB1tfzLojNjsMNYv_jwndGoa2X6CruVWrVmrYBdJ-yuMAGsAr930VqQ7tmR_XL5eMcRW24S3HmB7A1NgUyMxhaoklD9BUHRK0i22iHjC_15QNu2Io2jo5-8xDgMdEte_hTdHBJUopOzM/s1600/add-html-javascript-gadget-blogger.png" imageanchor="1"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJB1tfzLojNjsMNYv_jwndGoa2X6CruVWrVmrYBdJ-yuMAGsAr930VqQ7tmR_XL5eMcRW24S3HmB7A1NgUyMxhaoklD9BUHRK0i22iHjC_15QNu2Io2jo5-8xDgMdEte_hTdHBJUopOzM/s400/add-html-javascript-gadget-blogger.png" width="400" /></a></div>
<div style="text-align: center;">
 </div>
<div style="text-align: left;">
3. Copy and paste the following code inside the empty box:</div>
<blockquote style="text-align: left;">
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><style>#fbox-background {    display: none;    background: rgba(0,0,0,0.8);    width: 100%;    height: 100%;    position: fixed;    top: 0;    left: 0;    z-index: 99999;} #fbox-close {    width: 100%;    height: 100%;} #fbox-display {    background: #eaeaea;    border: 5px solid #828282;    width: 340px;    height: 230px;    position: absolute;    top: 32%;    left: 37%;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;} #fbox-button {    float: right;    cursor: pointer;    position: absolute;    right: 0px;    top: 0px;} #fbox-button:before {    content: "CLOSE";    padding: 5px 8px;    background: #828282;    color: #eaeaea;    font-weight: bold;    font-size: 10px;    font-family: Tahoma;} #fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {    color: #aaaaaa;    font-size: 9px;    text-decoration: none;    text-align: center;    padding: 5px;}</style><script type='text/javascript'>//<![CDATA[jQuery.cookie = function (key, value, options) {// key and at least value given, set cookie...if (arguments.length > 1 && String(value) !== "[object Object]") {options = jQuery.extend({}, options);if (value === null || value === undefined) {options.expires = -1;}if (typeof options.expires === 'number') {var days = options.expires, t = options.expires = new Date();t.setDate(t.getDate() + days);}value = String(value);return (document.cookie = [encodeURIComponent(key), '=',options.raw ? value : encodeURIComponent(value),options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IEoptions.path ? '; path=' + options.path : '',options.domain ? '; domain=' + options.domain : '',options.secure ? '; secure' : ''].join(''));}// key and possibly options given, get cookie...options = value || {};var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;};//]]></script><script type='text/javascript'>jQuery(document).ready(function($){if($.cookie('popup_facebook_box') != 'yes'){$('#fbox-background').delay(5000).fadeIn('medium');$('#fbox-button, #fbox-close').click(function(){$('#fbox-background').stop().fadeOut('medium');});}$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });});</script><div id='fbox-background'><div id='fbox-close'></div><div id='fbox-display'><div id='fbox-button'></div><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Bloggerdaddy/1234567890&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe><div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://blogerdaddy.blogspot.in/" rel="nofollow">Bloggerdaddy</a></div></div></div></blockquote>
4. Press the 'Save' button to add the widget to your blog. That's it!  
<h2 style="text-align: left;">
 Customization</h2>
<div>
After adding the code, replace the address in blue</div>
<div>
 </div>
<div>
https://www.facebook.com/pages/Bloggerdaddy/1234567890 with your site's facebook page URL.</div>
<div>
 </div>
<div>
The widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:</div>
<blockquote class="tr_bq">
 .delay(5000)</blockquote>
</div>
 
 
<li>By default, the like box only shows up the first time the user visits your page.  If you would like the Facebook box to popup every time the page loads, then remove this line of code:</li>
 
<blockquote class="tr_bq">
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });</blockquote>
<ul>
<li>If you want to display only when user visits your homepage, go to 'Template' > hit the 'Edit HTML' button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:</li>
</ul>
<style>.post-body ul li{list-style-type: square;}</style>

<blockquote class="tr_bq">
</body> </blockquote>
Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below: 
<blockquote class="tr_bq">
&lt;b:if cond='data:page.type == "index"'&gt;ADD THE FACEBOOK WIDGET CODE HERE &lt;/b:if&gt;</blockquote>
After saving your work, you can test out your new feature by returning to one of your old posts which should bring up a little popup widget asking if you'd like to join the site's facebook page. 
 
If you don't see the Facebook Like Box on the page, you may need to delete your cookies or check out the 'Customization' section above in order to display the widget every time a user visits your site. Once this widget is added to your site, all your hard work should start to translate into an increase in web traffic and number of Facebook fans.</div>

Widgets Facebook Popup Like Box Widget For Blogger

How to Add the Facebook popup Like Box Widget 1. Log into your Blogger account and select your blog > go to 'Layout' &a...

jQuery Image Slider For Blogger - V3

10:37:00 AM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="tr_bq">
 </div>
<div class="tr_bq" style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlcU-ghIcw3ow90ARr3spAsdUJ7QwmNmATxUGMGomnbQ0eupEC4fzgdtkbAY82RTYdkBcRFsNkk6UmX9cIpk3DOK1SgHZSSLytBonqJDLCFNk2VPOOTCE7ANyKmTQ1bRWsCcPAPdzKwvc/s1600/Jquery-Blogger-slider%255B14%255D.jpg" imageanchor="1"><img border="0" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlcU-ghIcw3ow90ARr3spAsdUJ7QwmNmATxUGMGomnbQ0eupEC4fzgdtkbAY82RTYdkBcRFsNkk6UmX9cIpk3DOK1SgHZSSLytBonqJDLCFNk2VPOOTCE7ANyKmTQ1bRWsCcPAPdzKwvc/s320/Jquery-Blogger-slider%255B14%255D.jpg" width="320" /></a></div>
<div class="tr_bq">
 </div>
<div class="tr_bq">
As per your requests we are glad to present yet another stunning version
 of Image slideshow Widget for BlogSpot blogs. This widget is different 
from its previous versions with regard to speed, load time, navigation 
and control options. You can use it to display even your Featured Posts
 using the Featured post title and description. This widget is again an 
extracted code from a WordPress template. The slider is coded such that 
it will appear on your homepage only.</div>
 
<h3>
 Adding the Slider To Blogger:</h3>
Kindly follow these steps: 
 
<ol>
<li>Go To Blogger > Design > Edit HTML </li>
<li>Backup your template </li>
<li>Search for </head> </li>
<li>Just above it paste the jQuery code </li>
</ol>
<div>
 </div>
<blockquote class="tr_bq">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ (function($){ 	/* hoverIntent by Brian Cherne */ 	$.fn.hoverIntent = function(f,g) { 		// default configuration options 		var cfg = { 			sensitivity: 7, 			interval: 100, 			timeout: 0 		}; 		// override configuration options with user supplied object 		cfg = $.extend(cfg, g ? { over: f, out: g } : f ); 		// instantiate variables 		// cX, cY = current X and Y position of mouse, updated by mousemove event 		// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval 		var cX, cY, pX, pY; 		// A private function for getting mouse position 		var track = function(ev) { 			cX = ev.pageX; 			cY = ev.pageY; 		}; 		// A private function for comparing current and previous mouse position 		var compare = function(ev,ob) { 			ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); 			// compare mouse positions to see if they've crossed the threshold 			if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) { 				$(ob).unbind("mousemove",track); 				// set hoverIntent state to true (so mouseOut can be called) 				ob.hoverIntent_s = 1; 				return cfg.over.apply(ob,[ev]); 			} else { 				// set previous coordinates for next time 				pX = cX; pY = cY; 				// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs) 				ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval ); 			} 		}; 		// A private function for delaying the mouseOut function 		var delay = function(ev,ob) { 			ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); 			ob.hoverIntent_s = 0; 			return cfg.out.apply(ob,[ev]); 		}; 		// A private function for handling mouse 'hovering' 		var handleHover = function(e) { 			// next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut 			var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget; 			while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } } 			if ( p == this ) { return false; } 			// copy objects to be passed into t (required for event object to be passed in IE) 			var ev = jQuery.extend({},e); 			var ob = this; 			// cancel hoverIntent timer if it exists 			if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } 			// else e.type == "onmouseover" 			if (e.type == "mouseover") { 				// set "previous" X and Y position based on initial entry point 				pX = ev.pageX; pY = ev.pageY; 				// update "current" X and Y position based on mousemove 				$(ob).bind("mousemove",track); 				// start polling interval (self-calling timeout) to compare mouse coordinates over time 				if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );} 			// else e.type == "onmouseout" 			} else { 				// unbind expensive mousemove event 				$(ob).unbind("mousemove",track); 				// if hoverIntent state is true, then call the mouseOut function after the specified delay 				if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );} 			} 		}; 		// bind the function to the two event listeners 		return this.mouseover(handleHover).mouseout(handleHover); 	}; 	})(jQuery); //]]> </script> <script type='text/javascript'> //<![CDATA[ /*  * Superfish v1.4.8 - jQuery menu widget  * Copyright (c) 2008 Joel Birch  *  * Dual licensed under the MIT and GPL licenses:  * 	http://www.opensource.org/licenses/mit-license.php  * 	http://www.gnu.org/licenses/gpl.html  *  * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt  */ ;(function($){ 	$.fn.superfish = function(op){ 		var sf = $.fn.superfish, 			c = sf.c, 			$arrow = $([' &#187;'].join('')), 			over = function(){ 				var $$ = $(this), menu = getMenu($$); 				clearTimeout(menu.sfTimer); 				$$.showSuperfishUl().siblings().hideSuperfishUl(); 			}, 			out = function(){ 				var $$ = $(this), menu = getMenu($$), o = sf.op; 				clearTimeout(menu.sfTimer); 				menu.sfTimer=setTimeout(function(){ 					o.retainPath=($.inArray($$[0],o.$path)>-1); 					$$.hideSuperfishUl(); 					if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);} 				},o.delay);				}, 			getMenu = function($menu){ 				var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0]; 				sf.op = sf.o[menu.serial]; 				return menu; 			}, 			addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); }; 					return this.each(function() { 			var s = this.serial = sf.o.length; 			var o = $.extend({},sf.defaults,op); 			o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){ 				$(this).addClass([o.hoverClass,c.bcClass].join(' ')) 					.filter('li:has(ul)').removeClass(o.pathClass); 			}); 			sf.o[s] = sf.op = o; 						$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() { 				if (o.autoArrows) addArrow( $('>a:first-child',this) ); 			}) 			.not('.'+c.bcClass) 				.hideSuperfishUl(); 						var $a = $('a',this); 			$a.each(function(i){ 				var $li = $a.eq(i).parents('li'); 				$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);}); 			}); 			o.onInit.call(this); 					}).each(function() { 			var menuClasses = [c.menuClass]; 			if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass); 			$(this).addClass(menuClasses.join(' ')); 		}); 	}; 	var sf = $.fn.superfish; 	sf.o = []; 	sf.op = {}; 	sf.IE7fix = function(){ 		var o = sf.op; 		if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined) 			this.toggleClass(sf.c.shadowClass+'-off'); 		}; 	sf.c = { 		bcClass     : 'sf-breadcrumb', 		menuClass   : 'sf-js-enabled', 		anchorClass : 'sf-with-ul', 		arrowClass  : 'sf-sub-indicator', 		shadowClass : 'sf-shadow' 	}; 	sf.defaults = { 		hoverClass	: 'sfHover', 		pathClass	: 'overideThisToUse', 		pathLevels	: 1, 		delay		: 800, 		animation	: {opacity:'show'}, 		speed		: 'normal', 		autoArrows	: true, 		dropShadows : true, 		disableHI	: false,		// true disables hoverIntent detection 		onInit		: function(){}, // callback functions 		onBeforeShow: function(){}, 		onShow		: function(){}, 		onHide		: function(){} 	}; 	$.fn.extend({ 		hideSuperfishUl : function(){ 			var o = sf.op, 				not = (o.retainPath===true) ? o.$path : ''; 			o.retainPath = false; 			var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass) 					.find('>ul').hide().css('visibility','hidden'); 			o.onHide.call($ul); 			return this; 		}, 		showSuperfishUl : function(){ 			var o = sf.op, 				sh = sf.c.shadowClass+'-off', 				$ul = this.addClass(o.hoverClass) 					.find('>ul:hidden').css('visibility','visible'); 			sf.IE7fix.call($ul); 			o.onBeforeShow.call($ul); 			$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); }); 			return this; 		} 	}); })(jQuery); //]]> </script> <script type='text/javascript'> //<![CDATA[ /*  * jQuery Cycle Plugin (with Transition Definitions)  * Examples and documentation at: http://jquery.malsup.com/cycle/  * Copyright (c) 2007-2010 M. Alsup  * Version: 2.88 (08-JUN-2010)  * Dual licensed under the MIT and GPL licenses.  * http://jquery.malsup.com/license.html  * Requires: jQuery v1.2.6 or later  */ (function($){var ver="2.88";if($.support==undefined){$.support={opacity:!($.browser.msie)};}function debug(s){if($.fn.cycle.debug){log(s);}}function log(){if(window.console&&window.console.log){window.console.log("[cycle] "+Array.prototype.join.call(arguments," "));}}$.fn.cycle=function(options,arg2){var o={s:this.selector,c:this.context};if(this.length===0&&options!="stop"){if(!$.isReady&&o.s){log("DOM not ready, queuing slideshow");$(function(){$(o.s,o.c).cycle(options,arg2);});return this;}log("terminating; zero elements found by selector"+($.isReady?"":" (DOM not ready)"));return this;}return this.each(function(){var opts=handleArguments(this,options,arg2);if(opts===false){return;}opts.updateActivePagerLink=opts.updateActivePagerLink||$.fn.cycle.updateActivePagerLink;if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=this.cyclePause=0;var $cont=$(this);var $slides=opts.slideExpr?$(opts.slideExpr,this):$cont.children();var els=$slides.get();if(els.length<2){log("terminating; too few slides: "+els.length);return;}var opts2=buildOptions($cont,$slides,els,opts,o);if(opts2===false){return;}var startTime=opts2.continuous?10:getTimeout(els[opts2.currSlide],els[opts2.nextSlide],opts2,!opts2.rev);if(startTime){startTime+=(opts2.delay||0);if(startTime<10){startTime=10;}debug("first timeout: "+startTime);this.cycleTimeout=setTimeout(function(){go(els,opts2,0,(!opts2.rev&&!opts.backwards));},startTime);}});};function handleArguments(cont,options,arg2){if(cont.cycleStop==undefined){cont.cycleStop=0;}if(options===undefined||options===null){options={};}if(options.constructor==String){switch(options){case"destroy":case"stop":var opts=$(cont).data("cycle.opts");if(!opts){return false;}cont.cycleStop++;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);}cont.cycleTimeout=0;$(cont).removeData("cycle.opts");if(options=="destroy"){destroy(opts);}return false;case"toggle":cont.cyclePause=(cont.cyclePause===1)?0:1;checkInstantResume(cont.cyclePause,arg2,cont);return false;case"pause":cont.cyclePause=1;return false;case"resume":cont.cyclePause=0;checkInstantResume(false,arg2,cont);return false;case"prev":case"next":var opts=$(cont).data("cycle.opts");if(!opts){log('options not found, "prev/next" ignored');return false;}$.fn.cycle[options](opts);return false;default:options={fx:options};}return options;}else{if(options.constructor==Number){var num=options;options=$(cont).data("cycle.opts");if(!options){log("options not found, can not advance slide");return false;}if(num<0||num>=options.elements.length){log("invalid slide index: "+num);return false;}options.nextSlide=num;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}if(typeof arg2=="string"){options.oneTimeFx=arg2;}go(options.elements,options,1,num>=options.currSlide);return false;}}return options;function checkInstantResume(isPaused,arg2,cont){if(!isPaused&&arg2===true){var options=$(cont).data("cycle.opts");if(!options){log("options not found, can not resume");return false;}if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}go(options.elements,options,1,(!opts.rev&&!opts.backwards));}}}function removeFilter(el,opts){if(!$.support.opacity&&opts.cleartype&&el.style.filter){try{el.style.removeAttribute("filter");}catch(smother){}}}function destroy(opts){if(opts.next){$(opts.next).unbind(opts.prevNextEvent);}if(opts.prev){$(opts.prev).unbind(opts.prevNextEvent);}if(opts.pager||opts.pagerAnchorBuilder){$.each(opts.pagerAnchors||[],function(){this.unbind().remove();});}opts.pagerAnchors=null;if(opts.destroy){opts.destroy(opts);}}function buildOptions($cont,$slides,els,options,o){var opts=$.extend({},$.fn.cycle.defaults,options||{},$.metadata?$cont.metadata():$.meta?$cont.data():{});if(opts.autostop){opts.countdown=opts.autostopCount||els.length;}var cont=$cont[0];$cont.data("cycle.opts",opts);opts.$cont=$cont;opts.stopCount=cont.cycleStop;opts.elements=els;opts.before=opts.before?[opts.before]:[];opts.after=opts.after?[opts.after]:[];opts.after.unshift(function(){opts.busy=0;});if(!$.support.opacity&&opts.cleartype){opts.after.push(function(){removeFilter(this,opts);});}if(opts.continuous){opts.after.push(function(){go(els,opts,0,(!opts.rev&&!opts.backwards));});}saveOriginalOpts(opts);if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($slides);}if($cont.css("position")=="static"){$cont.css("position","relative");}if(opts.width){$cont.width(opts.width);}if(opts.height&&opts.height!="auto"){$cont.height(opts.height);}if(opts.startingSlide){opts.startingSlide=parseInt(opts.startingSlide);}else{if(opts.backwards){opts.startingSlide=els.length-1;}}if(opts.random){opts.randomMap=[];for(var i=0;i<els.length;i++){opts.randomMap.push(i);}opts.randomMap.sort(function(a,b){return Math.random()-0.5;});opts.randomIndex=1;opts.startingSlide=opts.randomMap[1];}else{if(opts.startingSlide>=els.length){opts.startingSlide=0;}}opts.currSlide=opts.startingSlide||0;var first=opts.startingSlide;$slides.css({position:"absolute",top:0,left:0}).hide().each(function(i){var z;if(opts.backwards){z=first?i<=first?els.length+(i-first):first-i:els.length-i;}else{z=first?i>=first?els.length-(i-first):first-i:els.length-i;}$(this).css("z-index",z);});$(els[first]).css("opacity",1).show();removeFilter(els[first],opts);if(opts.fit&&opts.width){$slides.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}var reshape=opts.containerResize&&!$cont.innerHeight();if(reshape){var maxw=0,maxh=0;for(var j=0;j<els.length;j++){var $e=$(els[j]),e=$e[0],w=$e.outerWidth(),h=$e.outerHeight();if(!w){w=e.offsetWidth||e.width||$e.attr("width");}if(!h){h=e.offsetHeight||e.height||$e.attr("height");}maxw=w>maxw?w:maxw;maxh=h>maxh?h:maxh;}if(maxw>0&&maxh>0){$cont.css({width:maxw+"px",height:maxh+"px"});}}if(opts.pause){$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});}if(supportMultiTransitions(opts)===false){return false;}var requeue=false;options.requeueAttempts=options.requeueAttempts||0;$slides.each(function(){var $el=$(this);this.cycleH=(opts.fit&&opts.height)?opts.height:($el.height()||this.offsetHeight||this.height||$el.attr("height")||0);this.cycleW=(opts.fit&&opts.width)?opts.width:($el.width()||this.offsetWidth||this.width||$el.attr("width")||0);if($el.is("img")){var loadingIE=($.browser.msie&&this.cycleW==28&&this.cycleH==30&&!this.complete);var loadingFF=($.browser.mozilla&&this.cycleW==34&&this.cycleH==19&&!this.complete);var loadingOp=($.browser.opera&&((this.cycleW==42&&this.cycleH==19)||(this.cycleW==37&&this.cycleH==17))&&!this.complete);var loadingOther=(this.cycleH==0&&this.cycleW==0&&!this.complete);if(loadingIE||loadingFF||loadingOp||loadingOther){if(o.s&&opts.requeueOnImageNotLoaded&&++options.requeueAttempts<100){log(options.requeueAttempts," - img slide not loaded, requeuing slideshow: ",this.src,this.cycleW,this.cycleH);setTimeout(function(){$(o.s,o.c).cycle(options);},opts.requeueTimeout);requeue=true;return false;}else{log("could not determine size of image: "+this.src,this.cycleW,this.cycleH);}}}return true;});if(requeue){return false;}opts.cssBefore=opts.cssBefore||{};opts.animIn=opts.animIn||{};opts.animOut=opts.animOut||{};$slides.not(":eq("+first+")").css(opts.cssBefore);if(opts.cssFirst){$($slides[first]).css(opts.cssFirst);}if(opts.timeout){opts.timeout=parseInt(opts.timeout);if(opts.speed.constructor==String){opts.speed=$.fx.speeds[opts.speed]||parseInt(opts.speed);}if(!opts.sync){opts.speed=opts.speed/2;}var buffer=opts.fx=="shuffle"?500:250;while((opts.timeout-opts.speed)<buffer){opts.timeout+=opts.speed;}}if(opts.easing){opts.easeIn=opts.easeOut=opts.easing;}if(!opts.speedIn){opts.speedIn=opts.speed;}if(!opts.speedOut){opts.speedOut=opts.speed;}opts.slideCount=els.length;opts.currSlide=opts.lastSlide=first;if(opts.random){if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.backwards){opts.nextSlide=opts.startingSlide==0?(els.length-1):opts.startingSlide-1;}else{opts.nextSlide=opts.startingSlide>=(els.length-1)?0:opts.startingSlide+1;}}if(!opts.multiFx){var init=$.fn.cycle.transitions[opts.fx];if($.isFunction(init)){init($cont,$slides,opts);}else{if(opts.fx!="custom"&&!opts.multiFx){log("unknown transition: "+opts.fx,"; slideshow terminating");return false;}}}var e0=$slides[first];if(opts.before.length){opts.before[0].apply(e0,[e0,e0,opts,true]);}if(opts.after.length>1){opts.after[1].apply(e0,[e0,e0,opts,true]);}if(opts.next){$(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1);});}if(opts.pager||opts.pagerAnchorBuilder){buildPager(els,opts);}exposeAddSlide(opts,els);return opts;}function saveOriginalOpts(opts){opts.original={before:[],after:[]};opts.original.cssBefore=$.extend({},opts.cssBefore);opts.original.cssAfter=$.extend({},opts.cssAfter);opts.original.animIn=$.extend({},opts.animIn);opts.original.animOut=$.extend({},opts.animOut);$.each(opts.before,function(){opts.original.before.push(this);});$.each(opts.after,function(){opts.original.after.push(this);});}function supportMultiTransitions(opts){var i,tx,txs=$.fn.cycle.transitions;if(opts.fx.indexOf(",")>0){opts.multiFx=true;opts.fxs=opts.fx.replace(/\s*/g,"").split(",");for(i=0;i<opts.fxs.length;i++){var fx=opts.fxs[i];tx=txs[fx];if(!tx||!txs.hasOwnProperty(fx)||!$.isFunction(tx)){log("discarding unknown transition: ",fx);opts.fxs.splice(i,1);i--;}}if(!opts.fxs.length){log("No valid transitions named; slideshow terminating.");return false;}}else{if(opts.fx=="all"){opts.multiFx=true;opts.fxs=[];for(p in txs){tx=txs[p];if(txs.hasOwnProperty(p)&&$.isFunction(tx)){opts.fxs.push(p);}}}}if(opts.multiFx&&opts.randomizeEffects){var r1=Math.floor(Math.random()*20)+30;for(i=0;i<r1;i++){var r2=Math.floor(Math.random()*opts.fxs.length);opts.fxs.push(opts.fxs.splice(r2,1)[0]);}debug("randomized fx sequence: ",opts.fxs);}return true;}function exposeAddSlide(opts,els){opts.addSlide=function(newSlide,prepend){var $s=$(newSlide),s=$s[0];if(!opts.autostopCount){opts.countdown++;}els[prepend?"unshift":"push"](s);if(opts.els){opts.els[prepend?"unshift":"push"](s);}opts.slideCount=els.length;$s.css("position","absolute");$s[prepend?"prependTo":"appendTo"](opts.$cont);if(prepend){opts.currSlide++;opts.nextSlide++;}if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($s);}if(opts.fit&&opts.width){$s.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}s.cycleH=(opts.fit&&opts.height)?opts.height:$s.height();s.cycleW=(opts.fit&&opts.width)?opts.width:$s.width();$s.css(opts.cssBefore);if(opts.pager||opts.pagerAnchorBuilder){$.fn.cycle.createPagerAnchor(els.length-1,s,$(opts.pager),els,opts);}if($.isFunction(opts.onAddSlide)){opts.onAddSlide($s);}else{$s.hide();}};}$.fn.cycle.resetState=function(opts,fx){fx=fx||opts.fx;opts.before=[];opts.after=[];opts.cssBefore=$.extend({},opts.original.cssBefore);opts.cssAfter=$.extend({},opts.original.cssAfter);opts.animIn=$.extend({},opts.original.animIn);opts.animOut=$.extend({},opts.original.animOut);opts.fxFn=null;$.each(opts.original.before,function(){opts.before.push(this);});$.each(opts.original.after,function(){opts.after.push(this);});var init=$.fn.cycle.transitions[fx];if($.isFunction(init)){init(opts.$cont,$(opts.elements),opts);}};function go(els,opts,manual,fwd){if(manual&&opts.busy&&opts.manualTrump){debug("manualTrump in go(), stopping active transition");$(els).stop(true,true);opts.busy=false;}if(opts.busy){debug("transition active, ignoring new tx request");return;}var p=opts.$cont[0],curr=els[opts.currSlide],next=els[opts.nextSlide];if(p.cycleStop!=opts.stopCount||p.cycleTimeout===0&&!manual){return;}if(!manual&&!p.cyclePause&&!opts.bounce&&((opts.autostop&&(--opts.countdown<=0))||(opts.nowrap&&!opts.random&&opts.nextSlide<opts.currSlide))){if(opts.end){opts.end(opts);}return;}var changed=false;if((manual||!p.cyclePause)&&(opts.nextSlide!=opts.currSlide)){changed=true;var fx=opts.fx;curr.cycleH=curr.cycleH||$(curr).height();curr.cycleW=curr.cycleW||$(curr).width();next.cycleH=next.cycleH||$(next).height();next.cycleW=next.cycleW||$(next).width();if(opts.multiFx){if(opts.lastFx==undefined||++opts.lastFx>=opts.fxs.length){opts.lastFx=0;}fx=opts.fxs[opts.lastFx];opts.currFx=fx;}if(opts.oneTimeFx){fx=opts.oneTimeFx;opts.oneTimeFx=null;}$.fn.cycle.resetState(opts,fx);if(opts.before.length){$.each(opts.before,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});}var after=function(){$.each(opts.after,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});};debug("tx firing; currSlide: "+opts.currSlide+"; nextSlide: "+opts.nextSlide);opts.busy=1;if(opts.fxFn){opts.fxFn(curr,next,opts,after,fwd,manual&&opts.fastOnEvent);}else{if($.isFunction($.fn.cycle[opts.fx])){$.fn.cycle[opts.fx](curr,next,opts,after,fwd,manual&&opts.fastOnEvent);}else{$.fn.cycle.custom(curr,next,opts,after,fwd,manual&&opts.fastOnEvent);}}}if(changed||opts.nextSlide==opts.currSlide){opts.lastSlide=opts.currSlide;if(opts.random){opts.currSlide=opts.nextSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];if(opts.nextSlide==opts.currSlide){opts.nextSlide=(opts.currSlide==opts.slideCount-1)?0:opts.currSlide+1;}}else{if(opts.backwards){var roll=(opts.nextSlide-1)<0;if(roll&&opts.bounce){opts.backwards=!opts.backwards;opts.nextSlide=1;opts.currSlide=0;}else{opts.nextSlide=roll?(els.length-1):opts.nextSlide-1;opts.currSlide=roll?0:opts.nextSlide+1;}}else{var roll=(opts.nextSlide+1)==els.length;if(roll&&opts.bounce){opts.backwards=!opts.backwards;opts.nextSlide=els.length-2;opts.currSlide=els.length-1;}else{opts.nextSlide=roll?0:opts.nextSlide+1;opts.currSlide=roll?els.length-1:opts.nextSlide-1;}}}}if(changed&&opts.pager){opts.updateActivePagerLink(opts.pager,opts.currSlide,opts.activePagerClass);}var ms=0;if(opts.timeout&&!opts.continuous){ms=getTimeout(els[opts.currSlide],els[opts.nextSlide],opts,fwd);}else{if(opts.continuous&&p.cyclePause){ms=10;}}if(ms>0){p.cycleTimeout=setTimeout(function(){go(els,opts,0,(!opts.rev&&!opts.backwards));},ms);}}$.fn.cycle.updateActivePagerLink=function(pager,currSlide,clsName){$(pager).each(function(){$(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);});};function getTimeout(curr,next,opts,fwd){if(opts.timeoutFn){var t=opts.timeoutFn.call(curr,curr,next,opts,fwd);while((t-opts.speed)<250){t+=opts.speed;}debug("calculated timeout: "+t+"; speed: "+opts.speed);if(t!==false){return t;}}return opts.timeout;}$.fn.cycle.next=function(opts){advance(opts,opts.rev?-1:1);};$.fn.cycle.prev=function(opts){advance(opts,opts.rev?1:-1);};function advance(opts,val){var els=opts.elements;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if(opts.random&&val<0){opts.randomIndex--;if(--opts.randomIndex==-2){opts.randomIndex=els.length-2;}else{if(opts.randomIndex==-1){opts.randomIndex=els.length-1;}}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.random){opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.currSlide+val;if(opts.nextSlide<0){if(opts.nowrap){return false;}opts.nextSlide=els.length-1;}else{if(opts.nextSlide>=els.length){if(opts.nowrap){return false;}opts.nextSlide=0;}}}}var cb=opts.onPrevNextEvent||opts.prevNextClick;if($.isFunction(cb)){cb(val>0,opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,val>=0);return false;}function buildPager(els,opts){var $p=$(opts.pager);$.each(els,function(i,o){$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);});opts.updateActivePagerLink(opts.pager,opts.startingSlide,opts.activePagerClass);}$.fn.cycle.createPagerAnchor=function(i,el,$p,els,opts){var a;if($.isFunction(opts.pagerAnchorBuilder)){a=opts.pagerAnchorBuilder(i,el);debug("pagerAnchorBuilder("+i+", el) returned: "+a);}else{a='<a href="#">'+(i+1)+"</a>";}if(!a){return;}var $a=$(a);if($a.parents("body").length===0){var arr=[];if($p.length>1){$p.each(function(){var $clone=$a.clone(true);$(this).append($clone);arr.push($clone[0]);});$a=$(arr);}else{$a.appendTo($p);}}opts.pagerAnchors=opts.pagerAnchors||[];opts.pagerAnchors.push($a);$a.bind(opts.pagerEvent,function(e){e.preventDefault();opts.nextSlide=i;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}var cb=opts.onPagerEvent||opts.pagerClick;if($.isFunction(cb)){cb(opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,opts.currSlide<i);});if(!/^click/.test(opts.pagerEvent)&&!opts.allowPagerClickBubble){$a.bind("click.cycle",function(){return false;});}if(opts.pauseOnPagerHover){$a.hover(function(){opts.$cont[0].cyclePause++;},function(){opts.$cont[0].cyclePause--;});}};$.fn.cycle.hopsFromLast=function(opts,fwd){var hops,l=opts.lastSlide,c=opts.currSlide;if(fwd){hops=c>l?c-l:opts.slideCount-l;}else{hops=c<l?l-c:l+opts.slideCount-c;}return hops;};function clearTypeFix($slides){debug("applying clearType background-color hack");function hex(s){s=parseInt(s).toString(16);return s.length<2?"0"+s:s;}function getBg(e){for(;e&&e.nodeName.toLowerCase()!="html";e=e.parentNode){var v=$.css(e,"background-color");if(v.indexOf("rgb")>=0){var rgb=v.match(/\d+/g);return"#"+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);}if(v&&v!="transparent"){return v;}}return"#ffffff";}$slides.each(function(){$(this).css("background-color",getBg(this));});}$.fn.cycle.commonReset=function(curr,next,opts,w,h,rev){$(opts.elements).not(curr).hide();opts.cssBefore.opacity=1;opts.cssBefore.display="block";if(w!==false&&next.cycleW>0){opts.cssBefore.width=next.cycleW;}if(h!==false&&next.cycleH>0){opts.cssBefore.height=next.cycleH;}opts.cssAfter=opts.cssAfter||{};opts.cssAfter.display="none";$(curr).css("zIndex",opts.slideCount+(rev===true?1:0));$(next).css("zIndex",opts.slideCount+(rev===true?0:1));};$.fn.cycle.custom=function(curr,next,opts,cb,fwd,speedOverride){var $l=$(curr),$n=$(next);var speedIn=opts.speedIn,speedOut=opts.speedOut,easeIn=opts.easeIn,easeOut=opts.easeOut;$n.css(opts.cssBefore);if(speedOverride){if(typeof speedOverride=="number"){speedIn=speedOut=speedOverride;}else{speedIn=speedOut=1;}easeIn=easeOut=null;}var fn=function(){$n.animate(opts.animIn,speedIn,easeIn,cb);};$l.animate(opts.animOut,speedOut,easeOut,function(){if(opts.cssAfter){$l.css(opts.cssAfter);}if(!opts.sync){fn();}});if(opts.sync){fn();}};$.fn.cycle.transitions={fade:function($cont,$slides,opts){$slides.not(":eq("+opts.currSlide+")").css("opacity",0);opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.opacity=0;});opts.animIn={opacity:1};opts.animOut={opacity:0};opts.cssBefore={top:0,left:0};}};$.fn.cycle.ver=function(){return ver;};$.fn.cycle.defaults={fx:"fade",timeout:4000,timeoutFn:null,continuous:0,speed:1000,speedIn:null,speedOut:null,next:null,prev:null,onPrevNextEvent:null,prevNextEvent:"click.cycle",pager:null,onPagerEvent:null,pagerEvent:"click.cycle",allowPagerClickBubble:false,pagerAnchorBuilder:null,before:null,after:null,end:null,easing:null,easeIn:null,easeOut:null,shuffle:null,animIn:null,animOut:null,cssBefore:null,cssAfter:null,fxFn:null,height:"auto",startingSlide:0,sync:1,random:0,fit:0,containerResize:1,pause:0,pauseOnPagerHover:0,autostop:0,autostopCount:0,delay:0,slideExpr:null,cleartype:!$.support.opacity,cleartypeNoBg:false,nowrap:0,fastOnEvent:0,randomizeEffects:1,rev:0,manualTrump:true,requeueOnImageNotLoaded:true,requeueTimeout:250,activePagerClass:"activeSlide",updateActivePagerLink:null,backwards:false};})(jQuery); /*  * jQuery Cycle Plugin Transition Definitions  * This script is a plugin for the jQuery Cycle Plugin  * Examples and documentation at: http://malsup.com/jquery/cycle/  * Copyright (c) 2007-2010 M. Alsup  * Version:	 2.72  * Dual licensed under the MIT and GPL licenses:  * http://www.opensource.org/licenses/mit-license.php  * http://www.gnu.org/licenses/gpl.html  */ (function($){$.fn.cycle.transitions.none=function($cont,$slides,opts){opts.fxFn=function(curr,next,opts,after){$(next).show();$(curr).hide();after();};};$.fn.cycle.transitions.scrollUp=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssBefore={top:h,left:0};opts.cssFirst={top:0};opts.animIn={top:0};opts.animOut={top:-h};};$.fn.cycle.transitions.scrollDown=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssFirst={top:0};opts.cssBefore={top:-h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.scrollLeft=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:0-w};};$.fn.cycle.transitions.scrollRight=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:-w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.scrollHorz=function($cont,$slides,opts){$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.left=fwd?(next.cycleW-1):(1-next.cycleW);opts.animOut.left=fwd?-curr.cycleW:curr.cycleW;});opts.cssFirst={left:0};opts.cssBefore={top:0};opts.animIn={left:0};opts.animOut={top:0};};$.fn.cycle.transitions.scrollVert=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.top=fwd?(1-next.cycleH):(next.cycleH-1);opts.animOut.top=fwd?curr.cycleH:-curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0};opts.animIn={top:0};opts.animOut={left:0};};$.fn.cycle.transitions.slideX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;});opts.cssBefore={left:0,top:0,width:0};opts.animIn={width:"show"};opts.animOut={width:0};};$.fn.cycle.transitions.slideY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;});opts.cssBefore={left:0,top:0,height:0};opts.animIn={height:"show"};opts.animOut={height:0};};$.fn.cycle.transitions.shuffle=function($cont,$slides,opts){var i,w=$cont.css("overflow","visible").width();$slides.css({left:0,top:0});opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);});if(!opts.speedAdjusted){opts.speed=opts.speed/2;opts.speedAdjusted=true;}opts.random=0;opts.shuffle=opts.shuffle||{left:-w,top:15};opts.els=[];for(i=0;i<$slides.length;i++){opts.els.push($slides[i]);}for(i=0;i<opts.currSlide;i++){opts.els.push(opts.els.shift());}opts.fxFn=function(curr,next,opts,cb,fwd){var $el=fwd?$(curr):$(next);$(next).css(opts.cssBefore);var count=opts.slideCount;$el.animate(opts.shuffle,opts.speedIn,opts.easeIn,function(){var hops=$.fn.cycle.hopsFromLast(opts,fwd);for(var k=0;k<hops;k++){fwd?opts.els.push(opts.els.shift()):opts.els.unshift(opts.els.pop());}if(fwd){for(var i=0,len=opts.els.length;i<len;i++){$(opts.els[i]).css("z-index",len-i+count);}}else{var z=$(curr).css("z-index");$el.css("z-index",parseInt(z)+1+count);}$el.animate({left:0,top:0},opts.speedOut,opts.easeOut,function(){$(fwd?this:curr).hide();if(cb){cb();}});});};opts.cssBefore={display:"block",opacity:1,top:0,left:0};};$.fn.cycle.transitions.turnUp=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=next.cycleH;opts.animIn.height=next.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,height:0};opts.animIn={top:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnDown=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,top:0,height:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnLeft=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=next.cycleW;opts.animIn.width=next.cycleW;});opts.cssBefore={top:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.turnRight=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={top:0,left:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.zoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false,true);opts.cssBefore.top=next.cycleH/2;opts.cssBefore.left=next.cycleW/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};opts.animOut={width:0,height:0,top:curr.cycleH/2,left:curr.cycleW/2};});opts.cssFirst={top:0,left:0};opts.cssBefore={width:0,height:0};};$.fn.cycle.transitions.fadeZoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false);opts.cssBefore.left=next.cycleW/2;opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};});opts.cssBefore={width:0,height:0};opts.animOut={opacity:0};};$.fn.cycle.transitions.blindX=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.blindY=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.blindZ=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();var w=$cont.width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:w};opts.animIn={top:0,left:0};opts.animOut={top:h,left:w};};$.fn.cycle.transitions.growX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=this.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:0};});opts.cssBefore={width:0,top:0};};$.fn.cycle.transitions.growY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=this.cycleH/2;opts.animIn={top:0,height:this.cycleH};opts.animOut={top:0};});opts.cssBefore={height:0,left:0};};$.fn.cycle.transitions.curtainX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true,true);opts.cssBefore.left=next.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:curr.cycleW/2,width:0};});opts.cssBefore={top:0,width:0};};$.fn.cycle.transitions.curtainY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false,true);opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,height:next.cycleH};opts.animOut={top:curr.cycleH/2,height:0};});opts.cssBefore={left:0,height:0};};$.fn.cycle.transitions.cover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);if(d=="right"){opts.cssBefore.left=-w;}else{if(d=="up"){opts.cssBefore.top=h;}else{if(d=="down"){opts.cssBefore.top=-h;}else{opts.cssBefore.left=w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.uncover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(d=="right"){opts.animOut.left=w;}else{if(d=="up"){opts.animOut.top=-h;}else{if(d=="down"){opts.animOut.top=h;}else{opts.animOut.left=-w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.toss=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(!opts.animOut.left&&!opts.animOut.top){opts.animOut={left:w*2,top:-h/2,opacity:0};}else{opts.animOut.opacity=0;}});opts.cssBefore={left:0,top:0};opts.animIn={left:0};};$.fn.cycle.transitions.wipe=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.cssBefore=opts.cssBefore||{};var clip;if(opts.clip){if(/l2r/.test(opts.clip)){clip="rect(0px 0px "+h+"px 0px)";}else{if(/r2l/.test(opts.clip)){clip="rect(0px "+w+"px "+h+"px "+w+"px)";}else{if(/t2b/.test(opts.clip)){clip="rect(0px "+w+"px 0px 0px)";}else{if(/b2t/.test(opts.clip)){clip="rect("+h+"px "+w+"px "+h+"px 0px)";}else{if(/zoom/.test(opts.clip)){var top=parseInt(h/2);var left=parseInt(w/2);clip="rect("+top+"px "+left+"px "+top+"px "+left+"px)";}}}}}}opts.cssBefore.clip=opts.cssBefore.clip||clip||"rect(0px 0px 0px 0px)";var d=opts.cssBefore.clip.match(/(\d+)/g);var t=parseInt(d[0]),r=parseInt(d[1]),b=parseInt(d[2]),l=parseInt(d[3]);opts.before.push(function(curr,next,opts){if(curr==next){return;}var $curr=$(curr),$next=$(next);$.fn.cycle.commonReset(curr,next,opts,true,true,false);opts.cssAfter.display="block";var step=1,count=parseInt((opts.speedIn/13))-1;(function f(){var tt=t?t-parseInt(step*(t/count)):0;var ll=l?l-parseInt(step*(l/count)):0;var bb=b<h?b+parseInt(step*((h-b)/count||1)):h;var rr=r<w?r+parseInt(step*((w-r)/count||1)):w;$next.css({clip:"rect("+tt+"px "+rr+"px "+bb+"px "+ll+"px)"});(step++<=count)?setTimeout(f,13):$curr.css("display","none");})();});opts.cssBefore={display:"block",opacity:1,top:0,left:0};opts.animIn={left:0};opts.animOut={left:0};};})(jQuery); //]]> </script> <script type='text/javascript'> /* <![CDATA[ */ jQuery.noConflict(); jQuery(function(){ 	jQuery('ul.menu-primary').superfish({ 	animation: {opacity:'show'}, autoArrows:  true,                 dropShadows: false,                 speed: 200,                 delay: 800                 });             }); jQuery(function(){ 	jQuery('ul.menu-secondary').superfish({ 	animation: {opacity:'show'}, autoArrows:  true,                 dropShadows: false,                 speed: 200,                 delay: 800                 });             }); jQuery(document).ready(function() { 	jQuery('.fp-slides').cycle({ 		fx: 'fade', 		timeout: 4000, 		delay: 0, 		speed: 1000, 		next: '.fp-next', 		prev: '.fp-prev', 		pager: '.fp-pager', 		continuous: 0, 		sync: 1, 		pause: 1, 		pauseOnPagerHover: 1, 		cleartype: true, 		cleartypeNoBg: true 	});  }); /* ]]> */ </script></blockquote>
<ol>
<li>Then search for ]]></b:skin> </li>
</ol>
<blockquote class="tr_bq">
<ol>
<li>Just above it paste the CSS code below, </li>
</ol>
/*-------------------- Bloggerdaddy jQuery Image Slider -------------*/ 
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;} .fp-slides{} .fp-post{padding:13px;} .fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} .fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} .fp-title{color:#787878;font:bold
 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; 
text-transform:uppercase;} .fp-title a{color:#000;text-decoration:none;} .fp-title a:hover{color:#0080fF;text-decoration:none;} .fp-label{color:#504D4D;margin:15px
 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px 
Arial,Helvetica,Sans-serif;} .fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;} .fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;} .fp-nav{width:590px;padding:0px 10px;height:14px;} .fp-pager
 
a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA20DR2lueY_CHlj59zGr-EeTkPM5LBC5sVqucmpwy6PYQCQhyFC68WpJcVwTb9DlN3CWhFn45bUxfi1iyAVQvyK3Kge60u4w9U8gijTC7zoN6KI1rYfs68D9HdZWcBd9p15nWksJaO_w/s1600/featured-pager.png);cursor:pointer;margin:3px
 6px 0 
0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0
 0;} .fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;} .fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOitciVm8GDfmGNgfNIP7kXyFte0nlqugqEfIP8sd5pHCfJ8H6ehvJXVPyXOJgJSD1G4lyKhvshsj6OJ0OkCRHY4a4SxyVxKJUxI57tVzy-W9Jpt1zKSHBcEHEfVZuPlG-zmjMJhheDHg/s1600/featured-prev.png)
 top left no-repeat;} .fp-prev:hover{opacity:1;} .fp-prev:active{opacity:0.7;} .fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXm16a5Kjm-1Bdkg22EYGZ8w21YaNWJIafCa5FFTQuRVGuClXbW3M22zf9BW4AJoFOj0qsEMUsP3CCGYFxwpEGGy4xSpY4nUL52ycixyORQl9M6AebohcO8eMZanHZultrRrEloWHRmZ4/s1600/featured-next.png;)
 top left no-repeat} .fp-next:hover{opacity:1;} .fp-next:active{opacity:0.7;}</blockquote>
   7.   Now Search for this, 
<blockquote class="tr_bq">
<div id='main-wrapper'></blockquote>
 Hint: This code is located near <div id='content-wrapper'>

PS: In this part most of you will face problems as the coding 
for each template differ. If you could not find this code then do not 
panic and simply post your Blog URL in the comments.<div>
 
   8.   and just below it add the HTML code below,</div>
<blockquote>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div class='featuredposts clearfix'> 
<div class='fp-slides'> 
<div class='fp-post'> <div class='fp-thumbnail'><a href='ADD POST URL-1 HERE'><img src='ADD IMAGE-1 LINK HERE'/></a></div><h3 class='fp-title'><a href='ADD POST URL-1 HERE'>WRITE POST TITLE HERE...</a></h3> WRITE POST DESCRIPTION HERE... </div> 
<div class='fp-post'> <div class='fp-thumbnail'><a href='ADD POST URL-2 HERE'><img src='ADD IMAGE-2 LINK HERE'/></a></div> <h3 class='fp-title'><a href='ADD POST URL-2 HERE'>WRITE POST TITLE HERE...</a></h3> WRITE POST DESCRIPTION HERE... </div> 
<div class='fp-post'> <div class='fp-thumbnail'><a href='ADD POST URL-3 HERE'><img src='ADD IMAGE-3 LINK HERE'/></a></div> <h3 class='fp-title'><a href='ADD POST URL-3 HERE'>WRITE POST TITLE HERE...</a></h3> WRITE POST DESCRIPTION HERE... </div> 
<div class='fp-post'> <div class='fp-thumbnail'><a href='ADD POST URL-4 HERE'><img src='ADD IMAGE-4 LINK HERE'/></a></div> <h3 class='fp-title'><a href='ADD POST URL-4 HERE'>WRITE POST TITLE HERE...</a></h3> WRITE POST DESCRIPTION HERE... </div> 
<div class='fp-post'> <div class='fp-thumbnail'><a href='ADD POST URL-5 HERE'><img src='ADD IMAGE-5 LINK HERE'/></a></div> <h3 class='fp-title'><a href='ADD POST URL-5 HERE'>WRITE POST TITLE HERE...</a></h3> WRITE POST DESCRIPTION HERE... </div> 
</div>          
<div class='fp-nav clearfix'>                <a class='fp-next' href='#fp-next'/> <a class='fp-prev' href='#fp-prev'/> </div>          </div> </b:if></b:if></blockquote>
Make these changes: 
<ul>
<li>Replace ADD POST URL-1, 2, 3, 4, 5 HERE with the URL of your 
post pages one by one. These URLs will be added twice for each slide. 
Once for the image and second time for the Post title. </li>
<li>Replace ADD IMAGE-5 LINK HERE with the Image link of the Featured post. By default all images have width:580px; height:266px;
 You can edit the image size by editing the width and height in the CSS 
code shared in step#6. Make sure all your images must have same size </li>
<li>Replace WRITE POST TITLE HERE... with the title of your Post Page </li>
<li>Replace WRITE POST DESCRIPTION HERE
 with the Post Page description. You can write the first few lines of 
your post here and the readers can read the full post by clicking the 
title. </li>
<li>To Change the Overall size of the slider container then edit in step#6 the following two codes -> width:608px and height:400px </li>
</ul>
   9.   Save your template and you are done! Visit your blog and say Bingo! :> </div>

Widgets jQuery Image Slider For Blogger - V3

As per your requests we are glad to present yet another stunning version of Image slideshow Widget for BlogSpot blogs. This widget ...

How to make all Links in Blog to Open in Another Tab

How to Create a Sitemap or Table Of Contents Page For Blogger

Animated Colour changing Background for Blogger

Facebook Popup Like Box Widget For Blogger

jQuery Image Slider For Blogger - V3

Popular Posts

COMMENT

Blog Archive