Amazing Tricks For Blogger: Blogger

Showing posts with label Blogger. Show all posts

Labels: Blogger

Top 5 Things of Blogger Should always Remember

There are long list of what blogger should do and what not. As an example a Good Blogger is one who don't write for the Search Engines but for the people. There are many things which a Blogger should keep in his mind while Blogging. But there are some of the top points are listed below. If you are new to Blogging then this post may be really more helpful than you think.

1. Update your Blog Regularly

You must update your blog regularly. If you are the one who don't care for posting would your readers care to read your blog? Update your blog regularly and popularize it which we will see in the next point.

2. Spread posts and site through Social Networks

Facebook, Twitter, Digg, Google+ are some of the huge Social networking sites where you can get good traffic to your posts. If you ignore this point, note that you are just neglecting a lot of traffic. Spread your posts but never SPAM it just lowers the reputation of your blog.

3. Never Copy and Paste

I have seen many new bloggers copy and past some others aticles but remember as God notices our every single activity the same way Google and other search engines see our blogs. Copying content is curse for a new blog so you should avoid that. Well if you liked a post on the internet then you can Re-write the article or give the proper credits. Plagiarism should be stopped and never followed.

4. Patience always yields sweet fruit

A large number of Bloggers fail due to this reason. New Bloggers expect a lot in very short span of time. You must not expect results overnight. Give your blog a little time. For example adding Adsense at very beginning can't get you much money but if you wait patiently till you build a good network and quality traffic then the result could be far better.

5. SEO is a very big factor

Without Search Engine Optimization a blogger never actract huge traffic. Almost all the sites get maximum traffic through Search Engine and if your Search Engine Ranking Position is low then you are sure to get less traffic. This can be avoided through SEO. Better ranking in Search Engines will yield you lot of traffic.

Then I hope these five points will help you and your blog get more traffic.

0 comments

Labels: Blogger

How to add Meta Tags for Blogger

As a blogger or web site owner you need to get huge traffic in Blogger or web site to earn more money from your site, To get huge traffic you must have to add Meta Tags.

Meta tag is a centralized description of a web page. But it is very important to improve search engine ranking. From Meta Tags, crawler/bots can easily find the documents like author, language, country, platform, keywords, description. If you have special niche for your blog, meta keywords and meta description will help you to drive a huge traffic from search engine. In WordPress there are thousands of plugins for meta tag. But, in blogger you have to import manually.

See Below for meta tags and a brief description of the meta tag.

<meta content=’Blog Description’ name=’description’/>

This meta tag uses to show a crawler, a brief description of your blog. It’s called as meta description. It Remove Blog Description and put your own blog’s description.

<meta content=’KW1, KW2,KW3,Keyword4′ name=’keywords’/>

This meta tag uses to push hidden keywords to your blog. Place your keywords in place of KW1, KW2, KW3. You can add unlimited keywords. but remember, 6 or 7 keywords are better SEO. At first make a keyword analysis for your blog and then find important keywords for your blog then select the meta keywords in your blog.

<meta content=’Author Name’ name=’Author’/>

This meta tag uses for specify the author of the website/article/post. You can use your name or g+ profile link in the place of Author Name. By this meta tag you can verify authorship on Google+.

<meta content=’G+ Publisher Page URL’ name=’Publisher’/>

This meta tag is uses for verify publisher page at google+. Use your google+ page url at place of G+publisher page URL. This is very important for multi-author author blogs.

<meta content=’Author Email Address’ name=’Email’/>

This meta tag uses for specify a mail address to author. Use your email address in the place of Author Email Address. But remember to use non personal Email address.

<meta content=’index, follow’ name=’robots‘/>

This meta tag specifies the permissions for a crawler or bot. ‘Index’ gives the permission to take the article on the of a search engine. Follow indicates your blog link will be followed. If you want to make your blog no-follow then use nofollow in the place of follow. But remember it affects site-wide.

<meta content=’Language Name’ name=’language’/>

