Join Over 10,000 Blogger Tricks !

Tuesday, October 21, 2014

Add Pinterest Pin It Mouseover Button on Blogger Images

Pinterest Pin It Mouseover Button on Blogger: Images have consistently played a notable role in attracting new visitors through search engines like Bing and Google. But when Pinterest decided to enter the social networking blend, it upped the ante in a big way.
Pinterest Pin It Mouseover Button
Pinterest lets site owners use their service to include a 'pin' to content pictures in the website or pictures. Visitors of that site can decide to click in the reddish Pinterest button and add it when they see a picture they enjoy.

Whoever pressed your Pinterest pin it button share it with friends or followers in the service, and are now able to see your picture on their dash. They are also able to come across this picture when users add the picture and type labels or key words. Moreover, that picture links can include a description title of your website name or post and to your own website when clicked on.

Thus, adding the Pinterest pin it button can let you profit from individuals who'd located your pictures and lots of new traffic and post links utilizing the service. Below are a few measures to incorporate your own Pinterest button.

Pinterest Pin It Mouseover Button on Blogger Images

Please follow below steps to add Pinterest Pin It Mouseover Button on Blogger Images:

Step 1: Edit your Blogger Template

Login into your blogger dashboard and Go to Template than click on "Edit HTML" button as shown in below picture.
Pinterest Pin It Button

When your blogger editer open, Click anywhere inside the code area and search below code with pressing the CTRL + F keys:
</body>

Step 2: Add The Pinterest Pin it Script

Copy and Paste the following script just above </body>:
<script>
//<![CDATA[
var custom_pinit_button = "http://4.bp.blogspot.com/-3CPCJ031n9M/U_vWZXUV1SI/AAAAAAAAKPA/8Q3N34ieaBw/s1600/pinit-button.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://usefbcover.com/public/pinterest-button1.js' type='text/javascript'>
// Visit haakblog.com for more widgets and tricks.
</script>

Step 3: Change Position of the Pin it! button

The amazing thing concerning this code is that you have some liberty over where the image will be gone over by the Pinterest button. Have a look in the code which you just copied and pasted to the HTML for the word 'centre'.

var pinit_button_position = "center";

Replace center with one of these texts if you want to move the pin to a different area:
  • topleft
  • topright
  • bottomleft
  • bottomright
and if you want to change pin it image than replace your own image url with below url in script

var custom_pinit_button = "http://4.bp.blogspot.com/-3CPCJ031n9M/U_vWZXUV1SI/AAAAAAAAKPA/8Q3N34ieaBw/s1600/pinit-button.png";

Step 4: Save The Template

Make sure that you added everything right, browse to your current post which you made that include pictures and then save the template. Hover your mouse within the picture for Blogger exhibited in the picture and also you need to now see a red Pinterest button. Examine it out as well as see it it works.

This button's single drawback is that it will not require the data out of your custom picture names. It is mechanically set to choose the name of the blog post where the picture is found. Thus, you will want to pay closer attention to the name of the places to ensure it fits strongly together with the pictures being revealed.

Monday, October 20, 2014

Add Pinterest Follow Me & Pin It Button for Blogger

Today we provide you how to Add Pinterest Follow Me & Pin It Button for Blogger blog easily. This pin it button allows your visitors to share your posts on Pinterest. Its pulls all images when your reader click on pin it button and choose images which one they pin on Pinterest. Pin it button also counts all pin and displays how many a blog post pinned.
Pinterest Follow Me Blogger

We also provide you code of follow me button for Pinterest to increase your Pinterest followers. This follower buttons takes your readers to your profile page and they will follow your each board individually or follow all boards at one click as they wish.

Add Pinterest Follow Me & Pin It Button For Blogger

Please follow below steps to Add Pinterest Follow Me & Pin It Button for Blogger:

For Pinterest Follow Me Button

Follow below steps to add Pinterest Follow me button on your blogger blog:

Step 1

Go to Blogger account and select your blog which you want to add Pinterest follow me button.

Step 2

Go to Layout and click on Add a Gadget Button as shown in below picture.
Pinterest Follow Me Button To Blogger

Step 3

When you click on Add a Gadget button a popup window will open with all gadgets list. Please select HTML/JavaScript from Gadgets List as shown in below picture.
Pinterest Follow Me Button

Step 4

Select your Style and Copy & Paste below code in HTML/JavaScript text box. Also replace USERNAME with your Pinterest username:

Style1
Pinterest Follow Me

<a href="http://pinterest.com/USERNAME/"><img src="http://s-passets-ec.pinimg.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a><a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>

Style2
Follow Me Button

<a href="http://pinterest.com/USERNAME/"><img src="http://s-passets-ec.pinimg.com/images/about/buttons/pinterest-button.png" width="80" height="28" alt="Follow Me on Pinterest" /></a><a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>

Style3
Follow Me

<a href="http://pinterest.com/USERNAME/"><img src="http://s-passets-ec.pinimg.com/images/about/buttons/big-p-button.png" width="60" height="60" alt="Follow Me on Pinterest" /></a><a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>

Step 5

Click on Save Button.

For Pinterest Pin It Button
Pin It Button To Blogger

Follow below steps to add Pinterest Pin it button on your blogger blog:

Step 1

Go to Blogger account and select your blog which you want to add Pinterest Pin It button.

Step 2

Go to Template and Click on Edit HTML button as shown in below picture.
Pin It Button

Step 3

Now search below code with the help of CTRL + F:
<data:post.body/>

Step 4

Copy and Paste below code after it:
<!-- Pinterest button Start by BloggerSentral.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest button End -->
Tips For Button placement : 

