Make Automatic DNS Setting in Godaddy for Blogger Blog

Tired or Confuse of make correct working DNS settings of your Blogger Blog ?. well pointing your newly perched domain is not so hard work but sometime it is little confusing for new blogger .

So here in this post i am going to share my knowledge about a very helpful and awesome Tool by Godaddy . specially for blogger user who are not able to point their domain manually in godaddy .

To Point your Custom Domain to your Blogger Blog Just follow my below mention simple steps :-

1. Just go to http://www.godaddy.com/blog/bloggerdnssetup.aspx
2. Sing-in if it is asked .
3. Type your domain name which you own and want to automatically get pointed to blogger .

Note :- don't type domain like  http://www.shayari-jokes.in or  www.shayari-jokes.in  just type only shayari-jokes.in

Now wait for some min/hours until Domains DNS setting get active it can take some mins to 2 days get fully working. it depend on your domain registrar and luck ,for me it takes about 2 min :)

Part Two -2 

Now when your dns get active :-

1. just login to your blogger

2.go to blogger settings >> Basic >> Publishing >>

3.Type your domain with www prefix not naked domain
 see example in below pic

4.tick Redirection of naked domain to www prefix

5. and click on save button .


Note :- you if get error while saving ,it's mean domain dns settings are not still not active .wait for some more time .

Now all done hope this trick work for you successfully ...if you get any problem /question just comment below ..

Read More

Add New Beautiful Blue Vertical Menu to Blogger

This is a another CSS based Blue Vertical beautiful and Stylist menu for Blogger Blog .you can also use this menu in any Html Sites of your wish. in our Previous past we have already posted about many other awesome menu for Blogger .and here is a another brand new menu for you .

How to add this Blue Vertical Menu to Blogger Blogs

Follow my below simple steps to add it your blogger Blog .

• Login to Blogger  >> Click on drop down menu >>then select "Template".
• Now you will see  "EDIT HTML" Button ,Click on it >>  and then click Proceed button .
• Now find this tag ]]></b:skin> by using CTRL + F 
• Paste below code Just Before/above ]]></b:skin> tag  and Save the Template.

ul#EgyTricksMENU,ul#EgyTricksMENU ul{
margin:0;list-style:none;padding:0;background-color:#424542;border-width:2px;border-style:solid;border-color:#FFF;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;}
ul#EgyTricksMENU ul{
display:none;position:absolute;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;padding:0 0px 0px;}
ul#EgyTricksMENU li:hover>*{
display:block;}
ul#EgyTricksMENU li{
position:relative;display:block;white-space:nowrap;font-size:0;}
ul#EgyTricksMENU li:hover{
z-index:1;}
ul#EgyTricksMENU{
font-size:0;z-index:999;position:relative;display:block;float:right;padding:0 0px 0px;}
ul#EgyTricksMENU>li{
margin:3px 0 0;}
ul#EgyTricksMENU a:active, ul#EgyTricksMENU a:focus{
outline-style:none;}
ul#EgyTricksMENU a{
display:block;vertical-align:middle;text-align:center;;text-decoration:none;font:14px Trebuchet MS;color:#FFF;cursor:pointer;padding:10px;background-color:#424542;background-image:none;background-repeat:repeat;border-width:1px 0 0 0;border-style:solid;border-color:#424542;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
ul#EgyTricksMENU ul li{
float:none;margin:3px 0 0;}
ul#EgyTricksMENU ul a{
text-align:center;;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#FFF;text-decoration:none;}
ul#EgyTricksMENU li:hover>a,ul#EgyTricksMENU li a.pressed{
background-color:#00aaff;border-color:#424542;border-style:solid;color:#000;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA8fEDx90S8AAABXSURBVBjTxY1BDoAgDASHRV/vhwHRemtSAsabl8l0t2kxs0NAF3AKqAJKtLLKasyaj82PdgGXgFuACZCA7Ngc+8S2uDfYAEXkybehTT6mFd7bDyDav3gA6ogaOZY0Sc8AAAAASUVORK5CYII=");text-decoration:none;}
ul#EgyTricksMENU span{
display:block;overflow:visible;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAFCAYAAADWkcYlAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wBFwsaEPhJNTwAAABfSURBVHja7dqxDQAxDAMxOfvv7G9iIAt80pAjqDtA1d3ZOkmqqgIAAAD8qneQT4evM86TiHMAAAC4YMJ8Qn2JcwAAAHgf6esI8zYNAAAA3HPe3OfiLtIBAADgUZwnyQeivhwKKt7BhQAAAABJRU5ErkJggg==");background-position:left center;background-repeat:no-repeat;}
ul#EgyTricksMENU ul li:hover>a,ul#EgyTricksMENU ul li a.pressed{
color:#000;text-decoration:none;}
ul#EgyTricksMENU li.topfirst>a{
border-width:0;}
ul#EgyTricksMENU li.subfirst>a{
border-width:0;}

MENU CODE

Now we can  use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout,But i will  Recommend You to Replace this menu code in your Blogger Template with already existing one., or add below code before or after already existing one menu code.

• Login to Blogger  >> Click on drop down >> Now select "Layout"
• Now you will see "Add a Gadget" button click any of them
• A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
• Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.

