For Bloggers: Blog gadgets

Showing posts with label Blog gadgets. Show all posts

Automatic Recent Posts Slider With jQuery For Blogger

Recent posts slider is a best way to show of you blog's recent posts as a slide show.You may see the slider such slider in many wordpress blogs but when coming to blogger it is certainly not much seen.This widget is shared by Abu-Farhan and using my own tricks further I customized this plugin to works perfect with your blog.If you are thinking that customization's will be hard then you are wrong,this gadget is very easy to customize and very easy to add.You don't need to add images,text or any links like other sliders all is Automatic :D. Here I am giving a tutorial about adding recent post slider to blogger.

How to add this slider to Blogger?

Step 1. In your dashboard click 'Design' > 'Edit Html' > Tick the 'Expand Widget Templates' Box.

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

]]></b:skin>

Step 3. Now add the code below Directly Before / Above ]]></b:skin> (Make Sure Your Get All the Code)

/* START EasySlider By createtheblogger.blogspot.com */ #slide-container { height: 360px; position: relative; width: 480px; } #slider { height: 360px; left: 25px; overflow-x: hidden; overflow-y: hidden; position: relative; width: 480px; font-family: calibri; } .slide-desc { background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0; color: #FFFFFF; padding: 10px; position: absolute; right: 0px; text-align: left; top: 0; width: 200px; z-index: 99999; } .slide-desc h2 { display: block; } .crosscol .widget-content { position: relative; } #slider ul, #slider li, #slider2 ul, #slider2 li { margin: 0; padding: 0; list-style: none; } #slider2 { margin-top: 1em; } #slider li, #slider2 li { /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width: 480px; height: 360px; overflow: hidden; } #prevBtn, #nextBtn, #slider1next, #slider1prev { display: block; width: 30px; height: 77px; position: absolute; left: -30px; text-indent: -9999px; top: 71px; z-index: 1000; } #nextBtn, #slider1next { left: 520px !important; } #prevBtn, #nextBtn, #slider1next, #slider1prev { display: block; height: 77px; left: 0; position: absolute; top: 132px; width: 30px; z-index: 1000; } #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a { display: block; position: relative; width: 30px; height: 77px; background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0; } #nextBtn a, #slider1next a { background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0; } /* numeric controls */ ol#controls { margin: 1em 0; padding: 0; height: 28px; } ol#controls li { margin: 0 10px 0 0; padding: 0; float: left; list-style: none; height: 28px; line-height: 28px; } ol#controls li a { float: left; height: 28px; line-height: 28px; border: 1px solid #ccc; background: #DAF3F8; color: #555; padding: 0 10px; text-decoration: none; } ol#controls li.current a { background: #5DC9E1; color: #fff; } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus { outline: none; } /* END EasySlider By createtheblogger.blogspot.com */

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

</body>

Step 5. Now add the code below Directly after/below </body> (Make Sure Your Get All the Code)

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script> <script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); //]]> </script> 

Step 6. Save your template.

Adding the gadget

Step 1. In your Blogger dashboard click Design > Add A Gadget > Choose Html/Javascript.

Step 2. Copy and paste the code below into the Html/Javascript gadget :

<div id="slider"> <script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script> <script style="text/javascript"> var numposts_gal = 6; var numchars_gal = 150; var random_posts = false; // random posts </script> <script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div>

