Add Facebook Popup Like Box in Blogger

Facebook has turned into the main online networking administration on the Internet playing host to more than 1.3 billion clients; of those, 800 million login to their dashboard bolsters at any rate once a day. On account of the limitless number of dynamic clients on administrations like Facebook, getting new perusers as a blogger or substance supplier has ended up less demanding than at any other time in recent memory.

Demo: How to Add Facebook Popup Like Box Widget In Blogger

With a specific end goal to create a powerful advanced battle, you totally must exploit social networking by doing things like coordinating Facebook on Blogger. Email advertising can be valuable, yet it accompanies confinements that could restrain your blog's potential. Maybe the most huge issue is that messages don't accompany a face or identity like Facebook does.

Also Read: Add Facebook Pop Like Box With Timer In Blogger

How to Make Text Slider in Blogger

After observing  the about page of  OLX.com, I decided to make a slider not for the image but  a slider intended for the texts. You can put this technique in your about page, in your sidebar or anywhere you like. Furthermore,  this innovation also adds professionalism to your works.  Without much words to say, let's make a texts slider for your Blogger blog!

Recommended:

How To Put Self- Animated Images And Text To Blogger

Create A CSS Image Slider With Thumbnails For Blogger

See the demo: How to Make Text Slider in Blogger

Put a  Text Slider in Blogger Blog

Step 1. Go to Blogger Dashboard >> Edit HTML (back-up your Template)

Step 2. Find the code below,

</head>

Step 3. Just above that code in step 2, paste the code below,

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>