<ul id="EgyTricksMENU" class="topmenu">
<li class="topfirst"><a href="http://www.egytricks.com/" ">EgyTricks Menu</a></li>
<li class="topmenu"><a href="http://www.egytricks.com/" "><span>EgyTricks Menu</span></a>
<ul>
<li class="subfirst"><a href="http://www.egytricks.com/">EgyTricks Menu</a></li>
<li><a href="http://www.egytricks.com/">EgyTricks Menu</a></li>
<li><a href="http://www.egytricks.com/">EgyTricks Menu</a></li>
</ul></li>
<li class="topmenu"><a href="http://www.egytricks.com/" ">EgyTricks Menu</a></li>
</ul>

Customization

• Replace all http://www.egytricks.com/  with your URL and EgyTricks Menu with yours URL Text in above code.

Now all done if have any question or Problem according to this Menu then Comment below

Read More

Stylist Black Menu for Blogger Blogs

How to add a Black Menu to Blogger Blogs

This is a CSS based and customized beautiful Stylist menu. you can easy add it in any Blogger Blog or in any Html Sites of your wish.in past post we have also posted many other menu like Awesome White Drop Down Menu For Blogger .so we have created a another menu and going to share with all of our users .

Follow my below simple steps to add it your blogger Blog .

• Login to Blogger  >> Click on drop down menu >>then select "Template".
• Now you will see  "EDIT HTML" Button ,Click on it >>  and then click Proceed button .
• Now find this tag ]]></b:skin> by using CTRL + F 
• Paste below code Just Before/above ]]></b:skin> tag  and Save the Template.

ul#egytricks,ul#egytricks ul{
margin:0;list-style:none;padding:0;background-color:#C0C0C0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#egytricks ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;background-color:#FFF;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#d8d9da;padding:0 9px 9px;}
ul#egytricks li:hover>*{
display:block;}
ul#egytricks li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#egytricks li:hover{
z-index:1;}
ul#egytricks{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px 1px 1px 0;
*display:inline;}
* html ul#egytricks li a{
display:inline-block;}
ul#egytricks>li{
margin:0 0 0 1px;}
ul#egytricks ul>li{
margin:1px 0 0;}
ul#egytricks a:active, ul#egytricks a:focus{
outline-style:none;}
ul#egytricks a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#262626;cursor:default;padding:10px;background-color:#C0C0C0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#egytricks ul li{
float:none;margin:9px 0 0;}
ul#egytricks ul a{
text-align:left;padding:8px 0 0 0;background-color:#FFF;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#D9D9D9;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#333333;text-decoration:none;}
ul#egytricks li:hover>a,ul#egytricks li a.pressed{
background-color:#C0C0C0;border-style:none;color:#efefef;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-position:0 100px;text-decoration:none;}
ul#egytricks span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#egytricks ul li:hover>a,ul#egytricks ul li a.pressed{
background-color:#FFF;background-image:none;border-style:solid;border-color:#D9D9D9;color:#58ad41;text-decoration:none;}
ul#egytricks li.topfirst>a{
border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#d8d8d8 0px 1px 1px;}
ul#egytricks li.topfirst:hover>a,ul#egytricks li.topfirst a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#egytricks li.topmenu>a{
text-shadow:#d8d8d8 0px 1px 1px;}
ul#egytricks li.topmenu:hover>a,ul#egytricks li.topmenu a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#egytricks li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#d8d8d8 0px 1px 1px;}
ul#egytricks li.toplast:hover>a,ul#egytricks li.toplast a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#egytricks _>li>a{
padding:0;}
ul#egytricks li.subfirst>a{
border-width:0;border-style:none;padding:0;}
ul#egytricks li.subfirst:hover>a,ul#egytricks li.subfirst a.pressed{
border-style:none;}

MENU CODE

Now we can  use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout,But i will  Recommend You to Replace this menu code in your Blogger Template with already existing one., or add below code before or after already existing one menu code.

• Login to Blogger  >> Click on drop down >> Now select "Layout"
• Now you will see "Add a Gadget" button click any of them
• A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
• Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.

<ul id="egytricks" class="topmenu">
<li class="topfirst"><a href="#" style="height:15px;line-height:15px;">EgyTricks Menu 0</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>EgyTricks Menu 1</span></a>
<ul>
<li class="subfirst"><a href="#">Item 1 0</a></li>
<li><a href="#">Item 1 1</a></li>
<li><a href="#">Item 1 2</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">EgyTricks Menu 2</a></li>
<li class="toplast"><a href="#" style="height:15px;line-height:15px;">EgyTricks Menu 3</a></li>
</ul>

Customization

• Replace #  and text with yours 

Now all done if have any question or Problem according to this Menu then Comment below

Read More

Awesome White Drop Down Menu For Blogger

White Drop Down Menu For Blogger

This is a very beautiful CSS3 White Menu bar for Blogger Blog.Created by Egytricks for all Blogger User who want a Pearl White Menu for their Blog.this menu has pretty color combination of white and black.with rounded corner.

Below i will tell how to Add this Menu to your Blog with step by step tutorial..

CSS EFFECT..

Now we will add the CSS Code in Blogger Template ..  so follow my Simple below Instruction..

• Login to Blogger  >> Click on drop down menu >>then select "Template".
• Now you will see  "EDIT HTML" Button ,Click on it >>  and then click Proceed button .
• Now find this tag ]]></b:skin> by using CTRL + F 
• Paste below code Just Before/above ]]></b:skin> tag  and Save the Template.

