Scrolling Title marquee code ေလးပါဗ်ာ

<script type='text/javascript'>
//<![CDATA[
msg = "**အညတရ**";
msg = " .................................. " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

ထည့္နညး္ေတာ့ေျပာျပေတာ့ဘူးေနာ္ လြယ္ပါတယ္ဗ်ာ

သူငယ္ခ်င္းတို႔ ဘေလာ့စာမ်က္ႏွာမွာ fireworks ေလးေတြနဲ႔အလွဆင္ရေအာင္

အဟီး တင္သာတင္လိုက္ရတယ္ ကြ်န္ေတာ္ စမ္းတာအဆင္မေျပဘူးဗ် ကြ်န္ေတာ္အလို႔ေနမွာပါ
သံုးတတ္တဲ့သူငယ္ခ်င္းေတြသံုးလို႔ရရင္ ျပန္ေျပာၾကအုန္းေနာ္
အဆင္ေျပၾကပါေစဗ်ာ

Check Demo 

 Step1:

• Go To Blogger Dashboard: 
• Go To template>>edit html:
• Now search for  ]]></b:skin> 
• Past the the below given code before  ]]></b:skin> 

 #pbtfireworks{
            display: block;   
            width: 1000px;
            height: 735px;
            float: center;
            color:#6F6F6F;
            text-align: center;
            font-size: 12px;
        }
        #pbtfireworks a {
            color:#6F6F6F;

Step2:

• Now search For </body> 
• Past the below jquery code before </body>  

 <div id="pbtfireworks">  </div>
   <script src="https://mybloggerlab.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="https://mybloggerlab.googlecode.com/files/fireworks.js" type="text/javascript"></script>
    <script>
    /**Fire Works By ProBloggerTricks.com**/ 
    jQuery(function($){             
    Xteam.fireworkShow('#pbtfireworks', 100);               
    }); 
    </script>

Finally save your template and you done almost:

dropdown Navigation menu with Flying Effects ကုတ္အလန္းစားေလးမို႔တင္လိုက္ျပီး

