blogging rocks the world

seo tips, blogging tricks, widgets and gadgets for you blog

Friday, 8 June 2012

top-3-beatifull-backgrouds-for-stylish-blogs

09:06 By , , No comments




Read more →

Thursday, 7 June 2012

social-sharing-widget-for-blogger

02:34 By


social-share-widgetThe Social networking sites growing traffic is indirectly to webmasters themselves. the more they receive traffic the more visitors we receive when people share you content with friends and colleagues. The widget today consists of Facebook, Twitter, StumbleUpon box counters along with Addthis Counter which makes it a complete package of social media sharing buttons. To Add this widget to your blogspot blogs kindly follow the steps mentioned below.

Live Demo

Add Social Share Widget To Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand Widgets Templates" Box
  4. Search for <data:post.body>
  5. Just above it paste the code below,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='right'><table border='0' cellpadding='2' cellspacing='0' width='150'><tbody>
    <tr>
      <td valign='top'>    <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</td>
      <td valign='top'>   <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>
    </tr>
    <tr>
      <td valign='top'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </td>
      <td valign='top'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de39fde7c998f6e' type='text/javascript'/>
<!-- AddThis Button END -->
</td>
    </tr>
  </tbody></table></div></b:if>

If you wish to align the widget to left then replace  right with left
6. Hit Save and you are done!
Let me know if you needed any help :>

Read more →

Wednesday, 6 June 2012

jquery-slideshow-in-dropdow-menu

02:32 By , , , , No comments


How it works?

I have made the steps extremely simple so that even beginners may love to implement this modification inside their blogs or websites. We just need to create two CSS classes and insert them inside the link list tags of the menu and then finally attach the necessary call functions to trigger the effect. Follow these simple steps for blogger:
  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Search for <head>
  5. just below it paste the following code.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 

Note: If you have previously added the jquery link then you remove the previous one and use this update done instead. Your old widgets will still work.
     6. Next search for ]]></b:skin>    and just above it paste the following CSS classes
.mbt_navigation {
        position:absolute;
        display:none;
    }
 
    .mbt_navigation li {
        clear:both;
    }
     7.  Now the last part. Search your menu code and to the part from where the drop down list starts, add the class dropdown1 to the main tab (li tag) and add mbt_navigation to the ul tag of the column. Please see the our code to get an idea and carefully observe the locations of the two classes. We have replaced links with # symbol for simplicity.

<li class='dropdown1'><a href='#'>Tools »</a>
<ul class='mbt_navigation'>
<li><a href='#'>HTML Editor</a></li>
<li><a href='#'>Multiple SITEMAP Generator</a></li>
<li><a href='#'>Encode HTML Characters</a></li>
<li><a href='#'>Count Characters</a></li>
<li><a href='#'>Meta Tag Generator</a></li>
<li><a href='#'>Color Code Generator</a></li>
      8. Finally just after the entire HTML code of your Menu (where your menu ends, it can either be </ul> or </div> depending on your menu code), paste the following code:
<script type='text/javascript'>
            // Wait for the page and all the DOM to be fully loaded
       
 
                    // Add the &#39;hover&#39; event listener to our drop down class
            $(&#39;.dropdown1&#39;).hover(function() {
                            // When the event is triggered, grab the current element &#39;this&#39; and
                            // find it&#39;s children &#39;.sub_navigation1&#39; and display/hide them
                $(this).find(&#39;.mbt_navigation&#39;).slideToggle();
            });
       
    </script>
        9.   Save your template and you are all done!

Read more →

Monday, 4 June 2012

bussiness-solutions-template-for-blogger

12:58 By , No comments



live demo
769 Downloads1,094 views
Features:
Instructions:Template Settings / How to use this template
Template author:ChicaBlogger
Description:
Business Solutions is a free blogger template with 2 columns, right sidebar, exclusive design for Blogger, space for ads, footer columns, slideshow, social icons and neutral colors.
Excellent layout for blogs about business.
Download Business Solutions for free in BTemplates.
Rating3.3 out of 5 based on 6 bloggers.
Compatible with:FFIEChrome
Share:

Read more →

30-amazing-vertical-menu's-for-blogger

12:55 By , , No comments







25 Navigation Menus Collection!How To Add A Vertical Navigation CSS Menu To Blogger?
Well the process is as simply as it can be. Simply follow these steps carefully,
  1. Go To Blogger > Layout > Edit HTML
  2. Back-up your template
All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus. So lets know where to add each code!
    3.   Paste the CSS code for your selected Menu just above ]]></b:skin>
    4.   For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.
  • If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'>  or this <div id='sidebar-wrapper-right'>
  • If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>