ul#egytricks,ul#egytricks ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#egytricks ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#424542;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;padding:0 10px 10px;}
ul#egytricks li:hover>*{
display:block;}
ul#egytricks li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#egytricks li:hover{
z-index:1;}
ul#egytricks ul ul{
position:absolute;left:100%;top:0;}
ul#egytricks{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
*display:inline;}
* html ul#egytricks li a{
display:inline-block;}
ul#egytricks>li{
margin:0;}
ul#egytricks a:active, ul#egytricks a:focus{
outline-style:none;}
ul#egytricks a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:14px Trebuchet MS;color:#000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#444444;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA4pKJyhkvMAAABsSURBVCjP7ZFBCoAwEAOn6+f8/088eWmNB2EhpVXPYg9Dkt2WQpC0BaAASHWk6mzzrEMb2OZ3O3vMsvCn8A+VwWC0h6sp4nnlM0DSGsCeWfV6qldRfVAHe+2286se3h5JJUspiQhg8Ywfr3ACj/VHLxipLh8AAAAASUVORK5CYII=");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#egytricks ul li{
float:none;margin:10px 0 0;}
ul#egytricks ul a{
text-align:center;padding:4px;background-color:#424542;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#egytricks li:hover>a,ul#egytricks li a.pressed{
background-color:#444444;border-color:#C0C0C0;border-style:solid;color:#FFF;text-shadow:#FFF 0 0 1px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA4pKJyhkvMAAABsSURBVCjP7ZFBCoAwEAOn6+f8/088eWmNB2EhpVXPYg9Dkt2WQpC0BaAASHWk6mzzrEMb2OZ3O3vMsvCn8A+VwWC0h6sp4nnlM0DSGsCeWfV6qldRfVAHe+2286se3h5JJUspiQhg8Ywfr3ACj/VHLxipLh8AAAAASUVORK5CYII=");background-position:0 100px;text-decoration:none;}
ul#egytricks span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#egytricks ul span{
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAFCAYAAADWkcYlAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wBFwsaEPhJNTwAAABfSURBVHja7dqxDQAxDAMxOfvv7G9iIAt80pAjqDtA1d3ZOkmqqgIAAAD8qneQT4evM86TiHMAAAC4YMJ8Qn2JcwAAAHgf6esI8zYNAAAA3HPe3OfiLtIBAADgUZwnyQeivhwKKt7BhQAAAABJRU5ErkJggg==");padding-right:8px;}
ul#egytricks ul li:hover>a,ul#egytricks ul li a.pressed{
background-color:#424542;background-image:none;color:#F2B20E;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#egytricks li.topfirst>a{
border-width:0;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#egytricks li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;}

MENU CODE

Now we can  use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout,But i will  Recommend You to Replace this menu code in your Blogger Template with already existing one., or add below code before or after already existing one menu code.

• Login to Blogger  >> Click on drop down >> Now select "Layout"
• Now you will see "Add a Gadget" button click any of them
• A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
• Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.

<ul id="egytricks" class="topmenu">
<li class="topfirst"><a href="#" style="height:18px;line-height:18px;">Item 1 1 0</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Item 1</span></a>
<ul>
<li><a href="#">Item 1 0</a></li>
<li><a href="#"><span>Item 1 1</span></a>
<ul>
<li><a href="#">Item 1 1 0</a></li>
</ul></li>
<li><a href="#">Item 1 2</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 2</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 3</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 4</a></li>
<li class="toplast"><a href="#" style="height:18px;line-height:18px;">Item 5</a></li>
</ul>

Customization

• Replace the links in menu code # to yours Links
• and text name Item to your link text name

Now all done if have any question or Problem according to this White Drop Down css Navigation Menu for Blogger then Comment below

Read More

Most Easiest Way to Add Facebook Page Like Box to Blog

Facebook Like Box:-Facebook is now most Famous and Successful Social Network Site Today,Millions of People Use Facebook Each day to get interact with their Friends and Relative, and of most People use Feature Facebook called Facebook Page.Some People use Facebook Page for Fun/Passion and some people use this to Promote their own Business.

Today in this post i am going to share tutorial that how you can easily add Facebook Fan Page Like Box Widget to any Blog Including Blogger and WordPress .

To Add the Like Box to your need your Facebook Page Url and Blog where you want to add this widget.

Now Follow my some below Instruction to add this to your Blog ..

• Go to Facebook Like Box Generator Page here
• and Generate/Customize the the facebook page according to your need.
• After Customize your Facebook page like box 
• Click on "Get Code" button ,a box will open with your Custom Code

Now Copy the code of  both code box 1 and 2 at same place 

eg.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/egytricks" data-width="292" data-show-faces="true" data-stream="false" data-border-color="red" data-header="false"></div>

Now you can use the above copied codes in Blogger Widget  or WordPress Widget.

For Adding  Facebook Page Like Box to Blogger

• Log in to Blogger  >> Click on drop down >> Now select "Layout"
• Now you will see "Add a Gadget" button click any of them
• A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
• Click on " HTML/JavaScript" Button ,leave the Title blank and Put the above copied in Content and then after click on save button.

For Adding to WordPress

• Log in to WordPress  >> Dashboard >> Appreance >> Widgets >>
• Now Drag a widget which support text or HTML code it is mainly title as "Text" 
• and Put the above copied code in blank box and then after click on save button.

Now all done, hope Like this easy detailed tutorial for adding Facebook Page Like Box to your site ,If you get any Problem or Question the Comment below .

Read More

Easy Add meta tags Keyword to Blogger Specific Post

In this Post I am going to tell you that how you can easily add a Specific meta tags keyword in each Specific Blogger Post you want in very easy way

