But now Blogger have announced that it's possible - their post also shows us how the docked widget bar works.
And if your blog already has a dynamic template, they've added a few gadgets for you. For my test blog, this was Followers, Archive About me and Subscribe - I'm not sure if these are the only ones, or it was based on my layout before the blog went dynamic.
How to add a gadget to a blog with a dynamic template:
This is just like adding a gadget to a blog with a designer or layout template, ie:
Go to the Layout tab (Design > Page Elements, if you're using pre-Sept-2011-Blogger)
Click Add A Gadget.
Choose your gadget, and configure it if necessary. (NB Blogger appear to be converting all the existing gadget setup screens to the new-interface-look-and-feel, so don't be surprised if the buttons etc inside the gadget parameter windows look different)
Preview to check it's ok
Click Save Arrangement.
It's not perfect yet:
The layout editor window looks somewhat strange, in post-Sept-2011-Blogger anyway:
More importantly, Blogger's announcement says
Gadgets supported in Dynamic Views currently include: Blog Archive, Followers, Labels, Profile, Subscribe (a new gadget - automatically present if either Follow By Email or Subscription installed), and Link List.
So no HTML, no AdSense, no Blogroll (except you can make your own with the Link List), Statistics, Slideshows, Polls, etc ... yet. To make matters worse, there's nothing to tell you what gadgets you cannot add: you put them in, but they're just not there once you save and look at the blog.
But some of them may become available, if Blogger can figure out how to place with within the type of space they're using for gadgets on dynamic views, where we don't really have a sidebar. And until then, the following section from my original post still applies.
In the meantime:
The October announcement did show how you can customize the colors of your dynamic-template blog.
Southern Speakers has been publishing lots of how-to information about how you can format dynamic blog elements by adding CSS rules - his most recent post is about how to remove static page titles. He has also described a way to put gadgets that you can get the code for into a page - this description is specifically for the Followers gadget, but could be applied to other code too, provided you can get the code.
This is the body of my original post. It's not true any more, but I want to keep it here, in case I need to use some of this text agaon - or so you can see how much better things are now.
The Full Story:Google told us in late October 2011 that they're working on making this possible. They haven't said when they expect to have this available. If we're really lucky it will be "one day very soon" (and boy will I have a red face if they announce how to do it tomorrow!)
I suspect that it's not an easy thing to do, because dynamic template blogs are basically a totally different way of displaying your blog, using your RSS feed and (now) CSS rules, rather than reading all the design details from the blog itself. Providing this, along with the level of design control that people with Designer and Layout templates are used to, might be quite technically challenging.
I've written this article because I got sick of explaining "no not yet" in the help forum: I really want to give people there the full story, but finding the link to that October announcement every time was a pain. Now I can just link to this.
But hopefully I'll be able to totally re-write it, very soon :-) Giving negative answers isn't nearly as satisfying as explaining how to do things.
JQuery color picker plugin for selecting hex color code values. It can also be used to convert between HSL, HSV, RGB, Hex color code for the color you chose. It is also used for generating matching color schemes which makes it easy for you to select colors.
Sitemaps are text files containing a list of all web pages that exist on your website and are accessible to crawlers and users. These helps visitors and search engine bots to find pages on website. Sitemaps are a way to help Google indexing pages on your site which otherwise might not be discovered.
If your blog is hosted on blogspot.com (or if you are using a self-hosted version of Blogger with a custom domain) you will be surprised to find out that the default sitemap file, contains only the 26 most recent pages of your blog which in normal case should contain all URLs of a website.
Many webmaster pretend to teach others how to drive traffic to blogs or websites yet leaving out the most important factors like sitemaps. There are still other websites who keep on providing the old methods of generating a sitemap for blogger which are not any effective.
How to add a complete Sitemap for your Blogger Blog
2) Click on the “Add a site” button at the top of the screen.
3) Enter the URL address of your blog (for example http://my-site.blogspot.com/) and press Continue
4) Select the method you would like to use to verify ownership. You can either upload an HTML file with a name we specify (which is not possible with Google Blogger account), or you can add a META tag to your site's index file.
Choose Alternate Methods:
5) Under Alternative Methods Click Add a meta tag to your site’s home page.
6) Copy the Meta tag Code generated.
7) Open a new tab and login into your blogger account.
8) Go to Template > Edit HTML
...and search (CTRL + F) for the following tag:
<head>
9) Just below of it, paste the META code and then click on the Save Template button.
10) Switch to Google Webmaster Tools tab and press on the "Verify" button.
Now your site is added to sitemap account and the verification is done.
Em março chegará às nossas revendas o primeiro Hyundai flexível do planeta. Ele recebe o mesmo 2.0 16v estreado há pouco tempo pelo “irmão” Kia Sportage, portanto deve gerar os mesmos 169/178 cv (gasolina/álcool). É de se esperar que ele também receba o câmbio manual de seis marchas e a direção elétrica, sem alterar o resto das configurações. Prestes a ganhar produção nacional em Anápolis (GO), o ix35 não fugiu do ridículo excesso de pompa dos anúncios da marca: segundo eles, usa “a tecnologia flex mais avançada do mundo”.
To change your blog's date header color and font style, you can do it with a very simple CSS adjustment that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance. See the result in the image below:
How to do it
Step 1. Login into your Blogger Dashboard, select Template option > click on Edit HTML
Step 2. Select Expand Blogger Templateand search (CTRL + F) for the following code:
date.header
Or...
.date-header
Step 3. Add the following code snippet just below of it
When there are no comments made to your posts, there's a link that says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. If you want to make your blog more stylish by replacing these texts with some cute small icons along with the default Author Name, Post Date, Labels and Comments... then just follow the next steps:
Steps: Step 1. From your Blogger Dashboard, click on the Template option, then press the Edit HTML button:
Step 2. Select the "Expand widgets templates" box
Step 3. Search for the below code (press the CTRL + F keys and paste the code in the search box):
<div class='post-header-line-1'>
If you can't find the code above, look for this one:
<div class='post-header'>
Step 4. Paste the following code below/after the code above:
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzwgs3jYhRefQp0Rx-eodkIgNk_2X3OOnITZIlJXb8Sxk7tb8XvQP5sKJ4gdcs4DHxMYo449PaOIZpmvTz-n6XpjyX0dB2Z8UA8TghSU3xZ_se4E-yfYMhJM0g1NUB8Ps3fftzyFAMr2Cb/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAo1jeenCbj9EnGhnsANVdbnYA7UqgojRS75sI1fKbiVZ3vzxUrGMgr4IrcMBx08Gf3JOwkVGJ2kvw-d81bVhOeVJkpaMK7Lme2ygR7Geh0-P7G6E8CXCNTQz0uFtN1jUZgNXTtHTx_VN/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl1khFleXJVsc_6IpiITUTv4os8TC1OzgYN8yASB3b2xO8l4bN9T5hMbC22w8-vDvvDGjmGcZJnfkaka27_WvkX6ZOReT577Is0msCAj-NTzGpv7XuGyxsr07J8C3Es14YH0AGL8oQlmXX/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url + "?max-results=8"' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'>|</b:if> </b:loop> </b:if></font> <span class='post-comment-link' style='Float:right;'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIohVa9AajqgkM01hXVH6wG8GqafQ3p3V-19ptDyP-MoiHMvHrmUT36IFEWXH8agyGZnRD8nA5VuvItPplYTuJ8B_vz5Gei92fMaJsZQh4x0D1l32PVpkUpVi7wQwhLPipm-FgETyHN5tI/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a> </b:if> </b:if> </span>
How to customize:
If you want to change the icons, just replace the URL addresses above colored with:
Many bloggers might find labels below posts (or post titles) unnecessary, as long as they are already in the blog's sidebar. In this tutorial we will learn how to remove them manually. To hide labels from the blogger post footer (or below post title), you could simply uncheck the "Labels" option, however, sometimes this setting might not work properly in certain templates and then we'll have to remove it manually from our template.
How we going do this?
Hide labels from Blogger
Step 1. Click on the 'Template' option and then go to the 'Edit HTML' button.
To ensure that you won't lose or delete something, it is advisable to make a backup of your current template. To do this, click on the Backup/Restore button on the right top corner:
...and then click on the Download full template button:
Step 2. After you clicked on the Edit HTML button, select the 'Expand Widget Templates' option for expanding the CSS code.
Step 3. Now find the following code snippet (press CTRL+F and paste the code in the search box):
WHAT IS BLOGGER NAVBAR? Blogger has got a Navigation Bar that appears by default at the top of every Blogger-powered blog. This navigation bar can be very useful when you are blogging, but sometimes, it can get in the way. The Blogger navbar is usually hidden in most of the third party templates.
The advantages of it are the following:
- when you click on the B icon, it will take you to blogger.com - a quick link to your Dashboard and "Sign in /Sign out" dialog - you can easily search for other blogs - you can "Flag Blog" (if you consider content of a blog objectionable) - NextBlog - takes you to a random, recently-updated Blogger blog
The only disadvantage is visual. If you have customized design, Navbar just doesn't fit in.
So how we get rid of it? It is very simple. Just follow the next steps...
Removing The Blogger Navbar:
1. Login to your Blogger account, click on your blog name and navigate to Layout;
2. Look for the Navbar text and click on the Edit link as shown in the picture below:
3. When the pop-up window appears, scroll down and select Off, then click on Save button:
Primeiro a usar o 1.6 THP no Brasil, o 3008 agora recebeu as mesmas melhorias em alguns componentes internos do motor para ganhar 9 cv, totalizando os 165 cv a 6000 rpm que lhe igualam à versão Griffe THP do sedã 408 e ao cupê RCZ, que compartilham o propulsor no país. O torque é de 24,5 kgfm a partir das 1400 rpm, sempre com câmbio automático de seis marchas. O crossover vem da França e seus preços já seguem o novo IPI, ficando em R$ 91.900 para a versão de entrada Allure e R$ 99.900 para a de topo, Griffe.
Seeing the number ofrivalsin the business ofonlinestorage,Dropboxcontinueto innovatein its application, this timeDropboxlaunchedaphotouploaderfeatureforAndroidsmartphones.
Unfortunately,Dropboxoffers onlystorage space,so thatserviceuserscan not edit ormanipulatethe images you haveuploaded.
These featureswillallow usersto wirelesslyuploadhigh resolution images,directlyfromsmartphonesto thevirtualcloud.File has beenuploadeditcan then beaccessedfrom any computer ormobiledevice.
Although thefirst release ofthis applicationwill only beavailableforAndroidphones,theDropboxpromised torelease aversionfor IOS.Userswillget500MBof storagespaceafterthe firstuploadthem,anduserscanreceiveup to3 GBof additional storagespace.
There are (at least) three different ways of adding a gadget to your blog. This article explains what a gadget / widget is, and looks at the advantages and disadvantages of each method.
Gadgets and Blogs
A gadget is simply a small thing that does "something useful". In real-life, it may be a bottle-opener, screw-driver, pocket-knife, etc.
On your blog, a gadget may be called a widget or page-element. But it's the same idea: a small piece bit of code that does something useful. You could put a gadget into a post, but usually they're found in the sidebar, header or footer.
There are three main ways to install a gadget into your blog:
Easy to use - you can move items around with just drag and drop
Gives access to Blogger's pre-built tools
In gadgets built by Blogger, the screen where you enter the details (title, picture location, code, which labels to include, etc) is usually easy to understand: they don't use geeky words like "parameter" (even though this is really what they are asking for on the screens)
You have total control over where to put gadgets - you just drag-and-drop them in to place.
Disadvantages
You don't have total control over item formatting and placement
There is no easy way to back up your settings
If you use the same type of gadget many times, and don't give each one a title, it can be confusing to see in the layout which gadget you are working with.
There are some gadgets available in the add-a-gadget wizard that did not come from Blogger -and some of them don't work properly. (Google do not guarantee that all the gadets in the list are correct, or that they are free of viruses, malware, etc.)
You cannot see the code behind any of the gadgets, so you can never be 100% certin what they do.
Manually installing code into the template:
Adding a gadget into your template is just the same as adding any other code: you need to get the code, and you need to know exactly where to put it. As well as the usual advantages and disadvantages of editing your template, there are these ones:
Advantages
You have total control over item placement, alignment and formatting
Code you have installed is fully backed up when you back up your template
You can use code from anywhere, not just from Google
You need to get the code from somewhere: either you need to write it yourself, or from a 3rd party that you trust.
It's not nearly as easy - you need to edit your template
You need to position items using code, drag and drop will not work.
You can use code from anywhere, not just from Google - so you might be tempted to use code from dodgy 3rd party sources.
If you do make calls to 3rd parties, and they later disappear, then your gadgets will give an odd-looking messages instead of working the way they used to.
Suggestion: If you are going to install code from 3rd parties, make sure that you read it over first. If it calls pictures, consider making a copy of those pictures youeself, and changing the code to link to your copy instead of theirs. If it has calls to scripts that are hosted somewhere, consider doing the same - but be aware that the downside is that if the code needs to change for a future version of Blogger (or windows), you won't automatically get the new code.
Another option: If you have the code, then you can also add it to an individual post or page, by pasting it into the HTML table of the editor. If you link to this from the menu bar, then readers will have a way to get to it from every post, otherwise they will only see it when they see the page/post you put it in.
Use a 3rd party's "add to Blogger" option:
Many websites that let you generate code to do "something useful" also ask you where you want to put that code.
Choosing "Blogger" in the AddThis gadget window shows a big red "Install Blogger Widget" button
But if you tell them that the code is going into Blogger, they give you a button, or perhaps even open a new window or tab for you, call www.blogger.com, and go into the Add-a-gadget screen and put a gadget with their code into the screen: all you need to do is check that it's ok, move it to a different place if wanted, and press Save changes.
The big advantage of this approach is that it is easy: you don't have to copy-and-paste the code yourself.
Disadvantages: As well as all the regular disadvantages of adding a gadget using Blogger's add-a-gadget too, there are some specifc ones for this approach:
If the 3rd party is dishonest, they may ask you to enter your Blogger ID and password into their site - and you have no guarantees that they won't do nasty things with them.
If you have more than one Blog, you may accidentally put the gadget onto the wrong one
If your blog is complex, it may be hard to find where on the layout screen the new gadget has been put
You don't get an opportunity to look at the code to check if it does strange things.
Because you don't look at the code, you cannot make a backup copy of it (and because it's put into your gadgets, a template backup may not include it or the user-settings that you chose).
My Recommendation
There is no "one right way" to install gadgets: some of Blogger's built-in gadgets are very handy, and I make a lot of use of them. But in general:
Usually, I just tell the 3rd party sites that I'm putting their code onto "my website" and install the code that they give me in into a regular HTML/Javascript gadget. There is a slight risk that this could cause problems if the other company offers slightly different code for Blogger vs regular websites - butI have not yet found a case where this happens.
If you're adding code from a 3rd party, then it's a good idea to store a copy of that code in a documentation blog (or similar), so that you can easily re-cereate it it if the gadget is accidentally deleted.
This article is about how to change the date of a post in Blogger. It looks at where the date value is found, and what format is used to display and edit it.
Where is the post date (date/time) value kept?
Each Post (not but each Page) that you create in Blogger has a date and time associated with it.
You can see the date (but not the time) in the Posts (new interface) or Edit Posts (old interface) tab.
You can see the date and time in the Post Editor, by clicking on Post Options link (old interface) or the Published on link (right-hand sidebar in the new interface):
How to set the post date (date/time) value
To change the date (or date-time) value for a Post:
1 Open the Post in the Post Editor
2 Click the Post Options link, which is near the bottom left of the page above the Publish button (old interface) or the Published on link (in the right-hand sidebar in the new interface):
This opens up the window to show various options that apply to the post. The date-time is on the right.
Initially, the date-time is set to Automatic: the post will be given a date-time when the Publish Post button is clicked for the first time.
3 Tick the Scheduled option (old interface) or Set date and time (new interface), which lets you edit the date.
Understanding the Date format:
Blogger does not (currently) have an option that lets you set the format of the date that is shown in the Post Options window: the date-format under Settings / Formatting tab applies to inside posts only.
Therefore in the old (ie pre-Sept-2011) version of Blogger the date value you will see is in American date format. This has:
the month value first,
then the day value
then the year value
To change the date, you need to use the same order. For example, to set the date to 3 December 2009,
the 12 goes first
then the 3
then the 09 for 2009
In the new (ie post Sept-2011) version of Blogger, they've removed the need to compensate for American date formats.
Instead, we're shown a calendar to pick the date from, and it's displayed in with the year first, So, for example, 2009-12-03 is shown for 3 December 2009.
Unfortunately this makes choosing a date sometime in the past difficult. For example to set the date back to 1998 (which I've had to do recently for a historic blog about a choir), you need to do a lot of clicking. And to make matters worse, when I tried it a couple of weeks ago the selected date value wasn't actually applied. Hopefully this is something they'll fix soon.
Why set the date?
You may want to set the date if you are giving your blog a home page, or if you want to schedule a post to go live at some time in the future.
Is any other date information kept in Blogger?
You can work out the month and year when a post was first published by looking at its URL: this contains the original publication month and year. For example, the URL of this post is
The bolded bit says that it was originally published in December (ie the 12th month) of 2009. This URL is kept even if I change the values in "Post Date and Time" (which I'm just about to do, to show when the article was last updated).
I think it's likely that Blogger also stores the exact publication date and time somewhere too (at least, to help them resolve DMCA copyright complaints), but don't know any way to access this.
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/AVvXsEjHP99-ryMSZOrRj5o0N1gy4h4zT0gvi2Q5RYoNNgOXwGBYhH9ELrCRaCu7vA81k2inb10pq_tF47iN0ub1xlmhDOFW8fWuLbQJeRhNH7noTMPTob1gC5xkKYL1gnm6mg4p3INV2vCds0o/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/AVvXsEigm1A7RcXS7LFozUSZnECf6mpB1dVzLmwk89jV4s6A6_lImLbquF-44bJBtZCUmiMuReAr-e9WA2r4I5QfcBTQYNJaePYQcB7YC6ZnEAyPmuVEKtfvwLGMjkSoPYHhLnZ6OY0H9y9XM4A/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/AVvXsEinjrDJKY_k5MuMiR3GPdSL-DCE5xjn9wxDrZL8PdQnFdfCn0re5nJ6yVGZIWEntDOzXb_2ATik0zialqi7rw70Tv-F-cZQWwKJeqsLfnoNeMdkwfLwvQJtVV88j1i65fdyHaQTrggUxeU/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/AVvXsEgYoCoPoAvpytYobGdXOO0ShWk6gF-qdvzYvVglQsDsflzN4l87ar08gplHDc55sV9rxRlSoylXrYUl7tJuf4KZaps4d64elCUywN2ofW4R_4qtK4dLL0BlApT_AJzjc-1iq5tB86HHE_o/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/AVvXsEjTKDa6n_9UVgiNyIY9kuUHn4EMtVxQbKfH4b7g8qzNCXLrlBiX9T6rEfMHRJAtdnAQyz5D_k_20KBBH4LMeXTU7qJma3IOj96zd69yx2MdK4nhGG_ivCZxuhNrubp8qQFP5S3_ADK_VrFJ/) 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/AVvXsEghSb8e3IpsbuHshQhuRZnuADmu56abkO3l6zPAgXho6VIMzk-a-kJJxYhWQ3W6FomahTe5JX9HvIxEOASOIgIvWGJ7tmEpG1RKzSQLK0oMvIxEbN1BteWsqENCC0bzTDdKTblhA0C7z5Lj/) 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/AVvXsEg2HDnOI2stTV1j1L79N-LqkQ-PAJtgMkfExK1UMImVcdRH0USeT9t4WdXtp_X-u2GFVk1UTdEB0swF0pu1uE-HcXDP8qkEYWq9T2dJANrB7xvPxn4gn_KC2-cqzSqQeEVh18iFe6j_vlJh/) left no-repeat; width:50px; height:17px; } .glidecontenttoggler a.next { float:right; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh41Vtrzm84463O2Z-4I1PBNc-YSEvUNNGg-CPQCX9Qi755GY2hY_Lqqsqsbp_gGRqumstXpYRc5wObNYtnnweGt7KQtmwBBZTBSqMQ5tuChOACJqnhnL5DYj8GE1uk96vdjhcQfFG-shM/) 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/AVvXsEgO1TekujpUPSH1MCfYxTM2cDEhf87Z8_rWLzY3pDMYOevpcRnJ4JGH3jObKTXJrAdRqtPYhNEvxgPOlQPJyG_mLQYvMq6zsad3VPe3U4pN1pLUrTaG84uJqSbS6BTkkUJ5Nw5QN5_MJO1S/', -14, 60], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj9qhLZJxt7tOptpi-A_OyfjY42VWZV1tgWI77Q-5rXjZWKqYBPhhuobDz4L1P5QOwQs93R4Z7VAl-iBIBEsyuOTa7brxasOpuEpE96juXMxNLtFUBYB9d8KHglZwhWRjNMDjG-0loj4vW/', 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/AVvXsEiHvlKgUlzugzxJpG-Xnu2trysTwreQWyGRCXWTURhokZkoGKjZ-aeyZ0LU5KNTogT0Na7_MJoM4WJT_aEQKppM72Rua0e6c8CRmiRwF1L6XVEAA1lvDzJ90wZ01dIc7rohDCceplTqphRz/+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/AVvXsEgpqOAspZ8qg-oMw-ufRHG-dobyJTq78Yl7Y-ijYTtFD7XEJ6tqPyyH2gY661bYkWGOG9RThcdUZ6Jz3kfSwNvKsqsZptrltIf-8jGAaO-lwa9NpipolpUdZT65yPkDrqvAnZtv82i90DAv/) 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/AVvXsEinp7MjZgpkxoPqZcU_yVZJrwKQGNuVmXIHk5DUxRL1B2XlIWjXkxIzYs4xio5Quu2ZlPP8q0PlQr3QSRFOaEyau5d70TvC48jORLPWkJp74-aG2ekcZKmUjJLUxE7HqxXOIJKOEl3BEW5T/); 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/AVvXsEjDqnaabVp_EmLtSFwvUNFw3FBAGPmagPFWgcSYlxH42zyduw57rJOSWjI2r2-zCisYOO1mRNj8Gat2HukrPBPjYSniq2dqSaf6dDo37NzbItgfhyphenhyphenOyNWcZLHX_MEd8I12oIoYjlBKk3u6m/); } .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/AVvXsEi8bOJJCoPwhD4J0bxRjaeBQmEupHK1utEgCyhGgEmnkgfP0xEHvGieteARcOtihlGXdM4MbX4FHXkz7sjpkNu6YdgMw9RA_k5KwyrTUJ8EgJmZG1dWZ3ycASu11PSlZL7xNKLs1rEQ-9Lp/) bottom; width:36px; height:25px; } .glidecontenttoggler a.next { float:right; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPo_wudhExETRRuk5MFiWizSIemQwV8RXax4fmP6_einCvwdeNqLzNNQN8sEBPCdT_DAmei-yhXHnJyYDF27osDZRfGyUDQCFpifPVKxcrL_ta-X934ES-WshPTsiUgCtHu0FsG1fjgyNk/) 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/AVvXsEg3x7Fih4NzWJcjOXbR8ReiMSNVnW4eF1vghIksfo6R1i2cQE2T7f3zjrspuIgrNwl_kBY7jzu5opdYa4T3u5XS1kGrHvXpBr0aYFzWp-eZ3tPcRycvr4XQv3IUrBY5p4xFnCwHcZegztSb/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/AVvXsEibZ2rt_M7Hos_5IC10DbINI0-cAdVhLKckpZkgFX8pciH4CY3poDowlbysUBXonGW380XjRCgHserJ_K0fZcMUfl1pmaup-vUbm2eh4DaDKwiBIcqhhg17mOYfHuaCRdjTOSTCjXzbcguA/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/AVvXsEg3_NPhGulVsFEDpYSxqtlPDYvyjIO9vDQYMPZph2btJ-vEPVLZgFybdGxiEM8p6gNPrCpEVoOzHdidy65ulCA-Sq49E4uUkQYZOg5rc-GmX_BFfnQou5bQgEVXNWyTDM2vS_T6dUrAMfaN/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/AVvXsEj3DD_ZZH4e8ChjTpAD83Zz2CTf8UvRy1K3lYEE9VIdgpWFlxcrzLyosioE9DuV0tS2I4CxYk7mzx8H21LwODgK1Pd_jcNp2f68pM5faofo78s1i7nn2N2WH1Znn-QDJDrufOKvdEihzhis/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/AVvXsEgiHVPbI6GCoBbcs0eRICAdCqwypBIhFII05v6DXBlqb8gcr4j9Q850_gCqGRMtkNnffuVec_g7bA3-Bqiv9Sky9rYgY7ls5zwGMRaOMV3j4Qm3HTpcBV-KLAsEzUGGLaNPcthQC6ELzGig/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/AVvXsEgrbvLb32GDIUgSPN44xGmcaiaRlNdXS2z_mDBNI90q1RROqRPsQY3MbsBm6X5IHYnUdBdXw6DmaX623oj3GJ6HILJc_mGajNdanDVNk2ipydRoFe_085zZFlM7IOjEZn2S8VR4w2uvA9A/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/AVvXsEjZV9nwhm5cX3TuAzW6u7t3z7IzOPuP51fDDJfoB1l8IpudREK0TdbF_4XKWCMwo0g7AnxRKndWeIN1WHlpndFXJOwiLLkoseU-c_7JWkXdtyuUMa0TNXq_IWmetRotMmmlCPLHVFHnd1Ao/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/AVvXsEiMmAxyo9Yb-rgeVbxGPmhfmm1fDXf0rL-M1gxpkqGIBxROiVMPOynKT8spE7bzYJop-GRIXiE9dCProut7BncAOLGU4MRDorPSoy0ADXLlrRjPBybyX_yNRCWI7TRn0_CWW7Jvu1YS9EJ6/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/AVvXsEhdjn8cS3RILh304Vt5MOK1-Z-asyjO3l7cF705AIM0FOSuqKauUZHhKNvGHqYv_UCymg1CUZNFenroaP_Bm9NXzYV0pNN_lYcoTDh_xvOiwu8SHLb6u6wS0GW9_9rh-qcFVWYbGwBdUOr4/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/AVvXsEhQEx98jvIw-9-4vn9JIsUczcFPXWYe7X_mC6pKYt5EcG1-E_skKjIQWcZBDexoCCiBW4eZOzp2_RMJwqgUsYykbFWohmp543Rj58MhUTaFRKdK5Bs-cvIAvWQAQwhK8kRsBz5HQ7ye6nPY/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/AVvXsEh_A6h7qljdTfmWSRois6ay7EFaF5CG0BucXHyWpg2A1wW_BMGdXOwHEiQ7wGubi1E5kge4HktMI5JYzX7DqCsXL1PTLq97rmklTeQoyVPKrfcxNk02MyHx-9KDgNnOXN3K11t_u_Z_ffVh/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/AVvXsEjK4UaePAPYXJ4cH3V6zw7SRYRUO9zbOeTMp_5w94NGBRRAhsC6V2Zp1P916Tyj1RQU0aQhPt1dSXm68j2DTljzNIWtK-i0M-UlpGPj2xnYPa4_W-T5XSFAmbApG_ecX7Id0Cx_5_lg2yM/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/AVvXsEjK4UaePAPYXJ4cH3V6zw7SRYRUO9zbOeTMp_5w94NGBRRAhsC6V2Zp1P916Tyj1RQU0aQhPt1dSXm68j2DTljzNIWtK-i0M-UlpGPj2xnYPa4_W-T5XSFAmbApG_ecX7Id0Cx_5_lg2yM/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/AVvXsEhri-zGWZMMqA4Po11jkR72bIPPPjzz2QFjNA5iBd6f3M7PfR4jDuSTPzLHYYADg-SFHcxjOJlf2i2soFi2W7K6qk8loNhcCgFQDtVXUq1poEdLBu8L-arqBosQMia4Hd3abd8SkOBsBnk/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/AVvXsEiSUsTBJJjeARev5-XOVhN8GoROAGPo6x8K5p82YnW57SlpcuqvWnIXgFa5OtUXWp1etchXkqPCGItO_k6lQ55_JEOFcRizaslUEfGri12QCt-5jmmTQiLYEzhWcwi0RqYLMWF9HuEwFGA/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/AVvXsEhri-zGWZMMqA4Po11jkR72bIPPPjzz2QFjNA5iBd6f3M7PfR4jDuSTPzLHYYADg-SFHcxjOJlf2i2soFi2W7K6qk8loNhcCgFQDtVXUq1poEdLBu8L-arqBosQMia4Hd3abd8SkOBsBnk/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/AVvXsEhri-zGWZMMqA4Po11jkR72bIPPPjzz2QFjNA5iBd6f3M7PfR4jDuSTPzLHYYADg-SFHcxjOJlf2i2soFi2W7K6qk8loNhcCgFQDtVXUq1poEdLBu8L-arqBosQMia4Hd3abd8SkOBsBnk/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/AVvXsEhri-zGWZMMqA4Po11jkR72bIPPPjzz2QFjNA5iBd6f3M7PfR4jDuSTPzLHYYADg-SFHcxjOJlf2i2soFi2W7K6qk8loNhcCgFQDtVXUq1poEdLBu8L-arqBosQMia4Hd3abd8SkOBsBnk/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
The October announcement did show how you can customize the colors of your dynamic-template blog.