Note:- Since most templates use different coding therefore if you could not find the above codes then don’t worry simply share your blog URL in the comment box and I will view your template coding and will tell you instantly which code to search for!
    5.    Finally save your template and see a beautiful Navigation Menu hanging on your sidebar :D

Editing The Links In The Navigation Menu

To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,
<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>

Replace #1, #2, #3 etc with your Page Links/URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line from the HTML code,

<li><a href="#" >Link</a></li>

Live Demo

For Live Demo of Other Navigation Menus Simply use our HTML Editor and Copy and Paste the CSS and HTML code at right areas and then start playing with the code :>>


Navigation Menu #1

Navigation Menu 1 
CSS CODE:

HTML CODE:

Navigation Menu #2

Navigation Menu 2
CSS Code:

HTML Code:

Navigation Menu #3

Navigation Menu 3
CSS Code:

HTML Code:


Navigation Menu #4

Navigation Menu 4
CSS Code:

HTML Code:

Navigation Menu #5

Navigation Menu 5
CSS Code:

HTML Code:

Navigation Menu #6

Navigation Menu 6
CSS Code:

HTML Code:

Navigation Menu #7

Navigation Menu 7
CSS Code:

HTML Code:

Navigation Menu #8

Navigation Menu 8
CSS Code:

HTML Code:

Navigation Menu #9

Navigation Menu 9
CSS Code:

HTML Code:

Navigation Menu #10

Navigation Menu 10
CSS Code:

HTML Code:

Navigation Menu #11

Navigation Menu 11
CSS Code:

HTML Code:

Navigation Menu #12

Navigation-Menu-With-No-image-used
CSS Code:

HTML Code:

Navigation Menu #13

CSS Menu Tabs 13
CSS Code:

HTML Code:

Navigation Menu #14

CSS Menu Tabs 14
CSS Code:

HTML Code:

Navigation Menu #15

CSS Menu Tabs 15
CSS Code:

HTML Code:

Navigation Menu #16

CSS Menu Tabs 16
CSS Code:

HTML Code:

Navigation Menu #17

CSS Menu Tabs 17
CSS Code:

HTML Code:

Navigation Menu #18


CSS Menu Tabs 18
CSS Code:

HTML Code:

Navigation Menu #19

CSS Menu Tabs 19
CSS Code:

HTML Code:

Navigation Menu #20

CSS Menu Tabs 20
CSS Code:

HTML Code:

Navigation Menu #21

CSS Menu Tabs 21
CSS Code:

HTML Code:

Navigation Menu #22

CSS Menu Tabs 22
CSS Code:

HTML Code:


Navigation Menu #23

CSS Menu Tabs 24
CSS Code:

HTML Code:

Navigation Menu #24

 CSS Menu Tabs 25
CSS Code:

HTML Code:

Navigation Menu #25

CSS Menu Tabs 26
CSS Code:

HTML Code:



That’s All!

Read more →

125-x-125-banners-for-blogger-advertise-here

03:42 By , No comments


Early this morning I tried to create some tables using simple HTML. Remarkably I arrived at a really easy and well optimized code that could be used to show your 125 by 125 Ad banners just like the one on my sidebar. This widget is named “125 by 125 Ad Banner Widget”
See an example below,




        
 125 by 125 Ad Banners Widget  (1)
AD DESCRIPTIONAD DESCRIPTION
AD DESCRIPTIONAD DESCRIPTION
Here is the code to be pasted in your HTML/JavaScript Widget,
<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265"bgcolor="#ffffff">
<tbody><tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>
<tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>
</tbody></table>
<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
      <tr>
       <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="URL OF BANNER’S IMAGE" /></a></center></td>
      </tr>

    </tbody></table>
</div>

Now make the following changes,
1.  Replace URL OF ADVERTISER with the website link of the advertiser
2.  Replace URL OF BANNER’S IMAGE with the Image link of the Advertiser’s banner
3.  Replace AD DESCRIPTION with some information related to the Ad. The description appears when some hovers his mouse cursor over the banner.
4.  If you want to increase the distance between the ad blocks then adjust width="265" . By default 265 is the minimum width of this banner widget. You can’t further decrease the width.

  • If you want to increase the number of rows of this ad widget and want to add two other Ad blocks i.e 6 ad blocks. Then simply copy paste the code below just above</tbody></table>
<tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>


  • If you want to have a more fancy Ad widget like the one below,
125 by 125 Ad Banners Widget  (2)
BEST---2
34
 
ADVERTISE
then copy and paste the code below in your HTML/Javascript Widget

Read more →