Why you should add a Keyword Specific keyword in each Specific post ?

Well the reason add the keyword in each Specific post is SEO Optimization,adding meta tags keyword in each post can help better ranking of site Post in Search Result.it help Search Engines to decide the category and Content post Specific Post .

How to add Different meta tags Keyword to  Each Blogger Post

Follow My Some simple Steps to add Keywords .

1.Go to Blogger and Login.

2.Navigate to Blogger Dashboard  >> Template >> and then 

3.Click on "Edit HTML" button and 

4.Find code <b:include data='blog' name='all-head-content'/>

5.After Finding Above Code Paste the below Code just below it

  <b:if cond='data:blog.url == "PAGE-URL"'>
<meta content='PAGE-DESCRIPTION' name='description'/>
<meta content='PAGE-KEYWORDS' name='keywords'/></b:if>

Now you have to modify above code in for your Easy post .

1.Replace PAGE-URL with your Page Url .

2.Replace PAGE-DESCRIPTION with the description of the post.

3.Replace PAGE-KEYWORDS with the keyword you want to use the post separate by coma .

eg.
     <b:if cond='data:blog.url == "http://www.egytricks.com/2013/03/easy-add-meta-tags-keyword-to-blogger.html"'>
<meta content='How to Add meta tags Keyword to Blogger Specific Post' name='description'/>
<meta content='Add meta tags ,meta tags to Blogger,Add meta tags to Post' name='keywords'/></b:if>

6.Now all done you can save your template .

Note-You have add this Trick code each time for each Post you want Seo Optimize it .

Comment below if any Question or Problem ..

Read More

Sites to Find Free Legal Images and Icons for Commercial Use

Images and Icons has very important role for any webmasters and developers.it make their Site ,Blog or any app dressed of an Impressive look.as you can we have used some Icons and Images to our blog site to decorated and other necessary use some of Images and Icons are made by us and some are collected form free Legal Images and Icons Source Site which provide an tons of Images and Icons and allow us to these  graphic file for Personal and Commercial Use.

Site for Free Icons and Images graphic files.

1.iconarchive.com 

This Site is one of my Favorite site which provide thousand of free icons images and icons .all most all graphic files provided here are free for Personal Desktop use and some are  also allowed for Commercial Use.it has very good user interface and no registration is necessary.and most important thing is that you get a single image in various file format and shape size and without any watermarks .

Features.

• Free Free Icons and Images graphic files for Personal and Commercial use
• Available in various format
• Available in various shape size
• without any water-marks
• No Registration required 

2.shutterstock.com

This is also a very good to find about 20 million stock photos but they provide file only in .jpg format for free user.graphic files available here are free for Personal and Commercial use but all are watermarked for free user .

Features

• Free Free Icons and Images graphic files for Personal and Commercial use
• Available in .jpg format
• Not available in various shape size
• with logo water-marks 
• Registration required 

 3.freerangestock.com

This is also a popular image sharing platform that offers contributors a revenue sharing platform for any images they contribute.

Features

• Free Free Icons and Images graphic files for Personal and Commercial use
• Available in .jpg format
• Not available in various shape size
• with logo water-marks 
• Registration required

Hope you like this Post and useful for you,if you any other Free image sharing site then share with us.

Read More

Blogger Template-5 Free and Best Blogger Templates

here we have some collection very beautiful ,Professional and free Blogger Magazine Template for all our reader. Template or Site design of any Blog has impotent role.it make impress user from their beautiful look and help with their easy Navigation.
1. Flexor Magazine Template

Template Details :-

Name -Flexor Magazine Blogger Template

Designer -SimpleWpThemes.com

Features -3 Columns

Fixed Width

Primary and Secondary navigation

Sidebar -Right Sidebar

Featured Slider Ready with Thumbnails

More Detail and Download Here.

2. NEWS MAGAZINE TEMPLATE

Template Details :-

Name -News Magazine Blogger Template

Designer -premiumbloggertemplates.com

Features -2 Columns

Fixed Width

Primary and Secondary navigation

Sidebar -Left and Right Sidebars

Featured Slider Ready with Thumbnails

More Detail and Download Here.

3. Masutoliso Magazine Template

Name -Masutoliso Magazine Blogger Template

Designer - http://www.custombloggertemplates.com

Features -2 Columns

Fixed Width

Primary and Secondary navigation

Sidebar -Right Sidebars

Featured Slider Ready with Thumbnails

More Detail and Download Here.

4. Mularonis Magazine Template

Name -Mularonis Magazine Blogger Template

Designer - http://www.simplewpthemes.com

Features -2 Columns

Fixed Width

Primary  Navigation with dropdown

Sidebar -Right Sidebars

More Detail and Download Here.

5.GreyPress Blogger Template

Name -GreyPress Blogger Template

Designer - http://www.simplewpthemes.com

Features -2 Columns

Fixed Width

1 Primary  Navigation

Sidebar -Right Sidebars

Featured Slider Ready with Thumbnails

More Detail and Download Here.

Hope you like this Blogger Template collection Post,Stay Connected with us if you want More in Future Either by Regular Visits or Email Feed.Subscribe Enjoy...

Read More

New Blogger Black Css Multi Drop down Menu

This is a new Navigation Menu for Blogger with Classic professional Stylist look.we all know that what is importance of a navigation menu in any Blog or Site.it doesn't only help your user's to get their desire content easily but also help you decrease the bounce rate of any site or blog.

