How to Create Show or Hide Links for Posts on Blogger

1. Login to Blogger, Chose "Layout --> Template --> Edit HTML

2. Click "Download Full Templates" link to back up your template.

3. Check on the "Expand Template Wdiget" Check Box.

4. Copy the code below and paste above this code </head>

<script src=http://kendhin.890m.com/Readmore.js type=text/javascript/>

5. Then find this code <div class=post-header-line-1/> .

6. If You found it you will see a code like this:

<div class=post-body entry-content>or

<div class=post body>

7. The next step is change or replace the code (Only Number 6 code) to be like this:

<div class=post-body entry-content expr:id="post-" + data:post.id>
<b:if cond=data:blog.pageType == "item">

8. Under it you will see a code like this <p><data:post.body/></p>

9. Put the code below under it.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id=showlink>
<p><a expr:onclick="javascript:showFull("post-" + data:post.id + "");" href=javascript:void(0);>[+/-] Show Full Post...</a></p>
</span>
<span id=hidelink style=display:none>
<p><a expr:onclick="javascript:hideFull("post-" + data:post.id + "");" href=javascript:void(0);>[+/-]Hide Full Post...</a></p>
</span>
<script type=text/javascript>checkFull("post-" + "<data:post.id/>")</script>
</b:if>10. So, the full code will like this :

<div class=post-header-line-1/> 
<div class=post-body entry-content expr:id="post-" + data:post.id>
<b:if cond=data:blog.pageType == "item">
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id=showlink>
<p><a expr:onclick="javascript:showFull("post-" + data:post.id + "");" href=javascript:void(0);>[+/-] Show Full Post...</a></p>
</span>
<span id=hidelink style=display:none>
<p><a expr:onclick="javascript:hideFull("post-" + data:post.id + "");" href=javascript:void(0);>[+/-] Hide Full Post...</a></p>
</span>
<script type=text/javascript>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

11. Save Your Editing.

12. Go to menu "Setting --> Formatting"

13. On the bottom page you will see a box beside text "Post Template". Copy the code below and paste in to the box

<span id="fullpost">


</span>

14. Save your setting.

15 If you want to post an articel place your part articel above this code <span id="fullpost">. Then the remain or full post put between this code <span id="fullpost"> and this </span>

Happy Blogging>>>>>

Read More..

New Multi Tabbed Widgets For Blogger BlogSpot Blogs

One of the space efficient widget for blogs, is of course a multi-tabbed widget, which is almost a must for any blog. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like.

Although you can find some other methods on Internet, but they are all quite confusing, so you can use this method, which is quite easy, but of course needs to tweak the template.

The complete process has mainly two steps:

UPDATE:  I updated some of my posts, this post I update Add Multi Tabbed Navigation Widget To Blogger / Blogspot Blogs Sidebar........

STEP 1


Log in to Blogger. Now go to Layout and then click on "Edit HTML" tab.
Then download the present template as a backup.
Now find [CTRL+F] this code:

</head>



Then immediately ABOVE / BEFORE it, paste this code:


<!--NEW-MUTITABBED-STARTS--><link href=http://dsai.588.googlepages.com/tabcontent.css rel=stylesheet type=text/css/>
<script src=http://dsai.588.googlepages.com/tabcontent.js type=text/javascript>
/***********************************************
* Tab Content script v2.2- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Via http://BloggerStop.Net
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script><!--NEW-MUTITABBED-STOPS-->


Now click Save Template, and

Click on "Page Elements" tab.


Then click on "Add a Gadget", and select it as "HTML/JavaScript" type.

In the new widget, paste any of the 3 codes displayed below (the screen-shots are displayed above the codes, and demo link has already been given above ):

Code Here:


<h3>Demo #1- Basic implementation</h3>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://bdlab.blogspot.com/">Dynamic Drive</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

<p><a href="javascript:countries.cycleit(prev)" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit(next)" style="margin-left: 25px; text-decoration:none">Forward</a></p>


Code Here:


<h3>Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled</h3>

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>


<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
<li><a href="http://bdlab.blogspot.com/">Tab Content</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

<p><b><a href="javascript: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p>
<p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a></b></p>

With Auto-scrolling tabs...


Code Here:


<h3>Demo #3- Different Tab Style, "slideshow mode" enabled</h3>

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
<br style="clear: left" />
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: mypets.expandit(myfavorite)">Click here to select tab with id="myfavorite"</a></b></p>
</div>

<div id="dog2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="dog3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="dog4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>


<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>




Now click Save

Read More..

Multi Level Drop Down Menu In Blogger BlogSpot Blogs

UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........

Log in to blogger, go to "Layout", click on "Edit HTML" tab.
Now find (CTRL+F) this in the template:

</head>

Immediately BEFORE it, place this code:

<link rel="stylesheet" type="text/css" href="http://mydatanest.com/............/slidemenu_hori.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

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

Now click Save Template 

STEP 2:
Now go to "Page Elements" of  "Layout".
Add a Gadget of HTML/JavaScript type.

Then add this code in to it:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://bdlab.blogspot.com">Blogger Help</a></li>
</ul>
<br style="clear: left" />
</div>

Then save this widget. And drag it just above the posts widget.

note: this is not allowed all templates

Read More..

How To Add jQuery Featured Content Slider to Blogger

UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........

STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

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

<script type=text/javascript>
//<![CDATA[

/*
* Superfish v1.4.8 - jQuery menu widget
* Copyright (c) 2008 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
*  http://www.opensource.org/licenses/mit-license.php
*  http://www.gnu.org/licenses/gpl.html
*
* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
*/