Note - Now replace yourblog.blogspot.com (in red) with your own blog url. (Only change blog URL don't change any other things.
To change number of post find this 6 (in blue)in above code.
If you want to change number of characters to show in description find this piece of code 150 (in green)

Step 3. Save the gadget and drag and drop into the desired position.

Drop Your Comments Below.

Add Twitter Counter And Share This Buttons To The Top Of Blog Posts

9:22 AM | Blog gadgets , Blog-Promotion , Blogger , Twitter

The 'Tweet This' or 'ReTweet' Twitter counter button is the latest 'Must Have' feature on all Blogs.Only a year ago it was the 'Digg This' button that was displayed but they have almost all been replaced.Adding the Twitter Tweet This button to your blog is easy and in this post we will look at how to add it to the top of your blogger posts and the bottom of your blogger posts.

The button can be set to float on the left or right of your posts this allows it to be 'wrapped in text' and fit in nicely as you currently see on this blog.I have the button at the top and bottom of the posts just to make it easy for the readers.

You will notice i also have the 'Share This' button Placed above the Twitter button and i will show you how to add both the Twitter and Share This buttons or just the Twitter button.

The Share This Button opens up a selection of bookmarking options when you place your cursor over it.

Here's the steps to add the buttons

Step 1. In your dashboard click 'Layout' > 'Edit Html'

Step 2. Find the following code in your blogs html : (Click Ctrl and F for a search bar to find the code):

<data:post.body/>

Step 3. Select Your Button

Pick The Button You Want Added from the options Below then copy the code.

Twitter Only Button Code :

<a href='http://www.createtheblogger.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAH6CBD-AUjFNI-vLZwNgx-R5oKymOEbxMpRKUDY_tGPIrjCQB_Y-NuBAIq44oWLLOhs0GqbQlrMI1QBj64vvS8fxl5Uj85_hYSYszmiDx3fKku6yvgZNrOTluqeT5VAq6YH7BjhwbZ6sV/s1600/best+blogger+tips.png'/></a><div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

Twitter and Share This Code :

<a href='http://www.createtheblogger.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAH6CBD-AUjFNI-vLZwNgx-R5oKymOEbxMpRKUDY_tGPIrjCQB_Y-NuBAIq44oWLLOhs0GqbQlrMI1QBj64vvS8fxl5Uj85_hYSYszmiDx3fKku6yvgZNrOTluqeT5VAq6YH7BjhwbZ6sV/s1600/best+blogger+tips.png'/></a><div style='float:left; margin-right:10px;'>
<script src='http://w.sharethis.com/button/sharethis.js#publisher=bea50586-2b9f-448d-947a-01385f28e305&type=website&post_services=facebook%2Ctwitter%2Cdigg%2Cdelicious%2Cstumbleupon%2Cemail%2Cgoogle_bmarks%2Cmyspace%2Creddit%2Ctechnorati%2Cybuzz%2Clinkedin%2Cwindows_live%2Csms%2Cbebo%2Cblogger%2Cyahoo_bmarks%2Cmixx%2Cfriendfeed%2Cpropeller%2Cwordpress%2Cnewsvine%2Cxanga%2Ctypepad' type='text/javascript'/>
<br/><br/>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

Step 4. Were To Place The Buttons

To place the button/buttons at the top of your posts paste the code Above :

<data:post.body/>

To place the button/buttons at the bottom of your posts paste the code Below:

<data:post.body/>

Note - You can also Paste the code above and below And have the button/buttons at the top and bottom of your blogger posts.

Step 5. Once you have the code added click save.

Move the Button/Buttons from the left to the right

The buttons above are set to be on the left of your posts but you can move them to the right.

In the code for your Button/Buttons change the first line of code like this :

From :

<div style='float:left; margin-right:10px;'>

To :

<div style='float:right; margin-left:10px;'>

Thats your Twitter and Share This buttons added !

You can use different buttons from Twitter like the compact Twitter button, you can find that button and other Twitter gadgets and widgets on the Twitter Goodies Page.

As always help is only a comment away, Have you added the buttons ?

Cool Christmas Snow Effect For Blogger

9:10 AM | Blog gadgets , Blogger

Over the last few years I have tried to help you get your blogs into the Christmas spirit with some neat Christmas themed gadgets.The most popular and simple of these have been the Snow Fall effects we have published.Some code added to your blog can transform the look of your site as over the Christmas period visitors are greeted with snow falling gently down the page.

This year is no different as I have a new Christmas snow effect but this time it's a snow storm with the direction of the snow fall dictated by your cursor movements.

Before you add this to your blog make sure to check out our Basic Snow Fall Effect, Color snow effect works well on blogs with white backgrounds.

Step 1. In your Blogger dashboard click Design > Add A Gadget > Choose Html/Javascript.

Step 2. Copy and paste the code below into the Html/Javascript gadget :

<script src="http://yourjavascript.com/25223141921/snowstorm-min.js"></script><a href="http://www.createtheblogger.blogspot.com/" target="_blank">For Bloggers</a>

Step 3. Save the gadget and drag and drop into the desired position.

That's it you now have a neat seasonal look on your blog.

Drop Your Comments Below.

Stay Connected Stylish Rss Feed And Social Gadget For Blogger

7:26 AM | Blog gadgets , Social-Media

In this post i will show you a much more simple way to display the Subscription options for your blog.The gadget has Three icons for your Rss Feed, Twitter Profile and Facebook Page proceeded by a handwriting Follow message with arrow.The icons are the standard design but with a caption, so along with the follow arrow this will be an eye catching addition to your blog.

Adding the gadget is easy and i will show you how to add it to your blogs sidebar or footer.I will also show you how to add it below all your posts, when someone reaches the end of a post if they like it they will often subscribe.The icons along with thousands more can be found on Social Icon Studio.

Screenshot :

Add Stylish Subscribe Section To Your Blog

Add Gadget To Blog Sidebar Or Footer

Step 1. In your Blogger dashboard click Design > Add A Gadget > Choose Html/Javascript.

Step 2. Copy and paste the code below into the Html/Javascript gadget :

Important - You must add your Rss, Twitter and Facebook URLs.

Replace the text in red with the relevant URL.

Optional - If you have a narrow sidebar and just want the icons without the Stay Connected message remove the code highlighted in yellow.

Step 3. Save the gadget and drag and drop into the desired position.

Add Below All Blog Posts

Step 1. In Your Blogger Dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box.

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

<data:post.body/>

Step 3. Copy and Paste the following code directly Below / Under <data:post.body/>

Important - You must add your Rss, Twitter and Facebook URLs.

Replace the text in red with the relevant URL.

Optional - If you have a narrow sidebar and just want the icons without the Stay Connected message remove the code highlighted in yellow.

Step 4. Save your template and your new subscribe options are below all your posts.

Check out more of our Best Blog Gadgets and Best Social Media Tips.

Drop You Comments Below.

How To Create Two Types Of Easy Drop Down Menus For Your Blog

1:52 AM | Blog gadgets , Blogger

Become a guest author on Create the Blogger.

Drop Down menus can be used in so many ways in your blog from creating a menu for your visitors to linking to past posts.Their popularity is mainly down to how tidy they are taking up little room yet displaying an infinite amount of links that would otherwise fill your blog.Here i will cover two types of html drop down menu
.Both these menus can be added in your posts/sidebar are anywhere you want them.

1.A drop and click menu.

2.A drop down menu with a go button.

Drop and click :

Here is how the menu looks:

And here is the code that makes the menu:

<select id="Select1" onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" class="text_noresize" name="select">
<option selected="selected">Change This To Title You Want</option>
<option value="http://createtheblogger.blogspot.com"> This is the title of your first link</option>
<option value="http://createtheblogger.blogspot.com"> This is the title of your second link</option>
<option value="http://createtheblogger.blogspot.com"> This is the title of your third link</option>
<option value="http://createtheblogger.blogspot.com"> This is the title of your forth link</option>
<option value="http://createtheblogger.blogspot.com"> This is the title of your fifth link</option>
</select>

Just copy the code above paste it were you want your menu and you just have to make a few quick changes.

1.The text in red is displayed on the front of your menu just change to suit.
2.Change each of the URLs in green and their corresponding titles in blue to suit.
3.You can of course add more links or remove links.

This is a drop down menu with a GO button:

<form title="jump">
<select name="menu">
<option value='URL ------- 1 here' > title 1</option>
<option value='URL ------- 2 here' > title 2</option>
<option value='URL ------- 3 here' > title 3</option>
<option value='URL ------- 4 here' > title 4</option>
<option value='URL ------- 5 here' > title 5</option>
<option value='URL ------- 6 here' > title 6</option>
</select>
<input type="button" onClick="
location=document.jump.menu.options
[document.jump.menu.selectedIndex].value;" value="GO">
</form>

This menu has two differences,
First it has a go button
Second the title of the first link is the title displayed on the front of the menu.

If you need more help or have an opinion or suggestion,
Please leave a comment Below.

You an change GO in red to select/advance etc....
Add your UR L's and Ti tiles as shown with the first menu.
You don't change name="menu"

Job Done !

Both very effective and both very simple.

Falling Flower Effect Add 3 Types Of Falling Flowers To Blogger Blogs

1:35 PM | Blog gadgets , Blogger

Become a guest author on Create the Blogger.

In this post we will see how to add a falling flower effect to your blog.The Snow Fall effect was very popular over Christmas and as promised in that post i will show you how to add the flower fall effect.I had been meaning to post this earlier and a comment by Aata paata reminded me, thanks Aata.You can see how to get the Snow Fall Effect Here.

As always i want to give you options, especially as everyone has different styles and colors in there templates.With that in mind i spent a few hours creating 3 types of falling flower scripts.Just like the the snow fall effect they are very easy to add to your blog and just require you to add a gadget and i will walk you trough it.

Once added your blog will have the effect of flowers gently falling down the page.The flowers are transparent enough to not obstruct the readers.(The transparent Images were hard to find i ended up taking them from a Myspace hack..Shhh)

Lets add the flower effect to your blog

Step 1. Click 'Layout' ► 'Add a gadget' for your blog.