Add 5 in 1 Slide Out Social Follower Box Widget to Blogger - Updated

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><br /><div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-nvuXlZo7Oi0/Une-RtLpKRI/AAAAAAAAANU/qqNBypZF17c/s1600/5+in+1+Slide+Out+Social+widget.png" /></div><br />Today we are going to lanch another updated <a href="http://e-ideamart.blogspot.com/search/label/Widgets" rel="nofollow">blogger widget</a> that contain all the <b>5 Big Social Network</b> (Facebook, Twitter, Google Plus, YouTube, Email Subscribe ) jQuery Slide Out Widget For Your Blog & Website To Increase Your Social Fans.<br /><br />So Now we have five different Pop up Like Boxes which appears on hover on little image that are at right sidebar on you blog.<br />One of the best ways to increase your Social fans is to add the jQuery Pop-up Social Box to your Blog. Once this widget is installed on your blog, your visitors will be shown a slide out box with the option to like your Facebook Page, or want to follow on Twitter, or want to add you in there Google+ circle, want to subscribe your feedburner email whenever they visit your blog. Advantages this widget is to free space on the page. Because if you add all of these widget on your site/blog, it will take a huge space that will make your visitor angry, It can prevent website normal as the box. Static widget as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. Let add this cool widget through below Widget Generator.<br /><h3>Live Preview</h3><center><a class="DemoButton blue big" href="http://e-ideamart.blogspot.com/" target="_blank">Live Demo</a></center><h3>Features:</h3><ul><li>1.) J-Query/JavaScript Widget.</li><li>2.) Slide-Out On Hover.</li><li>3.) Awesome And Stylish.</li><li>4.) Facebook Like Box Included.</li><li>5.) Twitter Followers Box Included.</li><li>6.) YouTube Subscribe Box Included.</li><li>7.) Google Plus Add To Circle Widget Included.</li><li>8.) FeedBurner RSS Subscribe Through E-Mail Widget Included.</li><li>9.) Sliding Effect Enabled.</li><li>10.) Slide Out On Hove And Get Back On Mouse Out.</li></ul><br /><div dir="ltr" trbidi="on"><ol></ol></div><h3>5 in 1 Social Subscribing Slide Out Widget Code</h3><br /><blockquote class="tr_bq"><blockquote class="tr_bq"></blockquote><blockquote class="tr_bq"><style>  img, a {    border: 0;  }  #on {    visibility: visible;  }  #off {    visibility: hidden;  }  #facebook_div {    width: 235px;    height: 236px;    overflow: hidden;  }  #twitter_div {    width: 246px;    height: 240px;    overflow: hidden;  }  #google_plus_div {    width: 290px;    height: 250px;    overflow: hidden;    margin-left: 5px;    margin-top: 1px;  }  #NBTfeedburner_div {    width: 300px;    height: 120px;    overflow: hidden;    margin-top: 5px;    margin-left: -4px;  }  #NBT_div {    width: 300px;    height: 97px;    overflow: hidden;  }  /* right side style */   #facebook_right {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    right: -239px;  }  #facebook_right img {    position: absolute;    top: -2px;    left: -35px;  }  #facebook_right iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    left: -2px;    top: -3px;  }  #twitter_right {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 250px;    height: 240px;    position: fixed;    right: -254px;  }  #twitter_right_img {    position: absolute;    top: -2px;    left: -35px;    border: 0;  }  #google_plus_right {    z-index: 10003;    background-color: #F2F2F2;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-right: 2px solid #0056a0;    border-left: 2px solid #0056a0;    width: 290px;    height: 250px;    position: fixed;    right: -294px;  }  #google_plus_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #feedburner_right {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right: 2px solid #5b5b5b;    border-left: hidden;    width: 300px;    height: 97px;    position: fixed;    right: -304px;  }  #feedburner_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #NBT_right {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #NBT_right img {    position: absolute;    top: -2px;    left: -101px;  }  /* left side style */   #facebook_left {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    left: -239px;  }  #facebook_left img {    position: absolute;    top: -2px;    right: -35px;  }  #facebook_left iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    right: -2px;    top: -3px;  }  #twitter_left {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 246px;    height: 240px;    position: fixed;    left: -254px;  }  #twitter_left_img {    position: absolute;    top: -2px;    right: -35px;    border: 0;  }  #google_plus_left {    z-index: 10003;    background-color: #006ec9;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-left: 2px solid #0056a0;    border-right: 2px solid #0056a0;    width: 290px;    height: 120px;    position: fixed;    left: -294px;  }  #google_plus_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #feedburner_left {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-left: 2px solid #5b5b5b;    border-right: hidden;    width: 300px;    height: 97px;    position: fixed;    left: -304px;  }  #feedburner_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #NBT_left {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #NBT_left img {    position: absolute;    top: -2px;    right: -101px;  }  .box-title1 {    border: 1px solid #ddd;    /*border-radius*/    -webkit-border-radius: 6px;    -moz-border-radius: 6px;    border-radius: 6px;    /*box-shadow*/    -webkit-box-shadow: 5px 5px 5px #CCCCCC;    -moz-box-shadow: 5px 5px 5px #CCCCCC;    box-shadow: 5px 5px 5px #CCCCCC;    padding: 10px;    margin: 10px 0;  }  .enteryouremail {    background: #fff !important;    border: 1px solid #d2d2d2;    padding: 0px 8px 0px 8px;    color: #a19999;    font-size: 12px;    height: 25px;    width: 165px;    /*border-radius*/    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    margin: 0px;  }  .submitbutton {    background: #FF8000;    border: 1px solid #F66303;    /*box-shadow*/    -webkit-box-shadow: 3px 3px 3px #666;    box-shadow: 3px 3px 3px #666;    font: bold 12px Arial, sans-serif;    color: #000000;    height: 25px;    padding: 0 12px 0 12px;    margin: 0 0 0 5px;    /*border-radius*/    -webkit-border-radius: 5px;    border-radius: 5px;    cursor: pointer;  }  #youtube_right {    z-index: 10001;    background-color: #fefefe;    border:2px solid #ff0000;    border-top:2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right:2px solid #5b5b5b;    border-left: hidden;    width:301px;    height: 106px;    position: fixed;    right: -304px;  }  #youtube_right_img {    position: absolute;    top: -2px;    left: -33px;    border:  </style>  <script src="http://code.jquery.com/jquery-latest.js"></script>  <script src="http://apis.google.com/js/plusone.js"  type="text/javascript"></script>  <script type="text/javascript">  jQuery(document).ready(function ()  {    jQuery("#facebook_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#facebook_right").stop(          true,          false).animate(          {            right: -239          },          500);      });    jQuery("#twitter_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#twitter_right").stop(          true,          false).animate(          {            right: -254          },          500);      });    jQuery("#google_plus_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#google_plus_right").stop(          true,          false).animate(          {            right: -294          },          500);      });    jQuery("#feedburner_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#feedburner_right").stop(          true,          false).animate(          {            right: -304          },          500);      });    jQuery("#youtube_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#youtube_right").stop(          true,          false).animate(          {            right: -304          },          500);      });  });  </script>      <br />  </blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><div id="on">    <div id="facebook_right" style="top: 8%;">      <div id="facebook_div">        <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy6kMSdFhcBVfDcin-gvODHJFuaJJJIPBU3w5ImfBgTz1lFr2JTH1GPEGGmue7tqnZ_hfmEi9IngM8RZ_rq-sXUAvrZCh8btojnKbuWC58RLkcreesAxfwTEj6zvRO4WzmPh_VmWev7IG-/s1600/NBTfacebook_right.png"        />        <iframe allowtransparency="true" frameborder="0"        scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/eideamart?ref=hl;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"        style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe>      </div>    </div>  </div>  </blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><div id="on">    <div id="twitter_right" style="top: 24%;">      <div id="twitter_div">        <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTA4SVO94yM4dI35kpu-7JYXa0RquLYePM8-epLLu05kT7Iz9ZlakClm80kDVj3DM9qJOt05kuaGgcyvIukp6-Chp2ZJlJGT51LbgqNVnlBmtKRlHDfiR-4B5qVtvElZbPMBbbzWTf6KT/s1600/NBTtwitter_right.png"        />        <div style="width:248px;font-size:8px;text-align:right;">          <script type="text/javascript">          document.write(unescape(            "%3Cscript  <span class="Apple-tab-span" style="white-space: pre;"> </span>src='http://twitterforweb.com/twitterbox.js?username=saadahmads&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699'  <span class="Apple-tab-span" style="white-space: pre;"> </span>type='text/javascript'%3E%3C/script%3E"          ));          </script>          <a href="http://e-ideamart.blogspot.com"          target="_blank"></a>        </div>      </div>    </div>  </div>  </blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><div id="on">    <div id="google_plus_right" style="top: 41%;">      <div id="google_plus_div">        <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwD1fZQP0BGA3Km49hyphenhyphen63_b5pT4TuVPCK-4Z0aBNlcf6dXDVuhXwS1ofyRFgJccSXcZJ0enuIkOZtIs3rO1HmFfEi2lD5r7s-mN71QzIt3EWjFamznXhYXsSMBl23HNbmLKKx56uhadPs/s1600/NBTgoogle_plus_right.png"        />        <div style="float: left; margin: 10px 10px 10px 0;">          <a href='http://newbloggertips.com'>            <img alt='Tips Tricks And Tutorials'            src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8qL2qn6t_khc9FAKKC2pNx4TWFn_Gtur6tpmlgZvDylTxcKR4gUjed5hjKoSl_yyH1mY6wxGn48z-CRryCZ_UglWhDxcQzY4eMytwwbQvG31z3ccyaHVGGlauxn_JYFfyDcBJcgIL5H1c/s1600/best+blogger+tips.png'            />          </a>          <div class="g-plus" data-action="followers"          data-height="250" data-href="https://plus.google.com/101845370194687634858"          data-source="blogger:blog:followers"          data-width="270"></div>          <script type="text/javascript">          (function ()          {            window.___gcfg = {              'lang': 'en'            };            var            po =              document.createElement(                'script');            po.type =              'text/javascript';            po.async =              true;            po.src =              'https://apis.google.com/js/plusone.js';            var            s =              document.getElementsByTagName(                'script')[0];            s.parentNode.insertBefore(              po,              s);          })();          </script>        </div>      </div>    </div>   </blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><div id="on">      <div id="feedburner_right" style="top: 75%;">        <div id="NBTfeedburner_div">          <center>            <h4 style="color: #f66303;">You can also receive Free Email Updates:</h4>            <form action="http://feedburner.google.com/fb/a/mailverify"            method="post" onsubmit="window.open('http://feeds.feedburner.com/E-ideaMartbestBloggerTipsAndTricksAndManyMore', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"            target="popupwindow">              <input class="enteryouremail" gtbfieldid="10"              name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}"              onfocus="if (this.value == 'Enter your email here...') {this.value = '';}"              type="text" value="Enter your email here..."              />              <input name="uri" type="hidden"              value="NBTLab" />              <input class="submitbutton" type="submit"              value="Submit" />            </form>          </center>          <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTqewGDv2urbMs0mfLMlm710nwrIqOpeJ1GQbam23ynIFO-i_pZJTYh_414ACoFHmpzjJUpQbKEhlBUCl30JXsXb3hQ0O2EvEMeCMRruQsiqcB2MVR6jXRPLiZBYqaAMSFcDvqIYl50eGn/s1600/NBTfeedburner_right.png"          />          <div style="float: right; padding: 20px; margin: 0px;"><span class="Apple-tab-span" style="white-space: pre;"> </span><span style="font-size:10px;">Widget by <a href="http://www.e-ideamart.blogspot.com/">EIM</a>  <span class="Apple-tab-span" style="white-space: pre;"> </span></span>            <span style="font-size:8px;"></span>          </div>        </div>      </div>      </blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><br /></blockquote><blockquote class="tr_bq"><div id="on">        <div id="youtube_right" style="top:58%;">          <div id="youtube_div">            <img id="youtube_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Ltainm_SrLJ1LzCZ5rY_1ok8WUFkbeJvhnRViLDpV2zNF2uAslCiiiSMOVG3Tg2RvbOKJteCsvR61eG6gaNphk2sEZ2qwEofOpH-Q5-BZ4lmKHsP7_68zo-w22yhPAgMCG8mbz9VAwc/s1600/NBTyoutube_right.png "            />            <div style="float:left;margin:1px 0px 0px 2px;">              <iframe src=http://www.youtube.com/subscribe_widget?p=e-ideamart             style="height:105px;width:300px;border:0;"              scrolling="no" frameborder="0"></iframe>            </div>          </div>        </div>      </div></div></div></blockquote></blockquote><br /><br /><div class="divider"></div>Hope you all like this Updated widget. If you need any help then drop your comments below.Happy Blogging.</div>