<style> #BloggerSpicemenufly,#BloggerSpicemenufly ul { list-style: none outside none; margin: 0; padding: 0; height:500px;} #BloggerSpicemenufly { font-family: "Trebuchet MS Unicode",Verdana,Arial,sans-serif; font-size: 13px; height: 36px; list-style: none outside none; margin: 40px auto; text-shadow: 0 -1px 3px #202020; width: 980px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow: 0px 3px 3px #04BDFA; -webkit-box-shadow: 0px 3px 3px #04BDFA; box-shadow: 0 3px 4px #004065; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #04BDFA), color-stop(0.5, #005C91), color-stop(0.51, #005C91), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #04BDFA 0%, #04BDFA 50%, #04BDFA 51%, #838383 100%); background-color:#04BDFA; } #BloggerSpicemenufly ul { left: -9999px; position: absolute; top: -9999px; z-index: 2; } #BloggerSpicemenufly li { border-bottom: 1px solid #005C91; border-left: 1px solid #005C91; border-right: 1px solid #005C91; border-top: 1px solid #005C91; display: block; float: left; height: 34px; position: relative; width: 105px; } #BloggerSpicemenufly li:first-child { border-left: 0 none; margin-left: 5px; } #BloggerSpicemenufly li a { color: #FFFFFF; display: block; line-height: 34px; outline: medium none; text-align: center; text-decoration: none; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #04BDFA), color-stop(0.5, #5E5E5E), color-stop(0.51, #111111), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } /* widget by www.bloggerspice.com #BloggerSpiceAnim */ @-webkit-keyframes BloggerSpiceAnim { 0% {-webkit-transform: scale(1);} 30% {-webkit-transform: scale(1.3);} 100% {-webkit-transform: scale(1);}} @-moz-keyframes BloggerSpiceAnim { 0% {-moz-transform: scale(1);} 30% {-moz-transform: scale(1.3);} 100% {-moz-transform: scale(1);}} #BloggerSpicemenufly li > a:hover { -moz-animation-name: BloggerSpiceAnim; -moz-animation-duration: 0.7s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: BloggerSpiceAnim; -webkit-animation-duration: 0.7s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #BloggerSpicemenufly li:hover > a { z-index: 4; } #BloggerSpicemenufly li:hover ul.subs { left: 0; top: 34px; width: 150px; } #BloggerSpicemenufly ul li { background: none repeat scroll 0 0 #838383; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); opacity: 0; width: 100%; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* keyframes #bsfly */ @-webkit-keyframes bsfly { 0% {margin-left:185px;} 100% {margin-left:0px;opacity:1;} } @-moz-keyframes bsfly { 0% {margin-left:185px;} 100% { margin-left:0px;opacity:1;} } #BloggerSpicemenufly li:hover ul li { /* css3 animation */ -moz-animation-name: bsfly; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: bsfly; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* animation delays by www.bloggerspice.com */ #BloggerSpicemenufly li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; } #BloggerSpicemenufly li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; } #BloggerSpicemenufly li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } #BloggerSpicemenufly li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; } #BloggerSpicemenufly li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } #BloggerSpicemenufly li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; } #BloggerSpicemenufly li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } #BloggerSpicemenufly li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; } </style> <ul id="BloggerSpicemenufly"> <li><a href="http://www.bloggerspice.com/">Home</a></li> <li><a class="flybsmenu" href="#">Tips</a> <ul class="subs"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a class="flybsmenu" href="http://namkna.blogspot.com/">Tricks</a> <ul class="subs"> <li><a href="#">Submenu 2-1</a></li> <li><a href="#">Submenu 2-2</a></li> <li><a href="#">Submenu 2-3</a></li> <li><a href="#">Submenu 2-4</a></li> <li><a href="#">Submenu 2-5</a></li> <li><a href="#">Submenu 2-6</a></li> <li><a href="#">Submenu 2-7</a></li> <li><a href="#">Submenu 2-8</a></li> </ul> </li> <li><a class="flybsmenu" href="#">Tools</a> <ul class="subs"> <li><a href="#">Submenu 3-1</a></li> <li><a href="#">Submenu 3-2</a></li> <li><a href="#">Submenu 3-3</a></li> <li><a href="#">Submenu 3-4</a></li> <li><a href="#">Submenu 3-5</a></li> </ul> </li> <li><a href="#">Widget</a></li> <li><a href="#">SEO</a></li> <li><a href="#">AdSense</a></li> <li><a href="#">Contact Us</a></li> </ul> ဘယ္လိုထဲ့ရမလည္းဆိုေတာ့
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

Step 5 Place gadget below header. that's it.

ကဲအဆင္ေျပၾကပါေစဗ်ာ

menu bar အလန္းေလးပါ

Demo

Add Underline Hover Css Navigation bar

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
#arrowunderlinebtrix{
list-style-type:none;
margin:0;
padding:0;
text-align:center; 
font: bold 16px Georgia;
}
#arrowunderlinebtrix li{
display:inline;
margin-right:25px; 
}
#arrowunderlinebtrix li a{
position:relative;
color:black;
padding-bottom:8px; 
text-decoration:none;
}
#arrowunderlinebtrix li a:hover{
border-bottom:3px solid #25bd0d; 
}
#arrowunderlinebtrix li a:hover:after{ 
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; 
bottom: 0;
border-width:5px; 
border-style:solid;
border-color: transparent transparent #25bd0d transparent; 
}

6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<div id="arrowunderline">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="http://www.bloggertrix.com/"><span>Contact Us</span></a></li>
</ul>
</div>

Replace # with your links.

9. Now save your HTML/Javascript'. You are done.

popular-posts ကို ေဘာင္ခတ္ေပးမဲ့ကုတ္ကေလး

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;

list-style-type: none;

margin:0 0 5px 0px;

padding:5px 5px 5px 20px !important;

border: 1px solid #dddddd;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;}.popular-posts ul li:hover {

border:1px solid #6BB5FF;

}.popular-posts ul li a:hover {

text-decoration:none;

}

How To Use These Code