This meta tag uses for specify the language of your blog. It helps to detect language to translators. Configure it by using your blog language. As an example if you are using US English then it will be looks like this “<meta content=’en-us’ name=’language’/>“.

<meta content=’Country’ name=’country’/>

This meta tag uses for specify the country for your blog. Country meta tag improves your local search ranking. Use your country name in the place of Country.

<meta content=’Engine’ name=’generator’/>

This meta tag specifies the platform you are using for your blog. Use your platform name in the place of Engine. as an Example if you are using Blogger then it should look like this”<meta content=’blogger’ name=’generator’/>“.

<meta name=”copyright” content=”name of owner”>

To protect your text and Images from copying you have to use this meta tag. Use the author name or the publisher name in the place of “name of owner”. Example : <meta name=”copyright” content=”Amazing Tricks For Blogger”>.

How To Add Meta Tags In Blogger

You can follow the below steps to add meta tag to a Blogger blog.

Login to your Blogger Dashboard.
Go to Template from Left Sidebar.

Remember to Download Full Template by clicking on “Backup/Restore” from upper right corner as a safe guard.

Click on “Edit HTML” button.
Go to Section. You can search this from Ctrl+F.
Add Your Meta Tags after <head> & before </head>.
Click on “Save Template” Button.

Congratulation Now you have Added the meta gags.

0 comments

Labels: Blogger

How to Create Drop down menu for Labels widget

Normally labels arrange in a linear manner and A labels widget displays your posts’ labels and each label is linked to a page containing posts which fall under that label. Usually as your posts increases, so will your labels. If you don’t limit them, sooner or later your labels widget will take over your sidebar!

Fortunately you can prevent that from creating a drop down menu. Your labels widget will be reduced to just one line! And it only expands into a full list when you click it.

Now let’s make the dropdown

Go to Template > Edit HTML.
Make sure you DO NOT check the Expand Widget Templates checkbox.
Look for the following lines in your HTML code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Replace that line with this code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'><option>Click to choose a label</option><b:loop values='data:labels' var='label'><option expr:value='data:label.url'><data:label.name/>(<data:label.count/>)</option></b:loop></select><b:include name='quickedit'/></div></b:includable></b:widget>

Note - Remember to download a backup template before editing your xml template.

Change the width of the dropdown menu bay changing 100% to any percentage, or pixel (px).

You can change “Click to choose a label” phrase in line 8 to your preferred phrase.

Code line 11 is for post count, if you do not want to show post count at the end of each label, delete this line.

Preview before saving.

0 comments

Labels: Blogger, Menu

Top 8 CSS Vertical menu bar for blogger

Sharing The first collection of Vertical Navigation menu bar for blogger. Today I give you some majestic designed vertical menu. Those menues make comfortable your blogger site. I am tried hard to share the best menu bar for you.to add Vertical Navigation CSS Menu on your blogger/blogspot site follow below steps.

Log in to your blogger account.
Then select edit HTML in the template tab.
To add any menu bar from below first copy the css code of your selected menu.
Then go to your blogger template and find ]]></b:skin>
Past your copied css code just above of ]]></b:skin>
Now save your template.

After adding css code now you need to add html code to show your menu bar on blogger.

Go to your blogger layout option> Add a gadget > Html/javascript > and paste the html codes and save it.
Now you need to edit the html codes:

Remove # and give your page url and change Home, Products, Contact etc and give the linked page name on it.

Note: if the menu is not fitted on your slide bar actual size then simply comment on the bottom. I will try to made it comfortable with your site.

Blue & White menu

CSS Codes:

/*Gt Stylesheet */
#cssmenu > ul{
 list-style: none;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
 line-height: 1;
}

/* The container */
#cssmenu > ul {
 display: block;
 position: relative;
 width: 150px;
}

/* The list elements which contain the links */
 #cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 150px; 
 }

/* General link styling */
  #cssmenu > ul li a {
   /* Layout */
   display: block;
   position: relative;
   margin: 0;
   border-top: 1px dotted #fff;
   border-bottom: 1px dotted #d9d9d9;
   padding: 11px 20px;
   width: 110px;