How to Add the above Black Css Multi Drop down Menu to Blogger.  

Follow My Step by Steps Instruction to add this Menu to blogger site.

1. go and loging in blogger >>then go to your blogger dashboard and Click on Themplate.
2. Now you will see a " Edit HTML" button Click on it
3. Then Find the ]]></b:skin>
4. And copy the Below code and Paste Just Above the ]]></b:skin>

ul#EgyTrickmenu,ul#EgyTrickmenu ul{
margin:0;list-style:none;padding:0;background-color:#000;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCkqMDD-5jNws2B5fSM6XTK-TJs4BZaSldv46LyP_HFAIANokgIjp3Tly_WbPWS6yR7SvPNU1eJQD5kigXh4wzrzW9dmMX0sHn68M0bOoSivpn_etn9l1We-YbYb0elWrheyP-S-exVHo/s1600/mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#EgyTrickmenu ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;background-color:#333;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;padding:0 9px 9px;}
ul#EgyTrickmenu li:hover>*{
display:block;}
ul#EgyTrickmenu li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#EgyTrickmenu li:hover{
z-index:1;}
ul#EgyTrickmenu ul ul{
position:absolute;left:100%;top:0;}
ul#EgyTrickmenu{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px 1px 1px 0;
*display:inline;}
* html ul#EgyTrickmenu li a{
display:inline-block;}
ul#EgyTrickmenu>li{
margin:0 0 0 1px;}
ul#EgyTrickmenu ul>li{
margin:1px 0 0;}
ul#EgyTrickmenu a:active, ul#EgyTrickmenu a:focus{
outline-style:none;}
ul#EgyTrickmenu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#cccccc;cursor:default;padding:10px;background-color:#333;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCkqMDD-5jNws2B5fSM6XTK-TJs4BZaSldv46LyP_HFAIANokgIjp3Tly_WbPWS6yR7SvPNU1eJQD5kigXh4wzrzW9dmMX0sHn68M0bOoSivpn_etn9l1We-YbYb0elWrheyP-S-exVHo/s1600/mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#EgyTrickmenu ul li{
float:none;margin:9px 0 0;}
ul#EgyTrickmenu ul a{
text-align:left;padding:8px 0 0 0;background-color:#333;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#cccccc;text-decoration:none;}
ul#EgyTrickmenu li:hover>a,ul#EgyTrickmenu li a.pressed{
background-color:#00c4ff;border-style:none;color:#ffffff;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCkqMDD-5jNws2B5fSM6XTK-TJs4BZaSldv46LyP_HFAIANokgIjp3Tly_WbPWS6yR7SvPNU1eJQD5kigXh4wzrzW9dmMX0sHn68M0bOoSivpn_etn9l1We-YbYb0elWrheyP-S-exVHo/s1600/mainbk.png");background-position:0 100px;text-decoration:none;}
ul#EgyTrickmenu span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#EgyTrickmenu ul span{
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnuhJ_JL1qnQPQcExBsCV4OCsT7ir1IkbOLsB_kwg1e6wFqyt4R1dSq1UiAUUFDIkc4NZmAqRk_SRosq_YisxSY_Tq2VQE2xWsg-OdOp1jy_2b9k4pL1DvSM2fl60yS0pHqaKtFer4cXI/s1600/arrowsub.gif");padding-right:15px;}
ul#EgyTrickmenu ul li:hover>a,ul#EgyTrickmenu ul li a.pressed{
background-color:#333;background-image:none;border-style:solid;border-color:#262626;color:#1F80AE;text-decoration:none;}
ul#EgyTrickmenu li.topfirst>a{
border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
ul#EgyTrickmenu li.topfirst:hover>a,ul#EgyTrickmenu li.topfirst a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#EgyTrickmenu li.topmenu>a{
text-shadow:#000000 0px -1px 1px;}
ul#EgyTrickmenu li.topmenu:hover>a,ul#EgyTrickmenu li.topmenu a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#EgyTrickmenu li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;}
ul#EgyTrickmenu li.toplast:hover>a,ul#EgyTrickmenu li.toplast a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#EgyTrickmenu _>li>a{
padding:0;}
ul#EgyTrickmenu li.subfirst>a{
border-width:0;border-style:none;padding:0;}
ul#EgyTrickmenu li.subfirst:hover>a,ul#EgyTrickmenu li.subfirst a.pressed{
border-style:none;}

Now you can  use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout,But i will  strongly Recommend You to Replace this menu code in your Blogger Template with already existing one

<ul id="EgyTrickmenu" class="topmenu">
<li class="topfirst"><a href="#" style="height:15px;line-height:15px;">egytricks menu 0</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>egytricks menu 1</span></a>
<ul>
<li class="subfirst"><a href="#">Item 1 0</a></li>
<li><a href="#">Item 1 3</a></li>
<li><a href="#">Item 1 4</a></li>
<li><a href="#"><span>Item 1 5</span></a>
<ul>
<li class="subfirst"><a href="#">Item 1 5 0</a></li>
<li><a href="#">Item 1 5 1</a></li>
<li><a href="#">Item 1 5 2</a></li>
</ul></li>
<li><a href="#">Item 1 1</a></li>
<li><a href="#">Item 1 2</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">egytricks menu 2</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">egytricks menu 3</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">egytricks menu 4</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">egytricks menu 5</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">egytricks menu 6</a></li>
<li class="toplast"><a href="#" style="height:15px;line-height:15px;">egytricks menu 7</a></li>
<!-- End egytricks.com menu section -->