ကဲဘယ္လိုလုုပ္ရမလည္းဆိုေတာ့ အရင္ဆံုး
 No.1 သူငယ္ခ်င္းတို႔ရဲ့ Blogger Dashboard >>ကို အရင္သြားလိုက္ပါ ok ေနာ္
 NO.2 ျပီးရင္ေတာ့ Template ကို၀င္ျပီး Edit HTML ကို ကလစ္လိုက္ျပီးေနာက္တစ္ဆင့္ေနာ္
 No.3 ok ျပီးဆိုရင္ ]]></b:skin>  ဒီကုတ္ေလးကို ရွာလိုက္ပါ မရွာတတ္ရင္ Ctrl+F ကိုအကူညီေတာင္လိုက္ပါဗ်ာ ok ေလာက္ပါတယ္ေနာ္ မရွင္းရင္ ဒီအေကာင့္ကို အပ္ျပီး ျပသနာရွာႏိုင္ပါတယ္ anyataya.poet@gmail.com အားလံုးကို ေက်းဇူးတင္လွ်က္

အညတရ

photos shadow code ေလးပါ

ကဲ ေျပာျပျပီးေနာ္ အသံုးတဲ့ မွာပါ
ဘယ္လိုအသံုး၀င္လည္းဆိုေတာ့ သူငယ္ခ်င္းတို႔ ဘေလာ့ မွာတင္ထားသမွ် ပံုေတြကို အရိပ္
ေလးေတြေပၚေနေအာင္ လုပ္ေဆာင္ႏိုင္တဲ့ေကာင္ေလးပါ ကဲကုတ္ေတြက ဒီမွာ

CSS Codes for Images in Blog Post

Use these simple image codes for your blog post

Simple Thin Border

