FATKHUR-SKA: Blogger Tips & Tricks

Showing posts with label Blogger Tips & Tricks. Show all posts

Saturday 2 April 2016

Add Cute Custom Facebook Like Box To Blogger

Fatkhur00:00Blogger Tips & Tricks, Facebook No comments

How To Add a Custom Facebook Like Box to Your Site

Facebook Like Box is very useful widget to show visitors the authority and love of the people for his blog. Facebook offers a simple Like Box plugin that you can easily integrate into your website But the default Facebook like box is not having good look at ugly all. This tutorial will show you How To Add Cute Custom Facebook Like Box using CSS To Blogger. Facebook Like Box is the best way to get more fans on Facebook. A Fan Box allows great attract your Blog more visitors or readers to like your Facebook fan page not leaving the like go here. you don't need to do any think you only need to copy and paste the code. Im Sure that this Cool Customize Facebook Like Box With CSS widget attracts your facebook fans increase the count of Likes.

How To Add a Custom Facebook Like Box to Your Site

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Blogger Tips And Tricks|Latest Tips For Bloggers

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

Note:- Replace pages%2FBlogspot-tutorial%2F220888831260608 With your Facebook User name

Style 1:-

Live Demo

And now click Save

Style 2:-

Style 3:-

Style 4:-

Style 5:-

Style 6:-

Style 7:-

Style 8:-

Style 9:-

Style 10:-

Style 11:-

Style 12:-

Style 13:-

Style 14:-

Style 15:-

Style 16:-

Style 17:-

Style 18:-

Style 19:-

Style 20:-

How To Add Animated Flash Clock To Your Blogger Blog

Fatkhur03:42Blogger Hack, Blogger Tips & Tricks, Blogger Tricks, Blogger Widgets, Flash, Generator, HTML, swf No comments

Animated Flash Clock To Your Blogger Blog