Replace all  # with your Link

Now all done .Enjoy.

Read More

New Egg Style Unique Social Sharing Button for Blogger

In this Post i am going to share a Egg Look and Style Social Sharing Button for Blogger.this social button it has unique egg look developed by Egytricks.com. we have already posted about many Social Sharing Button for Blogger in past.try our more Social Sharing Button for Blogger here .

Adding Egg Style Unique Social Sharing Button to Blogger

First we will add the Css Effect to Blogger.follow my below Steps for this.

• Go and Login to Blogger  -then Click on drop down menu - then click on "Template".
• Now you will see  "EDIT HTML" Button on screen ,Click on it - and then Expand Widget Templates
• Now find  ]]></b:skin> by using CTRL + F  
• Now Paste the below code Just Before/above ]]></b:skin> tag .

/* Social Sharing Widget by egytricks.com */

ul.ET-social {

list-style:none;

display:inline-block;

margin:5px auto;

}

ul.ET-social li {

display:inline;

float:left;

background-repeat:no-repeat;

}

ul.ET-social li a {

display:block;

width:50px;

height:50px;

padding-right:5px;

position:relative;

text-decoration:none;

}

ul.ET-social li a strong {

font-weight:400;

position:absolute;

left:20px;

top:-1px;

color:#fff;

z-index:9999;

text-shadow:1px 1px 0 rgba(0,0,0,0.75);

background-color:rgba(0,0,0,0.7);

-moz-border-radius:3px;

-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);

-webkit-border-radius:3px;

-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);

border-radius:3px;

box-shadow:0 0 5px rgba(0,0,0,0.5);

padding:3px;

}

ul.ET-social li.ET-facebook {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcloda1O4hJm7Xs-lqN0bg6nqDuaKJRRl7oB950nvpAptj6uwUL5zfKKI41qZY2hj34ziklB5X4ZTTKQua93NOZ0RL0Ywg4Lkn7psWKA7_prnN8QqGutjKhaIEFIF4aaw9YhpsanqfBE/s1600/facebook-icon.png);

}

ul.ET-social li.ET-twitter {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMyveZAbCEdnLXyqO9hCxHAHqj66Y_J58r5XW0lCJHHZkmGlfRtxn-VtHHUVYiOXGi2bEK4X-vCz_H8Vjhmy5UEs_2TwFtYi_qg0RWPIvlS9OTixxgEp5pgOkC98QziGbbppz4K4SvcZM/s1600/twitter-icon.png);

}

ul.ET-social li.ET-googleplus {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtgpdmg4iZcGu4alXVBgVUUPbGl416cEJwZ6KoMdmm2inv9eM2KU374-Hi_u3jpIsIuylstGS6Vl8kbWymZg3A5DJxhUDkWD8bAEod21jhnpzRugHQDejPmY-lVKGzPSd_v5MEPtFb_fE/s1600/google-plus-icon.png);

}

ul li.ET-pinterest {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauR6b-eluVXo6h95fM158sifoF6S75VzcWWH7JGKo3JYC8-BJutQJVgAZ7o_Th21XCZZEThI9RJk29o0rnSL6-R20TecTdlwWXrztZs9Xw9T-6iFHkPjSmuQAUVSKb37jjzqdQlRYsSQ/s1600/posterous-icon.png);

}

ul.ET-social li.ET-stumbleupon {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAe7q8GoNGgoptpujLwOU1yGcQ8RYQ4ukqzYkClCojNwopKJq-zja4HDP4Bevys4-51oJdhUkr0YRTA83FBhaDOAsAIkZ0iItp4588Qua7MxMi7MkhsdjyrrZ7nT2CaQ3Y50sY9sHS5pY/s1600/stumbleupon-icon.png);

}

ul.ET-social li.ET-linkedin {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizVki6BF0CFK6iIMdDirtjxexXtvi_w5fkF_PdCujheteoxnVJqBjsEqqpzJMwAntqk_6cTrYSb23_SJ28QgBUWmyy14e6wU-d2jcb7xtDm_yijzW94sCAfQrZPOO4V4ld0pvHeZ80_L8/s1600/linkedin-icon.png);

}

ul.ET-social li.ET-reddit {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh71rt8lRD9CQRassseMg5gPayT8bZRHgAV-PjoTnc-IoYFKUhf7j3mQcf2rNeQM0JSUGfdbdVGFzljy-GBdYit-5G1ShU4Lf4psHs-sSVDW0HgqgQWxiy9-vRvT0aq9F4XoCXbyQE7QLs/s1600/reddit-icon.png);

}

#ET-cssanimation:hover li {

opacity:0.2;

}

#ET-cssanimation li {

-webkit-transition-property:opacity;

-webkit-transition-duration:500ms;

-moz-transition-property:opacity;

-moz-transition-duration:500ms;

}

#ET-cssanimation li a strong {

opacity:0;

-webkit-transition-property:opacity, top;

-webkit-transition-duration:300ms;

-moz-transition-property:opacity, top;

-moz-transition-duration:300ms;

}

#ET-cssanimation li:hover {

opacity:1;

}

#ET-cssanimation li:hover a strong {

opacity:1;

top:-10px;

}

/* Social Sharing Widget by egytricks.com */

• Now Find the below code or similar if can't find exact code

<div class='post-footer-line post-footer-line-1'>

• And add the below Code just Below it

