blogging rocks the world

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

Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

Tuesday 14 August 2012

metrostyle ui sharing in blogger

03:11 By , , , No comments

Instructions:


  1. go to blogger
  2. goto template page
  3. open blog,s html
  4. expand widget
  5. then search for   <data:post.body/> OR  <div class='post-footer-line post-footer-line-1'/> OR   <div class='post-body entry-content'>
  6. Now pate that code below one of these lines

Read more →
Read more »

Monday 13 August 2012

set backgrounds in ads like chitika

15:22 By , , , No comments




<table align="center" width="your_image_width" height="your_image_height" border="0" background="your_image_path">
<tr><td width="your_image_width" height="your_image_height">
<div align="center">
Put Ads_code_here
</div></td></tr>
</table>



Edit the above code properly as below..



Replace Put_Google_Ads_code_here with your adsense code.

Replace your_image_width with the width of your image

Replace your_image_height with the height of your image

Replace your_image_path with your image file's url


After editing put this code in the place you need your ads to appear(with background image)


When you choose the background colour and border colour in Adsense for content setup please try to use colours matching with your back ground image..

Read more →

Monday 18 June 2012

breath new life in your old blog

03:03 By , No comments


Recycle your old posts
Are your old blog posts gathering dust in your archives? This is a very common problem with many bloggers. No matter how much effort you put into a post, it will eventually be pushed down into your archives by newer blog posts. And sometimes, if those posts don't show up in search engine results, they eventually get forgotten. So all your hard work goes to waste. If only you could reuse your old posts to get the most benefit out of them. Maybe you can not reuse them as such, but withadequate SEO and some other ways, you can blow new life into them. Here is what you can do with your old posts to bring them back to life.

Link the older posts

First and foremost, link back to your older posts that are related to what you are saying in your current post. You can see that I have already done this twice in this post. Not only is this a good SEO practice, it also gives exposure to your old posts. Without this interlinking, your old posts would just be stand-alone posts which will eventually get forgotten.

Interlinking also keeps visitors engaged within your website. If a visitor is reading your post, and he finds something that you linked interesting, he might check out that link as well. Hence, the traffic will flow smoothly over and through your blog. Interlinking also shows people that you have a lot of other content on your website.

Follow up and continuation

Another good way to keep your posts lively is to make follow up posts to the old ones. These work like a continuation of the older post, with some new ideas or concepts etc. For example, we published a post about Google Panda last year in 2011 when it hit many sites across the web. After more than a year, when the next Google algorithm update came, we create a new post, or rather, a new series on Google Panda and Penguin that related to the previous year old post as well. See my point? Some of the people who were effected by Penguin this year and visited our series also visited our older post, giving it a new breath of life.

Featured and most popular posts

Another way to display your old posts is by showing them in your sidebar. Most bloggers use widgets to show their most popular posts, or featured posts. You can do this for your old posts. Take out an old post, and display it in the featured section for some time. People who like your blog will most definitely check out a post they might not have seen because it's so old. Such people welcome content that is new to them. People rarely go to your older posts manually. So you have to bring it to them.

Resource pages


Resource pages give you an excellent opportunity to bring up your old posts. You could write a few new posts, and create a whole new resource page where you can add the old posts as well. Then, you can prompt people to visit this page for guides and other stuff. If it was a WordPress page, I'd say something like "If you want any kind of help regarding WordPress, then visit this page for a complete WordPress guide" and so on.

Promote on social media

Social media is another great place to bring out your old posts. Frankly speaking, no one is generous enough to go through all the posts you ever made, even if they have been following you from the beginning. It isn't possible. So on social media, chances are that most of the people haven't seen any of your starting posts. Hence, you can cycle through your old posts again by sharing them one at a time. That way, not only will those posts get traffic, it'll also look as if you are publishing more posts than usual.

Archives page

An archive page is a bit like a resource page. But by default, your archive pages are just a list of your old posts. You can modify this page, and make it interesting. For example, you can make headings, and sort posts according to topic or category. Sometimes, visitors visit archive pages to see what oldie-goldies you have in store for them. Arrange those posts, and choose the best ones to display.

Link to post in newsletters (if you provide any)

Besides social media, you can also tell your readers about your older posts through email newsletters, if you have any. We'd recommend you start giving out one if possible. If someone has agreed to receive newsletters from you regularly, chances are that they also might be interested in content they didn't find on the front page of your blog, because it was buried deep down.

If you follow all these necessary steps, then there's no need to worry about your old posts getting rusty.
Credits

mybloggertricks.com

Read more →

Wednesday 13 June 2012

touch-me-sharing-widget-for-blogger

07:58 By , , , , No comments



Touch Me Sharing WidgetThe rapid advancement and development of Social Media and growing interest of people in social networking sites has given birth to dozens of social sharing tools and services. Web masters are getting addicted to these tools because unlike organic traffic from search engines, web traffic from social channels have overtaken search traffic. Bloggers today depend largely on networks like Facebook, Google plus and twitter to drive traffic to their blogs. These tools are good only if they can attract a visitor to bookmark and share your content. From your website quality content till your blog design, every single bit counts in turning a visitor into a follower. To help you with your dream of increasing  fans and readers we bring you "Touch Me". Its named such due to its appealing look that forces a visitor to roll hover the cursor over the icons and hit follow! :) This gadget is neatly structured using buttons from popular services like Google Plus, Facebook, Twitter and RSS. We have coded it neatly using basic HTML and some spicy CSS styles.

Live Demo
Please take less than a minute to like and bookmark this page as a token of favor for our small effort. :)

Where should you add it?

Its is standard practice to add social counters inside posts and social sharing buttons in a sidebar. I would therefore advise that you add this widget towards the top right section of your blog above all ads and gadgets.
Read my article on How to force a visitor to subscribe in order to understand why this location is the best.

Add it to blogger

I am sharing below the steps for BlogSpot users. If you are a wordpress or Joomla user or running a normal website then you just need to copy and paste the following code inside your templates.
Following are the steps for blogger users
  1. Go To Blogger > Layout
  2. Choose add a gadget
  3. Select HTML/JavaScript
  4. Paste the following code inside it,
<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}

.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}

.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}

.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}

</style>

<div class='touchme'>
<!--RSS-->
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a>

</div>
Please fill these requirements:
  • Replace YOUR RSS LINK with your Feed burner link.
  • Replace YOUR GOOGLE PROFILE LINK with your Google+ URL
  • Replace YOUR FACEBOOK LINK with your Facebook URL
  • Replace YOUR TWITTER LINK with your Twitter Profile URL
         5. Hit save and you are all done!
Visit your blog to see it working just perfectly. Move your cursor over the icons and enjoy playing!

Credits

The icons used in the widget are designed by Umar Irshad from  Design Kindle. You are requested to link back to this page if you wish to share this gadget with your audience.
-============Credits===============-

Read more →

Friday 8 June 2012

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

09:06 By , , No comments




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 →