/* Typography */
   font-family:  Helvetica, Arial, sans-serif;
   color: #3dafea;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 0 1px 0 #fff;
   font-size: 13px;
   font-weight: 300;

/* Background & effects */
   background: #eaeaea;
  }

/* Rounded corners for the first link of the menu/submenus */
  #cssmenu > ul li:first-child>a {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   border-top: 0;
  }

/* Rounded corners for the last link of the menu/submenus */
  #cssmenu > ul li:last-child>a {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: 0;
  }

/* The hover state of the menu/submenu links */
  #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
   background: #54cdf1;
   background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
   background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
   background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
   background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
   border-color: transparent;
  }

/* The arrow indicating a submenu */
  #cssmenu > ul .has-sub>a::after {
   content: '';
   position: absolute;
   top: 16px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #3dafea; 
  }

/* The same arrow, but with a darker color, to create the shadow effect */
  #cssmenu > ul .has-sub>a::before {
   content: '';
   position: absolute;
   top: 17px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #fff;
  }

/* Changing the color of the arrow on hover */
  #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
   border-left: 4px solid #fff;
  }

#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
   border-left: 4px solid rgba(0, 0, 0, .25);
  }

/* THE SUBMENUS */
  #cssmenu > ul ul {
   position: absolute;
   left: 150px;
   top: -9999px;
   padding-left: 5px;
   opacity: 0;
   /* The fade effect, created using an opacity transition */
   -webkit-transition: opacity .3s ease-in;
   -moz-transition: opacity .3s ease-in;
   -o-transition: opacity .3s ease-in;
   -ms-transition: opacity .3s ease-in;
  }

/* Showing the submenu when the user is hovering the parent link */
  #cssmenu > ul li:hover>ul {
   top: 0px;
   opacity: 1;
  }

Black & Yellow Menu

CSS Codes:

/* GT stylesheet */
ul#cssmenu > ul, #cssmenu > ul ul {
 list-style: none;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
 line-height: 1;
}

/* The container */
#cssmenu > ul, #cssmenu > ul ul {
 display: block;
 position: relative;
 width: 150px;
}

/* The list elements which contain the links */
 #cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 150px; 
 }

/* General link styling */
  #cssmenu > ul li a {
   /* Layout */
   display: block;
   position: relative;
   margin: 0;
   border-top: 1px dotted #3a3a3a;
   border-bottom: 1px dotted #1b1b1b;
   padding: 11px 20px;
   width: 110px;

/* Typography */
   font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif;
   color: #d8d8d8;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 0 1px 1px #000;
   font-size: 13px;
   font-weight: 300;

/* Background & effects */
   background: #282828;
  }

/* Rounded corners for the first link of the menu/submenus */
  #cssmenu > ul li:first-child>a {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   border-top: 0;
  }

/* Rounded corners for the last link of the menu/submenus */
  #cssmenu > ul li:last-child>a {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: 0;
  }

/* The hover state of the menu/submenu links */
  #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
   background: #d4b800;
   background: -webkit-linear-gradient(bottom, #d4b800, #f6d600);
   background: -ms-linear-gradient(bottom, #d4b800, #f6d600); 
   background: -moz-linear-gradient(bottom, #d4b800, #f6d600);
   background: -o-linear-gradient(bottom, #d4b800, #f6d600);
   border-color: transparent;
  }

/* The arrow indicating a submenu */
  #cssmenu > ul .has-sub>a::after {
   content: '';
   position: absolute;
   top: 16px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #d8d8d8; 
  }

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #000;
  }

/* Changing the color of the arrow on hover */
  #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
   border-left: 4px solid #fff;
  }

#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
   border-left: 4px solid rgba(0, 0, 0, .3);
  }

/* Showing the submenu when the user is hovering the parent link */
  #cssmenu > ul li:hover>ul {
   top: 0px;
   opacity: 1;
  }