<b:if cond='data:blog.pageType == &quot;index&quot;'>

 <span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>

 <script type='text/javascript'>var x=&quot;<data:post.title/>&quot;,y=&quot;<data:post.url/>&quot;;readmore(&quot;p<data:post.id/>&quot;)</script><b:else/><data:post.body/><center>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='font-size: 22px;'><b>Like the Post? Do share with your Friends.</b></div>

    <ul class='ET-social' id='ET-cssanimation'>

    <li class='ET-facebook'>

    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>

    </li>

    <li class='ET-twitter'>

    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>

    </li>

    <li class='ET-googleplus'>

<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>

    </li>

    <li class='ET-pinterest'>

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>

    </li>

    <li class='ET-stumbleupon'>

    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>

    </li>

    <li class='ET-linkedin'>

    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>

    </li>

    <li class='ET-reddit'>

    <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>

    </li>

    </ul>

    </b:if></center>

</b:if>

Now all Done Save the Template .Don't hesitate to comment below if you got any problem or question.Enjoy.

Read More

Simple Vertical CSS Menu for Blogger

Simple Vertical  CSS Menu for Blogger

This is quite simple look vertical menu for blogger ,Well in past posts we have paste many article about blogger menu like Pearl White Menu to Blogger and In this Post I am going to share a another Vertical CSS Menu for Blogger to you ,all have a look at our others menu blogger Menu

ADDING CSS EFFECT

Now we will add the CSS Code in Blogger Template ..  so follow my Simple below Instruction..

• Login to Blogger  >> Click on drop down menu >>then select "Template".
• Now you will see  "EDIT HTML" Button ,Click on it >>  and then click Proceed button .
• Now find this tag ]]></b:skin> by using CTRL + F 
• Paste below code Just Before/above ]]></b:skin> tag  and Save the Template.

ul {
list-style: none;
margin: 0;
padding: 0;
}

#TWmenu {
width: 200px;
border-style: solid solid none solid;
border-color: #677D92;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#TWmenu li a {
height: 32px;
  voice-family: "\"}\"";
  voice-family: inherit;
  height: 24px;
text-decoration: none;
}

#TWmenu li a:link, #TWmenu li a:visited {
color: #fff;
display: block;
background: url(menu.gif);
padding: 8px 0 0 10px;
}

#TWmenu li a:hover {
color: #283A50;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#TWmenu li a:active {
color: #283A50;
background: url(menu.gif) 0 -64px;
padding: 8px 0 0 10px;
}

ADDING MENU CODE

Now you can use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout.

• Login to Blogger  >> Click on drop down >> Now select "Layout"
• Now you will see "Add a Gadget" button click any of them
• A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
• Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.

 <div id="TWmenu">
  <ul>
    <li><a href="http://www.egytricks.com/">Your Link 1</a></li>
    <li><a href="http://www.egytricks.com/">Your Link 2</a></li>
    <li><a href="http://www.egytricks.com/">Your Link 3</a></li>
    <li><a href="http://www.egytricks.com/" title="Free CSS Menus">EgyTricks blogger Menus</a></li>
    <li><a href="http://www.egytricks.com/">Your Link 5</a></li>
    <li><a href="http://www.egytricks.com/">Your Link 6</a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.egytricks.com/" title="E-lusion">EgyTricks Blogger Menus</a></li>
  </ul>
</div>>

Customization the Menu

• Replace the links in menu code http://www.egytricks.com/ to yours Links
• and text name Link Name to your link text name

Now all done if have any question or Problem according to this Vertical CSS Navigation Menu for Blogger then Comment below

Read More

Add Blogger Related Posts with Image CSS Rotation Effect

How to Related Post with Image CSS Rotation Effect for Blogger.

Relate post widget a No-1 Widget to boost the traffic of Site/Blog .well In this Post I am going to tell you how to add a very beautiful and stylist css effect Relate post widget to Blogger in very easy way.in Past i already posted about some Related Post Widget for blogger like Blogger-related-posts-widget-with-Thumbnails

Now we will add the CSS Code in Blogger Template ..  so follow my Simple below Instruction..

• Login to Blogger  >> Click on drop down menu >>then select "Template".
• Now Click on  "EDIT HTML" Button >>then click Proceed button and then click on  Expand Widget Templates.
• Now find this tag  </head> by using CTRL + F 
• Paste below code Above  </head>  tag  and Save the Template.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#related-posts img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0FBK7QJQP7fuuhFbD_fNzkZtphS3EeNYaBnyHFkF7npuff4YmRTI87hANlpQRpKWOGMgK0Slq6K-RT5T0eU5qyCJ3jzBK8vVLlOCs6omgNjtWdKWc4q5LaMOhNpQuRs1Y9g0PlMJP-Og/s1600/noimage.png&quot;;
var maxresults=4;var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://egytricks.googlecode.com/files/Egytricks-Related-Post-Blogger.js' type='text/javascript'/>
</b:if>

• Now Find 

<div class='post-footer-line post-footer-line-1'>