<script>
$(document).ready(function(){
$(&#39;.timeline-item&#39;).first().addClass(&#39;active&#39;);
$(&#39;article.2006&#39;).slideToggle();
$(&#39;.timeline-item&#39;).click(function(e) {
e.preventDefault();
var clickid = $(this).attr(&#39;id&#39;);
var active = $(&#39;.timeline-item.active&#39;);
var activeid = active.attr(&#39;id&#39;);

if ( $(this).hasClass(&#39;active&#39;) ) {
return;
}
else {
active.removeClass(&#39;active&#39;);
$(this).addClass(&#39;active&#39;);
$(&quot;article.&quot;+ activeid ).slideToggle();
$(&quot;article.&quot;+ clickid ).slideToggle();
}
});

$(&quot;.carousel span:first&quot;).fadeIn();

jQuery.fn.timer = function() {
if(!$(&#39;.carousel&#39;).children(&quot;span:last-child&quot;).is(&quot;:visible&quot;)){
$(&#39;.carousel&#39;).children(&quot;span:visible&quot;)
.fadeOut()
.next(&quot;span&quot;).fadeIn();
}
else{
$(&#39;.carousel&#39;).children(&quot;span:visible&quot;)
.fadeOut()
.end().children(&quot;span:first&quot;)
.fadeIn;
$(&quot;.carousel span:first&quot;).fadeIn();
}
} // timer function end

window.setInterval(function() {
$(&#39;.carousel&#39;).timer();
}, 1500);

   });
</script>

Step 4. Look for the code ]]></b:skin> . Above it, paste the code below,

.carousel span {
width: 50%;
font-size: 40px;
text-align: center;
position: absolute;
font-family: oswald;
left: 25%;
color:#158aee;
display: none;}

Step 5. Save your Template and you're halfway done!

Every time you want to integrate this style in your post just copy the code below,

<div class="carousel">
<span style="display: none;"><a href="http://btt-testblog1.blogspot.com/">Bloggingtipsandtrix</a></span>
     <span style="display: none;">offers</span>
     <span style="display: none;">Latest Blogger tutorials</span>
     <span style="display: none;">tips</span>
     <span style="display: none;">tricks</span>
     <span style="display: none;">news</span>
     <span style="display: none;">tools and resources</span>
     <span style="display: none;">presented in more understandable</span>
     <span class="last" style="display: none;">and easy way</span>
    </div>

Customization:

Replace the italic bold texts with your own texts

You can also add link to each group of texts. See the first word Bloggingtipsandtrix as an sample.

Change also the time 1500 to speed up or slower the text to appear. The bigger the numerical value the slower it appears and smaller the numerical value the earlier it appears.

Finally, for the css above, you can change the font size 40px. Greater numerical value the bigger its size and vice versa. And the text color #158aee. Select  variuos hexadecimal color for your guide.

JavaScript Image Slider For Blogger
How To Add Responsive Slider Widget For Blogger Blog

How To Add Responsive Slider Widget For Blogger Blog

Adding responsive slider widget for your Blogger blog is necesssary especially if you want to have a better user experience. They can use the silder button (next-previous) to select the image with a corresponding post that link on it. This slider is easy to use and to customize so that you can adjust it according to your likeness.

Also read:

• JavaScript Image Slider For Blogger


• How To Add A Tiny JQuery Circleslider To Blogger


• How To Create Professional Image Slideshows with Jquery In Blogger


• Create a CSS Image Slider with Thumbnails for Blogger

Live Demo

Add Responsive Slider Widget For Blogger Blog

Step 1. Go to your Blogger Dashboard >> Layout >> Add A Gadget, then choose HTML/JavaScript
Step 2. Paste the code below inside it.

<style type='text/css'>
.btt-slider {  margin: 30px auto;  max-width: 850px;  padding: 0 20px;  }
.rslides {  list-style: none outside none;  margin: 0 auto;  max-height: 400px;  max-width: 800px;    overflow: hidden;  padding: 0;  position: relative;  width: 100%; }
.rslides li {  -webkit-backface-visibility: hidden;  position: absolute; border: 5px solid #555; display: none;  left: 0;  top: 0; margin: 0; padding: 0; list-style: none; }
.rslides img {  display: block;  height: auto;  float: left;  width: 100%;  border: 0; margin: 0; max-width: 100%; }
ul.rslides .rslides_nav {  height: 30px;  position: absolute;  text-indent: -99999px;  top: 45%;  width: 30px;  z-index: 9999;  display: none; }
ul.rslides:hover .rslides_nav {  display: block;  }
.prev {  background: url("http://3.bp.blogspot.com/-2R8tmOI8om8/U3HrZJmrzPI/AAAAAAAAC_U/-ye9JkB8uQg/s1600/arrows.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
.next {  background: url("http://3.bp.blogspot.com/-2R8tmOI8om8/U3HrZJmrzPI/AAAAAAAAC_U/-ye9JkB8uQg/s1600/arrows.png") repeat scroll right 0 transparent;  float: right; right: 15px;  }
</style>
<script type='text/javascript'>
/*<![CDATA[*/
  $(function() {
    $(".rslides").responsiveSlides({
      auto: true,
      speed: 500,
      timeout: 3000,
      nav: true,
      pause: true,
      prevText: "Previous",
      nextText: "Next",
      navContainer: "ul.rslides",
    });
  });
/*]]>*/</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='https://googledrive.com/host/0B-P4_Fs3S76yQ1RVNnl0bVlLMXM' type='text/javascript'>
</script>
<div class="btt-slider">
<ul class="rslides">
<li><a href="http://bloggingtipsandtrix.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://bloggingtipsandtrix.blogspot.com/ "><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://bloggingtipsandtrix.blogspot.com/ "><img alt="" src="http://img-url.com/" /></a></li>
</ul>
</div>

Note: If your blog already have a jQuery Plugin then remove the highlighted code.
(<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>)

Customization:

Replace http://bloggingtipsandtrix.blogspot.com/ with your  own link.
Then Replace http://img-url.com/ with the image link you want to show in the slider. Click here how to get the image link.
Step 3. Save the widget and you're done buddies. See now  your blog with its responsive image slider.( =D
Hope you learned something with this tutorial and Stay tuned with our coming posts!
Reference: btnt

How To Create Professional Image Slideshows with Jquery In Blogger

Having a stunning image  slideshow is not only for  the one who runs an image blog.  It can be also used to improve your user's experience and in return will increase blog traffic. Furthermore, it will boast your readers to discuss or comment since people will be more interactive if they will not only read texts but also see  images. Search engine robot will appreciate more to your post which lead to a better  position in search engine results page. I've learned this trick from MBT and do some changes on the script,css and the HTML to have a difference. Before we will go the tutorial, please see first the live demo.

Make Stunning Image Slideshow With Jquery For Your Blogger Blog

Step 1. Go to your Blogger Dashboard >>  Post  or any post you want
Step 2. Copy the  the code below and paste it in your Blogger Post editor page  ( be sureto  switch it to HTML mode).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#BTT-slider').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#BTT-slider {
   width: 590px; /* Keep it 20px-40 px greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#BTT-sliderContent {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.BTT-sliderImage {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.BTT-sliderImage span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.BTT-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 100px;
    left: 0;
    width: 570px !important;
    height:70px;
}
.left {
    left: 0;
    top: 0;
    width: 100px !important;
    height: 335px;
}
.right {
    right: 30px;
    bottom: 90px;
    width: 100px !important;
    height: 335px;
}
</style>

<br />
<div id="BTT-slider">
<ul id="BTT-sliderContent">
<li class="BTT-sliderImage"> 
<a href="http://www.bloggingtipsandtrix.blogspot.com/"><img src="IMAGE URL HERE" /></a>
<span class="top"><h3>
FIRST HEADING HERE</h3>
DESCRIPTIONS HERE</span>
</li>
<li class="BTT-sliderImage">
<a href="http://www.bloggingtipsandtrix.blogspot.com/"><img src="IMAGE URL HERE" /> </a>
<span class="right"><h3>
SECOND HEADING HERE</h3>
DESCRIPTIONS HERE</span>
</li>
<li class="BTT-sliderImage">
<a href="http://www.bloggingtipsandtrix.blogspot.com/"><img src="IMAGE URL HERE" /></a>
<span class="bottom"><h3>
THIRD HEADING HERE</h3>
DESCRIPTIONS HERE</span>
</li>
<li class="BTT-sliderImage">
<a href="http://www.bloggingtipsandtrix.blogspot.com/"><img src="IMAGE URL HERE" /> </a>
<span class="left"><h3>
FOURTH HEADING HERE</h3>
DESCRIPTIONS HERE</span>
</li>
<div class="clear BTT-sliderImage">
</div>
</ul>
</div>
<br />

Note: Remove the (code in red bolded texts ) jQuery library in the first line of this set of code if you had already added a jQuery library in your template.

Customization

Replace the link "http://www.bloggingtipsandtrix.blogspot.com/"with your own URL.
Change "IMAGE URL HERE"with the URL of your image. See here how to get the image url of the image.
Replace the Italic bold texts "FOURTH HEADING HERE and DESCRIPTIONS HERE" with your heading and descriptions respectively.
If you want to see the appearance of the slider from left and so on , write it at the first span class and the next position as well.
Change the   timeOut: 3000 to your prefered lapse time of the slider to appear. The higher the number the slower it to appear and the lesser the time is the more fast the next image slide  to appear.

How to Add Another Image Slide to the Slider

Simply add the code below above the line <div class="clear BTT-sliderImage">

<li class="BTT-sliderImage">
<a href="http://www.bloggingtipsandtrix.blogspot.com/"><img src="IMAGE URL HERE" /> </a>
<span class="left"><h3>
FOURTH HEADING HERE</h3>
DESCRIPTIONS HERE</span>
</li>

Step 3. Save your work and cheers ;-)

How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger

In my previous tweak, I have shared to you on how to add Drop down menu and it is useful especially if you have many clutters that disturbed the eyes of your readers. Today , I will share a  menu bar which I hve learnt across my research in the web. I believe you will find it more interesting than before.This trick uses  an amazing CSS3 & jQuery lavalamp .You can use this menu in six (6) different colors by just changing the div class word in the HTML code.This menu is originally designed by Insidesigns and Helperblogger made it bloggerized  to work perfectly with any blogger templates. With no so much word, let's us now go to the tutorial and see how to add this menu to your blogger blog.

Live Demo

How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger

Step 1.  Adding the Script

A. Go to your Blogger Dashboard >> Template Click
B. Hit the  Edit HTML button
C. Find or Control F the code below in your template

</head>

D. After finding the above code, place the code below code just above the code in Step 1 C.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

If you have already added a jQuery library to your blog then delete the highlighted code in orange)

Step 2. Adding Cascading Style Sheet (CSS)

A. Look for the code below

]]></b:skin>

B. Add the following code below just above the code in Step 2 A.

/*LAVALAMP MENU BY http://www.bloggingtipsandtrix.blogspot.com/ STARTS here*/ 

.lavalamp { position: relative; border: 1px solid #d6d6d6; background: #fff; padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); height: 18px; font-family: calibri; 
}
.magenta { background : rgb(190,64,120); background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); border: 1px solid #841144; 
}
 .cyan { background : rgb(64,181,197); background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); border: 1px solid #2f8893;
 }
 .yellow { background : rgb(255,199,79); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); border: 1px solid #c08c1f;
 } 
.orange { background : rgb(255,133,64); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); border: 1px solid #c04f11; 
}
 .dark { background : rgb(89,89,89); background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); border: 1px solid #272727;
 }
 .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{ color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.40); 
} 
.lavalamp a { text-decoration: none; color: #262626; line-height: 20px; 
}
 .lavalamp ul { margin: 0; padding: 0; z-index: 300; position: absolute; 
}
 .lavalamp ul li { list-style: none; float:left; text-align: center; 
} .lavalamp ul li a { padding: 0 20px; text-align: center;
 } .floatr { position: absolute; top: 10px; z-index: 50; width: 70px; height: 30px; border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; 
} 
/*LAVALAMP MENU BY http://www.bloggingtipsandtrix.blogspot.com/ ENDS here*/ 

C. You may now save your template

Step 3. Adding this widget on your blog

A. Now go back to your Blogger Dashboard
B. Click Lay-out  button >> Add a Gadget. Choose HTML/JavaScript
C. Copy the code below and paste it inside the empty space and drag it below Header section.

<div class="lavalamp dark">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Free Templates</a></li>

<li><a href="#">Recipes</a></li>

<li><a href="#">Sitemap</a></li>
</ul>
<div class="floatr"></div>
</div>

Customizations:

• Replace # with your (URL) link
• Replace Home, About, Contact. etc. with your link text which you want to appear on the menu.
• If you want to change background color of the menu then replace <div class="lavalamp dark">  with one of the code below.

<div class="lavalamp dark">

<div class="lavalamp magenta dark">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">

D. Click Save Arrangement

Sliding Recent Post Widget in Blogger

In my previous tutorial, I shared an article about automatic scrolling recent post widget in blogger wherein  you can customize on your likenss, Today  I will show you another trick of showing it and that is through a slide show. There is no need for you to add  text, images or  even links for it will work automatically. You can also customize  this according to your preferences. So let us now go to the tutorial.

Live Demo

Sliding Recent Post Widget in Blogger with Jquery

Note: Always back-up your template before editing
Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

Step 2. Look for the code ]]></b:skin> and just above it paste the code below,

#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}

#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}

.slide-desc {
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}

.slide-desc h2 {
    display: block;
}

.crosscol .widget-content {
    position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider2 {
    margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}

#nextBtn, #slider1next {
    left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}

/* END EasySlider By bloggingtipsandtrix.blogspot.com */

Step 3. Let us now install a Javascript in your template. Copy the code below and paste it above </body> tag,

<!-- Start easy content slider by bloggingtipsandtrix.blogspot.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<!-- End easy content slider by bloggingtipsandtrix.blogspot.com -->

Step 4. Save your template.  Your halfway  done!

Adding the Gadget in your Blogger Lay-out Page

Step 5. Again go to Blogger Dashboard >> Lay-out >> Add Gadget

Step 6.  Scroll down and hit  HTML/Javascript. Inside the empty box, paste the code below

<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Step 7.  A.Replace  yourblog.blogspot.com with your own blog URL,
            B. Replace 6  to change the number of posts to show in the slider.
            C. Replace 150 to change the number of texts to appear in the description.
Step 8. Save your work and see your new widget.
If you have some suggestions queries  or additional information regarding this post, feel free to write it our contact page or to the comment box below.We will be glad to hear your side.
Good Day!
Source: Helperblogger 

Auto Scrolling Recent Post Widget in Blogger

There are many recent post widgets shared by different bloggers  which are  only  moving when a mouse cursor touches it. It is very important to grab viewers' attention upon landing a certain page in our blog and see what is new on it so that they will have an idea if we are keep on  posting articles by which they could  also learn or gain some useful information  and consequently  they will  remember us. Now,  in these tutorial, I will show the steps on how to make a recent post widget that scrolls automatically, with mouse hover effect on image, and each snippet contains the post title,   post date, and the no of viewers who gave comments.

Live Demo

Auto Scrolling Recent Post Widget in Blogger

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

Step 2. Find the code </head>, and just above it paste the code below,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Note: Skip this step (2) if you have already installed a Jquery library on  your Blogger Template for it will not scroll if you have more than one (1) Jquery library.
Step 3. Save your template

Adding the Gadget in your Blogger Lay-out Page

Step 4. Copy the set of code below,

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://lh6.googleusercontent.com/-A6a829gqfDQ/T-3xppy6MlI/AAAAAAAACFE/RrOao4P11Uk/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#helperblogger-widget img {
    float: left;
    margin-top: 2px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#helperblogger-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#helperblogger-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[1] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[2] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[3] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[4] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.bloggingtipsandtrix.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

Step 5.  Again go to  Blogger Dashboard, click Lay-out then select Add a Gadget,
Step 6. Scroll Down and select HTML/Javascript,
Step 7. In the empty box, paste the code that you have copy from Step 4,
Step 8. Hit the Save button and you have now a new recent post widget with self scrolling effect

Short Customization:
a. Replace  80 to adjust the individual height/box of the widget.
b. Replace  385 to customize/adjust the whole height of the widget.
c. Replace http://www.bloggingtipsandtrix.blogspot.com/ with your own blog URL.
d. Replace 10 with your desired number of posts to scroll in the widget.
e.  Replace 4  with your desired number of post to appear in widget. 
f.  Replace 4000  . Increase value will slow down the appearance/scrolling  of the next post. Decrease value will make the scrolling effect a  faster.

If you some questions regarding this post, we would highly appreciate to hear it. Please leave you comments at the comment box or to my contact page.
More Blessings to all bloggers! 
Source: helperblogger

Your Color Code Generator - JQuery

JQuery color picker plugin for selecting your preferred hex color code values. It can also be used to convert between HSL, HSV, RGB, Hex color code for the color you chose. It is also used for generating matching color schemes which makes it easy for you to select colors. Just point the mouse cursor to the desired color(s) which fit to your blog theme. Enjoy!

Color Wheel For Choosing Matching Palate Colors

How to Use:
1. Just paste the six digit color code (hexadecimal color) in the form below without the hash (#) sign.
2. Hit the Update  button then the  matching color codes will appear inside the four boxes at the right side of the color wheel.
3. You can then copy the hexadecimal values and start using them!

How To Add Go Up and Go Down Buttons Using The JQuery Slide Effect

As you can see at the right side of this page that there is an Up and Down Button. It is very important to have an Up and Down buttons  in order to navigate  your page content very easily, especially on the main page of your blog wherein there are many articles or when an article has too many comments from your vivid readers.  Futhermore, these buttons have a  fadeIn and  fadeOut effect, this means that it will fa
de slightly when you are scrolling it  to the top or to the bottom of the page of your blog.

How To Add Go Up and Go Down Buttons Using The JQuery Slide Effect

Step 1. Go to Template, click on the Edit HTML button
Step 2. Select the "Expand Widget Templates" box Step
Step 3. Search (using CTRL + F) for this piece of code ]]></b:skin>
Step 4. Just above this code, paste this one:

/* Up and Down Buttons with jQuery

----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:5px solid #CCC; /* Border Color */
position:fixed;
background:blue
url(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:5px solid #CCC; /* Border Color */
position:fixed;
background: blue url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Short Customizations: Optional

           - You  may change  the bold green texts /* Your Own Styles Here*/ on what styles  you would like  to appear
           - You  may change the arrows by changing the URLs in bold red.
           - To  may change the  background color of buttons by replacing  the blue text with your own  preferred color ( try our color code generator here)
           -  If in case you want to remove the "Go to top" button,  just remove the 1st set of code (it start with a .button_up) and to remove the "Go to bottom" button,  just remove  also the 2nd one ( it started with a .button_down).

Step 5. Now find (CTRL + F) for this piece of code </body>
Step 6. And just above/before that piece of code, paste the following code below:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Step 7.  And lastly, save your Template.
            Have a nice and prosperous day pal!
Credits goes to Helplogger with little modifications from me.