Black & Blue Menu

CSS Codes:

/* Some stylesheet reset */
#cssmenu  > ul {
 list-style: none;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
 line-height: 1;
}/* The container */
#cssmenu  > ul {
 display: block;
 position: relative;
 width: 150px;
}

/* The list elements which contain the links */
 #cssmenu  > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 150px; 
 }

/* General link styling */
  #cssmenu  > ul li a {
   /* Layout */
   display: block;
   position: relative;
   margin: 0;
   border-top: 1px dotted #3a3a3a;
   border-bottom: 1px dotted #1b1b1b;
   padding: 11px 20px;
   width: 110px;

/* Typography */
   font-family: Helvetica, Arial, sans-serif;
   color: #d8d8d8;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 0 1px 1px #000;
   font-size: 13px;
   font-weight: 300;

/* Background & effects */
   background: #282828;
  }

/* Rounded corners for the first link of the menu/submenus */
  #cssmenu  > ul li:first-child>a {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   border-top: 0;
  }

/* Rounded corners for the last link of the menu/submenus */
  #cssmenu  > ul li:last-child>a {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: 0;
  }

/* The hover state of the menu/submenu links */
  #cssmenu  > ul li>a:hover, #cssmenu  > ul li:hover>a {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
   background: #54cdf1;
   background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
   background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
   background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
   background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
   border-color: transparent;
  }

/* The arrow indicating a submenu */
  #cssmenu  > ul .has-sub>a::after {
   content: '';
   position: absolute;
   top: 16px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #d8d8d8; 
  }

/* The same arrow, but with a darker color, to create the shadow effect */
  #cssmenu  > ul .has-sub>a::before {
   content: '';
   position: absolute;
   top: 17px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #000;
  }

/* Changing the color of the arrow on hover */
  #cssmenu  > ul li>a:hover::after, #cssmenu  > ul li:hover>a::after {
   border-left: 4px solid #fff;
  }

#cssmenu  > ul li>a:hover::before, #cssmenu  > ul li:hover>a::before {
   border-left: 4px solid rgba(0, 0, 0, .3);
  }

/* THE SUBMENUS */
  #cssmenu  > ul ul {
   position: absolute;
   left: 150px;
   top: -9999px;
   padding-left: 5px;
   opacity: 0;
   /* The fade effect, created using an opacity transition */
   -webkit-transition: opacity .3s ease-in;
   -moz-transition: opacity .3s ease-in;
   -o-transition: opacity .3s ease-in;
   -ms-transition: opacity .3s ease-in;
  }

/* Showing the submenu when the user is hovering the parent link */
  #cssmenu  > ul li:hover>ul {
   top: 0px;
   opacity: 1;
  }

Red & White Menu

CSS Codes:

/* Some stylesheet reset */
#cssmenu > ul {
 list-style: none;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
 line-height: 1;
}

/* The container */
#cssmenu > ul{
 display: block;
 position: relative;
 width: 150px;
}

/* The list elements which contain the links */
 #cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 150px; 
 }

/* Typography */
   font-family:  Helvetica, Arial, sans-serif;
   color: #e4433c;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 0 1px 0 #fff;
   font-size: 13px;
   font-weight: 300;

/* Background & effects */
   background: #eaeaea;
  }

/* Rounded corners for the first link of the menu/submenus */
  #cssmenu > ul li:first-child>a {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   border-top: 0;
  }

/* Rounded corners for the last link of the menu/submenus */
  #cssmenu > ul li:last-child>a {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: 0;
  }