Position for top of post 
  • Place the button code before <data:post.body/>
Button alignment 
  • Align right: set it to right; 
  • Align center: set it to center;

Step 5

Click on Save Button.

How to Add Email Subscription Box Widget for Blogger

Today's we give you blogger tips to Add Email Subscription Box Widget for Blogger for get more subscriber to your blog. You can get more traffic with Email subscription. We give you step by step guide to add email subscription box with Facebook, Twitter, Pinterest and Rss Subscriber Icons. This is very good looking and attractive widget for blogger to increase RSS subscriber with Facebook Fan Page, Twitter Account and Pinterest Icon.
Email Subscription Box Widget

Add Email Subscription Box to Blogger

We give you step by step guide to Add Email Subscription Box Widget for Blogger, Please follow below induction to add widget on your blog:

Step 1

Login into Blogger Dashboard

Step 2

Go to Layout and Click on Add Gadgets as shown in below picture.

Email Subscription Box

Step 3

When you click Add a Gadgets a new popup will be opened, select HTML/JavaScript from list.

Email Subscription Box

Step 4

Copy and paste below code:
 <style>   .NNBTsocial_box-email{   background:Fff no-repeat 0px 12px ; width:270px;float:center;font-size:1.4em;font-weight:bold;margin:2px 20px 0px 10px;color:#686B6C;  }  .NNBTsocial_box-emailsubmit{   background:#0084CE;cursor:pointer;  color:#fff; border:none;padding:3px;margin:0 0 0px 0;text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);   -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; font:12px sans-serif;  }   .NNBTsocial_box-emailsubmit:hover{   background:#E98313;   }   .textarea{   padding:2px; margin:0px 2px 0px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);   -moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px;   width:200px; height:20px;color:#666;}  #socialboxNBT   {  text-align:center;font-weight:bold;padding:5px;border:1px solid black;width:300px;  -moz-box-shadow: 0px 0px 8px #000000;-webkit-box-shadow: 0px 0px 8px #000000;box-shadow: 0px 0px 8px #000000;}  </style>  <br />  <div id="socialboxNBT">  <a href="http://feeds.feedburner.com/haakblog" imageanchor="1" rel="nofollow" style="float: center; margin-left: .5em; margin-right: 1em;" target="blank"><img border="0" src="http://2.bp.blogspot.com/-Me9LxF5fd88/UftVNgkTeQI/AAAAAAAAAMc/86ydsLiCHvw/s1600/NNBT-rss.png" /></a>  Submit your Email Address to Get Free latest Articles Directly to your Inbox  <br />  <div class="NNBTsocial_box-email">  <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=NBTLab', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">  <input class="textarea" gtbfieldid="3" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if undefinedthis.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" type="text" value="Enter email address here..." />   <input name="uri" type="hidden" value="haakblog" /><input name="loc" type="hidden" value="en_US" />   <input class="NNBTsocial_box-emailsubmit" type="submit" value="Submit" />   </form>  </div>  <style class="text/css">  table  {border-bottom: 0px solid #E6E6E6;float: center;width: 300px;margin:-8px 0 0 0px;}  .subicons  {border-right: 0px solid #E6E6E6;}  .Fadeout {filter:alphaundefinedopacity=100);opacity: 1.0;border:0;  }  .Fadeout:hover{filter:alphaundefinedopacity=80);opacity: 0.8;border:0;  }  </style>  <br /><div class="table"><table>  <tbody><tr>  <td><div class="subicons">  <a class="Fadeout" href="http://www.facebook.com/haakblog" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-NoRUNi2o45s/UftVLmpT6PI/AAAAAAAAAMI/nlKQi-I9WuA/s1600/NNBT-facebook-icon.png" /></a></div>  </td><td><div class="subicons">  <a class="Fadeout" href="http://www.twitter.com/haakblog" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-MAFru3zy4EE/UftVOQ1B8kI/AAAAAAAAAMk/SUA-OcvzwH4/s1600/NNBT-twitter-icon.png" /></a></div>  </td>  <td><div class="subicons">  <a class="Fadeout" href="http://feeds.feedburner.com/haakblog" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-UoedrevjRAY/UftVMZJgx0I/AAAAAAAAAMU/TZk4VCS-5ms/s1600/NNBT-rss-icon.png" /></a></div>  </td>  <td><a class="Fadeout" href="https://pinterest.com/haakblog" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-t1WD_pp9gGA/UftVLqu0oSI/AAAAAAAAAME/cDcPZn0Dp9o/s1600/NNBT-Pinterest-icon.png" /></a></td>  </tr></tbody></table></div></div>
<small>
<a style='align:center;' href='http://www.haakblog.com/2014/10/email-subscription-box-widget-blogger.html' target='_blank'>Subscription Widget</a></small>

Step 5

After copy and paste about code follow below steps to change your username:
  • Change  http://feeds.feedburner.com/haakblog to your Feed Burner Name
  • Change haakblog to Your Feedburner Username.
  • Change http://www.facebook.com/haakblog to your Facebook Page Name.
  • Change http://www.twitter.com/haakblog to yout Twitter Username.
  • Change http://feeds.feedburner.com/haakblog to Your Feed Burner Username.
  • Change https://pinterest.com/haakblog to your Pinterest Username.

Step 6

Click on save button.

How to Remove Blogger Navigation Bar?

At this time every blogger user want to know How to remove Blogger Navigation Bar from their blog. So no need to worry because this navigation bar can be removed using some changes in your CSS code. If you are using the default blogger templates then you noticed that a horizontal bar appearing at the top of your blog. This navigation bar helps to sign in into your account, publish new posts and customize your website directly with the help of this bar.

Remove Blogger Navigation Bar

There are two ways to remove Blogger navigation bar from your blog

1. Help of Layout

You can remove blogger navigation bar with follow below steps:

1.Login your Blogger account and Go to Layout at your blog.

Remove Blogger Navigation Bar



2.Look for the Navbar text at the right side then click on the edit link.
Blogger Navigation Bar

3.Now a pop up window will be opened when you click on Edit link. Now go to scroll down and select off then save.


Navigation Bar

Demo: How to Remove Blogger Navigation Bar?

 

    2. Change in Template

    You can also remove this navigation bar with the help of add some CSS code in your template. Below we give you easy steps for remove navigation bar.
    1. Login your Blogger account
    2. Go to Template and click to edit HTML
    3. Now search ]]></b:skin> in HTML code
    4. Now insert following code before ]]></b:skin>
    #navbar-iframe,#navbar { display: none !important; }
    Save Template and view your blog.

    This is very easy two steps for remove navigation bar from blogger. If you have more suggestion about this topic then you can send us your opinion and suggestion for this post we consider your suggestion in our post.

    Saturday, October 18, 2014

    How to Change Your Facebook Timeline Cover Photo

    How to Change Your Facebook Timeline Cover Photo: Your Timeline may look a bit empty compared to those of your buddies in the event you're fresh to Facebook. You require a Facebook cover photo. The very first thing when people arrive in your Timeline, they will see is your profile image as well as your cover photograph.

    Facebook Cover Photo

    The first impression is presented by both of these photos near the highest part to all visitors for your Timeline. The Facebook cover photo is the bigger picture that functions as a backdrop to your own Timeline. Individuals frequently pick pictures or visually stunning photographs that talk to who they are and their beloved. To alter your Facebook cover photo, follow these measures:

    Change Facebook Cover Photo

    A Change Your Facebook Timeline Cover Photo appears in the correct part of the picture.

    1. Select from Photographs, Upload photo, Remove, and Re-position.
    Facebook Timeline Cover Photo
    2. It's also possible to see a choice to Add Synced Photo in the event you're using a Facebook Mobile program that syncs with your telephone.

    3. Click Select from photos to pick a Facebook cover photo from pictures you have already included with Facebook.

    4. The Pick out of your Photographs window appears. By default, it reveals Recent Uploads. It's possible for you to get to the full list of your pictures by clicking View Records in the upper-right corner.

    5. Select Upload Picture to decide on a Facebook cover photo from your own pc.

    6. A window for browsing the files of your computer appears.

    7. Choose your Facebook cover photo by clicking your desired record after which the picture that is required.

    8. This brings you back to your own Timeline, where you need to start to see the cover photo in place that is brand new using the overlaid message, Trail to Re-position Cover.

    9. This brings you back to your own Timeline, where you need to start to see the Facebook cover photo in place that is brand new using the overlaid message, Trail to Re-position Cover.

    10. You could sometimes discover that when you attempt to add a few pictures you get an error suggesting that it's not broad enough as the Facebook cover photo crosses the width of your Timeline.

    11. Click and drag your Facebook cover photo to place it right inside the screen's framework.

    12. Click Save Changes. Your Facebook cover photo is currently set up.

    13. Your cover can alter as frequently as you would like.

    Your profile image is the photograph that is smaller. This picture is the thing that sticks with you all seeming wherever you post or remark something. By way of example, your standing post may be seen by your buddies within their News Feeds and profile photo. Some variant is used by a lot of folks on a headshot for his or her profile photo. There are lots of methods to put in a profile photo.

    Friday, October 17, 2014

    How to Choose Good Twitter Username

    On Twitter, handle, or your Good Twitter username, is your identity. If you can, sign up for Twitter through the use of a version of your name or it as your username (assuming somebody else is not already using it). For instance, if your name is Jerry Blauser , you may choose to choose a Twitter username such as @jerryblauser or @jerry_blauser.

    Good Twitter Username

    Twitter username usually appear before the name with an at sign (@), because that is the way you refer to other users. But when you're really selecting a good twitter username, the @ isn't part of it. The sole characters it is possible to use are uppercase and lowercase letters, numbers, as well as the underscore character (_).

    Here are a few ideas to keep in mind when deciding Twitter username:

    Try adding descriptor or an adjective, for example @ handsomejerry or @ jerrytheterrible if users have previously promised those names. If you prefer for folks to not know who you're, you can select a name that's a little more generic.

    In addition you may use a handle that you've established on different websites.

    You might find yourself without a first name in the eyes if you choose to use just your last name as a twitter username.

    You'll be able to employ your organization or business name and you could fill because business name in the Name text box in the Settings page for the account. But if you do, make sure to add the names of anybody who manages the company Twitter account in the 160-character "Bio" text box on the Settings page for your Twitter profile.

    Your Twitter username has influence and power on internet search engine optimization (SEO), which translates to close to the top you appear in a search engine such as Yahoo! or Google. In case you're a business, consider using a key word that is valuable as your Twitter name.

    In case you'd prefer to utilize a nickname rather than your name, or your business or product name, don't forget to choose a username that's friendly and accessible.

    On Twitter, you want visitors to respond to you, not be put off with a good twitter username that is otherwise questionable or risque. And in case you run into your Twitter buddies at other real life social situations or networking events, you need to be certain that you don't mind having your username written on your nametag or shouted out in greeting.

    Tweets are just 140 characters, so for those who have a name that is longer, you leave people less room when they are replying to you. Twitter restricts your twitter username to only 15 characters for this very reason.

    Wednesday, October 15, 2014

    Add Click to Drop Down Menu Widget for Blogger

    Many blogger want to implement Click to Drop Down Menu Widget for their blogger blog in sidebar but they do not know how to do this. We provide you full code to add Click to Drop Down Menu Widget for Blogger and you can easily add to your blog.
    Drop Down Menu

    Click to Drop Down Menu Widget help to boost the traffic on your posts and passing on the link juice via your home page. Click to Drop Down Menu Widget that helps you to implement very good looking drop down menu in your sidebar.

    Click to Drop Down Menu Widget for Blogger

    Follow the below steps to add Click to Drop Down Menu Widget for Blogger blogs:

    Step 1

    Go to Blogger Dashboard.

    Step 2

    Go to Layout and click on Add a Gadget Link as shown in below picture.

    Drop Down Menu for Blogger

    Step 3

    Now add HTML/JavaScript widget from list.

    Drop Down Menu blogger

    Step 4

    Copy and Paste Below code into box:
    <div class="msg_list">
    <p class="msg_head">Heading #1</p>
    <div class="msg_body">
    <ul>
    <li>
    <a href="#">Link Name 1 </a>
    </li>
    <li>
    <a href="#">Link Name 2 </a>
    </li>
      </ul>

      </div>
    <p class="msg_head">Heading #2</p>
    <div class="msg_body">
     <ul>
     <li>
    <a href="#">Link Name 1 </a>
       </li>

     <li>
    <a href="#">Link Name 2  </a>
       </li>
     
    </ul>
    <a style="color:#E2E2E2; padding-left:160px;" href="http://www.haakblog.com/2014/10/click-to-drop-down-menu-widget-blogger.html">Drop Down Menu</a>
    </div>
    <style>
     p{
    padding: 0 0 1em;
    }
    .msg_list {
    margin: 0px;
    padding: 0px;
    width: 320px;
    display: block;
    }
    .msg_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    background-color:#316C55;
    margin:1px;
      color:#FFFFFF;
      font-family: Sans-serif,Arial,Helvetica;
        font-size: 12px;
        font-weight: bold;
    }
    .msg_body {
    padding: 15px 10px 15px;
    background-color:#F4F4F8;
    }

    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
      //hide the all of the element with class msg_body
      $(".msg_body").hide();
      //toggle the componenet with class msg_body
      $(".msg_head").click(function()
      {
        $(this).next(".msg_body").slideToggle(600);
      });
    });
    </script></div>
    Tips: Change Heading#1 & Heading#2 to your heading and change Link Name 1 & Link Name 2 to your Link Name and Hyper Link with your link.

    Step 5

    Click on Save button.

    Add Featured Content Slider for Blogger Using jQuery

    Today we provide you Featured Content Slider for Blogger Using jQuery for content slider on your home page. Every blogger wants to add Featured content Slider for their blog. So don't worry we provide you full tutorial about featured content slider for blogger and give you fully guide to add this on your blog easily. Featured Content Slider helps you to show automatic sliding of your featured content on your home page. This is the great technique to show your most important content as Featured content on your home page. Featured Content Slider also helps to increase page views and decrease bounce rate of your blog. We provide you most used and effective featured content slider with demo.
    Featured Content Slider for Blogger

    How to Add Featured Content Slider for Blogger Using jQuery

    Please follow below steps to add Featured Content Slider for Blogger Using jQuery:

    Step 1

    Login into Blogger Account and Go to Blogger Dashboard. Go to Layout at the left panel and click on Add a Gadget Link as shown in below picture.

    Featured Content Slider

    Step 2

    When you click on Add a Gadget link a popup window will open with all available gadgets. Choose HTML/JavaScript from gadgets list as shown in below picture.

    Featured Content Slider Blogger

    Step 3

    Now choose your Featured Content Slider design for your blog at below. You can also check over demo with click on view demo picture. After choose your design copy and paste below code to HTML/JavaScript box and click on save button:

    Style 1

    Add Featured Content Slider for Blogger Using jQuery


    Add Featured Content Slider for Blogger Using jQuery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"/></script><script src="http://usefbcover.com/public/mbt-slider-0-01-jis.js" type="text/javascript"/></script><script src="http://usefbcover.com/public/mbt-slider-0-02-jis.js" type="text/javascript"/></script><script src="http://usefbcover.com/public/mbt-slider-0-03-jis.js" type="text/javascript"/></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><a href="http://www.haakblog.com/2014/10/featured-content-slider-blogger.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://img1.blogblog.com/img/blank.gif" alt="Fetured Content Slider" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><style type="text/css">.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(http://2.bp.blogspot.com/-v3W9gCwnf4U/Tythw36ZkjI/AAAAAAAAAN8/WRB0morWYQM/s1600/featured-pager-24work-1.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(http://1.bp.blogspot.com/-6ahEuAYHbEc/Tythvwy8nSI/AAAAAAAAANw/j5C2XRRPmvU/s1600/featured-prev-24work-1.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(http://2.bp.blogspot.com/-oXQ8F_kSdS8/TythwUH4SrI/AAAAAAAAAN0/gc8pc6_1SlY/s1600/featured-next-24work-1.png;) top left no-repeat} .fp-next:hover{opacity:1;} .fp-next:active{opacity:0.7;}</style>


    <div class="featuredposts clearfix"><div class="fp-slides"><div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://4.bp.blogspot.com/-5QLMjvy6SZ4/T8jKmOSDNbI/AAAAAAAAB2o/LZFGFRfj1BY/s400/add-nivo-slider-to-blogger-blog.png" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>
    <div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>
    <div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://1.bp.blogspot.com/-phm4gww-xzo/Upbzr_xpecI/AAAAAAAAAt8/9zWZvYUK54w/s1600/animated+cursor.gif" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>
    <div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://1.bp.blogspot.com/-9esEzY8FF9A/UpLm-M1c3JI/AAAAAAAAApY/7j8hcMEFsFw/s320/Dropdown-menus1.png" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>
    <div class="fp-post">
    <div class="fp-thumbnail"><a href="
    #" target="_blank"><img alt="" width="580" src="http://2.bp.blogspot.com/-Uu0N9YC4DR4/UpG1eiNlYSI/AAAAAAAAAno/vtcuQ8Us_6Q/s320/clock+blogger.jpg" height="266"/></a></div>
    <h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>
    </div><div class="fp-nav clearfix"><span class="fp-pager"></span><a class="fp-next" href="#fp-next"></a><a class="fp-prev" href="#fp-prev"></a>
    </div></div>
    Note: Change # to your post URL and All Red Images Link to Your original Image Link. Also Change Title of Post and Description.

    Style 2
    Add Featured Content Slider for Blogger Using jQuery

    Add Featured Content Slider for Blogger Using jQuery

    <script src="http://usefbcover.com/public/contentslider-n-b-l-t-r.js" type="text/javascript"></script><script src="http://usefbcover.com/public/n17-content-slider-026.js" type="text/javascript"></script>
    <a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.haakblog.com/2014/10/featured-content-slider-blogger.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://img1.blogblog.com/img/blank.gif" alt="Featured Content Slider" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
    <style type="text/css">.sliderwrapper{position: relative; /*leave as is*/overflow: hidden; /*leave as is*/border: 5px solid #333333;border-bottom-width: 5px;width: 565px; /*width of featured content slider*/height: 175px;margin-left:15px;}.sliderwrapper .contentdiv{visibility: hidden; /*leave as is*/position: absolute; /*leave as is*/left: 0; /*leave as is*/top: 0; /*leave as is*/padding: 5px;background: white;width: 555px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;margin-top:0px;}.pagination{width: 555px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/text-align: right;background-color: #333333;padding: 5px 10px;margin-top:-3px;height:30px;margin-left:15px;}.pagination a{padding: 0 5px;text-decoration: none; color: #000;background: #AAAAAA;}.pagination a:hover, .pagination a.selected{color: #000;background-color: #FFF;}
    </style>


    <div class="sliderwrapper" id="slider1"><div class="contentdiv"><img height="115" src="http://4.bp.blogspot.com/-5QLMjvy6SZ4/T8jKmOSDNbI/AAAAAAAAB2o/LZFGFRfj1BY/s400/add-nivo-slider-to-blogger-blog.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="http://1.bp.blogspot.com/-phm4gww-xzo/Upbzr_xpecI/AAAAAAAAAt8/9zWZvYUK54w/s1600/animated+cursor.gif" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="http://1.bp.blogspot.com/-9esEzY8FF9A/UpLm-M1c3JI/AAAAAAAAApY/7j8hcMEFsFw/s320/Dropdown-menus1.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="http://2.bp.blogspot.com/-Uu0N9YC4DR4/UpG1eiNlYSI/AAAAAAAAAno/vtcuQ8Us_6Q/s320/clock+blogger.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div></div><div class="pagination" id="paginate-slider1"></div><script type="text/javascript">featuredcontentslider.init({id: "slider1", //id of main slider DIVcontentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.enablefade: [true, 0.2], //[true/false, fadedegree]autorotate: [true, 3000], //[true/false, pausetime]onChange: function(previndex, curindex){ //event handler fired whenever script changes slide//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)}})</script>

    Style 3
    Add Featured Content Slider for Blogger Using jQuery


    Add Featured Content Slider for Blogger Using jQuery

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script><script src="http://usefbcover.com/public/30111191622-slider.js" type="text/javascript"></script><script type="text/javascript">stepcarousel.setup({galleryid: 'mygallery', //id of carousel DIVbeltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVspanelclass: 'panel', //class of panel DIVs each holding contentautostep: {enable:true, moveby:1, pause:3000},panelbehavior: {speed:500, wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 3, leftnav: ['http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg', -48, 0], rightnav: ['http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg', 0, 0]},statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panelscontenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']})</script><a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.haakblog.com/2014/10/featured-content-slider-blogger.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://img1.blogblog.com/img/blank.gif" alt="Featured Content Slider" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><style type="text/css">#myslides{background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;width: 650px;height:165px;margin-bottom:5px;}.stepcarousel{position: relative; /*leave this value alone*/overflow: scroll; /*leave this value alone*/width: 554px; /*Width of Carousel Viewer itself*/height: 160px; /*Height should enough to fit largest content's height*/margin: 0px 48px 5px 48px;}.stepcarousel .belt{position: absolute; /*leave this value alone*/left: 0;top: 0;}.stepcarousel .panel{float: left; /*leave this value alone*/overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/margin: 20px 10px ; /*margin around each panel*/width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */background:#0e1829;height:120px;border:1px solid #1d2c44;}.stepcarousel .panel p{text-align: left; /*leave this value alone*/overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/margin: 5px 5px ; /*margin around each panel*/}.stepcarousel .panel h2{text-align: left; /*leave this value alone*/height:20px;overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/margin: 2px 5px ; /*margin around each panel*/font-size:16px;font-weight:bold;text-align:center;font-family:Georgia,century gothic,Arial,verdana, sans-serif;}.stepcarousel .panel img{float: left; /*leave this value alone*/background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/margin: 5px 5px 5px 5px; /*margin around each panel*/padding:0px 0px;}</style>

    <div id="myslides"><div id="mygallery" class="stepcarousel"><div class="belt">
    <!-- 1st Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="http://4.bp.blogspot.com/-5QLMjvy6SZ4/T8jKmOSDNbI/AAAAAAAAB2o/LZFGFRfj1BY/s400/add-nivo-slider-to-blogger-blog.png" height="110"/> </a></div><!-- end code of 1st -->
    <!-- 2nd Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg" height="110"/> </a></div><!-- end code of 2nd -->
    <!-- 3rd Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="http://1.bp.blogspot.com/-phm4gww-xzo/Upbzr_xpecI/AAAAAAAAAt8/9zWZvYUK54w/s1600/animated+cursor.gif" height="110"/> </a></div><!-- end code of 3rd -->
    <!-- 4th Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="http://1.bp.blogspot.com/-9esEzY8FF9A/UpLm-M1c3JI/AAAAAAAAApY/7j8hcMEFsFw/s320/Dropdown-menus1.png" height="110"/> </a></div><!-- end code of 4th -->

    <!-- 5th Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="http://2.bp.blogspot.com/-Uu0N9YC4DR4/UpG1eiNlYSI/AAAAAAAAAno/vtcuQ8Us_6Q/s320/clock+blogger.jpg" height="110"/> </a></div><!-- end code of 5th -->


    </div></div></div>

    Style 4
    Add Featured Content Slider for Blogger Using jQuery


    Add Featured Content Slider for Blogger Using jQuery

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="http://usefbcover.com/public/n17-content-slider-024.js" type="text/javascript"></script><a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.haakblog.com/2014/10/featured-content-slider-blogger.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://img1.blogblog.com/img/blank.gif" alt="Featured Content Slider" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><style type="text/css">#myslides{background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;width: 650px;height:165px;margin-bottom:5px;}.stepcarousel{position: relative; /*leave this value alone*/overflow: scroll; /*leave this value alone*/width: 554px; /*Width of Carousel Viewer itself*/height: 160px; /*Height should enough to fit largest content's height*/margin: 0px 48px 5px 48px;}.stepcarousel .belt{position: absolute; /*leave this value alone*/left: 0;top: 0;}#contentSlide {background : #ddd; -moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;height : 228px; margin-bottom: 10px;padding : 10px 0px 10px;}#slideshow {margin : 0 auto;width : 953px;height : 230px;background : #eeeeee none repeat scroll 0 0;position : relative;}#slideshow #slidesContainer {margin : 0 auto;width : 845px;height : 228px;overflow : auto;position : relative;}#slideshow #slidesContainer .slide {margin : 0 auto;width : 845px;height : 228px;}.control {display : block;width : 39px;height : 228px;text-indent : -10000px;position : absolute;cursor : pointer;}#leftControl {top : 0;left : 0;width : 55px;background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms_Pg_IsqI/AAAAAAAAAXU/tTxdiIsFY4g/previous%20gray.jpg)no-repeat scroll 0 0;}#rightControl {top : 0;right : 0;background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms-s5qb9iI/AAAAAAAAAXQ/edpXAZIaxCI/next%20gray.jpg) no-repeat scroll 0 0;width : 55px;}.slide h2, .slide p {margin : 15px;}.slide h2 {font : italic 24px Georgia, "Times New Roman", Times, serif;color : #212421;letter-spacing : -1px;}.slide img {float : right;margin : 0 15px;padding : 1px;}</style>

    <!-- Slideshow HTML --> <div id="contentSlide"><div id="slideshow"> <div id="slidesContainer"> <div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 1</a></h2>
    <p>TEXT-OF-THE-SLIDE 1</p><img alt="" width="215" src="http://4.bp.blogspot.com/-5QLMjvy6SZ4/T8jKmOSDNbI/AAAAAAAAB2o/LZFGFRfj1BY/s400/add-nivo-slider-to-blogger-blog.png" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 2</a></h2><p>TEXT-OF-THE-SLIDE 2</p><img alt="" width="215" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 3</a></h2><p>TEXT-OF-THE-SLIDE 3</p><img alt="" width="215" src="http://1.bp.blogspot.com/-phm4gww-xzo/Upbzr_xpecI/AAAAAAAAAt8/9zWZvYUK54w/s1600/animated+cursor.gif" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 4</a></h2><p>TEXT-OF-THE-SLIDE 4</p><img alt="" width="215" src="http://1.bp.blogspot.com/-9esEzY8FF9A/UpLm-M1c3JI/AAAAAAAAApY/7j8hcMEFsFw/s320/Dropdown-menus1.png" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 5</a></h2><p>TEXT-OF-THE-SLIDE 5</p><img alt="" width="215" src="http://2.bp.blogspot.com/-Uu0N9YC4DR4/UpG1eiNlYSI/AAAAAAAAAno/vtcuQ8Us_6Q/s320/clock+blogger.jpg" height="115"/></div></div>
    </div></div> <!-- Slideshow HTML --> <div class="clear"/></div>


    Style 5
    Add Featured Content Slider for Blogger Using jQuery


    Add Featured Content Slider for Blogger Using jQuery

    <script type="text/javascript"> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 180; </script><script src="http://usefbcover.com/public/n17-content-slider-011.js" type="text/javascript"></script><script src="http://usefbcover.com/public/n17-content-slider-012.js" type="text/javascript"></script><script src="http://usefbcover.com/public/n17-content-slider-013.js" type="text/javascript"></script><a href="http://www.haakblog.com/2014/10/featured-content-slider-blogger.html" rel="dofollow" target="_blank" title="blogger templates"><img src="http://img1.blogblog.com/img/blank.gif" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.haakblog.com/2013/12/add-featured-content-slider-for-blogger.-jquery.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://img1.blogblog.com/img/blank.gif" alt="Featured Content Slider" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><style type="text/css">div#featabout { width: 635px; border-bottom: 1px solid; }div#featabout-wrapper { margin: 0 auto; padding: 22px 0; width: 635px; height: 235px; }
    div#featabout div.featured { float: left; width: 640px; }div#featabout div.featured div.top { height: 15px; }div#featabout div.featured div.mid { padding: 0 15px; }div#featabout div.featured div.mid div#featured { border: 1px solid; }div#featabout div.featured div.bot { height: 15px; }
    div#featabout div.about { float: right; width: 328px; }div#featabout div.about div.top { height: 15px; }div#featabout div.about div.mid { padding: 0 15px; height: 224px; }div#featabout div.about div.bot { height: 15px; }
    div#featabout div.ab-box h2 { display: block; margin: 0; padding: 0 0 8px 0; font-size: 12px;font-family: Georgia, 'Times New Roman', serif;text-transform: uppercase;}div#featabout div.ab-box div.interior { padding: 8px 0; }div#featabout div.ab-box div.interior p { display: block; margin: 0; padding: 0; }div#featabout div.ab-box-author div.interior { padding: 8px 0 16px 0; min-height: 60px; }div#featabout div.ab-box-author div.interior img { padding: 3px; border: 1px solid; float: left; margin: 0 5px 0 0; }div#featabout div.ab-box-burner div.interior { padding: 8px 0 8px 65px; }div#featabout div.ab-box-burner div.interior p { display: block; margin: 0; padding: 0; line-height: 28px; }div#featabout div.ab-box-burner div.interior span { display: block; height: 21px; margin: 0 0 0 0; padding: 6px 0 0 0; }div#featabout div.ab-box-burner div.interior span input { width: 191px; padding: 0 5px; border: 0; }div#featabout {background: #ffffff url('') repeat-x scroll left top;border-bottom: none;}div#featabout div.featured { background: transparent url('') repeat-y scroll left top; }div#featabout div.featured div.top { background: transparent url('') no-repeat scroll left top; }div#featabout div.featured div.mid div#featured { border-color: #000; }div#featabout div.featured div.bot { background: transparent url('') no-repeat scroll left bottom; }div#featured h2 {font-family: Georgia, 'Times New Roman', sans-serif; font-size: 24px;line-height: 30px; font-weight: normal;}div#featured p {font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
    div#featabout div.about { color: #999; background: transparent url('') repeat-y scroll left top; }div#featabout div.about div.top { background: transparent url('') no-repeat scroll left top; }div#featabout div.about div.bot { background: transparent url('') no-repeat scroll left bottom; }
    div#featabout div.ab-box h2 { color: #e1e1c7; background: transparent url('') repeat-x scroll left bottom; }div#featabout div.ab-box-burner div.interior { color: #999; background: transparent url('') no-repeat scroll 0px 8px; }div#featabout div.ab-box-burner div.interior span { background: transparent url('') left top no-repeat; }div#featabout div.ab-box-burner div.interior span input { background: transparent none; color: #666; }
    #flickrGallery{width: 500px;height: 334px;}#myGallery img.thumbnail, #myGallerySet img.thumbnail{display: none;}.jdGallery{overflow: hidden;position: relative;}.jdGallery img{border: 0;margin: 0;}.jdGallery .slideElement{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('');}.jdGallery .loadingElement{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('');}* html .jdGallery .slideInfoZone{bottom: -1px;}.jdGallery .slideInfoZone h2{padding: 0;font-size: 14px;margin: 0;margin: 2px 5px;font-weight: bold;color: #FFFFFF;bacground: transparent;}.jdGallery .slideInfoZone ul {list-style:none;margin:0 0 0;padding:0 0 0;color: #FFFFFF;}.jdGallery .slideInfoZone li {list-style:none;margin:0 0 0;padding:0 0 0;color: #FFFFFF;}.jdGallery .slideInfoZone p{padding: 0;font-size: 11px;margin: 2px 5px;color: #FFFFFF;}.jdGallery div.carouselContainer{position: absolute;height: 135px;width: 100%;z-index: 10;margin: 0px;left: 0;top: 0;}.jdGallery a.carouselBtn{position: absolute;bottom: 0;right: 30px;height: 20px;/*width: 100px; background: url('') no-repeat;*/text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;}.jdGallery .carousel{position: absolute;width: 100%;margin: 0px;left: 0;top: 0;height: 115px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}.jdExtCarousel{overflow: hidden;position: relative;}.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper{position: absolute;width: 100%;height: 78px;top: 10px;left: 0;overflow: hidden;}.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner{position: relative;}.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail{cursor: pointer;background: #000;background-position: center center;float: left;border: solid 1px #fff;}.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail{margin-bottom: 10px;}.jdGallery .carousel .label, .jdExtCarousel .label{font-size: 13px;position: absolute;bottom: 5px;left: 10px;padding: 0;margin: 0;}.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton{font-size: 10px;position: absolute;bottom: 5px;right: 10px;padding: 1px 2px;margin: 0;background: #222;border: 1px solid #888;cursor: pointer;}.jdGallery .carousel .label .number, .jdExtCarousel .label .number{color: #b5b5b5;}.jdGallery a, .jdGallery a:hover{font-size: 100%;text-decoration: none;color: #fff;}.jdGallery a.right, .jdGallery a.left{position: absolute;height: 99%;width: 25%;cursor: pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;}* html .jdGallery a.right, * html .jdGallery a.left{filter:alpha(opacity=50);}.jdGallery a.right:hover, .jdGallery a.left:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}.jdGallery a.left{left: 0;top: 0;background: url('http://4.bp.blogspot.com/-15WqC-OVgGY/Uh8IdxNyQVI/AAAAAAAABME/JuLKZ0fGH2g/s1600/fleche1.png') no-repeat center left;}* html .jdGallery a.left { background: url('') no-repeat center left; }.jdGallery a.right{right: 0;top: 0;background: url('http://3.bp.blogspot.com/-DcvcSq-dC4w/Uh8IdzqFDkI/AAAAAAAABL8/cVPZnYrICCk/s1600/fleche2.png') no-repeat center right;}* html .jdGallery a.right { background: url('') no-repeat center right; }.jdGallery a.open{left: 0;top: 0;width: 100%;height: 100%;}.withArrows a.open{position: absolute;top: 0;left: 25%;height: 99%;width: 50%;cursor: pointer;z-index: 10;background: none;-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}.withArrows a.open:hover { background: url('') no-repeat center center; }* html .withArrows a.open:hover { background: url('') no-repeat center center;filter:alpha(opacity=80); }/* Gallery Sets */.jdGallery a.gallerySelectorBtn{z-index: 15;position: absolute;top: 0;left: 30px;height: 20px;/*width: 100px; background: url('') no-repeat;*/text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;opacity: .4;-moz-opacity: .4;-khtml-opacity: 0.4;filter:alpha(opacity=40);}.jdGallery .gallerySelector{z-index: 20;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;}.jdGallery .gallerySelector h2{margin: 0;padding: 10px 20px 10px 20px;font-size: 20px;line-height: 30px;color: #fff;}.jdGallery .gallerySelector .gallerySelectorWrapper{overflow: hidden;}.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton{margin-left: 10px;margin-top: 10px;border: 1px solid #888;padding: 5px;height: 40px;color: #fff;cursor: pointer;float: left;}.jdGallery .gallerySelector .gallerySelectorInner div.hover{background: #000;}.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview{background: #000;background-position: center center;float: left;border: none;width: 40px;height: 40px;margin-right: 5px;}.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{margin: 0;padding: 0;font-size: 12px;font-weight: normal;}.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info{margin: 0;padding: 0;font-size: 12px;font-weight: normal;color: #aaa;}.extra div.box { width: 310px; padding: 0px; margin:0;}.extra div.box-popular { float: left; }.extra div.box-recent { float: right; }
    </style>


    <div id="featabout"><div id="featabout-wrapper"><div class="featured"><div class="top"></div><div class="mid"><div id="featured"><style>#myGallery, #myGallerySet, #flickrGallery {width: 606px;height: 220px;z-index:5;border: 1px solid #000;overflow:hidden;}
    .jdGallery .slideInfoZone{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 80px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}</style><script type="text/javascript">function startGallery() {var myGallery = new gallery($('myGallery'), {timed: true});}window.addEvent('domready',startGallery);</script><div id="myGallery">
    <div class="imageElement"><h2><a href="#" target="_blank">Title-of-Post-1</a></h2><p>Slide 1 Description [...]</p><a class="open" href="#" target="_blank" title="TITLE-OF-THE-Slide1"></a><img class="full" src="http://4.bp.blogspot.com/-5QLMjvy6SZ4/T8jKmOSDNbI/AAAAAAAAB2o/LZFGFRfj1BY/s400/add-nivo-slider-to-blogger-blog.png"/><img class="thumbnail" src="http://4.bp.blogspot.com/-5QLMjvy6SZ4/T8jKmOSDNbI/AAAAAAAAB2o/LZFGFRfj1BY/s400/add-nivo-slider-to-blogger-blog.png"/></div><div class="imageElement"><h2><a href="#" target="_blank">Title-of-Post-2</a></h2><p>Slide 2 Description [...]</p><a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 2"></a><img class="full" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg"/><img class="thumbnail" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg"/></div><div class="imageElement"><h2><a href="#" target="_blank">Title-of-Post-3</a></h2><p>Slide 3 Description [...]</p><a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 3"></a><img class="full" src="http://1.bp.blogspot.com/-phm4gww-xzo/Upbzr_xpecI/AAAAAAAAAt8/9zWZvYUK54w/s1600/animated+cursor.gif"/><img class="thumbnail" src="http://1.bp.blogspot.com/-phm4gww-xzo/Upbzr_xpecI/AAAAAAAAAt8/9zWZvYUK54w/s1600/animated+cursor.gif"/></div><div class="imageElement"><h2><a href="#" target="_blank">Title-of-Post-4</a></h2><p>Slide 4 Description [...]</p><a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 4"></a><img class="full" src="http://1.bp.blogspot.com/-9esEzY8FF9A/UpLm-M1c3JI/AAAAAAAAApY/7j8hcMEFsFw/s320/Dropdown-menus1.png"/><img class="thumbnail" src="http://1.bp.blogspot.com/-9esEzY8FF9A/UpLm-M1c3JI/AAAAAAAAApY/7j8hcMEFsFw/s320/Dropdown-menus1.png"/></div><div class="imageElement"><h2><a href="#" target="_blank">Title-of-Post-5</a></h2><p>Slide 5 Description [...]</p><a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 5"></a><img class="full" src="http://2.bp.blogspot.com/-Uu0N9YC4DR4/UpG1eiNlYSI/AAAAAAAAAno/vtcuQ8Us_6Q/s320/clock+blogger.jpg"/><img class="thumbnail" src="http://2.bp.blogspot.com/-Uu0N9YC4DR4/UpG1eiNlYSI/AAAAAAAAAno/vtcuQ8Us_6Q/s320/clock+blogger.jpg"/></div></div>
    </div></div></div></div></div>

    Don't Forget To Join US Our Community
    x