;(function($){
$.fn.superfish = function(op){

var sf = $.fn.superfish,
c = sf.c,
$arrow = $([<span class=",c.arrowClass,"> &#187;</span>].join()),
over = function(){
var $$ = $(this), menu = getMenu($$);
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
out = function(){
var $$ = $(this), menu = getMenu($$), o = sf.op;
clearTimeout(menu.sfTimer);
menu.sfTimer=setTimeout(function(){
o.retainPath=($.inArray($$[0],o.$path)>-1);
$$.hideSuperfishUl();
if (o.$path.length && $$.parents([li.,o.hoverClass].join()).length<1){over.call(o.$path);}
},o.delay);
},
getMenu = function($menu){
var menu = $menu.parents([ul.,c.menuClass,:first].join())[0];
sf.op = sf.o[menu.serial];
return menu;
},
addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

return this.each(function() {
var s = this.serial = sf.o.length;
var o = $.extend({},sf.defaults,op);
o.$path = $(li.+o.pathClass,this).slice(0,o.pathLevels).each(function(){
$(this).addClass([o.hoverClass,c.bcClass].join( ))
.filter(li:has(ul)).removeClass(o.pathClass);
});
sf.o[s] = sf.op = o;

$(li:has(ul),this)[($.fn.hoverIntent && !o.disableHI) ? hoverIntent : hover](over,out).each(function() {
if (o.autoArrows) addArrow( $(>a:first-child,this) );
})
.not(.+c.bcClass)
.hideSuperfishUl();

var $a = $(a,this);
$a.each(function(i){
var $li = $a.eq(i).parents(li);
$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
});
o.onInit.call(this);

}).each(function() {
menuClasses = [c.menuClass];
if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
$(this).addClass(menuClasses.join( ));
});
};

var sf = $.fn.superfish;
sf.o = [];
sf.op = {};
sf.IE7fix = function(){
var o = sf.op;
if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
this.toggleClass(sf.c.shadowClass+-off);
};
sf.c = {
bcClass     : sf-breadcrumb,
menuClass   : sf-js-enabled,
anchorClass : sf-with-ul,
arrowClass  : sf-sub-indicator,
shadowClass : sf-shadow
};
sf.defaults = {
hoverClass : sfHover,
pathClass : overideThisToUse,
pathLevels : 1,
delay  : 800,
animation : {opacity:show},
speed  : normal,
autoArrows : true,
dropShadows : true,
disableHI : false,  // true disables hoverIntent detection
onInit  : function(){}, // callback functions
onBeforeShow: function(){},
onShow  : function(){},
onHide  : function(){}
};
$.fn.extend({
hideSuperfishUl : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : ;
o.retainPath = false;
var $ul = $([li.,o.hoverClass].join(),this).add(this).not(not).removeClass(o.hoverClass)
.find(>ul).hide().css(visibility,hidden);
o.onHide.call($ul);
return this;
},
showSuperfishUl : function(){
var o = sf.op,
sh = sf.c.shadowClass+-off,
$ul = this.addClass(o.hoverClass)
.find(>ul:hidden).css(visibility,visible);
sf.IE7fix.call($ul);
o.onBeforeShow.call($ul);
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
return this;
}
});

})(jQuery);

//]]>
</script>

<script type=text/javascript>
//<![CDATA[

//Featured Content Glider: By http://www.dynamicdrive.com
//Created: Dec 22nd, 07
//Updated (Jan 29th, 08): Added four possible slide directions: "updown", "downup", "leftright", or "rightleft"
//Updated (Feb 1st, 08): Changed glide behavior to reverse direction when previous button is clicked
//Updated (Feb 12th, 08): Added ability to retrieve gliding contents from an external file using Ajax ("remotecontent" variable added to configuration)

var featuredcontentglider={
csszindex: 100,
ajaxloadingmsg: <b>Fetching Content. Please wait...</b>,
glide:function(config, showpage, isprev){
var selected=parseInt(showpage)
if (selected>=config.$contentdivs.length){ //if no content exists at this index position
alert("No content exists at page "+(selected+1)+"! Loading 1st page instead.")
selected=0
}
var $target=config.$contentdivs.eq(selected)
//Test for toggler not being initialized yet, or user clicks on the currently selected page):
if (config.$togglerdiv.attr(lastselected)==null || parseInt(config.$togglerdiv.attr(lastselected))!=selected){
var $selectedlink=config.$toc.eq(selected)
config.$next.attr(loadpage, (selected<config.$contentdivs.length-1)? selected+1+pg : 0+pg)
config.$prev.attr(loadpage, (selected==0)? config.$contentdivs.length-1+pg : selected-1+pg)
var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint
$target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so its just out of view before animating it
var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
$target.animate(endpoint, config.speed)
config.$toc.removeClass(selected)
$selectedlink.addClass(selected)
config.$togglerdiv.attr(lastselected, selected+pg)
}
},

getremotecontent:function(config){
config.$glider.html(this.ajaxloadingmsg)
$.ajax({
url: config.remotecontent,
error:function(ajaxrequest){
config.$glider.html(Error fetching content.<br />Server Response: +ajaxrequest.responseText)
},
success:function(content){
config.$glider.html(content)
featuredcontentglider.setuptoggler(config)
}
})
},

aligncontents:function(config){
config.$contentdivs=$("#"+config.gliderid+" ."+config.contentclass)
config.$contentdivs.css(config.leftortop, config.startpoint).css({height: config.$glider.height(), visibility: visible}) //position content divs so theyre out of view:
},

setuptoggler:function(config){
this.aligncontents(config)
config.$togglerdiv.hide()
config.$toc.each(function(index){
$(this).attr(pagenumber, index+pg)
if (index > (config.$contentdivs.length-1))
$(this).css({display: none}) //hide redundant "toc" links
})
var $nextandprev=$("#"+config.togglerid+" .next, #"+config.togglerid+" .prev")
$nextandprev.click(function(event){ //Assign click behavior to next and prev links
featuredcontentglider.glide(config, this.getAttribute(loadpage), this.getAttribute(buttontype))
event.preventDefault() //cancel default link action
})
config.$toc.click(function(event){ //Assign click behavior to toc links
featuredcontentglider.glide(config, this.getAttribute(pagenumber))
event.preventDefault()
})
config.$togglerdiv.fadeIn(1000, function(){
featuredcontentglider.glide(config, config.selected)
if (config.autorotate==true){ //auto rotate contents?
config.stepcount=0 //set steps taken
config.totalsteps=config.$contentdivs.length*config.autorotateconfig[1] //Total steps limit: num of contents x num of user specified cycles)
featuredcontentglider.autorotate(config)
}
})
config.$togglerdiv.click(function(){
featuredcontentglider.cancelautorotate(config.togglerid)
})
},

autorotate:function(config){
var rotatespeed=config.speed+config.autorotateconfig[0]
window[config.togglerid+"timer"]=setInterval(function(){
if (config.totalsteps>0 && config.stepcount>=config.totalsteps){
clearInterval(window[config.togglerid+"timer"])
}
else{
config.$next.click()
config.stepcount++
}
}, rotatespeed)
},

cancelautorotate:function(togglerid){
if (window[togglerid+"timer"])
clearInterval(window[togglerid+"timer"])
},

getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"="+value
},

init:function(config){
$(document).ready(function(){
config.$glider=$("#"+config.gliderid)
config.$togglerdiv=$("#"+config.togglerid)
config.$toc=config.$togglerdiv.children(.toc)
config.$next=config.$togglerdiv.children(.next)
config.$prev=config.$togglerdiv.children(.prev)
config.$prev.attr(buttontype, previous)
var selected=(config.persiststate)? featuredcontentglider.getCookie(config.gliderid) : config.selected
config.selected=(isNaN(parseInt(selected))) ? config.selected : selected //test for cookie value containing null (1st page load) or "undefined" string
config.leftortop=(/up/i.test(config.direction))? "top" : "left" //set which CSS property to manipulate based on "direction"
config.heightorwidth=(/up/i.test(config.direction))? config.$glider.height() : config.$glider.width() //Get glider height or width based on "direction"
config.startpoint=(/^(left|up)/i.test(config.direction))? -config.heightorwidth : config.heightorwidth //set initial position of contents based on "direction"
if (typeof config.remotecontent!="undefined" && config.remotecontent.length>0)
featuredcontentglider.getremotecontent(config)
else
featuredcontentglider.setuptoggler(config)
$(window).bind(unload, function(){ //clean up and persist
config.$togglerdiv.unbind(click)
config.$toc.unbind(click)
config.$next.unbind(click)
config.$prev.unbind(click)
if (config.persiststate)
featuredcontentglider.setCookie(config.gliderid, config.$togglerdiv.attr(lastselected))
config=null

})
})
}
}

//]]>
</script>

<script type=text/javascript>
//<![CDATA[

$(document).ready(function(){
$(".glidecontent").hover(function() {
$(this).children(".glidemeta").animate({opacity: "show"}, "slow");
}, function() {
$(this).children(".glidemeta").animate({opacity: "hide"}, "fast");
});
});

//]]>
</script>

<script type=text/javascript>
//<![CDATA[

$(document).ready(function() {
$(#tabzine> ul).tabs({ fx: { height: toggle, opacity: toggle } });

});

//]]>
</script>

<script type=text/javascript>
//<![CDATA[

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return\w+};c=1};while(c--){if(k[c]){p=p.replace(new RegExp(\b+e(c)+\b,g),k[c])}}return p}((3(C){C.8={3o:{19:3(E,F,H){6 G=C.8[E].1h;21(6 D 3p H){G.1I[D]=G.1I[D]||[];G.1I[D].28([F,H[D]])}},2P:3(D,F,E){6 H=D.1I[F];5(!H){7}21(6 G=0;G<H.k;G++){5(D.b[H[G][0]]){H[G][1].1H(D.c,E)}}}},1l:{},n:3(D){5(C.8.1l[D]){7 C.8.1l[D]}6 E=C(<2a 3s="8-3r">).j(D).n({3q:"3i",2g:"-2A",3g:"-2A",1r:"1w"}).22("2C");C.8.1l[D]=!!((!(/3I|3P/).12(E.n("3z"))||(/^[1-9]/).12(E.n("2T"))||(/^[1-9]/).12(E.n("2E"))||!(/2v/).12(E.n("3w"))||!(/3S|3C\(0, 0, 0, 0\)/).12(E.n("3D"))));3E{C("2C").2w(0).3B(E.2w(0))}3x(F){}7 C.8.1l[D]},3y:3(D){C(D).v("1p","2I").n("2q","2v")},3H:3(D){C(D).v("1p","3O").n("2q","")},3Q:3(G,E){6 D=/2g/.12(E||"2g")?"3N":"3M",F=e;5(G[D]>0){7 t}G[D]=1;F=G[D]>0?t:e;G[D]=0;7 F}};6 B=C.2e.W;C.2e.W=3(){C("*",2).19(2).z("W");7 B.1H(2,2M)};3 A(E,F,G){6 D=C[E][F].35||[];D=(1F D=="1E"?D.2h(/,?\s+/):D);7(C.1j(G,D)!=-1)}C.1i=3(E,D){6 F=E.2h(".")[0];E=E.2h(".")[1];C.2e[E]=3(J){6 H=(1F J=="1E"),I=2D.1h.3J.2P(2M,1);5(H&&A(F,E,J)){6 G=C.i(2[0],E);7(G?G[J].1H(G,I):1n)}7 2.14(3(){6 K=C.i(2,E);5(H&&K&&C.3v(K[J])){K[J].1H(K,I)}o{5(!H){C.i(2,E,3e C[F][E](2,J))}}})};C[F][E]=3(I,H){6 G=2;2.15=E;2.2H=F+"-"+E;2.b=C.1A({},C.1i.1k,C[F][E].1k,H);2.c=C(I).u("1e."+E,3(L,J,K){7 G.1e(J,K)}).u("2j."+E,3(K,J){7 G.2j(J)}).u("W",3(){7 G.1b()});2.23()};C[F][E].1h=C.1A({},C.1i.1h,D)};C.1i.1h={23:3(){},1b:3(){2.c.1q(2.15)},2j:3(D){7 2.b[D]},1e:3(D,E){2.b[D]=E;5(D=="f"){2.c[E?"j":"r"](2.2H+"-f")}},1X:3(){2.1e("f",e)},1P:3(){2.1e("f",t)}};C.1i.1k={f:e};C.8.2J={3h:3(){6 D=2;2.c.u("3d."+2.15,3(E){7 D.2G(E)});5(C.x.13){2.2K=2.c.v("1p");2.c.v("1p","2I")}2.3c=e},38:3(){2.c.16("."+2.15);(C.x.13&&2.c.v("1p",2.2K))},2G:3(F){(2.V&&2.1o(F));2.1C=F;6 E=2,G=(F.39==1),D=(1F 2.b.25=="1E"?C(F.2f).2x().19(F.2f).y(2.b.25).k:e);5(!G||D||!2.2S(F)){7 t}2.1D=!2.b.26;5(!2.1D){2.3a=1x(3(){E.1D=t},2.b.26)}5(2.2m(F)&&2.1T(F)){2.V=(2.1U(F)!==e);5(!2.V){F.3b();7 t}}2.2n=3(H){7 E.2r(H)};2.2l=3(H){7 E.1o(H)};C(2N).u("2O."+2.15,2.2n).u("2t."+2.15,2.2l);7 e},2r:3(D){5(C.x.13&&!D.3j){7 2.1o(D)}5(2.V){2.1V(D);7 e}5(2.2m(D)&&2.1T(D)){2.V=(2.1U(2.1C,D)!==e);(2.V?2.1V(D):2.1o(D))}7!2.V},1o:3(D){C(2N).16("2O."+2.15,2.2n).16("2t."+2.15,2.2l);5(2.V){2.V=e;2.2u(D)}7 e},2m:3(D){7(29.3m(29.2z(2.1C.2L-D.2L),29.2z(2.1C.2s-D.2s))>=2.b.2F)},1T:3(D){7 2.1D},1U:3(D){},1V:3(D){},2u:3(D){},2S:3(D){7 t}};C.8.2J.1k={25:U,2F:1,26:0}})(27);(3(A){A.1i("8.4",{23:3(){2.b.Z+=".4";2.1m(t)},1e:3(B,C){5((/^d/).12(B)){2.1v(C)}o{2.b[B]=C;2.1m()}},k:3(){7 2.$4.k},1Q:3(B){7 B.2R&&B.2R.1g(/\s/g,"2Q").1g(/[^A-4o-4x-9\-2Q:\.]/g,"")||2.b.2X+A.i(B)},8:3(C,B){7{b:2.b,4u:C,30:B,11:2.$4.11(C)}},1m:3(O){2.$l=A("1O:4p(a[p])",2.c);2.$4=2.$l.1G(3(){7 A("a",2)[0]});2.$h=A([]);6 P=2,D=2.b;2.$4.14(3(R,Q){5(Q.X&&Q.X.1g("#","")){P.$h=P.$h.19(Q.X)}o{5(A(Q).v("p")!="#"){A.i(Q,"p.4",Q.p);A.i(Q,"q.4",Q.p);6 T=P.1Q(Q);Q.p="#"+T;6 S=A("#"+T);5(!S.k){S=A(D.2d).v("1s",T).j(D.1u).4l(P.$h[R-1]||P.c);S.i("1b.4",t)}P.$h=P.$h.19(S)}o{D.f.28(R+1)}}});5(O){2.c.j(D.2b);2.$h.14(3(){6 Q=A(2);Q.j(D.1u)});5(D.d===1n){5(20.X){2.$4.14(3(S,Q){5(Q.X==20.X){D.d=S;5(A.x.13||A.x.43){6 R=A(20.X),T=R.v("1s");R.v("1s","");1x(3(){R.v("1s",T)},44)}4m(0,0);7 e}})}o{5(D.1c){6 J=46(A.1c("8-4"+A.i(P.c)),10);5(J&&P.$4[J]){D.d=J}}o{5(P.$l.y("."+D.m).k){D.d=P.$l.11(P.$l.y("."+D.m)[0])}}}}D.d=D.d===U||D.d!==1n?D.d:0;D.f=A.41(D.f.40(A.1G(2.$l.y("."+D.1a),3(R,Q){7 P.$l.11(R)}))).31();5(A.1j(D.d,D.f)!=-1){D.f.3V(A.1j(D.d,D.f),1)}2.$h.j(D.18);2.$l.r(D.m);5(D.d!==U){2.$h.w(D.d).1S().r(D.18);2.$l.w(D.d).j(D.m);6 K=3(){A(P.c).z("1K",[P.Y("1K"),P.8(P.$4[D.d],P.$h[D.d])],D.1S)};5(A.i(2.$4[D.d],"q.4")){2.q(D.d,K)}o{K()}}A(3U).u("3W",3(){P.$4.16(".4");P.$l=P.$4=P.$h=U})}21(6 G=0,N;N=2.$l[G];G++){A(N)[A.1j(G,D.f)!=-1&&!A(N).1f(D.m)?"j":"r"](D.1a)}5(D.17===e){2.$4.1q("17.4")}6 C,I,B={"3X-2E":0,1R:1},E="3Z";5(D.1d&&D.1d.3Y==2D){C=D.1d[0]||B,I=D.1d[1]||B}o{C=I=D.1d||B}6 H={1r:"",47:"",2T:""};5(!A.x.13){H.1W=""}3 M(R,Q,S){Q.2p(C,C.1R||E,3(){Q.j(D.18).n(H);5(A.x.13&&C.1W){Q[0].2B.y=""}5(S){L(R,S,Q)}})}3 L(R,S,Q){5(I===B){S.n("1r","1w")}S.2p(I,I.1R||E,3(){S.r(D.18).n(H);5(A.x.13&&I.1W){S[0].2B.y=""}A(P.c).z("1K",[P.Y("1K"),P.8(R,S[0])],D.1S)})}3 F(R,T,Q,S){T.j(D.m).4k().r(D.m);M(R,Q,S)}2.$4.16(".4").u(D.Z,3(){6 T=A(2).2x("1O:w(0)"),Q=P.$h.y(":4e"),S=A(2.X);5((T.1f(D.m)&&!D.1z)||T.1f(D.1a)||A(2).1f(D.1t)||A(P.c).z("2y",[P.Y("2y"),P.8(2,S[0])],D.1v)===e){2.1M();7 e}P.b.d=P.$4.11(2);5(D.1z){5(T.1f(D.m)){P.b.d=U;T.r(D.m);P.$h.1Y();M(2,Q);2.1M();7 e}o{5(!Q.k){P.$h.1Y();6 R=2;P.q(P.$4.11(2),3(){T.j(D.m).j(D.2c);L(R,S)});2.1M();7 e}}}5(D.1c){A.1c("8-4"+A.i(P.c),P.b.d,D.1c)}P.$h.1Y();5(S.k){6 R=2;P.q(P.$4.11(2),Q.k?3(){F(R,T,Q,S)}:3(){T.j(D.m);L(R,S)})}o{4b"27 4c 4d: 3n 49 4a."}5(A.x.13){2.1M()}7 e});5(!(/^24/).12(D.Z)){2.$4.u("24.4",3(){7 e})}},19:3(E,D,C){5(C==1n){C=2.$4.k}6 G=2.b;6 I=A(G.37.1g(/#\{p\}/g,E).1g(/#\{1L\}/g,D));I.i("1b.4",t);6 H=E.4i("#")==0?E.1g("#",""):2.1Q(A("a:4g-4h",I)[0]);6 F=A("#"+H);5(!F.k){F=A(G.2d).v("1s",H).j(G.18).i("1b.4",t)}F.j(G.1u);5(C>=2.$l.k){I.22(2.c);F.22(2.c[0].48)}o{I.36(2.$l[C]);F.36(2.$h[C])}G.f=A.1G(G.f,3(K,J){7 K>=C?++K:K});2.1m();5(2.$4.k==1){I.j(G.m);F.r(G.18);6 B=A.i(2.$4[0],"q.4");5(B){2.q(C,B)}}2.c.z("2Y",[2.Y("2Y"),2.8(2.$4[C],2.$h[C])],G.19)},W:3(B){6 D=2.b,E=2.$l.w(B).W(),C=2.$h.w(B).W();5(E.1f(D.m)&&2.$4.k>1){2.1v(B+(B+1<2.$4.k?1:-1))}D.f=A.1G(A.34(D.f,3(G,F){7 G!=B}),3(G,F){7 G>=B?--G:G});2.1m();2.c.z("2V",[2.Y("2V"),2.8(E.2k("a")[0],C[0])],D.W)},1X:3(B){6 C=2.b;5(A.1j(B,C.f)==-1){7}6 D=2.$l.w(B).r(C.1a);5(A.x.4n){D.n("1r","4t-1w");1x(3(){D.n("1r","1w")},0)}C.f=A.34(C.f,3(F,E){7 F!=B});2.c.z("33",[2.Y("33"),2.8(2.$4[B],2.$h[B])],C.1X)},1P:3(C){6 B=2,D=2.b;5(C!=D.d){2.$l.w(C).j(D.1a);D.f.28(C);D.f.31();2.c.z("32",[2.Y("32"),2.8(2.$4[C],2.$h[C])],D.1P)}},1v:3(B){5(1F B=="1E"){B=2.$4.11(2.$4.y("[p$="+B+"]")[0])}2.$4.w(B).4q(2.b.Z)},q:3(G,K){6 L=2,D=2.b,E=2.$4.w(G),J=E[0],H=K==1n||K===e,B=E.i("q.4");K=K||3(){};5(!B||!H&&A.i(J,"17.4")){K();7}6 M=3(N){6 O=A(N),P=O.2k("*:4s");7 P.k&&P.4v(":45(3R)")&&P||O};6 C=3(){L.$4.y("."+D.1t).r(D.1t).14(3(){5(D.1N){M(2).3l().1B(M(2).i("1L.4"))}});L.1y=U};5(D.1N){6 I=M(J).1B();M(J).3k("<2o></2o>").2k("2o").i("1L.4",I).1B(D.1N)}6 F=A.1A({},D.1J,{2U:B,2i:3(O,N){A(J.X).1B(O);C();5(D.17){A.i(J,"17.4",t)}A(L.c).z("2Z",[L.Y("2Z"),L.8(L.$4[G],L.$h[G])],D.q);D.1J.2i&&D.1J.2i(O,N);K()}});5(2.1y){2.1y.3f();C()}E.j(D.1t);1x(3(){L.1y=A.3u(F)},0)},2U:3(C,B){2.$4.w(C).1q("17.4").i("q.4",B)},1b:3(){6 B=2.b;2.c.16(".4").r(B.2b).1q("4");2.$4.14(3(){6 C=A.i(2,"p.4");5(C){2.p=C}6 D=A(2).16(".4");A.14(["p","q","17"],3(E,F){D.1q(F+".4")})});2.$l.19(2.$h).14(3(){5(A.i(2,"1b.4")){A(2).W()}o{A(2).r([B.m,B.2c,B.1a,B.1u,B.18].3G(" "))}})},Y:3(B){7 A.Z.3L({3t:B,2f:2.c[0]})}});A.8.4.1k={1z:e,Z:"24",f:[],1c:U,1N:"3F&#3A;",17:e,2X:"8-4-",1J:{},1d:U,37:<1O><a p="#{p}"><2W>#{1L}</2W></a></1O>,2d:"<2a></2a>",2b:"8-4-3K",m:"8-4-d",2c:"8-4-1z",1a:"8-4-f",1u:"8-4-30",18:"8-4-3T",1t:"8-4-4w"};A.8.4.35="k";A.1A(A.8.4.1h,{1Z:U,4r:3(C,F){F=F||e;6 B=2,E=2.b.d;3 G(){B.1Z=42(3(){E=++E<B.$4.k?E:0;B.1v(E)},C)}3 D(H){5(!H||H.4j){4f(B.1Z)}}5(C){G();5(!F){2.$4.u(2.b.Z,D)}o{2.$4.u(2.b.Z,3(){D();E=B.b.d;G()})}}o{D();2.$4.16(2.b.Z,D)}}})})(27);,62,282,||this|function|tabs|if|var|return|ui|||options|element|selected|false|disabled||panels|data|addClass|length|lis|selectedClass|css|else|href|load|removeClass||true|bind|attr|eq|browser|filter|triggerHandler|||||||||||||||||||||null|_mouseStarted|remove|hash|fakeEvent|event||index|test|msie|each|widgetName|unbind|cache|hideClass|add|disabledClass|destroy|cookie|fx|setData|hasClass|replace|prototype|widget|inArray|defaults|cssCache|tabify|undefined|mouseUp|unselectable|removeData|display|id|loadingClass|panelClass|select|block|setTimeout|xhr|unselect|extend|html|_mouseDownEvent|_mouseDelayMet|string|typeof|map|apply|plugins|ajaxOptions|tabsshow|label|blur|spinner|li|disable|tabId|duration|show|mouseDelayMet|mouseStart|mouseDrag|opacity|enable|stop|rotation|location|for|appendTo|init|click|cancel|delay|jQuery|push|Math|div|navClass|unselectClass|panelTemplate|fn|target|top|split|success|getData|find|_mouseUpDelegate|mouseDistanceMet|_mouseMoveDelegate|em|animate|MozUserSelect|mouseMove|pageY|mouseup|mouseStop|none|get|parents|tabsselect|abs|5000px|style|body|Array|width|distance|mouseDown|widgetBaseClass|on|mouse|_mouseUnselectable|pageX|arguments|document|mousemove|call|_|title|mouseCapture|height|url|tabsremove|span|idPrefix|tabsadd|tabsload|panel|sort|tabsdisable|tabsenable|grep|getter|insertBefore|tabTemplate|mouseDestroy|which|_mouseDelayTimer|preventDefault|started|mousedown|new|abort|left|mouseInit|absolute|button|wrapInner|parent|max|Mismatching|plugin|in|position|gen|class|type|ajax|isFunction|backgroundImage|catch|disableSelection|cursor|8230|removeChild|rgba|backgroundColor|try|Loading|join|enableSelection|auto|slice|nav|fix|scrollLeft|scrollTop|off|default|hasScroll|img|transparent|hide|window|splice|unload|min|constructor|normal|concat|unique|setInterval|opera|500|not|parseInt|overflow|parentNode|fragment|identifier|throw|UI|Tabs|visible|clearInterval|first|child|indexOf|clientX|siblings|insertAfter|scrollTo|safari|Za|has|trigger|rotate|last|inline|tab|is|loading|z0.split(|),0,{}))


//]]>
</script>

<script type=text/javascript>
//<![CDATA[

/*
* jScroller 0.3 - Scroller Script
*
* Copyright (c) 2007 Markus Bordihn (http://markusbordihn.de)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* $Date: 2007-11-15 13:00:00 +0100 (Thu, 15 Nov 2007) $
* $Rev: 0.3 $
*/

$(document).ready(function(){
this.defaults = {
scroller: {
interval:  0,    // Dont touch !
refresh:   150,  // Refresh Time in ms
direction: "left", // down,right,left,up
speed:     5,    // Set the Scroller Speed
id:        "#scroller",
cont_id:   "#scroller_container"
}
}

var jscroller_config = $.extend(this.defaults), jscroller_scroller = $(jscroller_config.scroller.id), jscroller_scroller_cont = $(jscroller_config.scroller.cont_id);

if (jscroller_scroller && jscroller_scroller_cont) {
jscroller_scroller.css({position: absolute, left: 0, top: 0});
jscroller_init();
}

function jscroller_startScroll() {
if(!jscroller_config.scroller.interval) {
jscroller_config.scroller.interval=window.setInterval(jscroller_doScroll,jscroller_config.scroller.refresh);
}
}

function jscroller_stopScroll() {
if (jscroller_config.scroller.interval) {
window.clearInterval(jscroller_config.scroller.interval);
jscroller_config.scroller.interval=0;
}
}

function jscroller_init() {
$("#scroller a").click(function(){
window.open(this.href);
return false;
});
jscroller_scroller_cont.css(overflow,hidden);
if(!jscroller_config.scroller.interval) {
if (window.attachEvent) {
window.attachEvent("onfocus", jscroller_startScroll);
window.attachEvent("onblur",  jscroller_stopScroll);
window.attachEvent("onresize", jscroller_startScroll);
window.attachEvent("onscroll", jscroller_startScroll);
}
else if (window.addEventListener) {
window.addEventListener("focus", jscroller_startScroll, false);
window.addEventListener("blur",  jscroller_stopScroll, false);
window.addEventListener("resize", jscroller_startScroll, false);
window.addEventListener("scroll", jscroller_startScroll, false);
}
jscroller_startScroll();
if ($.browser.msie) {window.focus()}
}
}

function jscroller_getElem(Elem) {
return (typeof Elem == "string" && document.getElementById)? document.getElementById(Elem) : Elem;
}

function jscroller_doScroll() {
if (scroller_dom = jscroller_getElem(jscroller_scroller.attr("id"))) {
var
p_top= Number((/[0-9-,.]+/.exec(jscroller_scroller.css(top))||0)),
p_left=Number((/[0-9-,.]+/.exec(jscroller_scroller.css(left))||0)),
min_height=jscroller_scroller_cont.height(),
min_width=jscroller_scroller_cont.width(),
speed=jscroller_config.scroller.speed,
p_height=scroller_dom.offsetHeight,
p_width=scroller_dom.offsetWidth,
direction=jscroller_config.scroller.direction,
jscroller=jscroller_scroller;

switch(direction) {
case up:
if (p_top <= -1*p_height) {p_top=min_height;}
jscroller.css(top,p_top-speed+px);
break;
case right:
if (p_left >= min_width) {p_left=-1*p_width;}
jscroller.css(left,p_left+speed+px);
break;
case left:
if (p_left <= -1*p_width) {p_left=min_width;}
jscroller.css(left,p_left-speed+px);
break;
case down:
if (p_top >= min_height) {p_top=-1*p_height;}
jscroller.css(top,p_top+speed+px);
break;
}
}
}
});

//]]>
</script>

<script type=text/javascript>
jQuery(function(){
jQuery(&#39;ul.sf-menu&#39;).superfish();
});
</script>
<script type=text/javascript>
featuredcontentglider.init({
gliderid: &quot;glidercontent&quot;,
contentclass: &quot;glidecontent&quot;,
togglerid: &quot;togglebox&quot;,
remotecontent: &quot;&quot;,
selected: 1,
persiststate: true,
speed: 300,
direction: &quot;leftright&quot;,
autorotate: true,
autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>
<script type=text/javascript>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>

<style type=text/css>
#glidercontent{
margin:0px 0 5px 0px;
font-family:Georgia,Century gothic, Arial,Tahoma,sans-serif;
}
.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 670px;
height: 300px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
margin:0px 0px 0px 0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH9xfARe9R8TdtsFSzwpJLuS7OijzmhEdI0bHYh0jYqYRgV-TqA3z3JOSsnmAm1PVQOxQqETbE9U8F-DB_9fDuuSLTLz_seCN7tR_uL3kxYs6g-sFZEfXKGzLg9Dc1DxLsv0lopGT_G3Pk/) repeat-y;
}
.glidecontent{ /*style for each glide content DIV within wrapper.*/
position:absolute; /* Do not change this value */
padding:0px 10px 0px 10px;
width:640px;
color:#fff;
margin:0px 0px;
height: 230px;
background:#ec03d9 url() no -repeat;
overflow:hidden;
float:left;
}
.glidemeta h2{
margin:5px 0px 5px 0px;
padding:5px 0px;
font-size:18px;
font-weight:bold;
}
.glidemeta h2 a:link, .glidemeta h2 a:visited{
color:#fff;
}
.glidemeta{
height: 80px;
width: 650px;
padding:0px 5px 5px 5px;
position:absolute;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxicWK0wHvlKLB4wectr0Mqm4tB3akxy3xrsAaaFMZpP8CXdutLUqUxnSMPNWXLcyFroXjyHalZqeJkKlNNnjSLBgD2RTAP2UiAdbfryVIYet3UvXSfp5vMJ4azdcHIAtRSCb44wa-uYam/);
top:164px;
line-height:14px;
color: #fff;
font-size:12px;
overflow: hidden;
display:none;
border-top:1px solid #000;
}
.gnav{ /*style for DIV used to contain toggler links. */
width: 100px;
height:50px;
z-index:150;
float:right;
padding-right:25px;
}
.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
height:38px;
z-index:150;
width: 670px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRe5wp-SAgrHQgAnDytbgRB1BZ0blkeEc8drS7aNFfsQKiSExcWSU7L1DObqFeX9wuyXOZDDcKuZScuQBKrx7N57szWeDov7_SedOpRhM26aIWGMZQxDky1-B4_Hr_hHRHyWwDk3Oll9gL/);
}
.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
color: #2e6ab1;
font-weight: bold;
text-decoration: none;
}
.glidecontenttoggler a.selected{ /*style for selected page&#39;s toggler link. &quot;.selected&quot; class auto generated! */
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a:hover{
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). &quot;.toc&quot; class auto generated! */
}
.glidecontenttoggler a.prev{ /*style for &quot;prev&quot; and &quot;next&quot; toggler links. &quot;.prev&quot; and &quot;.next&quot; classes auto generated! */
top:6px;
right:35px;
position:absolute;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3u1gtwpdm5tGe78y0Z28uN9RwEhfZxRzFnJBShwS0jM2prAFBjK45fj4s20jtrWWYmaE39yMJgbgdPXumPMYX-WaVUOmG_ewSRb8q5jTCCjbSYN1u7KMMQgpT_Ip22QBjVav4IyUJzYZ2/) bottom;
width:36px;
height:25px;
}
.glidecontenttoggler a.next {
float:right;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho3rP_aIG0P75zcy5oYBu99i-kYdg1WcApz9584mAFQgmMhL3Jo9SUcMHbnrrO_tgPVITSSszB9REBwrVq8mcH6JGSpEGQz1qUdGvauG-apLpYxLwmuIjaMVTi1ry8M3ZEGS1P5eYxqe1p/) bottom;
width:36px;
height:25px;
position:absolute;
top:6px;
right:5px;
}
</style>

Note: Please host above images yourself.


Now click Save Template

STEP #2 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type.

Then add this code in to it:

<div id="glidercontent" class="glidecontentwrapper">
<div id="togglebox" class="glidecontenttoggler">
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUWzHp587Xbxz7zDTjX8Q6JP47Kzetuo_NxDLoA_SgZ-12O-UtcTVeOpOScTloIRFTvIjxiFABRee6_VnVZdA7hgpHygKTH1FI3CpQ-Ti2Du-uQMzd-YAJ-GE1CCRhLeFqnKGYFVAvwV9p/+fighter.jpg" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu130_b0HHaKBdMVhyphenhyphenjaxP3uDjKP02ocHrL1BWWPM5wqTEEHBooojSxx13QHV3E6EJ-8fy2nmd8ChBrJQF56-47KRQ6hjLNI_AwgG5XOMrTChc96nBR8YHByO_W295hrw8KcNSTXGbBCl6/" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMH8Dx_6N1uUgIZvbTkYR0vH4qbRDVAQkK8ZkuKJQh9ksZlsTEbF3W7uP6HUTaXTCxiYdbltSHFsd3WywWQONNXnyIZ_fKI5SmifhjXQ4beeGgS4GRF4Fm0yLaF0oYAHKLVRm-5tmJ7VyB/+day.jpg" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65OvZ09ErBKnuibVUyYQezrXOxZyMoiiv6ymKXwT4uavUmz3dZl6i4GeNnCPFZUNhipr41n3tws3671rE2GfHVEigflNvVb7sZOEMIxN1cgVEkMhK3X8VHimAr1oEZ821BYewWL-oCgYP/" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE"><img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNhtlYDGzNzpakGFg-bxm9mnNASHgUs6MdVXD5BqC0IkfNcszl2A_FN8fvxq-u9K1IjhtQfRXI-rvcV6gLgk5VBZSU70gXjjXLrQUTK0bLMuBkMGyUmhVUnnqSgjA6UvbSIhaucNzPHat8/+2.jpeg" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE"><img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsNgjcy5_lxZyYHSP8uJOP2p3BxjKAh4Gr6cJhfplnKzDdB39SAdSFtv0ZteipDRygFM9o6DmjExUcZQAiqCdyfx16ASZAn8Dcg17pA7S8aH1dZID6t5HYfLpTfKtK1khnGvaDFu5rO70m/" height="250"/></a>
</div>

</div>

Now click Save

Note : Replace POST-LINK-HERE,LINK-TITLE-HERE,POST-TITLE-HERE,POST-DESCRIPTION-HERE,IMAGE-TITLE-HERE and Image Addresses with your details.






thanks to Lasantha Bandara

Read More..