/* The hover state of the menu/submenu links */
  #cssmenu > ul li a:hover, #cssmenu > ul li:hover>a {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
   background: #f23f37;
   background: -webkit-linear-gradient(bottom, #f23f37, #f45d57);
   background: -ms-linear-gradient(bottom, #f23f37, #f45d57); 
   background: -moz-linear-gradient(bottom, #f23f37, #f45d57);
   background: -o-linear-gradient(bottom, #f23f37, #f45d57);
   border-color: transparent;
  }

/* The arrow indicating a submenu */
  #cssmenu > ul .has-sub >a::after {
   content: '';
   position: absolute;
   top: 16px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #e4433c; 
  }

/* The same arrow, but with a darker color, to create the shadow effect */
  #cssmenu > ul .has-sub >a::before {
   content: '';
   position: absolute;
   top: 17px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #fff;
  }

/* Changing the color of the arrow on hover */
  #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
   border-left: 4px solid #fff;
  }

#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
   border-left: 4px solid rgba(0, 0, 0, .25);
  }

/* Showing the submenu when the user is hovering the parent link */
  #cssmenu > ul li:hover>ul {
   top: 0px;
   opacity: 1;
  }

Grey Hat Menu

CSS Codes:

#cssmenu {
 margin: 0;
 padding: 0;
 font-family: Verdana, Helvetica, Arial, sans-serif;
}
#cssmenu{
 width: 193px;
}
#cssmenu ul{
 list-style: none;
 text-indent: 0px;
}
#cssmenu li{
 margin-top: 3px;
}
#cssmenu a{
 font: 12px Verdana;
 padding: 4px;
 color: #646464;
 display:block;
 padding: 6px 30px;
 height: 20px;
 text-decoration: none;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZz3FN9-XBUPVrk1MabjlgD-hDMx8rhdpLHgJtAu-XwCDDOfDtenwKIiLRQhfXxYkmpPDhnIpdAOjFbxbzfTBRbkJ-rKKUYPLNbc0fhgZ8CyS15RiEIWMTfzZLQBHkq66AUbL_rYoKRAf/s220/background.gif');
}
#cssmenu a:hover{
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41Z36dixyla0vZBNWKvGYzsaKotZgrRuBoOxzGMZYjJBthMhZVGPyphY10Ju34wFIXwKcaHGuCess0CXjemVehYQfopvJtBAXKy96seu_Z8Z9L_RN0_yw0I9nzJFJBPsbnQVgPEcVsmEd/s220/highlight.gif') no-repeat right;
 padding: 6px 40px;
}:148px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41Z36dixyla0vZBNWKvGYzsaKotZgrRuBoOxzGMZYjJBthMhZVGPyphY10Ju34wFIXwKcaHGuCess0CXjemVehYQfopvJtBAXKy96seu_Z8Z9L_RN0_yw0I9nzJFJBPsbnQVgPEcVsmEd/s220/highlight.gif) no-repeat;color:#b18211;}

Vertical-Massive-Blue

CSS Codes:

Bitbox Menu

CSS Codes:

#cssmenu {
 width: 200px;
 border-style: solid solid none solid;
 border-color: #94AA74;
 border-width: 1px;

}
#cssmenu ul{
 list-style:none;
 margin:0px;
 padding:0px;
 }
 
#cssmenu li a {
 height: 32px;
   height: 24px;
 text-decoration: none;
 font-weight:normal;
 } 
 
#cssmenu li a:link, #cssmenu li a:visited {
 color: #FFFFFF;
 display: block;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxqb9mQItt8Rs63ePWU_5_rWGPTOe5bp6KvOTMV_W571l7TNuMpUfc1TfpctS1ndnc7TxbNDN1CKAztDjVkPjiw9z7t_kDfWxwhoSTx9KoV2F5aaLlGRZqEo1DQHLJimPpVSl_LJqD444/s1600/v6.gif);
 background-repeat:no-repeat;
 padding: 8px 0 0 50px;
 }
 
#cssmenu li a:hover {
 color: #666666;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxqb9mQItt8Rs63ePWU_5_rWGPTOe5bp6KvOTMV_W571l7TNuMpUfc1TfpctS1ndnc7TxbNDN1CKAztDjVkPjiw9z7t_kDfWxwhoSTx9KoV2F5aaLlGRZqEo1DQHLJimPpVSl_LJqD444/s1600/v6.gif) 0 -32px;
 background-repeat:no-repeat;
 padding: 8px 0 0 50px;
 }
 