Add 5 in 1 Slide Out Social Follower Box Widget to Blogger - Updated

Today we are going to lanch another updated blogger widget that contain all the 5 Big Social Network (Facebook, Twitter, Google Plus, YouT...

+ Read more »

Stunning JQuery Blogger Featured Post Widget With Thumbnail

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLpOuk-Bd_C1klGfTASdAdTu9U3RMcj567uunFAsBlqnNfToD-cLv_Z-kDK_cyReZFbM-X7-Tg0nd0r2hwIRDqPYicph_1eRWnEEn5ipVkXZhuDXgXDGDP6hQ6hWnpo0XAnXCOw3kR8Y0/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: black; font-family: Verdana, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLpOuk-Bd_C1klGfTASdAdTu9U3RMcj567uunFAsBlqnNfToD-cLv_Z-kDK_cyReZFbM-X7-Tg0nd0r2hwIRDqPYicph_1eRWnEEn5ipVkXZhuDXgXDGDP6hQ6hWnpo0XAnXCOw3kR8Y0/s1600/1.png" /></span></a></div><div style="text-align: center;"><span style="font-family: Verdana, sans-serif;"><br /></span></div><div style="text-align: justify;"><br /><div style="background-color: white; color: #333333; line-height: 19px;"><span style="font-family: Verdana, sans-serif;">Every publisher dream of having a Featured Post category in his blog,but in blogger most of featured post widgets are not attractive,lacks posts thumbnails,lacks a little description about the post and lacks all the stunning effects like CSS and Jquery.All it has is just text with a link attached to your post which looks so un attractive.</span></div><div style="background-color: white; color: #333333; line-height: 19px;"><span style="font-family: Verdana, sans-serif;"><br /></span></div><div style="background-color: white; color: #333333; line-height: 19px;"><span style="font-family: Verdana, sans-serif;">You have probably seen those Featured Posts Widgets in WordPress blog which do attract your eyes,Which has a Big post thumbnail,a small post description,good style with CSS and jQuery.</span></div><div style="background-color: white; color: #333333; line-height: 19px;"><span style="font-family: Verdana, sans-serif;"><br /></span></div><div style="background-color: white; color: #333333; line-height: 19px;"><span style="font-family: Verdana, sans-serif;">A Featured post widget has some significance,you are telling your readers to must check these post as they are the top most post of the blog.So this is the reason why these posts are highly viewed and a boost in website impression is also observed.So Today we will going to add a <b>JQuery Featuered Post Widget with Big Thumbnails in Blogger</b></span></div><span style="font-family: Verdana, sans-serif;"></span><br /><a href="https://www.blogger.com/null" name="more"></a><br /><div style="text-align: justify;"><span style="background-color: white; color: #333333; line-height: 19px; text-align: left;"><span style="font-family: Verdana, sans-serif;"><span style="background-color: white;">But first let us see what we will going to achive at the end of this tutorial (</span><span style="background-color: white;">Here is the live demo of the widget)</span></span></span></div><span style="background-color: white; color: #333333; line-height: 19px; text-align: left;"></span><br /><div style="background-color: white; color: #333333; line-height: 19px; text-align: left;"><span style="font-family: Verdana, sans-serif;"><br /></span></div><div style="background-color: white; color: #333333; line-height: 19px; text-align: center;"></div><div align="center" style="background-color: white; color: #333333; line-height: 19px;"><span style="border-bottom-color: rgb(11, 83, 148); border-bottom-style: solid; border-bottom-width: 10px; border-left-color: rgb(72, 161, 250); border-left-style: solid; border-left-width: 10px; border-right-color: rgb(72, 161, 250); border-right-style: solid; border-right-width: 10px; border-top-color: rgb(11, 83, 148); border-top-style: solid; border-top-width: 10px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; padding-top: 6px;"><b><a href="http://demo-e-ideamart.blogspot.com/" style="color: #289728; text-decoration: none;" target="_blank"><span style="font-family: Verdana, sans-serif;">LIVE DEMO</span></a></b></span></div><div align="justify" style="background-color: white; color: #333333; line-height: 19px;"><span style="font-family: Verdana, sans-serif;"><br /></span></div><div align="justify" style="background-color: white; color: #333333; line-height: 19px;"><span style="font-family: Verdana, sans-serif;"><br /></span></div><span style="font-family: Verdana, sans-serif;"><span style="background-color: white; color: #333333; line-height: 19px; text-align: left;"><span style="background-color: white;"><span style="background-color: white;"><span style="background-color: white;">So I am sure after viewing the demo you would love to add it to your blog so let us start rolling are fingers on this tutorial.</span></span></span></span></span><br /><span style="font-family: Verdana, sans-serif;"><span style="background-color: white; color: #333333; line-height: 19px; text-align: left;"><span style="background-color: white;"><span style="background-color: white;"><span style="background-color: white;"><br /></span></span></span></span></span><br /><div style="background-color: white; color: #333333; line-height: 19px; text-align: left;"><h3 style="background-color: white; border-bottom-color: rgb(40, 109, 164); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(40, 109, 164); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(40, 109, 164); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(40, 109, 164); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-style: solid; border-top-width: 1px; clear: both; color: #444444; font-weight: normal; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 7px; padding-right: 7px; padding-top: 3px; text-align: justify;"> <b style="text-align: left;"><span style="color: blue;"><span style="font-family: Verdana, sans-serif; font-size: small;">Adding Style Css Sheet To Blogger Template:</span></span></b></h3></div><span style="font-family: Verdana, sans-serif;"><span style="background-color: white; color: #333333; line-height: 19px; text-align: left;"><span style="background-color: white;">First we will insert Style Css Sheet in Your Blogger Template to do so we will </span></span></span><br /><ul style="background-color: white; color: #333333; line-height: 19px; text-align: left;"><li><span style="font-family: Verdana, sans-serif;">Go to Blogger >> Our Blog >> Template >> Edit HTML >> Proceed </span></li><li><span style="font-family: Verdana, sans-serif;">And now in the template search for<b> </b>the following code by <b>(CTRL+F)</b></span></li></ul></div><ul style="background-color: white; line-height: 19px;"></ul><div style="background-color: white; line-height: 19px;"><blockquote style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://4.bp.blogspot.com/-El02oIqIJlQ/Um1Fk9fukEI/AAAAAAAAAME/F82cxLEC-0g/s1600/E-iDea+Mart+image.png); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-color: rgb(102, 102, 102); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(102, 102, 102); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; line-height: 1.3em; margin-bottom: 0px; margin-left: 20px; margin-right: 20px; margin-top: 0px; padding-bottom: 10px; padding-left: 45px; padding-right: 20px; padding-top: 10px; text-align: -webkit-auto;"><div style="background-color: #f2f1f1;"><div style="text-align: justify;"><span style="text-align: left;"><span style="font-family: Verdana, sans-serif;">]]></b:skin></span></span></div></div></blockquote></div><div style="background-color: white; line-height: 19px;"><span style="font-family: Verdana, sans-serif;"><br /></span></div><ul style="background-color: white; line-height: 19px;"><li><span style="font-family: Verdana, sans-serif;">When you find  <b>]]></b:skin></b> just above it paste the following code</span></li></ul><div style="background-color: white; line-height: 19px;"><blockquote style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://4.bp.blogspot.com/-El02oIqIJlQ/Um1Fk9fukEI/AAAAAAAAAME/F82cxLEC-0g/s1600/E-iDea+Mart+image.png); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-color: rgb(102, 102, 102); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(102, 102, 102); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; line-height: 1.3em; margin-bottom: 0px; margin-left: 20px; margin-right: 20px; margin-top: 0px; padding-bottom: 10px; padding-left: 45px; padding-right: 20px; padding-top: 10px; text-align: -webkit-auto;"><div style="background-color: #f2f1f1;"><div style="text-align: justify;"><span style="font-family: Verdana, sans-serif;"><br /><span style="line-height: 1.3em;">/* EiM-Featured-Post-Widget */</span></span><br /><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">.holderMBLBOXES {</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>overflow:hidden;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>width:320px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>height:333px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>float:left;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>position:relative;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-color:#000;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin-right:1px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">}</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">.holderMBLBOXES .image {</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        position:absolute;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        left:-100px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">}</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">.holderMBLBOXES span {</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        background-color:#333;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        font-size:27px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        font-family:Arial, Helvetica, sans-serif;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        color:#dedede;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        font-weight:700;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        padding:4px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        position:absolute;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>        top:120px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        left:4px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">}</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">.holderMBLBOXES .text {</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        padding:20px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        display:none;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        font-family:Arial, Helvetica, sans-serif;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        line-height:26px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        position:absolute;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        top:180px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        font-size:16px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        color:#fff;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>        width:340px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">}</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">.clear {</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>clear:both;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">}</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">.mainMBLBOXES {</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>width:1000px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>height:333px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin:0 auto;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>overflow:hidden;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">}</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">.credit {</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>font-size:12px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin-top:25px;</span></span></div><div><span style="line-height: 18px;"><span style="font-family: Verdana, sans-serif;">}</span></span></div></div></div></blockquote><ul><li><span style="font-family: Verdana, sans-serif;">Now hit the Save Template button and your template will be saved</span></li></ul><h3 style="background-color: white; border-bottom-color: rgb(40, 109, 164); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(40, 109, 164); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(40, 109, 164); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(40, 109, 164); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-style: solid; border-top-width: 1px; clear: both; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 7px; padding-right: 7px; padding-top: 3px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: small;"><b><span style="color: blue;">Adding the Basic Html And JQuery To the Blog</span></b></span></h3><span style="font-family: Verdana, sans-serif;">So Now To Add Html Coding we will </span><br /><ul><li><span style="font-family: Verdana, sans-serif;">Go To  Blogger.com <b>>></b> Layout <b>>></b> Add a Gadget >> Add Html/JavaScript >> and Paste the following code there</span></li></ul><div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f2f1f1; background-image: url(http://4.bp.blogspot.com/-El02oIqIJlQ/Um1Fk9fukEI/AAAAAAAAAME/F82cxLEC-0g/s1600/E-iDea+Mart+image.png); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-color: rgb(102, 102, 102); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(102, 102, 102); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; line-height: 1.3em; margin-bottom: 0px; margin-left: 20px; margin-right: 20px; margin-top: 0px; padding-bottom: 10px; padding-left: 45px; padding-right: 20px; padding-top: 10px; text-align: -webkit-auto;"><div style="text-align: left;"><span style="font-family: Verdana, sans-serif;"><br /></span><br /><div><div><span style="font-family: Verdana, sans-serif;"><br /></span></div><div><span style="font-family: Verdana, sans-serif;"><div id="container"><div class="mainMBLBOXES"></span></div><div><span style="font-family: Verdana, sans-serif;">  <div class="holderMBLBOXES notactive"> <a href="<span style="background-color: orange;">Your-First-Post-Url</span>"><img class="image" src="<span style="background-color: orange;">Your-First-Post-Image</span>" width="500"  height="334" /> <span><span style="background-color: orange;">Your-First-Post-Title</span></span></a></span></div><div><span style="font-family: Verdana, sans-serif;">    <div class="text"><span style="background-color: orange;">Your-First-Post-Description</span></div></span></div><div><span style="font-family: Verdana, sans-serif;">  </div></span></div><div><span style="font-family: Verdana, sans-serif;"><br /></span></div><div><span style="font-family: Verdana, sans-serif;">  <div class="holderMBLBOXES notactive"> <a href="<span style="background-color: cyan;">Your-Second-Post-Url</span>"><img class="image" src="<span style="background-color: cyan;">Your-Second-Post-Image</span>" width="500"  height="334" /> <span><span style="background-color: cyan;">Your-Second-Post-Title</span></span></a></span></div><div><span style="font-family: Verdana, sans-serif;">    <div class="text"><span style="background-color: cyan;">Your-Second-Post-Description</span></div></span></div><div><span style="font-family: Verdana, sans-serif;">  </div></span></div><div><span style="font-family: Verdana, sans-serif;"><br /></span></div><div><span style="font-family: Verdana, sans-serif;"><br /></span></div><div><span style="font-family: Verdana, sans-serif;">  <div class="holderMBLBOXES notactive"> <a href="<span style="background-color: lime;">Your-Third-Post-Url</span>"><img class="image" src="<span style="background-color: lime;">Your-Third-Post-Image</span>" width="500"  height="334" /> <span><span style="background-color: lime;">Your-Third-Post-Title</span></span></a></span></div><div><span style="font-family: Verdana, sans-serif;">    <div class="text"><span style="background-color: lime;">Your-Third-Post-Description</span></div></span></div><div><span style="font-family: Verdana, sans-serif;">  </div></span></div><div><span style="font-family: Verdana, sans-serif;">                                                                                     <div class="clear"></div></span></div><div><span style="font-family: Verdana, sans-serif;"></div></span></div></div><span style="font-family: Verdana, sans-serif;"><br /></span><br /><div><div><span style="font-family: Verdana, sans-serif;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script></span>< /div> <br /><div><span style="font-family: Verdana, sans-serif;"><script type="text/javascript"> </span></div><div><span style="font-family: Verdana, sans-serif;">$(document).ready(function(){</span></div><div><span class="Apple-tab-span" style="white-space: pre;"><span style="font-family: Verdana, sans-serif;"> </span></span></div><div><span class="Apple-tab-span" style="white-space: pre;"><span style="font-family: Verdana, sans-serif;"> </span></span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span> $('.holderMBLBOXES').hover(</span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>function () {</span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).removeClass('.notactive');<span class="Apple-tab-span" style="white-space: pre;"> </span></span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$('.notactive').stop().animate({'width':'290px'},400); </span></div><div><span style="font-family: Verdana, sans-serif;">        $(this).find('img').stop().animate({'top':'-165px'},400); </span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).stop().animate({'width':'380px'},400); </span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).find('span').css({'background-color':'#000'}); </span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).find('.text').fadeIn(300); </span></div><div><span style="font-family: Verdana, sans-serif;">      },</span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>    function () {</span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>  <span class="Apple-tab-span" style="white-space: pre;"> </span>$('.notactive').stop().animate({'width':'320px'},400); </span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>  <span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).addClass('.notactive');<span class="Apple-tab-span" style="white-space: pre;"> </span></span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).find('.text').hide();</span></div><div><span style="font-family: Verdana, sans-serif;">       <span class="Apple-tab-span" style="white-space: pre;"> </span>    $(this).find('img').stop().animate({'top':'0px'},500); </span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>    $(this).stop().animate({'width':'320px'},400);</span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).find('span').css({'background-color':'#333', 'color':'#dedede'}); </span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span> </span></div><div><span style="font-family: Verdana, sans-serif;">      });</span></div><div><span style="font-family: Verdana, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span> </span></div><div><span class="Apple-tab-span" style="white-space: pre;"><span style="font-family: Verdana, sans-serif;"> </span></span></div><div><span style="font-family: Verdana, sans-serif;">});</span></div><div><span style="font-family: Verdana, sans-serif;"><br /></span></div><div><span style="font-family: Verdana, sans-serif;"><br /></span></div><div><span style="font-family: Verdana, sans-serif;"></script></span></div></div></div></div></blockquote></div><span style="font-family: Verdana, sans-serif;"><br class="Apple-interchange-newline" /></span></div><h3 style="background-color: white; border-bottom-color: rgb(40, 109, 164); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(40, 109, 164); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(40, 109, 164); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(40, 109, 164); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-style: solid; border-top-width: 1px; clear: both; line-height: 19px; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 7px; padding-right: 7px; padding-top: 3px;"> <span style="font-family: Verdana, sans-serif; font-size: small;"><b><span style="color: blue;">Customizing Your Featured Post Widget</span></b></span></h3><div style="background-color: white; line-height: 19px;"><span style="font-family: Verdana, sans-serif;">This widget could contain 3 featured posts,so you need to configure it for the Title of the post , The Featured image for your post , The small description of your post,and the Post URL.</span></div><div style="background-color: white; line-height: 19px;"><hr /><span style="font-family: Verdana, sans-serif;">To Customize your <b>First Featured Post</b> </span></div><div style="background-color: white; line-height: 19px;"><span style="font-family: Verdana, sans-serif;">Replace <span style="background-color: orange;"><b>Your-First-Post-Url</b></span><span style="background-color: white;"> with the URL of your Post</span></span></div><div style="background-color: white; line-height: 19px;"><span style="font-family: Verdana, sans-serif;">Replace <span style="background-color: orange; font-weight: bold;">Your-First-Post-Image</span><span style="background-color: white;"> with the URL of your image </span></span></div><div style="background-color: white; line-height: 19px;"><span style="font-family: Verdana, sans-serif;">Replace <b><span style="background-color: orange;">Your-First-Post-Title</span><span style="background-color: white;"> </span></b><span style="background-color: white;">with the Title Of your Post</span></span></div><div style="background-color: white; line-height: 19px;"><span style="font-family: Verdana, sans-serif;">Replace <span style="background-color: orange; font-weight: bold;">Your-First-Post-Description</span><span style="background-color: white;"> with the small description of post</span></span></div><div style="background-color: white; line-height: 19px;"><span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div><div style="background-color: white; line-height: 19px;"><div><hr /><span style="font-family: Verdana, sans-serif;">To Customize your <b>Second Featured Post:</b> </span></div><div><span style="font-family: Verdana, sans-serif;">Replace <b><span style="background-color: cyan;">Your-Second-Post-Url</span></b><span style="background-color: white;"> with the URL of your Post</span></span></div><div><span style="font-family: Verdana, sans-serif;">Replace <b style="background-color: cyan;">Your-Second-Post-Image</b><span style="background-color: white;"> with the URL of your image </span></span></div><div><span style="font-family: Verdana, sans-serif;">Replace <b><span style="background-color: cyan;">Your-Second-Post-Title</span><span style="background-color: white;"> </span></b><span style="background-color: white;">with the Title Of your Post</span></span></div><div><span style="font-family: Verdana, sans-serif;">Replace <b style="background-color: cyan;">Your-Second-Post-Description</b><span style="background-color: white;"> with the small description of post</span></span></div></div><div style="background-color: white; line-height: 19px;"><span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div><div style="background-color: white; line-height: 19px;"><div><hr /><span style="font-family: Verdana, sans-serif;">To Customize your <b>First Featured Post:</b> </span></div><div><span style="font-family: Verdana, sans-serif;">Replace <span style="background-color: lime;"><b>Your-</b><b>Third</b><b>-Post-Url</b></span><span style="background-color: white;"> with the URL of your Post</span></span></div><div><span style="font-family: Verdana, sans-serif;">Replace <span style="background-color: lime;"><span style="font-weight: bold;">Your-</span><b>Third</b><span style="font-weight: bold;">-Post-Image</span></span><span style="background-color: white;"> with the URL of your image </span></span></div><div><span style="font-family: Verdana, sans-serif;">Replace <span style="background-color: lime;"><b>Your-</b><b>Third</b></span><b><span style="background-color: lime;">-Post-Title</span><span style="background-color: white;"> </span></b><span style="background-color: white;">with the Title Of your Post</span></span></div><div><span style="font-family: Verdana, sans-serif;">Replace <span style="background-color: lime;"><span style="font-weight: bold;">Your-</span><b>Third</b><span style="font-weight: bold;">-Post-Description</span></span><span style="background-color: white;"> with the small description of post</span></span></div></div><div style="background-color: white; line-height: 19px;"><hr /><span style="font-family: Verdana, sans-serif;"><br /></span></div><div style="background-color: white; line-height: 19px;"><span style="font-family: Verdana, sans-serif;"><span style="background-color: white;">Now After Customizing all three Featured Posts,Press the <b>Save Button </b>and View the Blog it would be picture perfect!!!!!</span><br /><span style="background-color: white;"></span><br /><span style="background-color: white;"><b>Note:</b>Your image that you will going to link in the featured post should have  </span><span style="background-color: white;">Width</span>500px and the height  334px to gave most desirable results</span></div><span style="font-family: Verdana, sans-serif;"><br /></span><br /><div style="text-align: justify;"><span style="font-family: Verdana, sans-serif;">So that's how you can featured your certain posts which will not only increase the specific post view but all together it will increase your page impression,if you feel any difficulties,then feel free to ask till then peace blessing and happy featuring </span></div></div>

Stunning JQuery Blogger Featured Post Widget With Thumbnail

Every publisher dream of having a Featured Post category in his blog,but in blogger most of featured post widgets are not attractive,lac...

+ Read more »

Flipper JQuery Plugin: Page Flip Image Gallery Widget

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="MsoNoSpacing" style="font-family: Verdana; font-size: 12px; line-height: 19px;"><span style="font-family: inherit;">The procedure is extremely straightforward and it will take minutes to be integrated into your Blogger Blog. We have shaped this tutorial in such a way that it soaks less time and gives perfect results.</span></div><ul><li><span style="font-family: inherit;"><span style="background-color: white;">Go to Blogger.com > Your Blog >> Template</span></span></li><li><span style="font-family: inherit;"><span style="background-color: white;">Download Backup of your template incase anything went wrong.</span></span></li><li><span style="font-family: inherit;"><span style="background-color: white;">Then select Edit HTML >> Proceed</span></span></li><li><span style="font-family: inherit;"><span style="background-color: white;">Now in your Template Search for <b>]]></b:skin></b> and just above it paste the following CSS (Style Sheet) code.</span></span></li></ul><div style="font-family: Verdana; font-size: 12px; line-height: 19px; text-align: left;"><blockquote class="tr_bq"><span style="font-family: inherit;"></span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-wrap *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-wrap{position:relative;width:800px;height:400px;margin:20px 0 40px 0}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-wrap{-moz-user-select:none;-webkit-user-select:none;user-select:none;-ms-user-select:none}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page{position:absolute;left:0;top:0;width:200%;height:100%;background:white;border:1px solid #e1e1e1}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page-left{overflow:hidden;position:absolute;left:0;top:0;width:50%;height:100%}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page-left </span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page{left:0}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page-right </span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page{right:0;left:auto}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page-right{overflow:hidden;position:absolute;right:0;top:0;width:50%;height:100%}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page-wrap{position:absolute;left:0;top:0;width:100%;height:100%}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-overlay{display:none;width:100%;height:100%;position:absolute;left:0;top:0;z-index:9999}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page-right </span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,0.085)),color-stop(100%,rgba(0,0,0,0.04)));background:-webkit-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);</span><br /><span style="font-family: inherit;">filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#40000000',endColorstr='#14000000',GradientType=1)}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page-left .flipper-overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,0.04)),color-stop(100%,rgba(0,0,0,0.085)));background:-webkit-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);</span><br /><span style="font-family: inherit;">filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#14000000',endColorstr='#40000000',GradientType=1)}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page-right{-webkit-backface-visibility:hidden;-webkit-transform-origin:0 50%;-moz-backface-visibility:hidden;-moz-transform-origin:0 50%;-ms-backface-visibility:hidden;-ms-transform-origin:0 50%;-o-backface-visibility:hidden;</span><br /><span style="font-family: inherit;">-o-transform-origin:0 50%;backface-visibility:hidden;transform-origin:0 50%}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page-left{-webkit-backface-visibility:hidden;-webkit-transform-origin:100% 50%;-moz-backface-visibility:hidden;-moz-transform-origin:100% 50%;-ms-backface-visibility:hidden;-ms-transform-origin:100% 50%;-o-backface-visibility:hidden;</span><br /><span style="font-family: inherit;">-o-transform-origin:100% 50%;backface-visibility:hidden;transform-origin:100% 50%}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-page img{max-width:100%}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-column-full{display:block;width:100%;height:100%}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-column-full-half{float:left;display:block;width:50%;height:100%;margin:0;padding:0}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-column-outer{float:left;padding:30px;width:50%;height:100%}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-column-single-outer{padding:30px;width:100%;height:100%}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-column{overflow:hidden;height:100%;width:100%}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-inner-image{display:block;overflow:hidden}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-inner-image.start{margin-bottom:20px}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-inner-image.end{margin-top:20px}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-inner-image img{float:left}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-wrap{font:12px/18px helvetica,tahoma,sans-serif;color:#333;background-color:#fff}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-wrap h1{font-size:22px;line-height:36px}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-wrap p{margin:18px 0}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-next-page{position:absolute;width:38px;height:38px;right:-44px;top:50%;margin-top:-19px;cursor:pointer}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-prev-page{position:absolute;width:38px;height:38px;left:-44px;top:50%;margin-top:-19px;cursor:pointer}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-pager-wrap{position:absolute;left:0;bottom:-24px}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-pager{float:left;width:17px;height:18px;margin:5px 5px 0 0;cursor:pointer}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-temp{border:1px solid #e1e1e1;top:-1px}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.flipper-fb-bounce{position:absolute;z-index:9999;background:#e1e1e1;padding:10px;right:0;top:0;font:12px/18px helvetica,tahoma,sans-serif;color:#333;display:none}</span><br /><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">.demo-box {</span><br /><span style="font-family: inherit;"> padding: 10px 0 5px 0;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">#my-flipper, #myflipper {</span><br /><span style="font-family: inherit;"> margin: 0 auto;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">.flipper-page-padding-wrap {</span><br /><span style="font-family: inherit;"> padding: 40px;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">#myflipper h1 {</span><br /><span style="font-family: inherit;"> text-align: center;</span><br /><span style="font-family: inherit;"> font-size: 36px;</span><br /><span style="font-family: inherit;"> line-height: 340px;</span><br /><span style="font-family: inherit;"> font-weight: 100;</span><br /><span style="font-family: inherit;"> font-style: italic;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">#myflipper h2 {</span><br /><span style="font-family: inherit;"> text-align: left;</span><br /><span style="font-family: inherit;"> font-size: 22px;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">p.headline.first {</span><br /><span style="font-family: inherit;"> margin-top: 155px;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">#myflipper p.headline {</span><br /><span style="font-family: inherit;"> display: block;</span><br /><span style="font-family: inherit;"> font-size: 16px;</span><br /><span style="font-family: inherit;"> line-height: 22px;</span><br /><span style="font-family: inherit;"> font-weight: 100;</span><br /><span style="font-family: inherit;"> font-style: italic;</span><br /><span style="font-family: inherit;"> text-align: center;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">p.left {</span><br /><span style="font-family: inherit;"> position: absolute;</span><br /><span style="font-family: inherit;"> left: 30px;</span><br /><span style="font-family: inherit;"> top: 30px;</span><br /><span style="font-family: inherit;"> width: 40%;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">p.right {</span><br /><span style="font-family: inherit;"> position: absolute;</span><br /><span style="font-family: inherit;"> width: 40%;</span><br /><span style="font-family: inherit;"> bottom: 30px;</span><br /><span style="font-family: inherit;"> right: 30px;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">#myflipper .description.no-margin {</span><br /><span style="font-family: inherit;"> margin-top: 40px;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">.flipper-page .fullsize {</span><br /><span style="font-family: inherit;">/* margin: -31px 0 0 -31px;*/</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">.mag {</span><br /><span style="font-family: inherit;"> -moz-column-count: 2;</span><br /><span style="font-family: inherit;"> -moz-column-gap: 20px;</span><br /><span style="font-family: inherit;"> -webkit-column-count: 2;</span><br /><span style="font-family: inherit;"> -webkit-column-gap: 20px;</span><br /><span style="font-family: inherit;"> column-count: 2;</span><br /><span style="font-family: inherit;"> column-gap: 20px;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">.mag img {</span><br /><span style="font-family: inherit;"> float: left;</span><br /><span style="font-family: inherit;"> margin: 0 10px 10px 0;</span><br /><span style="font-family: inherit;"> width: 200px;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">.video-wrapper {</span><br /><span style="font-family: inherit;"> width: 700px;</span><br /><span style="font-family: inherit;"> margin: 80px auto;</span><br /><span style="font-family: inherit;">}</span><br /><span style="font-family: inherit;">.video-wrapper h3 {</span><br /><span style="font-family: inherit;"> font-size: 36px;</span><br /><span style="font-family: inherit;"> line-height: 22px;</span><br /><span style="font-family: inherit;"> font-weight: 100;</span><br /><span style="font-family: inherit;"> cursor: pointer;</span><br /><span style="font-family: inherit;"> text-align: center;</span><br /><span style="font-family: inherit;"> font-family: helvetica;</span><br /><span style="font-family: inherit;"> color: white;</span><br /><span style="font-family: inherit;"> text-shadow: 0 1px 1px rgba(0,0,0,0.4);</span><br /><span style="font-family: inherit;">}</span><br /><div><span style="font-family: inherit;"><br /></span></div><span style="font-family: inherit;"><br /></span></blockquote></div><span style="background-color: white; font-family: inherit; font-size: 12px; line-height: 19px; text-align: left;"></span><br /><div style="font-family: Verdana; font-size: 12px; line-height: 19px; text-align: left;"><span style="background-color: white; font-family: inherit;">5. Now Search for </span><b style="font-family: inherit;"></head></b><span style="background-color: white; font-family: inherit;"> once you find it then just above it paste the following JavaScript (Jquery) code.</span></div><div style="text-align: left;"><div style="font-size: 12px; line-height: 19px;"><span style="font-family: inherit;"><br /></span></div><div><div style="font-family: Verdana; font-size: 12px; line-height: 19px;"><blockquote class="tr_bq"><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><script src="http://mbl-flipper-google-blogger.googlecode.com/files/modernizr-2.min.js"></script></span></div><div style="line-height: normal;"><span class="Apple-tab-span" style="background-color: white; font-family: inherit; white-space: pre;"> </span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js?ver=3.3.2'></script></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><script></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;">(function ($, undefined) {</span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$(document).ready(function() {</span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$('#myflipper').flipper({</span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span>'width' : 700,</span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;">'height' : 400,</span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span>"arrows" : true,</span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span>pager : true,</span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;">'imagesPath' : 'http://mybloggerlab.com/Images/'</span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span>});</span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span>});</span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;">}(jQuery));</span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"></script><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div><div style="line-height: normal;"><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><script src="http://mbl-flipper-google-blogger.googlecode.com/files/flipper.min.js"> </script></span></div></blockquote></div><div style="font-size: 12px; line-height: 19px;"><span style="background-color: white; font-family: inherit;"></span></div><div style="font-size: 12px; line-height: 19px;"><span style="font-family: inherit;"><br /></span></div><div style="font-family: Verdana; font-size: 12px; line-height: 19px;"><span style="background-color: white; font-family: inherit;">6. Now Go to Layout >> Add a Gadget >> Add HTML/JavaScript >> and then paste the following code </span></div><div style="font-family: Verdana; font-size: 12px; line-height: 19px;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="font-family: Verdana; font-size: 12px; line-height: 19px;"><div><blockquote class="tr_bq"><span style="background-color: #eeeeee; font-family: inherit;"><br class="Apple-interchange-newline" /></span><span style="background-color: white; font-family: inherit;"><!-- MBL Page Flipper Widget --></span><br /><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><div class="demo-box"></span><br /><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><div id="myflipper"></span><br /><span style="background-color: white;"><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><div class="flipper-page"><div class="flipper-page-padding-wrap"></span></span><br /><span style="background-color: white;"><span style="font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga66wq7RvGMHI6S-lpVrGGrJnvSIRQte4XwXHFYqnEcFp6q5A0fuu8OKMjiP2RV5__jR-0r5uXXHWeqhbUk8Klp7enlnWGlfhOkrQAkFvkE6SSHvHIj1Y6nW4UX3VFFnTk1oEYq7KjB-w/s1600/1.png" class="fullsize" /></span><span style="font-family: inherit;"></div></div></span></span><br /><span class="Apple-tab-span" style="white-space: pre;"><span style="background-color: white; font-family: inherit;"> </span></span><br /><span style="background-color: white;"><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><div class="flipper-page no-padding"></span></span><br /><span style="background-color: white;"><span style="font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgstx5HQ1bY6O_hcUaV78a6ITZeJo_dhnU7pRJnlrBF6-hnZp_iCwAnhYumyBZEbMtbU8bejEbSj7oDpxhqqkdlokStCCAgiwb37IGt7uwL7TR3r7KI3Yg6-BGenQffiVtvx4k-VXCWjZQ/s1600/2.png" class="fullsize" /></span><span style="font-family: inherit;"></div></span></span><br /><span style="background-color: white;"><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><div class="flipper-page no-padding"></span></span><br /><span style="background-color: white;"><span style="font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXkBHSsJDU53sEb2IhXhnkIiDh4-vEUdt_gqGazt-H_XZ6o0lRt4SC0GzY7hThDeYvCVFSQZqLRtpwAOeir4FxwzJVME4lHUeDtokDcMQ6BJ7sT0rex5LjsXoeeKdOFGNqvipQCW_qUVk/s1600/3.png" class="fullsize" /> </span><span style="font-family: inherit;"></div></span></span><br /><span class="Apple-tab-span" style="white-space: pre;"><span style="background-color: white; font-family: inherit;"> </span></span><br /><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><div class="flipper-page"><div class="flipper-page-padding-wrap"></span><br /><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><h2>How about some text?</h2></span><br /><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p class="mag"></span><br /><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.<br /><br /></span><br /><span style="background-color: white;"><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</span><span style="font-family: inherit;"></p></span></span><br /><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p class="headline" style="margin-top: 40px;">It feels just like a magazine.</p></span><br /><span style="background-color: white; font-family: inherit;"></div></div></span><br /><span style="background-color: white;"><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><div class="flipper-page"></span></span><br /><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p class="headline first">Flicking through photos feels just like in an album. <br />Thank you for checking out Flipper.</p></span><br /><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span></div></span><br /><span style="background-color: white;"><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><div class="flipper-page"></span></span><br /><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzg3uo4zkyhAaEwGBYjzGv_NTiPqJSJlouMQ_pI7U2hjeR9NjI6SbO7Qro9BZBf7pJufcGIo5qMhUWAq5k029zX6kJ4O5EX-nI86RnBBnY5Mmw-PWE2-W2bZ-pdpHUdxs7xFEcbmR0CM/s1600/flipper.png" /></span><br /><span style="background-color: white; font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span></div></span><br /><span style="background-color: white;"><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;"><span class="Apple-tab-span" style="white-space: pre;"> </span></div></div></span></span></blockquote></div><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="font-family: Verdana; font-size: 12px; line-height: 19px;"><blockquote class="tr_bq"><span style="background-color: white; font-family: inherit;"><b style="text-align: justify;">Remember: </b><span style="text-align: justify;">You can paste the Above HTML code anywhere you like i.e. in post, above posts, bellow posts and etc</span><span style="text-align: justify;">. </span></span></blockquote><div style="text-align: justify;"><span style="background-color: white; font-family: inherit;"><br /></span></div><div style="text-align: justify;"><span style="background-color: white; font-family: inherit;">7. Now you will keep the title box empty and then Save your widget by pressing Save Now button.</span></div><div style="text-align: justify;"><span style="background-color: white; font-family: inherit;"><br /></span></div></div><div><div class="MsoNoSpacing" style="line-height: 19px; text-align: justify;"><div class="MsoNoSpacing" style="text-align: left;"><div class="MsoNoSpacing"><div class="MsoNoSpacing" style="background-color: white;"><div class="MsoNoSpacing" style="background-color: white;"><div class="MsoNoSpacing" style="background-color: white;"><div class="MsoNoSpacing" style="background-color: white;"><div class="MsoNoSpacing" style="background-color: white;"><div class="MsoNoSpacing" style="background-color: white; text-align: center;"><div class="MsoNoSpacing"><div class="MsoNoSpacing" style="background-color: white;"><div class="MsoNoSpacing"><div class="MsoNormal" style="background-color: white;"><div class="MsoNoSpacing"><div class="MsoNoSpacing"><div class="MsoNoSpacing" style="background-color: white;"><div class="MsoNoSpacing" style="background-color: white; text-align: left;"><div style="text-align: justify;"><div style="background-color: white; text-align: center;"><div style="text-align: justify;"><div style="background-color: white;"><div style="background-color: white;"><h3>How To Customize Flipper: </h3></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><ul style="font-family: Verdana; font-size: 12px; line-height: 19px; list-style: none;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicswpHR4T_GKLRVCeI6l5i1msPbA6KWcBrz4paXq6PuN90uLSsO07xwUGxk_iRszZxL_lF490mafO6X6GFT2ZhEDPxxKlexVvLV11QXtxy4vwDzu7nQrbNFhDl6IXbY28IX-X3CCGCMhk/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="background-color: white;"><span style="font-family: inherit;">If you want to add more Text pages on your Flipper, just add the following coding at the end of your HTML coding (in step 6) </span></span></li></ul><blockquote class="tr_bq"><span style="background-color: white; font-family: inherit;"><div class="flipper-page"><div class="flipper-page-padding-wrap"><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><h2>How about some text?</h2><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><p class="mag"><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.<br /><br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><p class="headline" style="margin-top: 40px;">It feels just like a magazine.</p></div></div></span></blockquote><div style="font-family: Verdana; font-size: 12px; line-height: 19px;"><span style="font-family: inherit;"></span></div><ul style="font-family: Verdana; font-size: 12px; line-height: 19px; list-style: none;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicswpHR4T_GKLRVCeI6l5i1msPbA6KWcBrz4paXq6PuN90uLSsO07xwUGxk_iRszZxL_lF490mafO6X6GFT2ZhEDPxxKlexVvLV11QXtxy4vwDzu7nQrbNFhDl6IXbY28IX-X3CCGCMhk/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="background-color: white;"><span style="font-family: inherit;">If you want to add more images to your Flipper, then paste the following Code at the end of your HTML coding (in step 6)</span></span></li></ul><blockquote class="tr_bq"><span style="font-family: inherit;"> <span style="background-color: white;"><div class="flipper-page"><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzg3uo4zkyhAaEwGBYjzGv_NTiPqJSJlouMQ_pI7U2hjeR9NjI6SbO7Qro9BZBf7pJufcGIo5qMhUWAq5k029zX6kJ4O5EX-nI86RnBBnY5Mmw-PWE2-W2bZ-pdpHUdxs7xFEcbmR0CM/s1600/flipper.png" /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span></div></span></span></blockquote><div style="font-family: Verdana; font-size: 12px; line-height: 19px; text-align: justify;"></div><ul style="font-family: Verdana; font-size: 12px; line-height: 19px; list-style: none;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicswpHR4T_GKLRVCeI6l5i1msPbA6KWcBrz4paXq6PuN90uLSsO07xwUGxk_iRszZxL_lF490mafO6X6GFT2ZhEDPxxKlexVvLV11QXtxy4vwDzu7nQrbNFhDl6IXbY28IX-X3CCGCMhk/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="background-color: white;"><span style="font-family: inherit;">The customization of the Flipper is extreamly strightforwad, i am sure you will not find any sort of difficulty while personalizing.  </span></span><span style="font-family: inherit;"><b></b></span></li></ul></div></div></div></div>

Flipper JQuery Plugin: Page Flip Image Gallery Widget

The procedure is extremely straightforward and it will take minutes to be integrated into your Blogger Blog. We have shaped this tutorial in...

+ Read more »

Vertical drop down menu with jQuery

<div dir="ltr" style="text-align: left;" trbidi="on">jGlideMenu is a vertical menu that can be dragged and dropped so that the reader can place it anywhere, and in addition, he can browse through the tabs in a very peculiar manner that comes with a sliding effect giving a sexy touch.<br /><br />One of the advantages is that it can store a large number of links and can be removed anytime if we want.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQG-R8pC_HLR2XqLDnpyRtC5M9GoURGoh-u9gzXqJNqsM8ozOeVzNNILSmGfznI4sBWd915333KwYSulMc9AQckluDK4Kxw2AeyQ3ARZK95bM_d3sXNKxSRIzmonP0GDpAeyGPVOLAirQH/s1600/vertical-drop-down-menu-with-jquery-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="vertical menu, menu for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQG-R8pC_HLR2XqLDnpyRtC5M9GoURGoh-u9gzXqJNqsM8ozOeVzNNILSmGfznI4sBWd915333KwYSulMc9AQckluDK4Kxw2AeyQ3ARZK95bM_d3sXNKxSRIzmonP0GDpAeyGPVOLAirQH/s1600/vertica l-drop-down-menu-with-jquery-for-blogger.png" title="vertical drop down menu with jQuery" /></a></div><br />To understand this menu better and to see it in action, visit this <a href="http://helploggerdemo.blogspot.com/">demo blog</a>. There we can drag the menu, navigate through its tabs or close.<br /><br />To add this vertical menu on your blog, just follow these steps:<br /><br />1) From your Blogger dashboard, go to <b>Template</b> > <b>Edit HTML</b> and before the <b></head></b> tag, add these scripts:<br /><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><br /><i><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript'/></i><br /><script src='http://helplogger.googlecode.com/svn/trunk/jQuery.jGlideMenu.min.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function(){<br />$('#jGlide_001').jGlideMenu({<br />tileSource : '.jGlide_001_tiles' , <br />demoMode : false <br />}).show();<br /><br />$('#switch').click(function(){$(this).jGlideMenuToggle();});<br />});<br />//]]><br /></script></blockquote>2) Now paste before<b> ]]></b:skin></b> these styles:<br /><blockquote class="tr_bq">.jGM_box {<br />position: absolute; <span style="color: #6aa84f;">/* Change absolute with fixed if you want it to float */</span><br />top: 50px;<span style="color: #6aa84f;"> /* Distance from above */</span><br />right: 760px; <span style="color: #6aa84f;">/* Distance from right */</span><br />width: 227px; <br />height: 317px;<br />background: #fff; <span style="color: #6aa84f;">/* Background color */</span><br />margin: 0;<br />padding: 0;<br />border: 1px solid #ccc; <span style="color: #6aa84f;">/* Border */</span><br />overflow: hidden;<br />}<br />.jGM_header {<br />position: absolute;<br />top: 0;<br />left: 0;<br />height: 18px;<br />width: 227px;<br />background: #d1d1d1; <span style="color: #6aa84f;">/* Background color for the up bar */</span><br />color: #fff;<br />text-align: right;<br />vertical-align: middle;<br />line-height: 18px;<br />cursor: move;<br />}<br />.jGM_header a {<br />margin-right: 12px;<br />text-decoration: none;<br />color: #000 !important;<br />cursor: pointer;<br />}<br />.jGM_wrapper {<br />position: absolute;<br />top: 19px;<br />left: 0;<br />width: 2270px;<br />height: 288px;<br />margin: 0;<br />padding: 0;<br />border: 0;<br />}<br />.jGM_tile {<br />position: absolute;<br />top: 0;<br />left: 7px;<br />width: 213px;<br />height: auto;<br />overflow: hidden;<br />margin: 0;<br />padding: 0;<br />border: 0;<br />display: block;<br />}<br />.jGM_cats {<br />width: 100%;<br />height: 64px;<br />overflow: hidden;<br />vertical-align: middle;<br />text-align: left;<br />}<br />.jGM_cats h4 {<br />font-family: Verdana,Arial,serif;<br />font-size: 1.8em;<br />margin: 0;<br />padding: 2px 0;<br />line-height: 1.8em;<br />color: #414141;<br />font-weight: normal;<br />}<br />.jGM_cats p {<br />font-family: Verdana,tahoma,arial;<br />font-size: 1em; <span style="color: #6aa84f;">/* Font size of the description */</span><br />margin: 0;<br />padding: 0;<br />line-height: 1.2em;<br />color: #858585; <span style="color: #6aa84f;">/* Description color */</span><br />font-weight: normal;<br />}<br />.jGM_pager {<br />height: 18px;<br />width: 213px;<br />line-height: 18px;<br />margin: 0;<br />border: 0;<br />padding: 0;<br />background: #f6f6f6; <br />text-align: center;<br />vertical-align: middle;<br />}<br />.jGM_pager a {<br />text-decoration: none;<br />font-weight: bold;<br />text-decoration: none;<br />display: block;<br />}<br />.jGM_pager a:hover { background: #d1d1d1; }<br />.jGM_pager img { border: 0; margin: 6px 0; }<br />.jGM_content {<br />width: 213px;<br />height: 150px;<br />margin: 1px 0;<br />padding: 0;<br />border: 0;<br />overflow: hidden;<br />}<br />.jGM_content a {<br />font-family: Tahoma,arial;<br />text-decoration: none;<br />color: #333 !important;<br />height: 18px;<br />width: 100%;<br />display: block;<br />line-height: 18px;<br />padding: 0 0 0 10px;<br />background-color: #e6e7e9;<br />margin: 1px 0;<br />}<br />.jGM_content a:hover {<br />color: #fff !important;<br />background-color: #4D4E67;<span style="color: #6aa84f;"> /* Bar color on mouseover */</span><br />}<br />.jGM_more {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_0baZ4zdyW2imny_E3HAiWxTqPPwRw2yivAWiEFvsCw7QTW-LhBT6mhklKxijl69n9UqqEszljWOIIhBYsZVcgciZfR09q6rcBwAV_zyyY8DOW03e1HQSCLQc2_EEDUFx9BpTsVBj06Y/s1600/arrow.gi f);<br />background-repeat: no-repeat;<br />background-position: 203px 50%;<br />}<br />.jGM_back {<br />position: absolute;<br />top: 255px;<br />right: 0;<br />height: 18px;<br />width: 52px;<br />background: #d1d1d1;<br />line-height: 18px;<br />vertical-align: middle;<br />text-align: center;<br />margin: 10px 0 0 0;<br />padding: 0;<br />border: 0;<br />z-index: 99;<br />}<br />.jGM_back a {<br />height: 100%;<br />width: 100%;<br />text-decoration: none;<br />color: #000 !important; /<span style="color: #6aa84f;">* Color of the "Back" link */</span><br />display: block;<br />}<br />.jGM_back a:hover {<br />color: #fff !important;<span style="color: #6aa84f;"> /* Color of the "Back" link on mouseover */</span><br />background: #4D4E67; <br />}<br />.jGM_reset {<br />position: absolute;<br />top: 255px;<br />right: 62px;<br />height: 18px;<br />width: 52px;<br />background: #d1d1d1;<br />line-height: 18px;<br />vertical-align: middle;<br />text-align: center;<br />margin: 10px 0 0 0;<br />padding: 0;<br />border: 0;<br />z-index: 99;<br />}<br />.jGM_reset a {<br />height: 100%;<br />width: 100%;<br />text-decoration: none;<br />color: #000 !important; <span style="color: #6aa84f;">/* Color of the "Home" link */</span><br />display: block;<br />}<br />.jGM_reset a:hover { <br />color: #fff !important; <span style="color: #6aa84f;">/* Color of the "Home" link on mouseover */</span><br />background: #4D4E67;<br />}</blockquote>3) Now go to <b>Layout </b>and paste the structure of the menu inside a<b> HTML/Javascript</b> gadget:<br /><blockquote class="tr_bq"><div class="jGM_box" id="jGlide_001"><br /><br /><b><i><!-- Here all the links of the first level --></i></b><br /><ul id="tile_001" class="jGlide_001_tiles" title="Menu" alt="Description of the first level"><br /><li rel="tile_002">Link 1</li><br /><li rel="tile_003">Link 2</li><br /><li rel="tile_004">Link 3</li><br /><li rel="tile_006">Link 4</li><br /><li rel="tile_007">Link 5</li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 6</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 7</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 8</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 9</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 10</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 11</span></a></li><br /></ul><br /><br /><b><i><!-- Here all the links of the second level --></i></b><br /><ul id="tile_002" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li rel="tile_005">Link 1.1</li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.2</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.3</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.4</span></a></li><br /></ul><br /><br /><ul id="tile_003" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 2.1</span></a></li><br /><li rel="tile_008">Link 2.2</li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 2.3</span></a></li><br /></ul><br /><br /><ul id="tile_004" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 3.1</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 3.2</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 3.3</span></a></li><br /></ul><br /><br /><br /><ul id="tile_006" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 4.1</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 4.2</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 4.3</span></a></li><br /></ul><br /><br /><ul id="tile_007" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 5.1</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 5.2</span></a></li><br /></ul><br /><br /><br /><i><b><!-- Here all the links of the third level --></b></i><br /><ul id="tile_005" class="jGlide_001_tiles" title="Menu" alt="Description of the third level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.1.1</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.1.2</span></a></li><br /></ul><br /><br /><br /><ul id="tile_008" class="jGlide_001_tiles" title="Menu" alt="Description of the third level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.2.1</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.2.2</span></a></li><br /></ul><br /><br /></div></blockquote>Add the URLs of the links and the names of the tabs and that's it.<br />If you want to add more links to the first level, then add another line like this:<br /><blockquote class="tr_bq"><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 12</span></a></li></blockquote>If you want to add another level to the link, then the line should be like this:<br /><blockquote><li <b>rel="tile_0010"</b>>Link 5</li></blockquote>Then in the area of ​​the second or third level, add a piece like this:<br /><blockquote class="tr_bq"><ul <b>id="tile_0010"</b> class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 5.1</span></a></li><br /><li><a href="<span style="color: blue;">Url address</span>"><span style="color: #cc0000;">Link 5.2</span></a></li><br /></ul></blockquote>Here you should keep something in mind, if you look closely the link takes the REL attribute which must be the same as the ID we put on the second level, these IDs should not repeat and always be unique.<br />Yes, it sounds complicated, but once you understand the concept, you'll see that is actually pretty simple.<br /><br />In the area of ​​the styles, there are the parts that can be customized. If you want the menu to be static, let's say you want to add it in the sidebar, then delete the first code of the script that is in italics. And in the CSS styles, remove this part:<br /><blockquote class="tr_bq">position: absolute; <span style="color: #6aa84f;">/* Change absolute with fixed if you want it to float */</span><br />top: 50px; <span style="color: #6aa84f;">/* Distance above */</span><br />right: 760px; <span style="color: #6aa84f;">/* Distance to the right */</span></blockquote>When there are many links then, there will be showing some arrows, so when you mouseover them, it will show the rest of the links either up or down.<br /><br />Throughout the menu structure we can change the Menu name and the descriptions as well.<br /><br />As this menu is made with JQuery, it is recommended to verify to have only one version of it.</div>

Vertical drop down menu with jQuery

jGlideMenu is a vertical menu that can be dragged and dropped so that the reader can place it anywhere, and in addition, he can browse thr...

+ Read more »