img { border:1px solid #021a40; }

Double Border

img { padding:1px; border:1px solid #021a40; }

Border and Back Ground

img { padding:5px; border:1px solid #021a40; background-color:#ff0; }

Border and a grey drop shadow

img { padding:5px; border:1px solid #021a40; background-color:#ff0; -moz-box-shadow: 5px 5px 0px #999; -webkit-box-shadow: 5px 5px 0px #999; box-shadow: 5px 5px 0px #999; }

Border and Grey Drop Shadow With Image link hover effect

img { padding:5px; border:1px solid #021a40; background-color:#ff0; -moz-box-shadow: 5px 5px 0px #999; -webkit-box-shadow: 5px 5px 0px #999; box-shadow: 5px 5px 0px #999; } a:hover img{ border: solid 1px #CCC; -moz-box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; box-shadow: 1px 1px 5px #999; }

How To Use These Code

ကဲဘယ္လိုလုုပ္ရမလည္းဆိုေတာ့ အရင္ဆံုး
 No.1 သူငယ္ခ်င္းတို႔ရဲ့ Blogger Dashboard >>ကို အရင္သြားလိုက္ပါ ok ေနာ္
 NO.2 ျပီးရင္ေတာ့ Template ကို၀င္ျပီး Edit HTML ကို ကလစ္လိုက္ျပီးေနာက္တစ္ဆင့္ေနာ္
 No.3 ok ျပီးဆိုရင္ ]]></b:skin>  ဒီကုတ္ေလးကို ရွာလိုက္ပါ မရွာတတ္ရင္ Ctrl+F ကိုအကူညီေတာင္လိုက္ပါဗ်ာ ok ေလာက္ပါတယ္ေနာ္ မရွင္းရင္ ဒီအေကာင့္ကို အပ္ျပီး ျပသနာရွာႏိုင္ပါတယ္ anyataya.poet@gmail.com အားလံုးကို ေက်းဇူးတင္လွ်က္

အညတရ

Marquee code သူငယ္ခ်င္းတို႕ဆိုဒ္မွာ လင့္ကိုေထာင္လိုက္ရင္ လင့္ေလးေရြ႕သြားေအာင္လုပ္ႏိုင္တဲ့ကုတ္ေလးပါ

ကုတ္ေလးက

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

<script type='text/javascript'> $(document).ready(function()  { $('a').hover(function() { $(this).animate({ marginLeft:  '15px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

ဒါပါပဲ ထဲ့နည္းကေတာ့ မေျပာေတာ့ဘူးေနာ္ လြယ္လြယ္ေလးမို႔ပါ

ကိုေက်ာ္စိုးမိုးဆိုဒ္က ကူးယူလာတာပါဗ်

Popular Posts အတြက္ html code အလန္းေလးပါဗ်ာ

ကဲဘယ္လိုလုုပ္ရမလည္းဆိုေတာ့ အရင္ဆံုး
 No.1 သူငယ္ခ်င္းတို႔ရဲ့ Blogger Dashboard >>ကို အရင္သြားလိုက္ပါ ok ေနာ္
 NO.2 ျပီးရင္ေတာ့ Template ကို၀င္ျပီး Edit HTML ကို ကလစ္လိုက္ျပီးေနာက္တစ္ဆင့္ေနာ္
 No.3 ok ျပီးဆိုရင္ ]]></b:skin>  ဒီကုတ္ေလးကို ရွာလိုက္ပါ မရွာတတ္ရင္ Ctrl+F ကိုနိိပ္လိုက္ပါ ေအာက္မွာ box ေလးေပၚလာပါလိမ့္မယ္အဲ့မွာ ရိုက္ျပီးရွာလိုက္ပါ ေတြ႕ျပီးဆိုရင္ေတာ့ ကဲ ကုတ္ေလးေတြ ေအာက္မွာပါ
 ဒီကစ
 <style type="text/css">
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>
 ဒီမွာဆံုးပါျပီးဗ်ာ
နမူနာၾကည့္မယ္ဆိုရင္ ကြ်န္ေတာသံုးထားပါတယ္ၾကည့္ၾကည့္ပါဗ်ာ အားလုံးပဲအဆင္ေျပၾကပါေစ အညတရ

back to top code ေလးပါ

NO..{1}

<!-- www.myhowtricks.com Scroll back to top code start -->

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

<script type="text/javascript" >

var scrolltotop={

 //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control

 //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).

 setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

 controlHTML: '<img src="http://myhowtricks.com/media/images/back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

 controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner

 anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){

 if (!this.cssfixedsupport) //if control is positioned using JavaScript

 this.$control.css({opacity:0}) //hide control immediately after clicking it

 var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)

 if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists

 dest=jQuery('#'+dest).offset().top

 else

 dest=0

 this.$body.animate({scrollTop: dest}, this.setting.scrollduration);

 },

keepfixed:function(){

 var $window=jQuery(window)

 var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx

 var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety

 this.$control.css({left:controlx+'px', top:controly+'px'})

 },

togglecontrol:function(){

 var scrolltop=jQuery(window).scrollTop()

 if (!this.cssfixedsupport)

 this.keepfixed()

 this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false

 if (this.state.shouldvisible && !this.state.isvisible){

 this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])

 this.state.isvisible=true

 }

 else if (this.state.shouldvisible==false && this.state.isvisible){

 this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])

 this.state.isvisible=false

 }

 },

 init:function(){

 jQuery(document).ready(function($){

 var mainobj=scrolltotop

 var iebrws=document.all

 mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode

 mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')

 mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')

 .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})

 .attr({title:'Scroll Back to Top'})

 .click(function(){mainobj.scrollup(); return false})

 .appendTo('body')

 if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text

 mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text

 mainobj.togglecontrol()

 $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){

 mainobj.scrollup()

 return false

 })

 $(window).bind('scroll resize', function(e){

 mainobj.togglecontrol()

 })

 })

 }

}

scrolltotop.init()

</script>

<!-- www.myhowtricks.com Scroll back to top code End -->

..................................................................................
ဒါကေတာ့ ဒီကုတ္အတြက္ပံုေလးေတြပါ
 

blogger page html codes ေတြ တင္တဲ့အခါ html codes ေတြကို ေဘာင္ခတ္လို႕ရတဲ့ကုတ္ေလးေတြပါ

Box Style 1

The box style 1 code

.code {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexjQcUJ1VoNzzuXj_IoZQL30P3cZf_TlJwwRRMMR8kZlxes0g6uSmRi25m7J9zPnY5kRHfzfYsSMwvFby33UouxRleeVJjzr1_UGxLwQpS9n4Zyf1O4lumrqIUdIZ_jKyUyl-_KtEyOAi/s1600/codeview1.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}

Box Style 2

The box style 2 code

.code{
margin : 15px 15px 15px 15px;
padding : 40px 10px 10px 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjFnX8hVaYTYQnCmYjlwrkl9QPGItlbgX_TfKiF-iYTnZqXEGuCN0UgNslpPLHTtnhfN6EhNldlCAmhyphenhyphenRfPYOwhh_4M2H2fqu2WQqcl8tiNn0rsoroHiN2FMZD1Yc6N_PWTu5Lu9MuZh6m/s1600/codeview2.gif) no-repeat left top;
border : 3px solid #eeeeee;
color : #7D7D7D;
}