Hello! `How are you guys? here's the cool Clock.this tutorial will show you how to Add animated flash clock gadget your Blogger blog. A clock gives a beautiful look to a website. A clock is a necessity for a personal website, forum, blog etc.Isn’t it exciting when you get a highly quality flash Clock absolutely Free? you can add this flash animated clock your blog easily.i've tested this Flash Clock on internet explorer, mozzilla firefox & many other web browsers. it's very fast and fresh.You simply have to copy the code below each clock and add it to your blog.

Live Demo

How To Add Aniamted Flash Clock Widget To Blogger?

Choose a type of clock below
Provide Require widget title
Fill Height and Width of the Widget
Click on "Genetate" button
Finally click on "Add to Blogger" to add it to your blog.

Add Animated Flash Clock To Your Blogger blog

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

Happy blogging!

Special Thanks http://flash-clocks.com/ & http://flash2nd.blogspot.com/

Picture From http://www.2dayblog.com/2009/10/19/manual-digital-clock/

How to change mouse cursor in blogger blog to animated cursors

Fatkhur10:49Blogger Tips & Tricks, CSS, Cursors, Generator No comments

How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your blog is, changing mouse cursor on your blog. Changing the mouse cursor in blogger or blogspot blogs is very easy.This tutorial will help you to change the mouse cursor of your blog to animated cursors.Many bloggers are asking such kind of questions but there is no tutorial available on the internet.I created this post because there are a blogger friend who asked how to change the pointer / cursor on the blogger. This you can do to decorate the look of blog.

Read More:
1. How To Add Snow Effect On The Blogger Mouse Cursor Area

New Live Demo

I take the cursor image from http://www.cursors-4u.com and http://rw-designer.com you can change it anytime depends on your festive moods.

How to Install mouse cursor in blogger blog to animated cursors

How to add HTML-CSS-Javascript Codes to your Blog ?

This is very simple and easy you only follow below steps and add this widget in your blog.

Step 1 Log-in to your Blogger account.

Step 2 Backup your Template.

Step 3 Click on The Template>> Edit HTML>> Proceed.

Step 4 Now find [by pressing Ctrl + F ] this code in the template:

</head>

And immediately Before it, paste this code:

And now click Save Template

Change Mouse Cursor Generator by 24work.blogspot.com

How To Add Mouse Cursor Widget To Blogger?

Choose a type of Mouse Cursor below
Click on "Genetate" button
Finally click on "Add to Blogger" to add it to your blog.

Note: We are going to add more cursor, cursor pointer, cursors, mouse cursor, Totally Free Cursors, Myspace Cursors, Animated Cursors and cursors oftenly so keep visiting this page.

Blogger MySpace Cursor Code Generate

You can change the appearance of the cursor on the MySpace profile page (the cursor is the little that moves on the screen by moving the mouse). For example, you could make the appearance of the cursor as a question mark when the user hovers over an object.The widget is originally developed by code-generator.net, i just changed something in the widget.

How to Install Blogger MySpace Cursor Code Generator Widget

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

Animated Recent posts for Blogger with Thumbnails - Simple Spy

Fatkhur08:48Blogger Tips & Tricks, Blogger Widgets, HTML, Java Script, jQuery No comments

Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and generate more clicks to your site.This gadget displays your most recent posts and includes a small thumbnail, but has the added bonus of using an animated effect that moves smoothly through the posts.There are a lot of great tutorials discussing on how to add Animated Recent posts for blogger with thumbnails and Simple Spy, but most of the tutorials I've found are not really suitable for a beginner.

Read More:
1. Recent Posts Widget for Blogger Text CSS Hover Effect with jQuery

Live Demo

How to Install Animated Recent posts for blogger with thumbnails and Simple Spy

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now

with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

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

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


</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>

imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;

home_page = "http://bdlab.blogspot.com/";

limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js' type='text/javascript'></script>

</div>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

1. homepage address

home_page = “http://bdlab.blogspot.com/”;

2. Style

from above style/css, you can change :

width : 220px;

width:208px:

customize base on your template

and

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmjJjJKVrf7jc1t3YcwQHvmUB_DIQir9UGpN2FMr8Qdt6N25p6WYc1RuwNgfp46805ADbTCJ9lplG3y6ZeVBee4vvTXwhpgbK3I2gCUlO_1t-b2uXArnDN3cqcERtlja1nkAD7nVdQzydQ/s1600/24work-blogspot-com.jpg) repeat-x;

Customize the colors of backuground

3. image size

thumbwidth = 70;

thumbheight = 70;

Match your needs

4. How many post you will show

numposts = 10;

Base on what you need to show

Stylish Scrolling Recent Posts Widget For Blogger

Live Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

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

<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

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

#workwidget 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmjJjJKVrf7jc1t3YcwQHvmUB_DIQir9UGpN2FMr8Qdt6N25p6WYc1RuwNgfp46805ADbTCJ9lplG3y6ZeVBee4vvTXwhpgbK3I2gCUlO_1t-b2uXArnDN3cqcERtlja1nkAD7nVdQzydQ/s1600/24work-blogspot-com.jpg) repeat-x;
border: 1px solid #ddd;
}

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

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget 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);
}

#workwidget 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;
}

</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.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://bdlab.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-2.js' type='text/javascript'></script>
</div>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

Now Replace the http://bdlab.blogspot.com with your blog Url.

You Can Also CUSTOMIZE The CODE According to Your Need

numposts = 10; Total number of posts which you wants to scroll by this widget
limitspy=4; Number of the posts to appear on the widget
intervalspy=4000; Scrolling speed of the widget,if you decreased the value speed of widget will increases.

Add Animated Recent Post Widget Sliding Recent Post Widget for Bloggers

Live Demo

Go to blogger > Open layout tab

Now Add A new HTML/JavaScript widget

Now paste the code given below :

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

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-3.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

Now Replace the http://bdlab.blogspot.com with your blog Url.

numposts = 5; Total number of posts which you wants to scroll by this widget

Stylish Animated Blogger Recent Posts Widget

Live Demo

Go to blogger > Open layout tab

Now Add A new HTML/JavaScript widget

Now paste the code given below :

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

<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

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

#workwidget li {
width:230px;
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}

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

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget 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);
}

#workwidget li:hover {
background: #84f6f5;

}

#workwidget 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;
}

</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.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://bdlab.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-2.js' type='text/javascript'></script>
</div>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

Now Replace the http://bdlab.blogspot.com with your blog Url.

Settings:

Change http://bdlab.blogspot.com to Your Blog address
Change numposts = 10 to Show number of Recent posts with thumbnails

Scrolling Recent Post Gadget For Blogger

Live Demo

Adding The Widget To Blogger

Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget

Copy the following code and paste inside an HTML/JavaScript widget

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

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript' src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb-recentposts-ycode.js" ></script>
<script style='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb-jquery-ticker-nocode.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

Now Replace the http://bdlab.blogspot.com with your blog Url.

Optional Customizations

To change total number of posts find this code var numposts = 7;
If you don't want to show post thumbnails then change this value var showpostthumbnails = true; to false.

New and Flexible Recent Posts Widget With Thumbnail for Blogger

Live Demo

Follow the step by step instructions to add this widget in Blogger:
Sign in to Blogger
Go to Layout > Add a Gadget
Select HTML / JavaScript
Paste the code given below in the field and Save.

Customization:
var numposts = 5; (Number of Posts to be shown)
var showpostthumbnails = true; (Post Image)
var displaymore = true; (More Button)
var showcommentnum = false; (No of Comments)
var showpostdate = false; (Post Date)
var showpostsummary = false; (Post Summry)
var numchars = 80; (Characters in post summary)
True is for Display item and False for not to display. Change According to your needs.

Change http://bdlab.blogspot.com with your Website/ Blog URL.

Tooltips Recent Post Widget For Blogger With Thumbnail

Live Demo

Follow these very simple steps to add the "Tooltips Recent Post Widget For Blogger With Thumbnail " in your blog.

Step 1 : Go To Blogger > Design > Page Elements
Step 2: Click on "Add a Gadget" link
Step 3: From the pop-up window, choose HTML/JavaScript
Step 4: Copy and paste the following code below

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

<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:##000000
;
padding:8px;
background-color:#1BA1E2
;
-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:white;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#000000;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNgONe2S75PUkXmVjTS2duyRdHN-BY6cXRUf8zF986Tns38MFCnOXmOwWecMI9ZkcM6krrsVL7B9ey5Srje7wf0VtDeoXEBvhe4189FXycbxDa8vgZGfGXF1x-HjsmWpGtedApmxkQfXG/s1600/24work.blogspot.com.loading.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #1BA1E2;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#1BA1E2;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript">

var rpTitle = "Latest Post", // Widget Title

numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears

pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUM3Ecp1vG_QHCg1TZkChlc6BzLKDngVbOUj_6iuk7U8_x37KZzE6Z7S8f0HrN7GwHP640lVqDVoWX9QMQXVxBKMDnJP_0kjjVZ0Jtb0k160Yiy8XFJdTJp8BX4s7xNEKZlwqW-AfZRlH/s1600/noimage.png", // Image that show up if the post doesn't have a image
blogURL = "http://bdlab.blogspot.com/"; // Your Blog Address
</script><script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-6.js" type="text/javascript"></script>

And now click Save

Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

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

Now Replace the http://bdlab.blogspot.com with your blog Url.

Customization

numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears

Many thanks to abu-farhan And Rahul for making this code and I just tested and modified to work on blogger

FATKHUR-SKA

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Saturday 2 April 2016

Add Cute Custom Facebook Like Box To Blogger

Note:- Replace pages%2FBlogspot-tutorial%2F220888831260608 With your Facebook User name

Friday 1 April 2016

How To Add Animated Flash Clock To Your Blogger Blog

How To Add Aniamted Flash Clock Widget To Blogger?

Thursday 31 March 2016

How to change mouse cursor in blogger blog to animated cursors

How to Install mouse cursor in blogger blog to animated cursors

Change Mouse Cursor Generator by 24work.blogspot.com

How To Add Mouse Cursor Widget To Blogger?

Saturday 26 March 2016

Animated Recent posts for Blogger with Thumbnails - Simple Spy

Stylish Scrolling Recent Posts Widget For Blogger

Add Animated Recent Post Widget Sliding Recent Post Widget for Bloggers

Stylish Animated Blogger Recent Posts Widget

Scrolling Recent Post Gadget For Blogger

New and Flexible Recent Posts Widget With Thumbnail for Blogger

Tooltips Recent Post Widget For Blogger With Thumbnail

Blogroll

Labels

Blog Archive

Labels

Blogroll

About