#cssmenu li a:active {
 color: #666666;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxqb9mQItt8Rs63ePWU_5_rWGPTOe5bp6KvOTMV_W571l7TNuMpUfc1TfpctS1ndnc7TxbNDN1CKAztDjVkPjiw9z7t_kDfWxwhoSTx9KoV2F5aaLlGRZqEo1DQHLJimPpVSl_LJqD444/s1600/v6.gif) 0 -64px;
 background-repeat:no-repeat;
 padding: 8px 0 0 50px;
 }

Salmon Menu

CSS Codes:

/* GT stylesheet */
#cssmenu > ul {
 list-style: none;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
 line-height: 1;
}

/* The container */
#cssmenu > ul {
 display: block;
 position: relative;
 width: 150px;
}

/* The list elements which contain the links */
 #cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 150px; 
 }

/* Background & effects */
   background: #282828;
  }

/* Rounded corners for the first link of the menu/submenus */
  #cssmenu > ul li:first-child>a {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   border-top: 0;
  }

/* Rounded corners for the last link of the menu/submenus */
  #cssmenu > ul li:last-child>a {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: 0;
  }

/* The hover state of the menu/submenu links */
  #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
   background: #f06343;
   background: -webkit-linear-gradient(bottom, #f06343, #f27d63);
   background: -ms-linear-gradient(bottom, #f06343, #f27d63); 
   background: -moz-linear-gradient(bottom, #f06343, #f27d63);
   background: -o-linear-gradient(bottom, #f06343, #f27d63);
   border-color: transparent;
  }

/* The arrow indicating a submenu */
  #cssmenu > ul .has-sub>a::after {
   content: '';
   position: absolute;
   top: 16px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #d8d8d8; 
  }

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #000;
  }

/* Changing the color of the arrow on hover */
  #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
   border-left: 4px solid #fff;
  }

#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
   border-left: 4px solid rgba(0, 0, 0, .3);
  }

/* Showing the submenu when the user is hovering the parent link */
  #cssmenu > ul li:hover>ul {
   top: 0px;
   opacity: 1;
  }

0 comments

Labels: Blogger

How to Change Width of Body, Posts and Sidebar of a Blogger Template

Normally blogger template have written in xml format. So if want to change its widths we have to write some html codes in a proper pace. Lets think Why we increase the width, Some reasons as follows

You can have bigger images in your blogs.
Good result in old browsers like Internet Explorer 6.
Sidebar in perfect position.
It gives your blog an overall clean look.

Then to change width of post, sidebar or body, follow these steps. 

First of all you need to sign in to your blogger account.
Then go to template tab and select Edit HTML.
Find the following code between <b:skin> and </b:skin>.

Tip: Click on Download Full Template to backup your template.

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

#main-wrapper {

width: 410px;

float: $startSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#sidebar-wrapper {

width: 220px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Remember: The width factor in #outer-wrapper defined the overall width of blog, in #main-wrapper it defines the width of your posts and in #sidebar-wrapper it defines the width of your sidebar.

Now you know the code, you can increase the width in #outer-wrapper and then increase in the #main-wrapper (for posts) or #sidebar-wrapper (for sidebar).

Warning: When you increase the width of any tag, see the preview and if you're satisfied only then you should save.

Similarly if you want to change the width of your header, here is the code in your template CSS between <b:skin> and </b:skin>.

/* Header

-----------------------------------------------

*/

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Just change the width factor and see the preview, if you're happy with the outcome, save the template otherwise discard the changes.

0 comments

Second Menu

Top 5 Things of Blogger Should always Remember

How to add Meta Tags for Blogger

How to Create Drop down menu for Labels widget

Top 8 CSS Vertical menu bar for blogger

How to Change Width of Body, Posts and Sidebar of a Blogger Template

Sponsors

Labels

Popular Posts

Blog Archive

Contributors

Labels

Labels

Labels