And add the below Code just Below it .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- remove --><div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<b:if cond='data:post.isFirstPost'>
<Script Language='Javascript'>
document.write(unescape('%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%65%67%79%74%72%69%63%6B%73%2E%63%6F%6D%2F%32%30%31%33%2F%30%32%2F%6E%65%77%2D%62%6C%6F%67%67%65%72%2D%72%65%6C%61%74%65%64%2D%70%6F%73%74%2D%77%69%74%68%2D%69%6D%61%67%65%2D%63%73%73%2E%68%74%6D%6C%27%3E%3C%69%6D%67%20%61%6C%74%3D%27%52%65%6C%61%74%65%64%20%50%6F%73%74%73%20%57%69%64%67%65%74%20%46%6F%72%20%42%6C%6F%67%67%65%72%20%77%69%74%68%20%54%68%75%6D%62%6E%61%69%6C%73%27%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%34%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%49%72%5F%77%51%48%63%41%48%5A%67%2F%55%52%45%4A%5A%4F%64%5F%74%62%49%2F%41%41%41%41%41%41%41%41%49%41%41%2F%71%45%54%6C%6B%39%79%67%67%47%30%2F%73%31%36%30%30%2F%62%6C%6F%67%67%65%72%2D%77%69%64%67%65%74%73%2E%70%6E%67%27%20%73%74%79%6C%65%3D%27%62%6F%72%64%65%72%3A%20%30%27%2F%3E%3C%2F%61%3E%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%65%67%79%74%72%69%63%6B%73%2E%63%6F%6D%2F%27%3E%3C%69%6D%67%20%61%6C%74%3D%27%42%6C%6F%67%67%65%72%20%77%69%64%67%65%74%27%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%34%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%49%72%5F%77%51%48%63%41%48%5A%67%2F%55%52%45%4A%5A%4F%64%5F%74%62%49%2F%41%41%41%41%41%41%41%41%49%41%41%2F%71%45%54%6C%6B%39%79%67%67%47%30%2F%73%31%36%30%30%2F%62%6C%6F%67%67%65%72%2D%77%69%64%67%65%74%73%2E%70%6E%67%27%20%73%74%79%6C%65%3D%27%62%6F%72%64%65%72%3A%20%30%27%2F%3E%3C%2F%61%3E'));
//-->
</Script>
</b:if>
<!-- remove --></b:if>

Now all done if have any question or Problem according to this Related Post with Image CSS Rotation Effect for Blogger then Comment below

Read More

Social Button-Add a Social Sharing Button for Blogger

This is a New and Unique Social Sharing for Blogger,well we all know how Adding a social Share button to Blogger is important.with the help Social Sharing button your can bookmarks and share theirs favorite post with friends.you will also get a free back-link if some one bookmarks your post to any site and this back-link can help you to increase you site rank Google SERP.
So today i am going to Share a Simple Classic look Social sharing buttons for Blogger.

How to add this Social Sharing to Blogger below each post 

Follow below simple steps to add this Email Subscribe Box to Blogger

• Login to Blogger > Click on drop down menu >then select "Template".
• Now you will see  "EDIT HTML" Button ,Click on it >and then click on Proceed button .Now find code like this 

<div class='post-footer-line post-footer-line-1'>

or

<div class='post-footer-line post-footer-line-2'/>

Note:-Above code may be differ According to template try to Find your below post  code ,if you can send me your template to my mail.

Now After Finding your code ,Add the below Code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;);'><b>Kindly Bookmark this Post if you Like this</b></span><br/><br/>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix0SdEeDq5NKjCB2csJOY8Rrv5_mhdL0-OgPUt-x5IzT02jhshxNfbr1407FyjwZlS-QQLJim8YOAk4olfCRRyx1FhtofFnlA5C4V_4W0H7A8qeD8UuHgSVHT2FIn_S4o8V0S0xB_7AtU/s1600/te.png '/></a>
<!--DIGG-->
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisD0xTY9dn5Bga7_S7Q8KNor9_m7iK1RzXiKoX5UtIvBHNYnGrn7oLa98GuKAjulJyCUqfCiDoX9cPlpfWpD3j9COc63BNgOvCJMilBG9Fmy4tyWMvo0a-1q7LZCGqCdjB8Ak4L72ivJE/s1600/di.png '/></a>
<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdDIAPRyvXGCwLtATsv6oqRTtSmOuXzfOM176H1ol6Rc0vWKYTc055naCSO3smPncjcElvesLRereog1Vz8HlhOzSp8kF5MKtDDyowBqvKJ8ryauO0jwmC9_7NghlICLT22PmJn2j0a1w/s1600/st.png'/></a>
<!--Reddit-->
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioqoKab89m_zGA4yEeB2jIb_oifhhvHr7nq5RDl-rZUX4GLXDwuQQBbDilYcmhyphenhyphenWfdBW2cFT9yuIQA-enZhr_pxTDieP_EWTffMpbXKG52XAA-qfSeKhd_bxURlGlrwrd5bn5p3uc3A1s/s1600/re.png'/></a>
<!--Facebook-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPtFXFifnvIQNysmflTqZzAV2iw8u_PbVA6Kil-aZj_5Jgj-Ndy_Bd_xgU6l38hgX2BZy4CpbXHuQlKVeN_z96BbDM4_9JkYr4cPxnK65c3Y-XHp0LCW5NutEih8UpUE8k1DhjzKzcCKU/s1600/fa.png '/></a>
<!-- Twitter -->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPGHRXZqnNHJB3VCeIXnldyu6hfc-1Dfjqqtc_xim9UMHWtqXbl07PJd1HwkJiOdyBlMwg3l4RHHfY8mwhDxfeJrEmsRJYCFbO9jBbIKde1VPsU_1pdCJsIP1q1KF_DfEnJix-1bJJdXI/s1600/tw.png'/></a></center></b:if>

Now all done if get any Problem adding this then comment below .
Also Check Our other Social Sharing Buttons for Blogger

Read More