Box Style 3

The box style 3 code

.code {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSkhOCqc_HA1D_a9WYImS8GXDlphW8vuxvpwtq9eQuwK0swumgen7rSQmu4um-EnM9keCWjeoLe_7g933jNAcQ78_1n0zVJLHWhiE5lmL0D61yPH3lwb_TY_wwjVwMY7FOT-uv0QAvUx89/s1600/codeview3.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #BFBFBF;
}

Once you Choose your favorite box, copy it’s code and go to your blogger account, navigate to Dashboard >> layout >> edit html > and find the following code and paste your code box af

Box Style 4

The box style 4 code

.code {
margin : 10px;
padding: 0px 25px 5px 20px;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaDRb28Eciv9sY960k_F8IQdY-ErbmhaazLrU2xIRqIiYnE5dyVddWHajUp2T5kUlrrVMBQaW9XAqdlD8fQ2kRlufE6FY_jIMr-56ZVVs6UCoXC55t5G92qvyFfnntQr8fynYHgkaXPVw8/s1600/codesbg1.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;
}

 ခု ဘယ္လိုအတ္ရမလည္းေျပာပါ့မယ္ အရင္ဆံုး blogger Dashboard >> layout >> edit html
ကို သြားပါ ျပီးရင္ 

]]></b:skin> ဒီကုတ္ေလးကိုရွာပါ မရွာတတ္ရင္ ctrl+z ကို ႏွိပ္ျပီး ေအာက္မွာေပၚလာတဲ့ box ေလးမွာ]]></b:skin>

ဒီကုတ္ကို  paste လုပ္ျပီးရွာႏိုင္ပါတယ္ ျပီရင္ေတာ့ save လုပ္လိုက္ရင္ရပါျပီး

    အညတရမင္းသားေလး

Css3 Shadow Style Vertical Menu for Blogger

Demo

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.

<style>
.btrix_blockmenu{
font: bold 14px Germand;
width: 190px; /* width of menu */
}
.btrix_blockmenu ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}
.btrix_blockmenu ul li{
margin:0;
padding:0;
}
.btrix_blockmenu ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btrix_blockmenu ul li a:hover, .btrix_blockmenu ul li a.selected{
color: black;
-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item  */
-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
}
</style>

<div class="btrix_blockmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">About Us</a></li>
<li><a href="http://www.bloggertrix.com/">Contact me</a></li>
</ul>
</div>

Dropdown navigation menu

• Open your blogger dashboard.
• Select your blog.
• Select Layout option.
• Click Add a gadget option .
• Select HTML/JavaScript widget.
• In the HTML/JavaScript box paste the following code and save the widget.

/* -------Dropdown navigation menu starts----- */

<style>
#wcdropdown{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#222222;
    box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
}

#wcddmenu{
  float:left;
  width:740px;
  height:45px;
  display:block;
  padding:0;
  margin:0;
}

#wcddmenu ul{
  float:left;
  margin:0;
  padding:0;

}

#wcddmenu li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0

}

#wcddmenu li a, #wcddmenu li a:link{
  color:#dcdcdc;
  display:block;
  margin:0;
  padding:0 10px;
  text-decoration:none;
}

#wcddmenu li a:hover, #wcddmenu li a:active, #wcddmenu .current_page_item a  {
  color:#fff;
  padding:0 10px;
background:#333333;
}

#wcddmenu li li a, #wcddmenu li li a:link, #wcddmenu li li a:visited{
  font-size: 12px;
  background: #222222;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
  border-bottom:1px solid #333333;
}

#wcddmenu li li a:hover, #wcddmenu li li a:active {
  background: #333333;
  color: #fff;
}

#wcddmenu li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px

}

#wcddmenu li:hover ul, #wcddmenu li li:hover ul, #wcddmenu li li li:hover ul, #wcddmenu li.sfhover ul, #topwcddmenu li li.sfhover ul, #topwcddmenu li li li.sfhover ul{
  left:auto
}

