[This post is by Android designer Alex Faaborg, on behalf of the entire User Experience team. —Tim Bray]
When we initially released Android Design, by far the number one request we received was for us to release stencils as well. The fine folks on the Android User Experience team are pleased today to release some official Android Design stencils for your mockup-creating pleasure.
With these stencils you can now drag and drop your way to beautifully designed Ice Cream Sandwich (Android 4.0) applications, with grace and ease. The stencils feature the rich typography, colors, interactive controls, and icons found throughout Ice Cream Sandwich, along with some phone and tablet outlines to frame your meticulously crafted creations.
Currently we have stencils available for those venerable interactive design powerhouses Adobe® Fireworks®, and Omni® OmniGraffle® and we may expand to other applications® in the future. The source files for the various icons and controls are also available, created in Adobe® Photoshop®, and Adobe® Illustrator®. Here are the downloads.
We’ll be updating these stencils over time so, as always, please send in your feedback!
If you've published an app on Android Market, you’ve probably used Application Statistics to help tune your development and marketing efforts. Application Statistics is a set of dashboards in the Developer Console that shows your app’s installation performance across key dimensions such as countries, platform versions, device models, and others. Today we are making Application Statistics even more powerful for publishers, adding new metrics, new ways to analyze your data, and a redesigned UI that’s much easier to use.
First, we are adding important new installation metrics to the dashboards. You can now see your installations measured by unique users, as well as by unique devices. For user installations, you can view active installs, total installs, and daily installs and uninstalls. For devices, you can see active installs as well as daily installs, uninstalls, and upgrades.
Along with the new metrics, we’re also introducing two new data dimensions — Carrier and App Version. You can use them to track your app’s installation trends across mobile operators or monitor the launch metrics of specific app updates.
To give you visibility over your installation data over time, we’re adding timeline charts for all metrics and dimensions. At a glance, these charts highlight your app’s installation peaks and longer-term trends, which you can correlate to promotions, app improvements, or other factors. You can even focus in on data inside a dimension by adding specific points (such as individual platform versions or languages) to the timeline.
Finally, we’re bringing you all of the new metrics, dimensions, and timelines in a completely redesigned UI that is faster, more compact, and easier to use. Each dimension is now displayed in dedicated tab, making it easier to click through your stats daily or as often as needed. If you track your stats in another tool, we’re also adding an export capability that lets you download your stats in a single CSV file.
Check out the new Application Statistics next time you visit the Android Market Developer Console. We hope they’ll give you new insight into your app’s user base and installation performance. Watch for related announcements soon — we are continuing to work on bringing you the reporting features you need to manage your products successfully on Android Market.
You should already know about JQuery Featured Content Slider.Today we will see how to add 17+ jQuery featured content sliders / slideshows for your blog or website.Almost all bloggers use the contents, which included slider.Contents are a great way to show a lot of content in a smaller area of a web page or a blog. Automatic sliding doors are dynamic content in many popular websites on the web.This is a great technique to represent different types of content in a limited space and a good way to involve the user.You have probably noticed that a lot of websites recently a working area with content that slides or changes in any way.
Are you interested in implementing a content slider in your website? Checkout this list!Here I am going to teach you, how to add a featured content slider to your blogger / blogspot blogs.You're not sure what is it exactly? You`ll see below ;)
Featured Content Slider for Blogger Using jQuery
How to Install This Widget on Blogger?
Steps...
A. Adding CSS Theme Code
B. Adding Script Code
C. Adding HTML Code
Adding CSS Theme Code
I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.
Step 1:
In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.
In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.
I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..
Step 4:
If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.
Add a Gadget of HTML/JavaScript type.
If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below
4. Now Click On Save 'JavaScript' You are done.
<div id='featured'> <ul class='ui-tabs-nav'> <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove "showing post with label" in Blogger</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li> </ul> <!-- First Content --> <div class='ui-tabs-panel' id='fragment-1' style=''> <img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/> <div class='info'> <h3><a href='#'>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3> <p>Description goes here, this is just a test description....<a href='http://bdlab.blogspot.com/'>read more</a></p> </div> </div> <!-- Second Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''> <img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/> <div class='info'> <h3><a href='#'>How to remove "showing post with label" in Blogger</a></h3> <p>Description goes here, this is just a test description....<a href='#'>read more</a></p> </div> </div> <!-- Third Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''> <img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/> <div class='info'> <h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3> <p>Description goes here, this is just a test description....<a href='#'>read more</a></p> </div> </div> <!-- Fourth Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''> <img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/> <div class='info'> <h3><a href='#'>Chat live with your blog visitors using yahoo</a></h3> <p>Description goes here, this is just a test description....<a href='#'>read more</a></p> </div> </div> </div>
Step 2:And find the code </head> Step 3: Now add the following code just before the </head> tag.
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script language='javascript' src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-0-1.min.js' type='text/javascript'/> <script language='javascript' src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/freebloggerhelp-jquery.flow.1.2.auto.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $("#myController").jFlow({ slides: "#slides", controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign auto: true, //auto change slide, default true width: "610px", height: "235px", duration: 100, prev: ".jFlowPrev", // must be class, use . sign next: ".jFlowNext" // must be class, use . sign }); }); </script>
And now click Save Template
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<!-- You can add as many slides as you want above this line -->
</div>
<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<!-- Increase these numbers as with the increase in your number of slides above -->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>
And now click Save
t's Done.
Customization
Code 1. You can change the background colors in code 1 to suit your blog.
Code 2. First of all download http://safir85.ucoz.com/24work-blogspot/featured-post-s/freebloggerhelp-jquery.flow.1.2.auto.js and upload it to google sites.
You can change width, height and duration speed.
Code 3. As you look on code 3 there are 3 slide codes. First give the image link, add title and finally add description. Do same with all three codes. You can add more slide by adding the code:
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
//Execute the slideShow, set 6 seconds for each images slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
//Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed);
//pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } );
}
function gallery() {
//if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption $('#slideshow-caption').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); });
//Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show');
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<ul class="slideshow">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLkV2-nKnxeGT_BTi_zQURfTmjfwVLVmuz5HxVPfzmnEjkSa-Y1TLS42Y-Gw3GSyRv-vvrh8c6HxvtFZsdJ6GJoXxKY907i0_EkVkxAnvHKtDxwWkqxY8W7lbOEAaglDu0HC4mlBR-gNo/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq0G9h5bD2fGM1EaCddG8110O-YMmgK0ED4AkbagD9K2-1bjWZUhapUmqIrC0Plu9rU1KS-fZOWBlgwsMynpite1RxYYMZ-TSgjmEkddRTYAw0-5_sBOGUcy6vmKhZrChCNLr8FeUmbRg/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdjLvNfqBFftCx72pJxPsW3Ts1xdJ8mrGsXBN0XaA-IVYRA5ntF6OR1FKg6uFUImVaCi0Tgpl7_fqsD6YmlHsTjuRCtW1xQCVokueLRSX_YiCJpWcR6JZOMIRdMs7skbtWR-f3fpPmTgY/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnPwUeh-ju45y559gsdNsjqfPxS-DcANtka-ET8pXL684IqnMymSnMof8sHv9EaJhQQxw7ShD2eBdBgCdBHWjOMrmvKVULsB3tlzMYPHe_xfo1XnhVhkgwohiQPrKBDLo5ZR5mmcNqwOg/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>
And now click Save
You can add more slides as you like.
Note : Replace images URLs,"This is featured post X title","Replace This Text With Your Featured Post X Description" with your content.
//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 it's 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') } },
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 they're 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 },
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'> if (window.jstiming) window.jstiming.load.tick('headEnd'); </script>
<style type='text/css'> #glidercontent{ margin:5px 0 0px 12px; } .glidecontentwrapper{ position: relative; width: 629px; height:300px; overflow: hidden; margin:0px 0px 0px 0px; padding:0px 0px; background:#fff; } .glidecontent{ position:absolute; padding:0px 5px 0px 5px; width:610px; color:#555; margin:0px 5px; height:100%; overflow:hidden; float:left; background:#fff; } .glidim{ float:left; } .glidim img{ margin:0px 5px 5px 0px; padding:7px 7px; } .glidecontent h2{ margin:0px 0px 0px 0px; padding:5px 0px; font-size:24px; line-height:24px; font-weight:bold; overflow:hidden; font-family: Georgia,Century gothic,Arial,Tahoma,sans-serif; } .glidecontent h2 a:link, .glidecontent h2 a:visited{ color:#303843; } .glidecontent p{ margin:0px 0px 0px 0px; padding:5px 0px; font-size:14px; line-height:22px; overflow:hidden; font-family: Georgia,Century gothic,Arial,Tahoma,sans-serif; color:#696d70; } .glidebot{ width:630px; height:18px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo4fzVQW3mL9IQIWhr3owyR0hFFc9sFaNtdBzJvSJVuEOaIc2tDIpOvC-g-qYiSwtuSh2HukaQSUh3I9bF9kHhIfdDwwd4SVJ2Ld_wZnZMxp1KWPlIW-dJdCP_AEX2IPm22X9ftaXJDcaX/) center no-repeat; margin:0px 0px 5px 12px ; padding:0px 0px; float:left; } .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:35px; z-index:150; width: 650px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8J75t0yRl80ccvwNBxw8GEGBCNHG5pCWo6yep7eIvqHvofXAD-aEUvOjNNvn4XBqU64bSSXkRXGXM0YwnggdgyUzEAXbEnDcBba6z1_1IPsC4dvqL3x80JeZxmT1e5AxsxdO9UdcUDqf9/) no-repeat; } .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's toggler link. ".selected" 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). ".toc" class auto generated! */ } .glidecontenttoggler a.prev{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */ top:9px; right:25px; position:absolute; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPUKsqgORfennCJv9LmhfArlGIMuHn5-hRBJQ4SYZE9ZM0elgG75CyOdWtcKC-zCoQ94wWYVkGnEpEKwD0SIe4MKSuorGbhp5TBxUfzz1XqzpFlDgA_HpWXf-KgftAETew7xZm1WwbMe4C/) left no-repeat; width:50px; height:17px; } .glidecontenttoggler a.next { float:right; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQwwARkHoERqLYI77_x_atb-RMcXFvE2h-67IgsUiFwzx10YhfBM08Mx2sRlyNgzZumIFdWYMeSMGHivIVDuA4zBjQeIdHhi9HxSegmRWKIz18cBLC778uByYqorEwVwiEApa_NqkbV9Tg/) right no-repeat; width:20px; height:17px; position:absolute; top:9px; right:15px; } </style>
And now click Save Template
Note: Please host above images yourself.
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<h2><a href="http://bdlab.blogspot.com" title="Adsense Tips And Secrets">Adsense Tips And Secrets</a></h2>
<p>AdSense Tip 1: Find Best keywords for your content Before serving ads on a web page, check its keyword density. You can find many free keyword analyzer tools in internet searching the word "free keyword analyzer". AdSense Tip 2: Improve your keywords Get keyword suggestions from Google AdWords Sandbox. Get new keywords that can help you improve your ad relevance. AdSense Tip 3: Make content rich websites This means that content-rich websites of a popular topic should attract a large amount of ads. AdSense Tip 4: Write a new page/blog post every day <a href="http://bdlab.blogspot.com">Read More →</a></p></div>
<p>What is Google Adsense Section targeting? Here is the official information on Adsense Help Center: Section targeting allows you to suggest sections of your text and HTML content that you'd like us to emphasize or downplay when matching ads to your site's content. By providing us with your suggestions, you can assist us in improving your ad targeting. We recommend that only those familiar with HTML attempt to implement section targeting. To implement section targeting, you'll need to add a set of special HTML comment tags to your code. These tags will mark the beginning and end of whichever section(s) you'd like to emphasize or de-emphasize for ad targeting. The HTML tags to emphasize a page section take the following format: <a href="http://bdlab.blogspot.com">Read More →</a></p></div>
<p>To increase your Adsense Earnings by removing the lowpaying adsense ads from your account,follow the steps below. 1.First go to www.adsblacklist.com . 2.Now Signup for a account.it's free and very simple. 3.Now login to your account. 4.Now Click on My Account. 5.Now click on 'Add New Domain' 6.Submit your URL,TITLE and Keywords.Look at the example below. 6.Now go to Generate Filter List. 7.Drag and drop your domain name into 'Keywords from selected domains:' box.Then you can see keywords,you give in step 4. <a href="http://bdlab.blogspot.com">Read More →</a></p></div>
<div class="glidecontent">
<h2><a href="http://bdlab.blogspot.com" title="Comment Box is made DO FOLLOW">Comment Box is made DO FOLLOW</a></h2>
<p>Above Title Means comments on this blog are made do follow and will be spidered.Comments field in blogger are made NOFOLLOW by default.This is done as a measure to reduce spam.To Become comments on your blog are made "do follow",follow the easy steps below. 1.Log in to your dashboard----> layout- ---> Edit HTML 2.Click on "Expand Widget Templates" 3.Scroll down to where you see this:- <a expr:href='data:comment.authorUrl' rel='nofollow'> 4.Replace it with below code. <a expr:href='data:comment.authorUrl'> 5.Click on Save Templates and you are done. Now you must to make other bloggers know that you are comments are made do follow.For this add below code to your blog... <a href="http://bdlab.blogspot.com">(more...)</a></p></div>
//** Created: March 19th, 08' //** Aug 16th, 08'- Updated to v 1.4: //1) Adds ability to set speed/duration of panel animation (in milliseconds) //2) Adds persistence support, so the last viewed panel is recalled when viewer returns within same browser session //3) Adds ability to specify whether panels should stop at the very last and first panel, or wrap around and start all over again //4) Adds option to specify two navigational image links positioned to the left and right of the Carousel Viewer to move the panels back and forth
//** Aug 27th, 08'- Nav buttons (if enabled) also repositions themselves now if window is resized
var stepcarousel={ ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>', //customize HTML to show while fetching Ajax content defaultbuttonsfade: 0.4, //Fade degree for disabled nav buttons (0=completely transparent, 1=completely opaque) configholder: {},
getCSSValue:function(val){ //Returns either 0 (if val contains 'auto') or val as an integer return (val=="auto")? 0 : parseInt(val) },
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 },
addnavbuttons:function(config, currentpanel){ config.$leftnavbutton=$('<img src="'+config.defaultbuttons.leftnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Back '+config.defaultbuttons.moveby+' panels'}).appendTo('body') config.$rightnavbutton=$('<img src="'+config.defaultbuttons.rightnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Forward '+config.defaultbuttons.moveby+' panels'}).appendTo('body') config.$leftnavbutton.bind('click', function(){ //assign nav button event handlers stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby) }) config.$rightnavbutton.bind('click', function(){ //assign nav button event handlers stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby) }) if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth) this.fadebuttons(config, currentpanel) } },
alignpanels:function($, config){ var paneloffset=0 config.paneloffsets=[paneloffset] //array to store upper left offset of each panel (1st element=0) config.panelwidths=[] //array to store widths of each panel config.$panels.each(function(index){ //loop through panels var $currentpanel=$(this) $currentpanel.css({float: 'none', position: 'absolute', left: paneloffset+'px'}) //position panel $currentpanel.bind('click', function(e){return config.onpanelclick(e.target)}) //bind onpanelclick() to onclick event paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width')) //calculate next panel offset config.paneloffsets.push(paneloffset) //remember this offset config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2]) //remember panel width }) config.paneloffsets.pop() //delete last offset (redundant) var addpanelwidths=0 var lastpanelindex=config.$panels.length-1 config.lastvisiblepanel=lastpanelindex for (var i=config.$panels.length-1; i>=0; i--){ addpanelwidths+=(i==lastpanelindex? config.panelwidths[lastpanelindex] : config.paneloffsets[i+1]-config.paneloffsets[i]) if (config.gallerywidth>addpanelwidths){ config.lastvisiblepanel=i //calculate index of panel that when in 1st position reveals the very last panel all at once based on gallery width } } config.$belt.css({width: paneloffset+'px'}) //Set Belt DIV to total panels' widths config.currentpanel=(config.panelbehavior.persist)? parseInt(this.getCookie(window[config.galleryid+"persist"])) : 0 //determine 1st panel to show by default config.currentpanel=(typeof config.currentpanel=="number" && config.currentpanel<config.$panels.length)? config.currentpanel : 0 if (config.currentpanel!=0){ var endpoint=config.paneloffsets[config.currentpanel]+(config.currentpanel==0? 0 : config.beltoffset) config.$belt.css({left: -endpoint+'px'}) } if (config.defaultbuttons.enable==true){ //if enable default back/forth nav buttons this.addnavbuttons(config, config.currentpanel) $(window).bind("load, resize", function(){ //refresh position of nav buttons when page loads/resizes, in case offsets weren't available document.oncontentload config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")} config.$leftnavbutton.css({left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px'}) config.$rightnavbutton.css({left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px'}) }) } this.statusreport(config.galleryid) config.oninit() config.onslideaction(this) },
stepTo:function(galleryid, pindex){ /*User entered pindex starts at 1 for intuitiveness. Internally pindex still starts at 0 */ var config=stepcarousel.configholder[galleryid] if (typeof config=="undefined"){ alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!") return } var pindex=Math.min(pindex-1, config.paneloffsets.length-1) var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset) if (config.panelbehavior.wraparound==false && config.defaultbuttons.enable==true){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth) this.fadebuttons(config, pindex) } config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)}) config.currentpanel=pindex this.statusreport(galleryid) },
stepBy:function(galleryid, steps){ var config=stepcarousel.configholder[galleryid] if (typeof config=="undefined"){ alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!") return } var direction=(steps>0)? 'forward' : 'back' //If "steps" is negative, that means backwards var pindex=config.currentpanel+steps //index of panel to stop at if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth) pindex=(direction=="back" && pindex<=0)? 0 : (direction=="forward")? Math.min(pindex, config.lastvisiblepanel) : pindex if (config.defaultbuttons.enable==true){ //if default nav buttons are enabled, fade them in and out depending on if at start or end of carousel stepcarousel.fadebuttons(config, pindex) } } else{ //else, for normal stepBy behavior pindex=(pindex>config.paneloffsets.length-1 || pindex<0 && pindex-steps>0)? 0 : (pindex<0)? config.paneloffsets.length+steps : pindex //take into account end or starting panel and step direction } var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset) //left distance for Belt DIV to travel to if (pindex==0 && direction=='forward' || config.currentpanel==0 && direction=='back' && config.panelbehavior.wraparound==true){ //decide whether to apply "push pull" effect config.$belt.animate({left: -config.paneloffsets[config.currentpanel]-(direction=='forward'? 100 : -30)+'px'}, 'normal', function(){ config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)}) }) } else config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)}) config.currentpanel=pindex this.statusreport(galleryid) },
statusreport:function(galleryid){ var config=stepcarousel.configholder[galleryid] var startpoint=config.currentpanel //index of first visible panel var visiblewidth=0 for (var endpoint=startpoint; endpoint<config.paneloffsets.length; endpoint++){ //index (endpoint) of last visible panel visiblewidth+=config.panelwidths[endpoint] if (visiblewidth>config.gallerywidth){ break } } startpoint+=1 //format startpoint for user friendiness endpoint=(endpoint+1==startpoint)? startpoint : endpoint //If only one image visible on the screen and partially hidden, set endpoint to startpoint var valuearray=[startpoint, endpoint, config.panelwidths.length] for (var i=0; i<config.statusvars.length; i++){ window[config.statusvars[i]]=valuearray[i] //Define variable (with user specified name) and set to one of the status values config.$statusobjs[i].text(valuearray[i]+" ") //Populate element on page with ID="user specified name" with one of the status values } },
setup:function(config){ //Disable Step Gallery scrollbars ASAP dynamically (enabled for sake of users with JS disabled) document.write('<style type="text/css">\n#'+config.galleryid+'{overflow: hidden;}\n</style>') jQuery(document).ready(function($){ config.$gallery=$('#'+config.galleryid) config.gallerywidth=config.$gallery.width() config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")} config.$belt=config.$gallery.find('.'+config.beltclass) //Find Belt DIV that contains all the panels config.$panels=config.$gallery.find('.'+config.panelclass) //Find Panel DIVs that each contain a slide config.onpanelclick=(typeof config.onpanelclick=="undefined")? function(target){} : config.onpanelclick //attach custom "onpanelclick" event handler config.onslideaction=(typeof config.onslide=="undefined")? function(){} : function(beltobj){$(beltobj).stop(); config.onslide()} //attach custom "onslide" event handler config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler config.beltoffset=stepcarousel.getCSSValue(config.$belt.css('marginLeft')) //Find length of Belt DIV's left margin config.statusvars=config.statusvars || [] //get variable names that will hold "start", "end", and "total" slides info config.$statusobjs=[$('#'+config.statusvars[0]), $('#'+config.statusvars[1]), $('#'+config.statusvars[2])] config.currentpanel=0 stepcarousel.configholder[config.galleryid]=config //store config parameter as a variable if (config.contenttype[0]=="ajax" && typeof config.contenttype[1]!="undefined") //fetch ajax content? stepcarousel.getremotepanels($, config) else stepcarousel.alignpanels($, config) //align panels and initialize gallery }) //end document.ready jQuery(window).bind('unload', function(){ //clean up if (config.panelbehavior.persist){ stepcarousel.setCookie(window[config.galleryid+"persist"], config.currentpanel) } jQuery.each(config, function(ai, oi){ oi=null }) config=null }) } }
//]]> </script>
<style type='text/css'> #myslides{ background:#2c3133; } .stepcarousel{ position: relative; /*leave this value alone*/ overflow: scroll; /*leave this value alone*/ width: 95%; /*Width of Carousel Viewer itself*/ height: 165px; /*Height should enough to fit largest content's height*/ margin: 0px 14px 5px 14px; background:#2c3133; } .stepcarousel .belt{ position: absolute; /*leave this value alone*/ left: 0; top: 0; } .stepcarousel .panel{ float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 10px 17px ; /*margin around each panel*/ width:220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ background:#202325; height:140px; border:1px solid #393f42; } .stepcarousel .panel p{ text-align: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 5px 5px ; /*margin around each panel*/ } .stepcarousel .panel h2{ text-align: left; /*leave this value alone*/ height:20px; overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 2px 5px ; /*margin around each panel*/ font-size:16px; font-weight:bold; text-align:center; font-family:Georgia,century gothic,Arial,verdana, sans-serif; } .stepcarousel .panel img{ float: left; /*leave this value alone*/ background:#040404; /*clip content that go outside dimensions of holding panel DIV*/ margin: 10px 10px 10px 10px; /*margin around each panel*/ padding:0px 0px; } </style>
And now click Save Template
Note : You can change width value as your choice.
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<div id="myslides">
<script type="text/javascript"> stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content panelbehavior: {speed:500, wraparound:true, persist:true}, defaultbuttons: {enable: true, moveby: 2, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjtt5vjsyS7V32017kbP0fNgMgp8yP0NSmevg08DwnNzVnXMfZ8qadIw26VIij_QTqsQ8hyxhsIJO5jfcRDh3nFt_wPbjFbCik2qvPVyc8masZMWfwC8iAoUrjQdxPqduM6jBylhyphenhyphenQTJtQ/', -14, 60], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8GmiLXYTG2YpTrV8AlAB93ZMbBFtJygtkUyjxJTwVrfw_HyfNoxsdMBpG9PYLQOg2cgTG9ok23lZAwjtIk7KWfdB5qNhDmT62oE599ty4OCgMRk-xdAsGRhflplr6MjAlxnxutxAJPSeg/', 0, 60]}, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file'] }) </script>
<script type="text/javascript"> window.addEvent('domready', function(){ var totIncrement = 0; var increment = 212; var maxRightIncrement = increment*(-6); var fx = new Fx.Style('slider-list', 'margin-left', { duration: 1000, transition: Fx.Transitions.Back.easeInOut, wait: true });
//------------------------------------- // EVENTS for the button "previous" $('previous').addEvents({ 'click' : function(event){ if(totIncrement<0){ totIncrement = totIncrement+increment; fx.stop() fx.start(totIncrement); } } });
//------------------------------------- // EVENTS for the button "next" $('next').addEvents({ 'click' : function(event){ if(totIncrement>maxRightIncrement){ totIncrement = totIncrement-increment; fx.stop() fx.start(totIncrement); } } })
Important !!! : Download mootools.svn.js as a zip file and hostmootools.svn.js yourself.
You can change height,width,color,... if you like.
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
Important !!! : Download compressed.js and 5 images as a zip file, andhost compressed.js and images yourself.
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com. //** May 2nd, 08'- Script rewritten and updated to 2.0. //** June 12th, 08'- Script updated to v 2.3, which adds the following features: //1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later. //2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former). //3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.
//** July 11th, 08'- Script updated to v 2.4: //1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider") //2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.
var featuredcontentslider={
//3 variables below you can customize if desired: ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>', bustajaxcache: true, //bust caching of external ajax page after 1st request? enablepersist: true, //persist to last content viewed when returning to page?
settingcaches: {}, //object to cache "setting" object of each script instance
jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually. this.turnpage(this.settingcaches[fcsid], pagenumber) },
ajaxconnect:function(setting){ var page_request = false if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else return false var pageurl=setting.contentsource[1] page_request.onreadystatechange=function(){ featuredcontentslider.ajaxpopulate(page_request, setting) } document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', pageurl+bustcache, true) page_request.send(null) },
buildcontentdivs:function(setting){ var alldivs=document.getElementById(setting.id).getElementsByTagName("div") for (var i=0; i<alldivs.length; i++){ if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv" setting.contentdivs.push(alldivs[i]) alldivs[i].style.display="none" //collapse all content DIVs to begin with } } },
buildpaginate:function(setting){ this.buildcontentdivs(setting) var sliderdiv=document.getElementById(setting.id) var pdiv=document.getElementById("paginate-"+setting.id) var phtml="" var toc=setting.toc var nextprev=setting.nextprev if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){ for (var i=1; i<=setting.contentdivs.length; i++){ phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> ' } phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '') pdiv.innerHTML=phtml } var pdivlinks=pdiv.getElementsByTagName("a") var toclinkscount=0 //var to keep track of actual # of toc links for (var i=0; i<pdivlinks.length; i++){ if (this.css(pdivlinks[i], "toc", "check")){ if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents) pdivlinks[i].style.display="none" //hide this toc link continue } pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link pdivlinks[i][setting.revealtype]=function(){ featuredcontentslider.turnpage(setting, this.getAttribute("rel")) return false } setting.toclinks.push(pdivlinks[i]) } else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next" pdivlinks[i].onclick=function(){ featuredcontentslider.turnpage(setting, this.className) return false } } } this.turnpage(setting, setting.currentpage, true) if (setting.autorotate[0]){ //if auto rotate enabled pdiv[setting.revealtype]=function(){ featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation this.autorotate(setting) } },
urlparamselect:function(fcsid){ var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index },
turnpage:function(setting, thepage, autocall){ var currentpage=setting.currentpage //current page # before change var totalpages=setting.contentdivs.length var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage) turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly return setting.currentpage=turntopage setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex this.cleartimer(setting, window["fcsfade"+setting.id]) setting.cacheprevpage=setting.prevpage if (setting.enablefade[0]==true){ setting.curopacity=0 this.fadeup(setting) } if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete) setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.prevpage, setting.currentpage) } setting.contentdivs[turntopage-1].style.visibility="visible" setting.contentdivs[turntopage-1].style.display="block" if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[setting.prevpage-1], "selected", "remove") if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[turntopage-1], "selected", "add") setting.prevpage=turntopage if (this.enablepersist) this.setCookie("fcspersist"+setting.id, turntopage) },
setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between) var targetobject=setting.contentdivs[setting.currentpage-1] if (targetobject.filters && targetobject.filters[0]){ //IE syntax if (typeof targetobject.filters[0].opacity=="number") //IE6 targetobject.filters[0].opacity=value*100 else //IE 5.5 targetobject.style.filter="alpha(opacity="+value*100+")" } else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax targetobject.style.MozOpacity=value else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax targetobject.style.opacity=value setting.curopacity=value },
fadeup:function(setting){ if (setting.curopacity<1){ this.setopacity(setting, setting.curopacity+setting.enablefade[1]) window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50) } else{ //when fade is complete if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run) setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.cacheprevpage, setting.currentpage) } },
cleartimer:function(setting, timervar){ if (typeof timervar!="undefined"){ clearTimeout(timervar) clearInterval(timervar) if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div setting.contentdivs[setting.cacheprevpage-1].style.display="none" } } },
css:function(el, targetclass, action){ var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig") if (action=="check") return needle.test(el.className) else if (action=="remove") el.className=el.className.replace(needle, "") else if (action=="add") el.className+=" "+targetclass },
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 },
init:function(setting){ var persistedpage=this.getCookie("fcspersist"+setting.id) || 1 var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index this.settingcaches[setting.id]=setting //cache "setting" object setting.contentdivs=[] setting.toclinks=[] setting.topzindex=0 setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1) setting.prevpage=setting.currentpage setting.revealtype="on"+(setting.revealtype || "click") setting.curopacity=0 setting.onChange=setting.onChange || function(){} if (setting.contentsource[0]=="inline") this.buildpaginate(setting) if (setting.contentsource[0]=="ajax") this.ajaxconnect(setting) }
}
//]]> </script>
<style> #slider4{ border: 2px solid #181818; background: #ffffff; margin-left: 9px; } #paginate-slider4{ border-color: #181818; margin-left: 9px; margin-top: 4px; } #paginate-slider4 a img{ width: 80px; height: 60px; border: 2px solid #181818; margin-top: 5px; } #paginate-slider4 a img:hover, #paginate-slider4 a.selected img{ border: 2px solid #ffc04e; } .sliderwrapper{ position: relative; /*leave as is*/ overflow: hidden; /*leave as is*/ border: 10px solid navy; width: 500px; /*width of featured content slider*/ height: 325px; } .sliderwrapper .contentdiv{ visibility: hidden; /*leave as is*/ position: absolute; /*leave as is*/ left: 0; /*leave as is*/ top: 0; /*leave as is*/ padding: 5px; background: white; width: 500px; /*width of content DIVs within slider. Total width should equal slider's inner width */ height: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1; opacity: 1; } .pagination{ width: 500px; /*Width of pagination DIV. Total width should equal slider's outer width */ text-align: right; background-color: #ffffff; padding: 0px 5px; } .pagination a{ padding: 0 5px; text-decoration: none; color: #181818; background: #ffffff; } .pagination a:hover, .pagination a.selected{ color: #181818; background-color: #ffffff; } </style>
And now click Save Template
Note : You can change width,height,... as you like.
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<div style="float:left;">
<div id="slider4" class="sliderwrapper">
<div style="background: url('IMAGE-1-LINK') center left no-repeat" class="contentdiv"> </div>
<div style="background: url('IMAGE-2-LINK') center left no-repeat" class="contentdiv"> </div>
<div style="background: url('IMAGE-3-LINK') center left no-repeat" class="contentdiv"> </div>
<div style="background: url('IMAGE-4-LINK') center left no-repeat" class="contentdiv"> </div>
<div style="background: url('IMAGE-5-LINK') center left no-repeat" class="contentdiv"> </div>
Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top. -------------------------------------------------------------------------- */
(function($){
$.fn.s3Slider = function(vars) {
var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; var current = null; var timeOutFn = null; var faderStat = true; var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
NOTE : To change the speed of slideshow, change the value 4000.
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
/* * jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php * * Uses the built in easing capabilities added in jQuery 1.1 * to offer multiple easing options * * Copyright (c) 2007 George Smith * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php */
jQuery.easing = { easein: function(x, t, b, c, d) { return c*(t/=d)*t + b; // in }, easeinout: function(x, t, b, c, d) { if (t < d/2) return 2*c*t*t/(d*d) + b; var ts = t - d/2; return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b; }, easeout: function(x, t, b, c, d) { return -c*t*t/(d*d) + 2*c*t/d + b; }, expoin: function(x, t, b, c, d) { var flip = 1; if (c < 0) { flip *= -1; c *= -1; } return flip * (Math.exp(Math.log(c)/d * t)) + b; }, expoout: function(x, t, b, c, d) { var flip = 1; if (c < 0) { flip *= -1; c *= -1; } return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b; }, expoinout: function(x, t, b, c, d) { var flip = 1; if (c < 0) { flip *= -1; c *= -1; } if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b; return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b; }, bouncein: function(x, t, b, c, d) { return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b; }, bounceout: function(x, t, b, c, d) { if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }, bounceinout: function(x, t, b, c, d) { if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b; return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b; }, elasin: function(x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, elasout: function(x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, elasinout: function(x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; }, backin: function(x, t, b, c, d) { var s=1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }, backout: function(x, t, b, c, d) { var s=1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, backinout: function(x, t, b, c, d) { var s=1.70158; if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; }, linear: function(x, t, b, c, d) { return c*t/d + b; //linear } };
NOTE : To change the speed of slideshow, change the value 4000.
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
Note:Replace URL-of-Post-X,Title-of-Post-X,Slide X Description [...],Slide-X-Image-Addresswith your content. Usewidth=270pxandheight=170pximages for your slides. And also you can add many more slide to this widget.
/* This file is part of JonDesign's SmoothGallery v2.0.
JonDesign's SmoothGallery is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or (at your option) any later version.
JonDesign's SmoothGallery is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with JonDesign's SmoothGallery; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/) Contributed code by: - Christian Ehret (bugfix) - Nitrix (bugfix) - Valerio from Mad4Milk for his great help with the carousel scrolling and many other things. - Archie Cowan for helping me find a bugfix on carousel inner width problem. - Tomocchino from #mootools for the preloader class Many thanks to: - The mootools team for the great mootools lib, and it's help and support throughout the project. */
function formatString() { var num = arguments.length; var oStr = arguments[0]; for (var i = 1; i < num; i++) { var pattern = "\\{" + (i-1) + "\\}"; var re = new RegExp(pattern, "g"); oStr = oStr.replace(re, arguments[i]); } return oStr; }
//]]> </script>
<b:if cond='data:blog.pageType == "item"'> <style>#featabout, .extra {display:none; margin:0;padding:0;border:0;}</style> </b:if> <script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 180; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>
<script type='text/javascript'> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true }); } window.addEvent('domready',startGallery); </script>
<div id='myGallery'>
<script type='text/javascript'> //<![CDATA[ function rp(json) {
for (var i = startposts; i < numposts; i++) {
var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } }
posttitle = posttitle.link(posturl); var readmorelink = "(Read More)"; readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t; var cdyear = postdate.substring(0,4); var cdmonth = postdate.substring(5,7); var cdday = postdate.substring(8,10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec";
if ("content" in entry) { var postcontent = entry.content.$t; } else if ("summary" in entry) { var postcontent = entry.summary.$t; } else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (showposttitle == true) document.write(posttitle);
(function($){$.fn.innerfade=function(options){return this.each(function(){$.innerfade(this,options)})};$.innerfade=function(container,options){var settings={'animationtype':'fade','speed':'normal','type':'sequence','timeout':2000,'containerheight':'auto','runningclass':'innerfade','children':null};if(options)$.extend(settings,options);if(settings.children===null)var elements=$(container).children();else var elements=$(container).children(settings.children);if(elements.length>1){$(container).css('position','relative').css('height',settings.containerheight).addClass(settings.runningclass);for(var i=0;i<elements.length;i++){$(elements[i]).css('z-index',String(elements.length-i)).css('position','absolute').hide()};if(settings.type=="sequence"){setTimeout(function(){$.innerfade.next(elements,settings,1,0)},settings.timeout);$(elements[0]).show()}else if(settings.type=="random"){var last=Math.floor(Math.random()*(elements.length));setTimeout(function(){do{current=Math.floor(Math.random()*(elements.length))}while(last==current);$.innerfade.next(elements,settings,current,last)},settings.timeout);$(elements[last]).show()}else if(settings.type=='random_start'){settings.type='sequence';var current=Math.floor(Math.random()*(elements.length));setTimeout(function(){$.innerfade.next(elements,settings,(current+1)%elements.length,current)},settings.timeout);$(elements[current]).show()}else{alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'')}}};$.innerfade.next=function(elements,settings,current,last){if(settings.animationtype=='slide'){$(elements[last]).slideUp(settings.speed);$(elements[current]).slideDown(settings.speed)}else if(settings.animationtype=='fade'){$(elements[last]).fadeOut(settings.speed);$(elements[current]).fadeIn(settings.speed,function(){removeFilter($(this)[0])})}else alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');if(settings.type=="sequence"){if((current+1)<elements.length){current=current+1;last=current-1}else{current=0;last=elements.length-1}}else if(settings.type=="random"){last=current;while(current==last)current=Math.floor(Math.random()*elements.length)}else alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');setTimeout((function(){$.innerfade.next(elements,settings,current,last)}),settings.timeout)}})(jQuery);function removeFilter(element){if(element.style.removeAttribute){element.style.removeAttribute('filter')}}
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<ul id="portfolio" style="list-style-type:none;">
<li><a href="http://bdlab.blogspot.com/search/label/Bookmarks?max-results=1000"><img alt="Social Bookmarks For Bloggers" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWon1sixU0TRcOJaqY6fObM4MFFfJ-x3OuGgUlwMLwtXTZPTK92uJzZtJvtLwjNTVP3aKh9urBP6_4O8AbECw9MmfpJCy2-u8pnkbSCR_ZQ5jXhuXKMmAw3tlLJZowV03mwLSRZBnpAU96/+Bookmarks.jpg"/></a></li>
//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 it's 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') } },
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 they're 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 },
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
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; } }
<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/AVvXsEh9ui5S7RfGW7oiWe-o-y0hW3CKMr4cduD5zd5xXxSxK6Q1W3KfHwdPEXyEB76C2S6WdlPpfFTp_r_m3UfV7SAT9G3bnVI0HiIJShi3hx6uvxBOsJcydBetIPWvrN4-iZkWMjUhnE53KQph/) 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/AVvXsEjx5i-FL7q2npdtWxuqS8PqXTnZXKWiOtsksq_v8wYv_nX8QmZbeGy-EqoT_nEASjHs_eKddQPzLozy5HUV7R423THmPqGLQGqmX0Re1Zhkhsfl9aEslpia6FjtTCFQzld_ZZoK2ZgcteZM/); 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/AVvXsEgaEZuTJGVogqXJiRIs2zQrKbIAXRjK2Rx7goMSrSqO02_8Rez26tthsoUER9uOnBb5qES67f5SAu8ct8SCmptUinkvh9N8k1anlNGOfTtTeWnX1Qhjjr3gxJURyyGyZddHjkSvrXZT66WF/); } .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's toggler link. ".selected" 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). ".toc" class auto generated! */ } .glidecontenttoggler a.prev{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */ top:6px; right:35px; position:absolute; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiMnBFb3uQyHkfxzXisVsTUNceGNUo9gUqErWrgMRGiSjR8ZzujgYgI9DciUol_VVvhv0gUC8gIwfIyB5-t-qO_W1cHFyglxH82P0q5XkznPWBdlilCbmOs7Nx_zUFHgFdhxBhiK10rKbh/) bottom; width:36px; height:25px; } .glidecontenttoggler a.next { float:right; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTznOFL9WJDs8znkyRyOZ5toLteKKjA4NN0T0rP0If-kG1vVzY0_2z0QrgLmWuON75GdUCJsfEdokNDWVJ96eTSNoJlArmLuznmYSghTyjM5C2-uWeVPIgR7zzXChcp-sGwGoDSNb8RtuT/) bottom; width:36px; height:25px; position:absolute; top:6px; right:5px; } </style>
And now click Save Template
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
Step 2:And find the code </body> Step 3: Now add the following code just before the </body> tag.
<script type='text/javascript'>
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty2","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty3","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty4","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty5","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty6","desc":"add your description here"}];
</script>
And now click Save Template
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href="Your Post link here"><img id="slide-img-1" src="http://img338.imageshack.us/img338/9756/naturephotoc.png" class="slide" alt="Your image title here" /></a>
<a href="Your Post Link Here"><img id="slide-img-2" src="http://img145.imageshack.us/img145/7564/naturephoto2.png" class="slide" alt="Your image title here" /></a>
<a href="Your Post Link Here"><img id="slide-img-3" src="http://img31.imageshack.us/img31/5550/naturephoto3.png" class="slide" alt="Your image title here" /></a>
<a href="Your Post Link Here"><img id="slide-img-4" src="http://img34.imageshack.us/img34/2006/naturephoto4.png" class="slide" alt="Your image title here" /></a>
<a href="Your Post Link Here"><img id="slide-img-5" src="http://img130.imageshack.us/img130/4637/naturephoto5.png" class="slide" alt="Your image title here" /></a>
<a href="Your Post Link Here"><img id="slide-img-6" src="http://img820.imageshack.us/img820/3824/naturephoto6.png" class="slide" alt="Your image title here" /></a>
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<!-- Slider --> <div id='slider'> <div id='mover'> <div class='slide'> <h2><a href='http://bdlab.blogspot.com/' title='26 free ebooks for bloggers '>26 Free eBooks For Bloggers </a></h2> <p>A collection of 26 Free eBooks which cover almost all the aspects of Blogging and help you to create better blogs. These eBooks which have been written by experts are very useful for bloggers.</p> <img alt='ebooks' src='http://i44.tinypic.com/2ef0odd.jpg'/> </div> <div class='slide'> <h2><a href='http://bdlab.blogspot.com/' title='largest collection of rss icons '>Largest Collection Of RSS Icons </a></h2> <p>This is the largest collection of RSS Icons in a post. Its a huge list containing more than 80 RSS Icon Sets.</p> <img alt='rss icons ' src='http://i40.tinypic.com/2vl4bbm.jpg'/> </div> <div class='slide'> <h2><a href='http://bdlab.blogspot.com/' title='50 beautiful templates converted from wordpress to blogger '>50 Beautiful Templates Converted From Wordpress To Blogger </a></h2> <p>This is a collection of 50 Beautiful Templates which have been converted from Wordpress to Blogger. </p> <img alt='blogger templates' src='http://i40.tinypic.com/6egfiu.jpg'/> </div> <div class='slide'> <h2><a href='http://bdlab.blogspot.com/' title='remove the blogger navbar in a simple step'>Remove The Blogger Navbar In A Simple Step</a></h2> <p>This is a simple copy paste method to remove the Blogger Navbar which is used in all the latest Blogger Templates </p> <img alt='remove blogger navbar' src='http://i43.tinypic.com/2yvw4sx.jpg'/> </div> </div> <!-- /Mover --> </div> <!-- /Slider -->
And now click Save
Now its time for you to put your favourite posts in the Posts Slider. If there are some alignment problems with the Post Title or Image or the Stop Button in the slider then dont worry, continue doing what I say. Search <!-- Slider --> in the blog template. Below it you will see
<div class='slide'>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
<img alt='image name' src='Image URL'/>
</div>
If you are having problem with the placement of the Image, search .slide img { in the template. The code will be as shown below
Step 2:And find the code </head> Step 3: Now add the following code just before the </head> tag.
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-0-1.min.js' type='text/javascript'/> <script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery.flow.1.2.auto.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $("#myController").jFlow({ slides: "#slides", controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign auto: true, //auto change slide, default true width: "610px", height: "235px", duration: 100, prev: ".jFlowPrev", // must be class, use . sign next: ".jFlowNext" // must be class, use . sign }); }); </script>
And now click Save Template
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<div class="slide-wrapper"> <div class="slide-thumbnail"> <img alt="Twitter Submit button for blogger blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-IXkaIu9I8SliMmZ9J-8RyosOkhqVHtGShJFxCTDJ2iV7xc8VaO_878mZbVdNvi0vGQZHTdjIv_bxFvCuNrKCt01eLGNlqKgJrIY874VKHn8qDIpdTCLyfvuh0POD2tCK2XAQm1MflVA/s400/twitter-submit-button-for-blogger.png" /> </div> <div class="slide-details"> <h7>Add Tweet Button with Tweets Counts in Blogger Posts</h7> <div class="description"> TEXT-OF-THE-SLIDE-2. <a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div> </div> <div class="clear"></div> </div>
<div class="slide-wrapper"> <div class="slide-thumbnail"> <img alt="Bitdefender 2010 Products" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU2Dl7HotZaU-9bSWtlyf0F4cjdX4kfz09YzQ7SrER-xHrF15K8c6XoMlAUIAeWkyVv_TPESArSzzI4pmZBMTQIONdqj3qIj_9ZjxYRpUionhF39y9nama1kwRLda9xcF9ulC7pD2nSNut/s400/BitDefender-2010-packaging.png" /> </div> <div class="slide-details"> <h7>Download BitDefender 2010 All products with one-click direct download links</h7> <div class="description"> TEXT-OF-THE-SLIDE-3. <a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div> </div> <div class="clear"></div> </div>
<div class="slide-wrapper"> <div class="slide-thumbnail"> <img alt="Personas for Firefox" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqsfd_-4KGY6u3154jJp9cKHz0Yb1fprzSHTRFOOJC7UokLyg3hc0-2NvLXjSAgnZHtgpCc4lioKdP1Cu-9baMomkD2QC-qbaHlWpvE-1kdmcIyPQF8bjPaqUy4Tnz42XXXQdVhq75FTqk/s400/firefox-personas-logo.png" /> </div> <div class="slide-details"> <h7>Personas for Firefox - Light weight Skins for Firefox</h7> <div class="description"> TEXT-OF-THE-SLIDE-4. <a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div> </div> <div class="clear"></div> </div>
<div class="slide-wrapper"> <div class="slide-thumbnail"> <img alt="Windows 7 Transformation Pack" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLxEvRT6CUw09_2rtN89RXvHW_ZRzJRc2ecmZd_JqXSuINxnu2tXt9-ceB0k3ArPXwPy-7Eop87cjH4Kul5pdzwWZ1pwrMcV4EEUTAnD6xGhd0LcaFx7NPL7MRGuhieWLzFxHaNXNuJ1cp/s400/windows7-logo.jpg" /> </div> <div class="slide-details"> <h7>Download Windows 7 Transformation Pack for XP and Vista</h7> <div class="description"> TEXT-OF-THE-SLIDE-5. <a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div> </div> <div class="clear"></div> </div>
<div class="slide-wrapper"> <div class="slide-thumbnail"> <img alt="Should I upgrade to Windows 7?" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2hlFwfW6sYcyLYe_qBADWIy0BH1Oun1XvrxaXX0Hv9kNs5WQW_B-kvqYjyCPO3TC4s_jFZReqlgYm4EtKlMxltbmWvpHxJr_aA6QceEzbLrqVo2Ti6B3CJtGrYW50qkGTB6OwlWrqxddh/s320/Will-my-system-support-Windows7-windows7-compatible-logo.png" /> </div> <div class="slide-details"> <h7>Can my Computer run Windows 7? Ask Windows 7 Upgrade Advisor</h7> <div class="description"> TEXT-OF-THE-SLIDE-6. <a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</div> </div> <div class="clear"></div> </div>
<div class="slide-wrapper"> <div class="slide-thumbnail"> <img alt="What is being copied from my blog?" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkhEZe4S-xzR2LRth2q0dqt4LzH9QvqnxACbIAbRAjj1w8OWIo6iSK9eShykNzddwo29p7kOvMctw9M6U4plBuvCY5nuyBA5ljyZA_lREyqutBe75fGYZhi8XKVxI2N0bFCN1BTXQNc2c/s400/tynt-whats-being-copied-from-your-site.png" /> </div> <div class="slide-details"> <h7>Do You Know Where Your Blog's Content Is Going?</h7> <div class="description"> TEXT-OF-THE-SLIDE-7. <a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a> </div> </div> <div class="clear"></div> </div>
Just replace “IMAGE-TITLE“, “TITLE-OF-THE-SLIDE“, “TEXT-OF-THE-SLIDE” with your image, title and text respectively. You can increase the number of slides according to your need and available space. - If you increase the number of slides, then don’t forget to increase “jFlowControl” numbering.
<div class="jflow-content-slider">
<div id="slides">
lt;!-- Slide #1 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
TITLE-OF-THE-SLIDE
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 1 Ends -->
<!-- Slide #2 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
TITLE-OF-THE-SLIDE
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 2 Ends -->
<!-- Slide #3 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
TITLE-OF-THE-SLIDE
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 3 Ends -->
.
.
.
.
<!-- You can add as many slides as you want above this line -->
</div>
<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<!-- Increase these numbers as with the increase in your number of slides above -->
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
And now click Save Template
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- 1st Template -->
<div class='panel'>
<a href='http://bdlab.blogspot.com/' target='blank' title='made in spain'> <img alt='made in spain' height='135' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' width='185'/> </a>
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
SlideShow Featured Content Using JQuery <!-- Slideshow HTML --> <div id='contentslide'><div id='slideshow'> <div id='slidescontainer'> <div class='slide'> <h2>Featured Content Slider Using JQuery!</h2> <p><a href='http://bdlab.blogspot.com/'><img alt='external links - jquery' height='115' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' width='215'/></a> TEXT-OF-THE-SLIDE-1. <a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</p></div> <div class='slide'> <h2>Thumbnail With Caption Using Simple JQuery</h2> <p><a href='http://bdlab.blogspot.com/'><img alt='external links - jquery' height='115' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' width='215'/></a> TEXT-OF-THE-SLIDE-1. <a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a>
</p></div> <div class='slide'> <h2>Multi Level Drop-Down Menu Dengan CSS dan JQuery!</h2> <p><a href='http://bdlab.blogspot.com/'><img alt='external links - jquery' height='115' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' width='215'/></a> TEXT-OF-THE-SLIDE-1. <a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a> </p></div> <div class='slide'> <h2>Super Sexy Bookmarks Widget for Blogger !</h2> <p><a href='http://bdlab.blogspot.com/'><img alt='thumbnail image that says sleek button using photoshop that links to a photoshop tutoril.' height='115' src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif' width='215'/></a> TEXT-OF-THE-SLIDE-1. <a href="http://bdlab.blogspot.com/"><br /><b> Read More »</b></a> </p></div> </div> </div></div> <!-- Slideshow HTML -->
And now click Save
Note: Please edit the title of the content buddy, description and link content.
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<div id="featured" > <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://i49.tinypic.com/qpncrq.jpg" alt="" /><span>Kerinduan Pada Baitullah</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://i49.tinypic.com/sqh9cl.jpg" alt="" /><span>6 Kerusakan Valentine day's </span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://i45.tinypic.com/sy6p3k.jpg" alt="" /><span>Keajaiban Do'a</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://i50.tinypic.com/14jn30n.jpg" alt="" /><span>Wanita yang Lisannya Al-Qur'an</span></a></li> </ul> <!-- First Content --> <div id="fragment-1" class="ui-tabs-panel" style=""> <img src="http://i45.tinypic.com/33ue3yo.jpg" alt="" /> <div class="info" > <h2><a href="#" >Kerinduan Pada Baitullah</a></h2> <p>Lorem ipsum dolor sit amet, to cancel reply. Used Cars. ....<a href="#" >read more</a></p> </div> </div> <!-- Second Content --> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://i48.tinypic.com/mts5sg.jpg" alt="" /> <div class="info" > <h2><a href="#" >6 Kerusakan Valentine days </a></h2> <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis...<a href="#" >read more</a></p> </div> </div> <!-- Third Content --> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://i50.tinypic.com/av23bm.jpg" alt="" /> <div class="info" > <h2><a href="#" >Keajaiban Do'a</a></h2> <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p> </div> </div> <!-- Fourth Content --> <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://i47.tinypic.com/212h1qt.jpg" alt="" /> <div class="info" > <h2><a href="#" >Wanita yang lisannya al-qur'an</a></h2> <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus ....<a href="#" >read more</a></p> </div> </div> </div>
And now click Save
Note: Please edit the above code by replacing the title, description and link content
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<div id="slider-wrap"> <script style="text/javascript" src="http://safir85.ucoz.com/24work-blogspot/featured-post-s/galleryposts-FeaturedContentSlider.js"></script> <script style="text/javascript"> var numposts_gal = 6; //recommended var numchars_gal = 150; var random_posts = false; // random posts </script> <script src="http://24works.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div>
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<div id='wrapper-featured'> <div id='wrapper-myslides'> <div id='myslides'> <div class='panel'> <div class='image-frame'> <a href='#' rel='bookmark' title='POST TITLE'> <img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2745/4053275401_98d09abea1.jpg' width='205'/></a> </div> <div class='featured-entry'> <h3 class='featured-title'> <a href='#' rel='bookmark' title='POST TITLE'>Cinta Sejati</a></h3> <p>Makna ‘Cinta Sejati’ terus dicari dan digali. Manusia dari zaman ke zaman seakan tidak pernah bosan membicarakannya. Sebenarnya? apa itu ‘Cinta Sejati’ dan bagaimana pandangan Islam terhadapnya?...</p> </div><!--end featured-entry--> </div><!--end panel--> <div class='panel'> <div class='image-frame'> <a href='#' rel='bookmark' title='POST TITLE'> <img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2676/4053275587_d21ffaab15.jpg' width='205'/></a> </div> <div class='featured-entry'> <h3 class='featured-title'> <a href='#' rel='bookmark' title='POST TITLE'>Cinta Sepanjang Masa</a></h3> <p>Ia adalah wanita yang terus hidup dalam hati suaminya sampaipun ia telah meninggal dunia. Tahun-tahun yang terus berganti tidak dapat mengikis kecintaan sang suami padanya. Panjangnya masa tidak dapat menghapus kenangan bersamanya di hati sang suami</p> </div><!--end featured-entry--> </div><!--end panel--> <div class='panel'> <div class='image-frame'> <a href='#' rel='bookmark' title='POST TITLE'> <img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2477/4054018014_c5e93695f4.jpg' width='205'/></a> </div> <div class='featured-entry'> <h3 class='featured-title'> <a href='#' rel='bookmark' title='POST TITLE'>Cinta Sederhana</a></h3> <p>Cinta sejati...Adalah satu janji... Yang dibuat oleh hati...Tak dapat ditulis...Tak dapat dibaca...Namun takkan terpisah oleh jarak...Takkan berubah oleh waktu...Sedetik di mata... Selamanya di jiwa...Abadi tuk selamanya...Do'a di malam hari adalah penawar kerinduannya...Dan Allah adalah tujuannya...</p> </div><!--end featured-entry--> </div><!--end panel--> </div><!--end myslides--> </div><!--end wrapper-myslides--> <div id='nav-slides'> <a href='#' id='prev'></a> <a href='#' id='next'></a> </div> </div><!-- wrapper featured-->
And now click Save
Note: Please use the text in red with the post title, a brief description of the post and replace the url of the image or thumbnails slider menu above Done, do not forget to save / save templates and see the results.
$(document).ready(function(){ $(".click").click(function(){ $("#panel").slideToggle("medium"); $(this).toggleClass("active"); return false; }); }); //]]> </script> <!-- End Featured Gallery script -->
And now click Save Template
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<!-- begin featured --> <div id="featured">
<div class="post"> <div class="featured-text"><h1><a href="#" class="featured-title">Twitter Traffic </a></h1></div> <div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizVhBXhHRQjAWsgs1EXZQBgs66bQhuGnfwkLSVUv4COPNSWXNkajO4atEQypDW20FCO1HmsPF5WN_9dPKD7GRfbrWb8mKlf1QQSCRhQBUGprPyMF0Ob9o7jWS96jBpWw5yDi0x6w23hLxv/s400/twitter_lg2.jpg" /></div> <p>If you aren’t using twitter as a way of generating free traffic to your website, you’re missing out on one of the easiest marketing strategies ever to hit the Internet. With so many social communities online, it is easy to see why Internet Marketers with limited time have been drawn to the simplistic interface and speediness...</p> <div class="featured-meta"> <span class="featured-date">11th October 2009</span> <span class="featured-comment"><a href="/#comments">1 comment</a></span> <a href="#" class="featured-read">Read full</a> </div> </div>
<div class="post"> <div class="featured-text"><h1><a href="#" class="featured-title">Email Marketing</a></h1></div> <div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN0_FXQlCIpZTF5kcpbeCHfJeFIDkXy_H3hzhzqVDIDFw1EK_6SVbJJ3HPK2PTSnsnzD9AVmIG0hY6C_s44sQ-4Qpnn8gtBQ8IEn0b6_iOhZxtzYc7G5sLqink3G0QxHWDP12F0vEqsHt4/s400/ebook_350.png" /></div> <p>Online marketing may have developed a sudden surge these past few years, but many in the know how have felt its rise even from way then. As more internet based businesses are put up, the need to develop new marketing skills and knowledge based on this new medium have arisen. More and more marketing strategies...</p> <div class="featured-meta"> <span class="featured-date">1st October 2009</span> <span class="featured-comment"><a href="/#comments">1 comment</a></span> <a href="#" class="featured-read">Read full</a> </div> </div>
<div class="post"> <div class="featured-text"><h1><a href="#" class="featured-title">Get paid to blog at today.com</a></h1></div> <div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQp76hPg_Zl-iVlTmteYPpyv-SGuFv7PzLX-Y9mpJMR-8HtOOXe4wlKqEvcs2FwHmwQHe7YylxWxYtqpJEZIwiDHKfcuJn5YLwy2Mv-iwNn7MHbfxVA4OFnbh3_K18f7jpNAdJfQ5i3oy5/s400/070125_the_traffic_bully.gif" /></div> <p>Today.com is a free blogging platform that works like Blogger and Wordpress, except that you will be paid for blogging at Today.com. Payment will be made on the 10th of each month via Paypal or check with $50 minimum payment. How to Earn Money with Today.com 1. $2.00 per 1000 unique visitors for the first 30 days. 2....</p> <div class="featured-meta"> <span class="featured-date">25th March 2009</span> <span class="featured-comment"><a href="/#comments">4 comments</a></span> <a href="#" class="featured-read">Read full</a> </div> </div>
<div class="post"> <div class="featured-text"><h1><a href="#" class="featured-title">Free download CPA marketing guide</a></h1></div> <div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh635cvOIAGWpWI771VG8oqRiFmmFIUON5mAQo_nwnXUCtd48fWYNpyzI_cV8jfV5c5Y1ddK0JjZgUuMGOdLRhbHvrKs9c88DV56hx4c3uskZEP03kyDKQMC1QSBtLOFS_0r-l7ltoFQlT/s400/downloadreport.jpg" /></div> <p>Gauher Chaudhry, the man behind Pay Per Click Formula, has just released an 89 page insider’s guide to CPA marketing profts for FREE! That’s right, FREE as in cost you zero cents to get the most comprehensive guides on CPA marketing and learn the way to earn as much as $100,000 per day with CPA...</p> <div class="featured-meta"> <span class="featured-date">18th March 2009</span> <span class="featured-comment"><a href="/#comments">10 comments</a></span> <a href="#" class="featured-read">Read full</a> </div> </div>
<div class="post"> <div class="featured-text"><h1><a href="#" class="featured-title">Delicious ice cream post</a></h1></div> <div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiajIQvuWPYYMqSmdtkckvvGDfU2PgwVY646UxmJXUs9UC0T61xlUFGS8GgnP_uVgsNxT8Lvak18kw7cFh-t9TzciiAEVxiZxXnZvz9YG6xu4huHKMP_6J7Fv-iwGffA9gzbX28kxxvZtNN/s400/ice_cream.jpg" /></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec lorem. Duis erat. Mauris faucibus, nibh sed scelerisque commodo, libero lacus posuere diam, at ornare felis quam vitae mauris. Nam in diam. Cras nec metus. Nam suscipit elementum eros. Mauris ut nibh. Maecenas id velit. Nulla pellentesque porttitor dui. Lorem ipsum dolor sit amet, consectetuer adipiscing...</p> <div class="featured-meta"> <span class="featured-date">3rd December 2008</span> <span class="featured-comment"><a href="/#comments" title="Comment on Delicious ice cream post">1 comment</a></span> <a href="#" class="featured-read">Read full</a> </div> </div>
</div> <!-- end featured -->
<!-- more -->
And now click Save
Note: Please edit the HTML code above adjusted by posting on the blog. # address or url link posts, post title written in red, green writing a short description of the posts are written in blue url image / thumbnail post
stepcarousel.setup({ galleryid: 'board_carusel', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'board_item', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:5000}, panelbehavior: {speed:500, wraparound:false, persist:false}, defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]}, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file'] })
</script>
And now click Save Template
Adding HTML Code
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<div id='board'> <div id='board_left'> <div id='board_items'> <div id='board_body'> <h2>Featured Posts</h2> <div id='board_carusel'> <div class='belt'> <div class='board_item'> <!-- board_item --> <p><img alt='shafiyyah binti abdul muththalib' src='http://i41.tinypic.com/63ydtv.jpg'/><strong><a href='#'>Shafiyyah Binti Abdul Muththalib</a></strong>Shafiyyah fasih dalam lisannya dan beliau juga ahli bahasa. Tidak hanya itu saja Shafiyyah sosok ibu yang tangguh, beliau merawat dan membesarkan putranya sendiri semenjak suaminya wafat.....</p> <p class='more'><a href='#'>Readmore</a></p> <!-- /board_item --> </div><div class='board_item'> <!-- board_item --> <p><img alt='asiyah, wanita yang ditampakkan surga untuknya' src='http://i41.tinypic.com/24q1e68.jpg'/><strong><a href='#'>Asiyah, Wanita yang Ditampakkan Surga Untuknya</a></strong>Iman yang berangkat dari hati yang tulus, apapun yang menimpanya tidak sebanding dengan harapan atas apa yang dijanjikan di sisi Allah Tabaroka wa Ta’ala. Maka Allah pun tidak menyia-nyiakan keteguhan iman wanita ini. Ketika Fir’aun dan algojonya meninggalkan Asiyah, para malaikat pun datang menaunginya....</p> <p class='more'><a href='#'>Readmore</a></p> <!-- /board_item --> </div><div class='board_item'> <!-- board_item --> <p><img alt='fathimah binti al-yaman' src='http://i43.tinypic.com/34xjbx3.jpg'/><strong><a href='#'>Fathimah binti Al-Yaman</a></strong>Al-Hasan dan Al-Husain dinamakan anak Fathimah-Fathimah, karena ibu keduanya ialah Fathimah Az-Zahra', nenek keduanya adalah Fathimah binti Asad, dan nenek Nabi Shallallahu Alaihi wa Sallam dari jalur ayah beliau ialah Fathimah binti Abdullah bin Amr bin Imran bin Makhzum....</p> <p class='more'><a href='#'>Readmore</a></p> <!-- /board_item --> </div><div class='board_item'> <!-- board_item --> <p><img alt='ummu fadhl' src='http://i40.tinypic.com/1qod9d.jpg'/><strong><a href='#'>Ummu Fadhl</a></strong> Fadhl Rodhiallahu 'anha masuk Islam sebelum hijrah, beliau adalah wanita pertama yang masuk Islam setelah Khadijah (Ummul Mukminin Rodhiallahu 'anha) sebagaimana yang dituturkan oleh putra beliau Abdullah bin Abbas Rodhiallahu 'anhu, "Aku dan Ibuku adalah termasuk orang-orang yang tertindas dari wanita dan anak-anak....</p> <p class='more'><a href='#'>Readmore</a></p> <!-- /board_item --> </div><div class='board_item'> <!-- board_item --> <p><img alt='ummu haram binti malhan' src='http://i39.tinypic.com/313j7kw.jpg'/><strong><a href='#'>Ummu Haram Binti Malhan</a></strong>Ummu Haram berangan-angan untuk dapat menyertai peperangan bersama mujahidin yang menaiki kapal untuk menyebarkan dakwah dan membebaskan manusia dari peribadatan kepada sesama hamba menuju peribadatan kepada Allah saja. Akhirnya Allah mengabulkan angan-angannya dan mewujudkan cita-citanya....</p> <p class='more'><a href='#'>Readmore</a></p> <!-- /board_item --> </div> </div> </div> </div> <ul id='board_carusel_nav'> <li id='board_carusel_nav_1'><a class='selected' href='javascript:stepcarousel.stepto('board_carusel', 1)'>1</a></li> <li id='board_carusel_nav_2'><a href='javascript:stepcarousel.stepto('board_carusel', 2)'>2</a></li> <li id='board_carusel_nav_3'><a href='javascript:stepcarousel.stepto('board_carusel', 3)'>3</a></li> <li id='board_carusel_nav_4'><a href='javascript:stepcarousel.stepto('board_carusel', 4)'>4</a></li> <li id='board_carusel_nav_5'><a href='javascript:stepcarousel.stepto('board_carusel', 5)'>5</a></li> </ul>
Note: Please edit the HTML code above adjusted by posting on the blog. # address or url link posts, post title written in red, green writing a short description of the posts are written in blue url image / thumbnail post
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<div class='sliderwrapper' id='slider1'> <div class='contentdiv'> <div style='color: black; text-align: justify;'> <div class='separator' style='clear: both; text-align: center;'> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWbE1SM_jPrJSS6rDy6vEmQmXRXrxuOmrdlNB8TjSDSDZs-kkzBxrlA4XT9SlJ32RbTZ9BrKSjX2918Z-Jy3eM9UDqg-Vy6jCFbCZYEf5ieY4CygINmUlZR2Vw1KPbbJBL9oxZOcXMccQ/s200/canon-powershot-g9-front.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 0.5em; margin-right: 1em; margin-top: 1em;"><img height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWbE1SM_jPrJSS6rDy6vEmQmXRXrxuOmrdlNB8TjSDSDZs-kkzBxrlA4XT9SlJ32RbTZ9BrKSjX2918Z-Jy3eM9UDqg-Vy6jCFbCZYEf5ieY4CygINmUlZR2Vw1KPbbJBL9oxZOcXMccQ/s200/canon-powershot-g9-front.jpg" style="border: 0px solid #ddd;" width="145" /></a></div> <a href='http://24work.blogspot.com/'><h1>Review On Cannon Power G9</h1></a>This Digital Camera comes with 12.1 Mp lens and great performance with tonnes of features. One of my friends purchased this camera and got it delivered few weeks before, after having a thorough analysis read in many websites about digital camera.First of all, lets talk about the package contents which includes...</div> </div> <div class='contentdiv'> <div style='color: black; text-align: justify;'> <div class='separator' style='clear: both; text-align: justify;'> <a href='http://24work.blogspot.com/'><h1>Review On Blackberry Storm</h1></a> The new Vodafone’s BlackBerry Storm has stormed the market and has attracted the whole world. BlackBerry’s parent company says that this phone is something that will really compete with an iPhone. So, here goes an elaborate review about the phone. The Storm has a clickable touch screen, which is really spectacular. On the Storm, the screen moves under your finger’s pressure, so that when you touch the screen it highlights an option and only selects... </div> </div> </div> <div class='contentdiv'> Content 3 Here. </div> <div class='contentdiv'> Content 4 Here. </div> <div class='contentdiv'> Content 5 Here. </div> </div> <div class='pagination' id='paginate-slider1'> </div> <script type='text/javascript'> featuredcontentslider.init({ id: "slider1", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. enablefade: [true, 0.2], //[true/false, fadedegree] autorotate: [true, 3000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script>
And now click Save
Note: Please edit the HTML code above adjusted by posting on the blog. # address or url link posts, post title written in red, green writing a short description of the posts are written in blue url image / thumbnail post
So, let's see how to install this cool widget in your blog..
1. Sign into Blogger dashboard
old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..
<div class="featuredposts clearfix"> <div class="fp-slides"> <div class="fp-post"> <div class="fp-thumbnail"> <a href="http://24work.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_g4M1Tpd-NdnOGOcr6RoZO-2XQ7smifPRGIjpo8vOO2kaLmOWraBFEl3hOhRXlPz5SfUqafwN7spe5bYRbGmieLXDsZWGPAyWB_jyZQdxsDBwYbp22_jJ2hWXskoA2u1Wg-cFf-7GQR8/s1600/Image+3.gif" /></a></div> <h3 class="fp-title"> <a href="http://24work.blogspot.com/">Welcome To MBT, The Blogger Widget Factory.</a></h3> WRITE POST DESCRIPTION HERE... </div> <div class="fp-post"> <div class="fp-thumbnail"> <a href="http://24work.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf_yCjpa7zIVuXk0WT1NT5TOcKVUmpLr7PLPlwqQkw6Dk_e5lKe0qWIPFFTJe2RjTFXUqDbi0-pTOeBwnbYkr8rbcfsThU82NyC6vbxFHTHccubsDuXtR9kTZQRps0PNkF6bA4m6DIpk4/s1600/widgets-24work-0000000.gif" /></a></div> <h3 class="fp-title"> <a href="http://24work.blogspot.com/">Download Icons, Buttons, Banners and More...</a></h3> WRITE POST DESCRIPTION HERE... </div> <div class="fp-post"> <div class="fp-thumbnail"> <a href="http://24work.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_g4M1Tpd-NdnOGOcr6RoZO-2XQ7smifPRGIjpo8vOO2kaLmOWraBFEl3hOhRXlPz5SfUqafwN7spe5bYRbGmieLXDsZWGPAyWB_jyZQdxsDBwYbp22_jJ2hWXskoA2u1Wg-cFf-7GQR8/s1600/Image+3.gif" /></a></div> <h3 class="fp-title"> <a href="http://24work.blogspot.com/">Learn Unique Pro Tutorials On hundreds of Quality Widgets...</a></h3> WRITE POST DESCRIPTION HERE... </div> <div class="fp-post"> <div class="fp-thumbnail"> <a href="http://24work.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_g4M1Tpd-NdnOGOcr6RoZO-2XQ7smifPRGIjpo8vOO2kaLmOWraBFEl3hOhRXlPz5SfUqafwN7spe5bYRbGmieLXDsZWGPAyWB_jyZQdxsDBwYbp22_jJ2hWXskoA2u1Wg-cFf-7GQR8/s1600/Image+3.gif" /></a></div> <h3 class="fp-title"> <a href="http://24work.blogspot.com/">Download Limited But Quality Magazine Style Templates...</a></h3> WRITE POST DESCRIPTION HERE... </div> <div class="fp-post"> <div class="fp-thumbnail"> <a href="http://24work.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_g4M1Tpd-NdnOGOcr6RoZO-2XQ7smifPRGIjpo8vOO2kaLmOWraBFEl3hOhRXlPz5SfUqafwN7spe5bYRbGmieLXDsZWGPAyWB_jyZQdxsDBwYbp22_jJ2hWXskoA2u1Wg-cFf-7GQR8/s1600/Image+3.gif" /></a></div> <h3 class="fp-title"> <a href="http://24work.blogspot.com/">Use Our Web Design and SEO Tools To Explore The Blogging Fun!...</a></h3> WRITE POST DESCRIPTION HERE... </div> </div> <div class="fp-nav clearfix"> <span class="fp-pager"></span> <a class="fp-next" href="http://draft.blogger.com/post-create.g?blogID=6595006268549181744#fp-next"></a> <a class="fp-prev" href="http://draft.blogger.com/post-create.g?blogID=6595006268549181744#fp-prev"></a>
</div> </div>
</b:if></b:if>
And now click Save
Note: Please edit the HTML code above adjusted by posting on the blog. # address or url link posts, post title written in red, green writing a short description of the posts are written in blue url image / thumbnail post
