Blogging tips and tricks: Jquery effect

Showing posts with label Jquery effect. Show all posts

Add Facebook Popup Like Box in Blogger

By goldenworks on 4/03/2015

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

By goldenworks on 7/28/2014

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!

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(){
$('.timeline-item').first().addClass('active');
$('article.2006').slideToggle();
$('.timeline-item').click(function(e) {
e.preventDefault();
var clickid = $(this).attr('id');
var active = $('.timeline-item.active');
var activeid = active.attr('id');

if ( $(this).hasClass('active') ) {
return;
}
else {
active.removeClass('active');
$(this).addClass('active');
$("article."+ activeid ).slideToggle();
$("article."+ clickid ).slideToggle();
}
});

$(".carousel span:first").fadeIn();

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

window.setInterval(function() {
$('.carousel').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

By goldenworks on 5/30/2014

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.

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcXoxrwpVBQvpY881xTwz1UtYPLT80kiUuApYLif8ND7hyphenhyphenqQGOOKdQ-kjPN9YXI90G_V4vqucp2xrCqFy0t7OiK0x-i8g8aLCy2x_XZz1TuP1sTwWqTddMzD2dt0YB6JqmQHpbJt2hSVV/s1600/arrows.png") repeat scroll 0 0 transparent; float: left; left: 15px; }
.next { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcXoxrwpVBQvpY881xTwz1UtYPLT80kiUuApYLif8ND7hyphenhyphenqQGOOKdQ-kjPN9YXI90G_V4vqucp2xrCqFy0t7OiK0x-i8g8aLCy2x_XZz1TuP1sTwWqTddMzD2dt0YB6JqmQHpbJt2hSVV/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

By goldenworks on 5/17/2014

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

By goldenworks on 10/05/2013

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

By goldenworks on 5/14/2013

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,

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

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>

<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

By goldenworks on 5/12/2013

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

</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioF_Nqiul2h52RNnn7zegoFTn_IvE3r6oce9qCjtwM6TD5RquIl956_mwaD0_AMSiasv5HpEcz3m3VphSGp76CUZTB2pB4eQvYiv4Rv3GbjoNHFEJ2fyJgYtSK3PDho2Il4fa-iDfpJ6E/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioF_Nqiul2h52RNnn7zegoFTn_IvE3r6oce9qCjtwM6TD5RquIl956_mwaD0_AMSiasv5HpEcz3m3VphSGp76CUZTB2pB4eQvYiv4Rv3GbjoNHFEJ2fyJgYtSK3PDho2Il4fa-iDfpJ6E/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioF_Nqiul2h52RNnn7zegoFTn_IvE3r6oce9qCjtwM6TD5RquIl956_mwaD0_AMSiasv5HpEcz3m3VphSGp76CUZTB2pB4eQvYiv4Rv3GbjoNHFEJ2fyJgYtSK3PDho2Il4fa-iDfpJ6E/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioF_Nqiul2h52RNnn7zegoFTn_IvE3r6oce9qCjtwM6TD5RquIl956_mwaD0_AMSiasv5HpEcz3m3VphSGp76CUZTB2pB4eQvYiv4Rv3GbjoNHFEJ2fyJgYtSK3PDho2Il4fa-iDfpJ6E/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioF_Nqiul2h52RNnn7zegoFTn_IvE3r6oce9qCjtwM6TD5RquIl956_mwaD0_AMSiasv5HpEcz3m3VphSGp76CUZTB2pB4eQvYiv4Rv3GbjoNHFEJ2fyJgYtSK3PDho2Il4fa-iDfpJ6E/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

By goldenworks on 3/31/2013

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

By goldenworks on 3/28/2013

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfm3mRazdWVD_AD9rQRpq0TFXif_CY_o5LeIg8MOlrUL7lTUXEdjchN6dVQCldLcEWXuecONc-KNdR57abNRRN434cshyphenhyphenbjgl3-J1EqQy7P9Tfv0INHyT9GgQQTPvJOLjLf4Ttk5K00E8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxynDHN4BbcyBbo2EtQqoMSXsrhjUS8txDkA79yfsvkyrkQfNoEY3peuU4cECV_xLs63Q_RHa6NMbIZ1KZNutth0KVKvjfoGM8XKCL8fmGHhBf4r1bqou1Eu_917r1snK8d_IHgVE0weE/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.

Subscribe to: Posts ( Atom )