#wcddmenu li:hover, #wcddmenu li.sfhover{
  position:static

}


</style>

  <div id='wcdropdown'>
     <div id='wcddmenu'>
         <ul>
           <li><a href='data:blog.homepageUrl'>Home</a></li>
           <li><a href='#'>Dropdown 1 »</a>
               <ul>
                  <li><a href='#'>Link 1</a></li>
                  <li><a href='#'>Link 2</a></li>
                  <li><a href='#'>Link 3</a></li>
                  <li><a href='#'>Link 4</a></li>
                  <li><a href='#'>Link 5</a></li>
                  <li><a href='#'>Link 6</a></li>
               </ul>
           </li>
       
           
           <li><a href='#'>Dropdown 2 »</a>
               <ul>
                  <li><a href='#'>Link 1</a></li>
                  <li><a href='#'>Link 2</a></li>
                  <li><a href='#'>Link 3</a></li>
                  <li><a href='#'>Link 4</a></li>
                  
               </ul>
           </li>
    <li><a href='#'>About us</a>
              
           </li>
             <li><a href='#'>Contact us</a>           
           </li>
         </ul>
      </div>

 
      
   </div>

<!-- dropdown navigation menu ends-->

ကဲ သူငယ္ခ်င္းတို႔ေရ သူငယ္ခ်င္းတို႕ blogger page ေလးတြမွာ အလွဆင္ခ်င္သူေတြ အတြက္ Bubble mouse cursor ေလးပါ

<script type="text/javascript">
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung
var bubbles=100; // jumlah maksmal gelembung
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}

function bubble() {
var c;
if (x!=ox || y!=oy){
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;

function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown;
}

window.onresize=set_width;

function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}

window.onscroll=set_scroll;

function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

</script>

အသံုျပဳနညး္ေတာ့ေျပာျပေတာ့ဘူးေနာ္လြယ္လြယ္ေလးပါ

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

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXMKNH5oMYnVDbosM_YSmAFHp8Y711II-5hndZ6rxvzccnQIrMJS89qBVcfsHO2JMKjl1ucmZ3CklybaAONWNFNYOgaYRxE7znU6rDFTZ74pAZRyGQUH1UEjGmLbLlbYjdYF-QgZkDz7b/s1600/24work-blogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.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="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And 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/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/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.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com.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/AVvXsEguXMKNH5oMYnVDbosM_YSmAFHp8Y711II-5hndZ6rxvzccnQIrMJS89qBVcfsHO2JMKjl1ucmZ3CklybaAONWNFNYOgaYRxE7znU6rDFTZ74pAZRyGQUH1UEjGmLbLlbYjdYF-QgZkDz7b/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/AVvXsEguXMKNH5oMYnVDbosM_YSmAFHp8Y711II-5hndZ6rxvzccnQIrMJS89qBVcfsHO2JMKjl1ucmZ3CklybaAONWNFNYOgaYRxE7znU6rDFTZ74pAZRyGQUH1UEjGmLbLlbYjdYF-QgZkDz7b/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="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And 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/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/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.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-3.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="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-2.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="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And 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/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/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.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-3.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="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript' src="http://24work.ucoz.com/24work-blogspot/recent-posts/hb-recentposts-2.js" ></script>
<script style='text/javascript' src='http://24work.ucoz.com/24work-blogspot/recent-posts/hb-jquery-ticker.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.

<style type="text/css">
/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb: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(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-5.js"></script>
<script type='text/javascript'>
//<![CDATA[
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script src='http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>

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/AVvXsEg4bsbJgWoJi5OT58lZcbHjIt_CZNpjbnp5nQWSZEwPTyVkVyimi1Oioq2L1se8z7BS9TcFLwUqSt11GBmjIi4uDX2Me3sSwntVy2o806IclTMOFkGIGJSAHdjaDXDOUhm-kkdid3nyOC8t/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="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And 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/AVvXsEgKmo5OroAk3NKYzv-_lsGF0GE8gFVaiTeppTFFcEA_hDmVGgWcOJ1JWl06_nKzzDbx9sWgQPwq0Dp4SPVbq204v48ym2A0v5LroHHoQ7898j4mgUenFVUKdt2VRanCYFfBm3d7gQr2Mnfy/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.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-6.js" type="text/javascript"></script>