Zenu's Place: Blogger

6 Best Blogger Template Generators

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
6 Best Blogger Template Generators</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-VqB8eOGdV90/UiGt5l3d1lI/AAAAAAAAB_0/LzEroFYqlaQ/s1600/temmplate-generators.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Template Generators" border="0" height="277" src="http://2.bp.blogspot.com/-VqB8eOGdV90/UiGt5l3d1lI/AAAAAAAAB_0/LzEroFYqlaQ/s400/temmplate-generators.jpg" title="" width="400" /></a></div>
<div>
<br /></div>
<div>
There are thousands of free and premium templates available for Blogger but some people don't like using someone else's work or don't get satisfied with them. But creating your own Blogger template is not easy though.</div>
<div>
Blogger allows users to customize their templates but as usual the default tool is limited. You can just change container widths, change colours and change background.</div>
<div>
<br /></div>
<div>
You need programming skills as well as CSS, HTML, and XML knowledge to create one yourself from the scratch. But don't worry, here in this post i'm listing some useful tools to save your time.</div>
<div>
<br /></div>
<div>
Using these tools you can create very own custom template for your Blogger blog without any programming and web designing knowledge. </div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
1. Artisteer</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-GScnLzvh53Q/UiGk5obyqII/AAAAAAAAB_U/W5UU-ve7tb4/s1600/artisteer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Artisteer Blogger Template Generator" border="0" height="282" src="http://2.bp.blogspot.com/-GScnLzvh53Q/UiGk5obyqII/AAAAAAAAB_U/W5UU-ve7tb4/s400/artisteer.png" title="" width="400" /></a></div>
<div>
<br /></div>
<div>
The first and the best and the most powerful tool I'm sharing is <b>Artisteer</b>. It's a software that let's you design your own template for all the CMS sites like Joomla, Drupal, and Wordpress, Blogger etc.</div>
<div>
It provides a very user-friendly interface even those without any technical knowledge can use it easily. It looks similar to MS Office.<br />
The template can by customize in any way, headers, flash, custom image backgrounds, gradients, custom colors, fonts, dynamic sheets and much more.<br />
<br />
In my views the only thing it lacks is editing premade templates. The templates you make using Artisteer itself or download from any other site can not be edited in Artisteer.<br />
<br />
Link: <a href="http://www.artisteer.com/" rel="nofollow" target="_blank">http://www.artisteer.com</a><br />
<h3 style="text-align: left;">
2. TrixTG</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-DhK5uX7t_Us/UiGi249YuFI/AAAAAAAAB_A/Fp_tuiGKnjI/s1600/Trix+Template+Generator.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Trix Blogspot Template Generator" border="0" height="186" src="http://3.bp.blogspot.com/-DhK5uX7t_Us/UiGi249YuFI/AAAAAAAAB_A/Fp_tuiGKnjI/s400/Trix+Template+Generator.gif" title="" width="400" /></a></div>
<div>
<br /></div>
<b>TrixTG</b> or <b>Trix Blogspot Template Generator</b> is another good Blogger template generator tool that works online. It's a user-friendly and advanced tool, you can create your own template from scratch or edit some premade templates available in the tool. You don't even need to refresh or reload the page to see the changes you make, it makes changes in the template on the go, so it becomes even more easier to design a great template that completely meets your requirements and desires.<br />
<br />
Link: <a href="http://e-infotainment.com/trixapps/trixtg/trixtgv2/application.php" rel="nofollow" target="_blank">http://e-infotainment.com/trixapps/trixtg/trixtgv2/application.php</a><br />
<br />
<h3 style="text-align: left;">
3. PsycHo</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-XnrlEekC3JY/UiGi4cxccJI/AAAAAAAAB_I/dSI7SR5WtNw/s1600/psycho-template-generator.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="PsycHo BloggerTemplate Generator" border="0" height="315" src="http://1.bp.blogspot.com/-XnrlEekC3JY/UiGi4cxccJI/AAAAAAAAB_I/dSI7SR5WtNw/s320/psycho-template-generator.png" title="" width="320" /></a></div>
<div>
<br /></div>
<div>
<b>PsycHo</b> is also another online tool to create Blogger templaes created by Aideen. It's not as advanced as TrixTG and Artisteer but it is much more easier-to-use tool as compared to TrixTG and Artisteer. You can design and get your own custom template in just a few clicks.</div>
<div>
<br />
Link: <a href="http://psyc.horm.org/" target="_blank">http://psyc.horm.org</a><br />
<br /></div>
<h3 style="text-align: left;">
4. Pimp My Profile</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-IS5c7jxaczY/UiGi2y92U7I/AAAAAAAAB-8/mz1qdQpgj4o/s1600/Pimp+My+Profile+Blogger+Template+Generator.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Pimp-My-Profile BloggerTemplate Generator" border="0" height="210" src="http://3.bp.blogspot.com/-IS5c7jxaczY/UiGi2y92U7I/AAAAAAAAB-8/mz1qdQpgj4o/s400/Pimp+My+Profile+Blogger+Template+Generator.gif" title="" width="400" /></a></div>
<div>
<br /></div>
<div>
Pimp My Profile is just another online tool, but the interface is not so good. The interface of Pimp My Profile is full of ads and also lacks some advanced features, however the reason i have included this tool in my post is that it's easy to create templates in it. Of course it has annoying ads but the actual interface is pretty easy and you can get your template in 7 steps. Each step is for customizing a different part of the page.<br />
<br />
Link: <a href="http://www.pimp-my-profile.com/generators/blogger.php" rel="nofollow" target="_blank">http://www.pimp-my-profile.com/generators/blogger.php</a></div>
<div>
<br /></div>
<h3 style="text-align: left;">
5. DOTEMPLATE</h3>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-UxTRWoc89PQ/UiGk5kHfWJI/AAAAAAAAB_Q/i2XQnawFHus/s1600/dotemplate.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="DOTEMPLATE BloggerTemplate Generator" border="0" height="266" src="http://4.bp.blogspot.com/-UxTRWoc89PQ/UiGk5kHfWJI/AAAAAAAAB_Q/i2XQnawFHus/s400/dotemplate.png" title="" width="400" /></a></div>
<div>
<br /></div>
<div>
<b>DOTEMPLATE</b> is one of the best online template generators, It's free, It's easy and works just s good as a desktop software. It's a flash-based tool where you can choose from hundreds of free website and blog templates and then customize them to fit your needs before downloading. I personally recommend this online tool after Artisteer.<br />
<br />
Link: <a href="http://doratemplates.com/" rel="nofollow" target="_blank">http://doratemplates.com</a></div>
<div>
<br /></div>
<h3 style="text-align: left;">
6. Firdamatic Layout Generator</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-SPXvlr38WQ8/UiGl32R3eII/AAAAAAAAB_k/k_T2-m_MOv4/s1600/firdamatic.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Firdamatic BloggerTemplate Generator" border="0" height="275" src="http://3.bp.blogspot.com/-SPXvlr38WQ8/UiGl32R3eII/AAAAAAAAB_k/k_T2-m_MOv4/s400/firdamatic.png" title="" width="400" /></a></div>
<div>
<br /></div>
<div>
<b>Firdamatic</b> is the simplest one! It doesn't requires any designing, all you need to do is just fill a small form that includes the colors, header image, your links etc. You can either choose to generate a two-column template or three-column template.<br />
<br />
Link: <a href="http://www.wannabegirl.org/firdamatic" rel="nofollow" target="_blank">http://www.wannabegirl.org/firdamatic</a><br />
<br /></div>
</div>

6 Best Blogger Template Generators

6 Best Blogger Template Generators There are thousands of free and premium templates available for Blogger but some people don't...

5 Awesome CSS3 Drop Down Navigation Menu For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
CSS3 Drop Down Navigation Menu For Blogger</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-KJQIA3i6jPU/Uh-sXhfOCGI/AAAAAAAAB9g/CYPZHvdLVwo/s1600/CSS3+Drop+Down+Navigation+Menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="CSS3 Drop Down Navigation Menu" border="0" height="290" src="http://2.bp.blogspot.com/-KJQIA3i6jPU/Uh-sXhfOCGI/AAAAAAAAB9g/CYPZHvdLVwo/s400/CSS3+Drop+Down+Navigation+Menu.jpg" title="" width="400" /></a></div>
<div>
<br /></div>
<div>
This is just a simple but awesome looking drop down navigation menu for Bloggers or any other webpage. It's based on simple CSS3 and HTML codes. Some icons are also included with sub-menu's. </div>
<div>
<br />
Demo: <a href="http://zenkhas.blogspot.com/p/navigation-menu-demo_30.html" target="_blank">CSS3 Drop Down Navigation Menu Demo Page</a></div>
<div>
<br /></div>
<div>
Let me show you how to implement this:</div>
<div>
<br /></div>
<h4 style="text-align: left;">
Step 1:</h4>
<div>
Go to your Blogger Dashboard > Template > Edit HTML</div>
<div>
<br /></div>
<h4 style="text-align: left;">
Step 2:</h4>
<div>
Find this skin code by pressing <b>CTRL+F</b></div>
<div>
<br />
<pre class="brush:html;">]]></b:skin>
</pre>
</div>
<div>
<br />
<h4 style="text-align: left;">
Step 3:</h4>
Paste this CSS code just before the skin tag:<br />
<pre class="brush:css;">

/* The CSS Code for the menu starts here zenkhas.blogspot.com */
.zenu_menu,.zenu_menu ul,.zenu_menu li,.zenu_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.zenu_menu { 
 height: 40px;
 width: 525px;
 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.zenu_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.zenu_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.zenu_menu li:first-child a { border-left: none; }
.zenu_menu li:last-child a{ border-right: none; }

.zenu_menu li:hover > a { color: #8fde62; }

.zenu_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

<li><a href="#">Home</a></li>
 <li><a href="#">Likes</a></li>
 <li><a href="#">Views</a>

<ul>
   <li><a href="#" class="documents">Documents</a></li>
   <li><a href="#" class="messages">Messages</a></li>
   <li><a href="#" class="signout">Sign Out</a></li>
  </ul>

</li>
 <li><a href="#">Uploads</a></li>
 <li><a href="#">Videos</a></li>
    <li><a href="#">About</a></li>
 <li><a href="http://zenkhas.blogspot.com/p/contact-us.html">Contact us</a></li>
</ul>

</pre>
The default theme is black, to use other themes just change the CSS codes above:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/--KnbwNeyyD8/Uh-gLIyz-bI/AAAAAAAAB8s/3XhTunx6GlM/s1600/css3-dropdown.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Black CSS3 Drop Down Navigation Menu" border="0" height="101" src="http://1.bp.blogspot.com/--KnbwNeyyD8/Uh-gLIyz-bI/AAAAAAAAB8s/3XhTunx6GlM/s320/css3-dropdown.png" title="" width="320" /></a></div>
<br />
<br />
<br />
Also Read: <a href="http://zenkhas.blogspot.com/2013/08/shareholic-clone-social-sharing-widget.html" target="_blank">Shareholic Clone Social Sharing Widget For Blogger</a><br />
<h3 style="text-align: left;">
More Themes</h3>
</div>
<h4 style="text-align: left;">
Blue</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-FGWDHsXV2UM/Uh-hOB4fS_I/AAAAAAAAB84/FsQFw-eA1oc/s1600/dropdown-navigation-blue.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blue CSS3 Drop Down Navigation Menu" border="0" height="96" src="http://2.bp.blogspot.com/-FGWDHsXV2UM/Uh-hOB4fS_I/AAAAAAAAB84/FsQFw-eA1oc/s320/dropdown-navigation-blue.png" title="" width="320" /></a></div>
<div>
<br /></div>
<div>
<pre class="brush:css;">/* The CSS Code for the menu starts here zenkhas.blogspot.com */
.zenu_menu,.zenu_menu ul,.zenu_menu li,.zenu_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.zenu_menu { 
 height: 40px;
 width: 525px;
 background: #3B98EE;
 
 
 background: -webkit-linear-gradient(top, #42A4FF 0%,#39B1F5 100%);
 background: -moz-linear-gradient(top, #42A4FF 0%,#39B1F5 100%);
 background: -o-linear-gradient(top, #42A4FF 0%,#39B1F5 100%);
 background: -ms-linear-gradient(top, #42A4FF 0%,#39B1F5 100%);
 background: linear-gradient(top, #42A4FF 0%,#39B1F5 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.zenu_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.zenu_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #1584EB;
 border-right: 1px solid #248DFF;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.zenu_menu li:first-child a { border-left: none; }
.zenu_menu li:last-child a{ border-right: none; }

.zenu_menu li:hover > a { color: #B662DE; }

.zenu_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #5BB5FC;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.zenu_menu li:hover > ul { opacity: 1; }
.zenu_menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.zenu_menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.zenu_menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #81C1F3;
}
.zenu_menu ul li:last-child a { border: none; }
.zenu_menu a.documents { background: url(http://1.bp.blogspot.com/-jexux1XWLhM/Uh-anjzHSnI/AAAAAAAAB8c/AEB-kw7yJVQ/s1600/docs-red.png) no-repeat 6px center; }
.zenu_menu a.messages { background: url(http://2.bp.blogspot.com/-xdcdqS7j3RI/Uh-amn1D44I/AAAAAAAAB8E/6rWq8tq8wKs/s1600/bubble-red.png) no-repeat 6px center; }
.zenu_menu a.signout { background: url(http://1.bp.blogspot.com/-TDHaxfgOch4/Uh-alNGGR8I/AAAAAAAAB7k/0MWEm0Wauw0/s1600/arrow-red.png) no-repeat 6px center; }
 
</pre>
<br />
<h4 style="text-align: left;">
Green</h4>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-yonrUQ2RBe8/Uh-hbUIqDxI/AAAAAAAAB9M/k_kH7F-eckQ/s1600/dropdown-navigation-green.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Green CSS3 Drop Down Navigation Menu" border="0" height="98" src="http://1.bp.blogspot.com/-yonrUQ2RBe8/Uh-hbUIqDxI/AAAAAAAAB9M/k_kH7F-eckQ/s320/dropdown-navigation-green.png" title="" width="320" /></a></div>
<div>
<br /></div>
<pre class="brush:css;"> /* The CSS Code for the menu starts here zenkhas.blogspot.com */
.zenu_menu,.zenu_menu ul,.zenu_menu li,.zenu_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.zenu_menu { 
 height: 40px;
 width: 525px;
 background: #14A300;
 background: -webkit-linear-gradient(top, #0BA318 0%,#05D13E 100%);
 background: -moz-linear-gradient(top, #0BA318 0%,#05D13E 100%);
 background: -o-linear-gradient(top, #0BA318 0%,#05D13E 100%);
 background: -ms-linear-gradient(top, #0BA318 0%,#05D13E 100%);
 background: linear-gradient(top, #0BA318 0%,#05D13E 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.zenu_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.zenu_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #09CF29;
 border-right: 1px solid #108D2F;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.zenu_menu li:first-child a { border-left: none; }
.zenu_menu li:last-child a{ border-right: none; }

.zenu_menu li:hover > a { color: #B7F179; }

.zenu_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #45DB5D;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.zenu_menu li:hover > ul { opacity: 1; }
.zenu_menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.zenu_menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.zenu_menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #1FC439;
}
.zenu_menu ul li:last-child a { border: none; }
.zenu_menu a.documents { background: url(http://3.bp.blogspot.com/-FyBJC4uIY68/Uh-amoubk5I/AAAAAAAAB8I/TklS16utxUw/s1600/docs-green.png) no-repeat 6px center; }
.zenu_menu a.messages { background: url(http://3.bp.blogspot.com/-NlaNPWHWgDE/Uh-alxC53PI/AAAAAAAAB74/Tz9GRgxxKGo/s1600/bubble-green.png) no-repeat 6px center; }
.zenu_menu a.signout { background: url(http://1.bp.blogspot.com/-_qMtxWntVUw/Uh-akxw2ikI/AAAAAAAAB7o/sZatEaWRGrc/s1600/arrow-green.png) no-repeat 6px center; }
</pre>
<br />
<br />
<h4 style="text-align: left;">
Red </h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-PW28poGA6iM/Uh-hba6TF5I/AAAAAAAAB9E/8Dy3P8lHpaw/s1600/dropdown-navigation-red.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Red CSS3 Drop Down Navigation Menu" border="0" height="103" src="http://1.bp.blogspot.com/-PW28poGA6iM/Uh-hba6TF5I/AAAAAAAAB9E/8Dy3P8lHpaw/s320/dropdown-navigation-red.png" title="" width="320" /></a></div>
<pre class="brush:css;">/* The CSS Code for the menu starts here zenkhas.blogspot.com */
.zenu_menu,.zenu_menu ul,.zenu_menu li,.zenu_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.zenu_menu { 
 height: 40px;
 width: 525px;
 background: #F80000;
 background: -webkit-linear-gradient(top, #B60000 0%,#FF4F4F 100%);
 background: -moz-linear-gradient(top, #B60000 0%,#FF4F4F 100%);
 background: -o-linear-gradient(top, #B60000 0%,#FF4F4F 100%);
 background: -ms-linear-gradient(top, #B60000 0%,#FF4F4F 100%);
 background: linear-gradient(top, #B60000 0%,#FF4F4F 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.zenu_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.zenu_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #FF0000;
 border-right: 1px solid #AD6F7E;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.zenu_menu li:first-child a { border-left: none; }
.zenu_menu li:last-child a{ border-right: none; }

.zenu_menu li:hover > a { color: #FFF0BE; }

.zenu_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #E63131;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.zenu_menu li:hover > ul { opacity: 1; }
.zenu_menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.zenu_menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.zenu_menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #FF5959;
}
.zenu_menu ul li:last-child a { border: none; }
.zenu_menu a.documents { background: url(http://1.bp.blogspot.com/-jexux1XWLhM/Uh-anjzHSnI/AAAAAAAAB8c/AEB-kw7yJVQ/s1600/docs-red.png) no-repeat 6px center; }
.zenu_menu a.messages { background: url(http://2.bp.blogspot.com/-xdcdqS7j3RI/Uh-amn1D44I/AAAAAAAAB8E/6rWq8tq8wKs/s1600/bubble-red.png) no-repeat 6px center; }
.zenu_menu a.signout { background: url(http://1.bp.blogspot.com/-TDHaxfgOch4/Uh-alNGGR8I/AAAAAAAAB7k/0MWEm0Wauw0/s1600/arrow-red.png) no-repeat 6px center; }
</pre>
<br />
<h4 style="text-align: left;">
Facebook Style</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-54ZrIg5p8Bg/Uh-hbAQTcrI/AAAAAAAAB9A/Ou_a-m8nLG4/s1600/dropdown-navigation-facebook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Style CSS3 Drop Down Navigation Menu" border="0" height="117" src="http://2.bp.blogspot.com/-54ZrIg5p8Bg/Uh-hbAQTcrI/AAAAAAAAB9A/Ou_a-m8nLG4/s320/dropdown-navigation-facebook.png" title="" width="320" /></a></div>
<div>
<br /></div>
<pre class="brush:css;">    /* The CSS Code for the menu starts here zenkhas.blogspot.com */
.zenu_menu,.zenu_menu ul,.zenu_menu li,.zenu_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.zenu_menu { 
 height: 40px;
 width: 525px;
 background: #45619D;
 background: -webkit-linear-gradient(top, #45619D 0%,#6086D8 100%);
 background: -moz-linear-gradient(top, #45619D 0%,#6086D8 100%);
 background: -o-linear-gradient(top, #45619D 0%,#6086D8 100%);
 background: -ms-linear-gradient(top, #45619D 0%,#6086D8 100%);
 background: linear-gradient(top, #45619D 0%,#6086D8 100%);
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
}
.zenu_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.zenu_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #77A3FF;
 border-right: 1px solid #45619D;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.zenu_menu li:first-child a { border-left: none; }
.zenu_menu li:last-child a{ border-right: none; }

.zenu_menu li:hover > a { color: #FFF; }

.zenu_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #FFF;
 
 border-width: 0px 1px 1px 1px;
border-color: #6B91E4;
border-style: solid;

-webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 0px 0px;
 border-radius: 0 0 0px 0px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.zenu_menu ul li a:hover {
     color: #7B9FEC;
    }
.zenu_menu ul li:last-child a { border: none; }
.zenu_menu a.documents { background: url(http://2.bp.blogspot.com/-GzZpurhLMZw/Uh-ammDn5-I/AAAAAAAAB8Q/ZtLy4-e66bo/s1600/docs-fb.png) no-repeat 6px center; }
.zenu_menu a.messages { background: url(http://2.bp.blogspot.com/-r3y5G3Iic_w/Uh-al8aGZVI/AAAAAAAAB70/oU0UHHvxgxw/s1600/bubble-fb.png) no-repeat 6px center; }
.zenu_menu a.signout { background: url(http://1.bp.blogspot.com/-rgQ-UAVYpDM/Uh-agzsQElI/AAAAAAAAB7c/5DCf9AtpW1M/s1600/arrow-fb.png) no-repeat 6px center; }
    
</pre>
Enjoy this awesome collection of Navigation menu's :)</div>

5 Awesome CSS3 Drop Down Navigation Menu For Blogger

CSS3 Drop Down Navigation Menu For Blogger This is just a simple but awesome looking drop down navigation menu for Bloggers or any o...

Shareholic Clone Social Sharing Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-PEWyW-8aTl0/UgZze5386ZI/AAAAAAAABjY/SbGt1BMY5xo/s1600/Social_Sharing_Widget_Zenu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Social Buttons Widget" border="0" height="195" src="http://2.bp.blogspot.com/-PEWyW-8aTl0/UgZze5386ZI/AAAAAAAABjY/SbGt1BMY5xo/s400/Social_Sharing_Widget_Zenu.jpg" title="" width="400" /></a></div>
<br />
Hello people, today I'm sharing the clone widget of Shareholic Social Sharing Widget, since the original Shareholic has some issues like it requires the user to allow Shareholic App to share the link on Facebook or Twitter, which is very annoying and can prevent your readers from sharing your post to the most popular Social Networks.<br />
<div>
<br /></div>
<div>
<b>Also red:</b> <a href="http://zenkhas.blogspot.com/2013/08/5-awesome-css3-drop-down-navigation.html" target="_blank">5 Awesome CSS3 Drop Down Navigation Menu For Blogger</a><br />
<br /></div>
<div>
So here is a custom widget made by me that looks exactly like the original one, it doesn't requires any app permission to share your page or post.</div>
<div>
Even though there are hundreds of social sharing widgets out there, none of them look as neat and simple as this widget, the icons are medium size and sleek that gives a bit of Windows Metro look.</div>
<div>
<br /></div>
<div>
Here is the preview:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-AVlhckOiidM/UgZJMaCL1dI/AAAAAAAABjI/HwhTRUoHBPo/s1600/share-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="139" src="http://4.bp.blogspot.com/-AVlhckOiidM/UgZJMaCL1dI/AAAAAAAABjI/HwhTRUoHBPo/s640/share-widget.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
The only difference between this clone and original is the tooltip effect on mouse-over. The tooltip effect can be added using a small jQuery plugin called tiptip.</div>
<div>
<br /></div>
<div>
To add this widget follow these steps:</div>
<div>
<br /></div>
<div>
1. Go to Blogger Dashboard > Template > Edit HTML</div>
<div>
<br /></div>
<div>
and press CTRL+F to find this code:</div>
<div>
<pre class="brush:html;"><b>]]>&lt;/b:skin></b>
</pre>
</div>
<div>
<br /></div>
<div>
<br />
<br />
2. Now add the following code just before the code that you searched:<br />
<br />
<pre class="brush:css;">     /* share buttons */

.share_wrapper .delicious {
 background: url(http://4.bp.blogspot.com/-3ELy-V1dg1k/UdHmLinboHI/AAAAAAAAAyw/xNxxV_00C3Q/s70/dscuss2.png); 
}
.share_wrapper .gplus {
 background: url(http://2.bp.blogspot.com/-UgyJvNw1qJA/UdHNtMmjIII/AAAAAAAAAxw/XJ_wYlMGEvY/s70/gplus.png); 
}
.share_wrapper .twitter {
 background: url(http://3.bp.blogspot.com/-nkAt4by0s7M/UdHNuU5DpAI/AAAAAAAAAyg/jJ7x-yUxpnY/s70/twitter.png); 
}
.share_wrapper .pinterest {
 background: url(http://2.bp.blogspot.com/-K41o1fRpXZY/UdHNuWmGXTI/AAAAAAAAAyQ/e6UiUfIJl_A/s70/pinterest.png); 
}
.share_wrapper .linkedin {
 background: url(http://4.bp.blogspot.com/-WX4dOdfuqg4/UdHNtk765gI/AAAAAAAAAyE/516T8UuBhR4/s70/linkedin.png); 
}
.share_wrapper .myspace {
 background: url(http://1.bp.blogspot.com/-bK7g0To5RQk/UdHNt0fP4-I/AAAAAAAAAyI/mAmPrhTmp_Y/s70/myspace.png); 
}
.share_wrapper .facebook {
 background: url(http://1.bp.blogspot.com/-ZqlYOlViiWg/UdHNtKEg8sI/AAAAAAAAAx0/o-J_PaQ9RDo/s70/facebook.png);
}

.share_wrapper .delicious, .facebook, .gplus, .twitter, .pinterest, .linkedin, .myspace 
{
  display: inline-block;
 width: 70px;
height: 20px;
-webkit-background-size: cover; 
margin: 3px;
}
.share_wrapper .delicious:hover, .facebook:hover, .gplus:hover, .twitter:hover, .pinterest:hover, .linkedin:hover, .myspace:hover {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=8)";
filter: alpha(opacity=8);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;

}

.sharingheader {
    background: url(http://4.bp.blogspot.com/-CFvaTalCoZw/UfIqUq1p0nI/AAAAAAAABCc/YXgzSHkTL4M/s1600/share-post.jpg) no-repeat;

display: inline-block;
width: 244px;
height: 44px;

margin: 3px;
  }

.share_wrapper {
  
 padding: 10px;
 margin: 5px;
}
</pre>
<br />
<br />
3. Find this code now:<br />
<br />
<br />
<pre class="brush:html;"><span class='reaction-buttons'></pre>
<br />
<br />
4. Paste the following code just before the above code:<br />
<br />
<br />
<pre class="brush:html;">
<div style='text-align: center; padding-top: 5px;'>

</div>

</div>
</pre>
Gr8 :) you have successfully added the best sharing widget of all time :) cheers!
</div>
</div>

Shareholic Clone Social Sharing Widget For Blogger

Hello people, today I'm sharing the clone widget of Shareholic Social Sharing Widget, since the original Shareholic has some issues ...

How To Add Facebook Like Box In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-oy6p_UPlwEU/UgP7BcmlpII/AAAAAAAABgI/daWebzO6rLQ/s1600/How-to-add-Facebook-Like-Box.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Like Box In Blog" border="0" height="237" src="http://4.bp.blogspot.com/-oy6p_UPlwEU/UgP7BcmlpII/AAAAAAAABgI/daWebzO6rLQ/s400/How-to-add-Facebook-Like-Box.jpg" title="" width="400" /></a></div>
<br />
Adding a Facebook Like Box to your blog is a great way to let your readers like your page and stay connected with you, It also helps them to get all the latest updates from you on the most used social network on the internet "Facebook" and you get more traffic and page views.<br />
<br />
This is how the Facebook Like Box looks like:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-UMWLatuC7iY/UgP4kE-AATI/AAAAAAAABfw/-Ys0BnZ4S6k/s1600/2013-08-09_005844.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Like box Zenu's Place" border="0" height="400" src="http://4.bp.blogspot.com/-UMWLatuC7iY/UgP4kE-AATI/AAAAAAAABfw/-Ys0BnZ4S6k/s400/2013-08-09_005844.png" title="" width="275" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<b>Related:</b> <a href="http://zenkhas.blogspot.com/2013/08/how-to-embed-facebook-posts-to-blogger.html" target="_blank">How To Embed Facebook Posts On Blogger, Wordpress or Any Other Website</a><br />
<div>
<br />
Follow these simple steps:<br />
<br />
1. Go to your Blogger <b>Dashboard</b>, Select your desired blog and go to <b>Layout</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-0R-hNPXbXfo/UgPxqkteOLI/AAAAAAAABe4/A6ELP-UZtPY/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-0R-hNPXbXfo/UgPxqkteOLI/AAAAAAAABe4/A6ELP-UZtPY/s320/1.png" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
2. Click on the <b>Add a Gadget </b>link where you want the Like Box to appear</div>
<div class="separator" style="clear: both; text-align: left;">
I have added the Like Box on the top of <b>Blog Archive</b> gadget.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-4s7EuKCF9D0/UgPxq_R7Y_I/AAAAAAAABe8/VQnOmk1N7Z0/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="http://4.bp.blogspot.com/-4s7EuKCF9D0/UgPxq_R7Y_I/AAAAAAAABe8/VQnOmk1N7Z0/s400/2.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
3. Now Add the <b>HTML/JavaScript</b> gadget. Since the code we are going to add is a HTML code, we need to add this gadget.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-bkEWffiy55g/UgPxrJbzjwI/AAAAAAAABfE/FkahoLd7_2Y/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="299" src="http://1.bp.blogspot.com/-bkEWffiy55g/UgPxrJbzjwI/AAAAAAAABfE/FkahoLd7_2Y/s320/3.png" width="320" /></a></div>
<br />
<br />
<br />
4. Paste the code in the Content box and click Save.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-BTmV1P6n_us/UgPxryRi1FI/AAAAAAAABfM/0VjtqgGg014/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="287" src="http://4.bp.blogspot.com/-BTmV1P6n_us/UgPxryRi1FI/AAAAAAAABfM/0VjtqgGg014/s320/4.png" width="320" /></a></div>
<br /></div>
<div>
<br />
Here is the code:<br />
<br />
<code>

<div id="fb-root"></div><br /><script>(function(d, s, id) {<br />  var js, fjs = d.getElementsByTagName(s)[0];<br />  if (d.getElementById(id)) return;<br />  js = d.createElement(s); js.id = id;<br />  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";<br />  fjs.parentNode.insertBefore(js, fjs);<br />}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="https://www.facebook.com/<b><span style="color: red;">ZenusPlace</span></b>" data-width="<b><span style="color: red;">292</span></b>" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div></code><br />
<br />
<br />
The text in red color are variables that you can change:</div>
<div>
<br /></div>
<div>
 Replace <b><span style="color: red;">ZenusPlace</span></b> with username of your own page, and<b><span style="color: red;"> 292</span></b> with your desired width, 292 is the minimum width.</div>
<div>
<br /></div>
<div>
For other settings you can visit the official facebook developers page and get your own code:<br />
<a href="https://developers.facebook.com/docs/reference/plugins/like-box/" target="_blank">Like Box - Facebook Developers</a></div>
</div>

How To Add Facebook Like Box In Blogger

Adding a Facebook Like Box to your blog is a great way to let your readers like your page and stay connected with you, It also helps t...

How To Embed Facebook Posts to Blogger, Wordpress Or Any Website!

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-QzpUpPvKlug/UgNEhBQ47oI/AAAAAAAABd4/FDscmd0Ppwg/s1600/Facebook_F380.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook logo" border="0" height="240" src="http://1.bp.blogspot.com/-QzpUpPvKlug/UgNEhBQ47oI/AAAAAAAABd4/FDscmd0Ppwg/s320/Facebook_F380.jpg" title="" width="320" /></a></div>
<br />
This Wednesday Facebook has just launched another Social Plugin which is currently in Beta stage and is being improved.<br />
<div>
<br /></div>
<div>
Like Twitter, Facebook now allows Post Embedding. Just a small piece of code that allows you to take someones post and embed it on your Blog or Website.</div>
<div>
You can embed any post like video, photo, status, hashtags etc..<br />
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-h9nBjbMSw9A/UgNEgpuKVmI/AAAAAAAABd0/69XAp9XwS7E/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Embed Post Option" border="0" src="http://2.bp.blogspot.com/-h9nBjbMSw9A/UgNEgpuKVmI/AAAAAAAABd0/69XAp9XwS7E/s1600/1.PNG" title="" /></a></div>
<br /></div>
<div>
<br />
<div>
But you can only embed posts that are public, so if you want to embed a post, make sure it is public else it won't work.</div>
<div>
<br /></div>
<div>
For now, this feature is only working for some popular pages like Bleacher Report, CNN, Huffington Post, Mashable and PEOPLE only. </div>
<div>
<br />
Does that mean you can't embed other posts until facebook rolls out this over your page?<br />
Hell No!  here is a simple trick to do that in Blogger, Wordpress and other Websites manually:<br />
<br />
<b>Related:</b> <a href="http://zenkhas.blogspot.com/2013/08/how-to-add-facebook-like-box-in-blogger.html" target="_blank">How To Add Facebook Like Box In Blogger</a></div>
</div>
<div>
<br /></div>
<h4>
Step 1:</h4>
First you need to get the link of your "Public" post that you want to embed.<br />
Make sure the post is Public.<br />
<div>
<br />
<div>
<ol style="text-align: left;">
<li>To get the link go to the Timeline</li>
<li>Right-click on the time of your post</li>
<li>and select <b>Copy link address</b></li>
</ol>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-kZGfZW-z_d8/UgM-DTD6ISI/AAAAAAAABdg/z1dhDnijlaU/s1600/2013-08-08_114318.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Post Link" border="0" height="231" src="http://3.bp.blogspot.com/-kZGfZW-z_d8/UgM-DTD6ISI/AAAAAAAABdg/z1dhDnijlaU/s400/2013-08-08_114318.png" title="" width="400" /></a></div>
<div>
<b><br /></b></div>
<div>
<br /></div>
<h4 style="text-align: left;">
Step 2:</h4>
<div>
Paste this code where you want your embedded post to appear:</div>
<div>
<br /></div>
<div>
<pre class="brush:js;">&lt;div id="fb-root">&lt;/div>
&lt;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'));
&lt;/script>
&lt;fb:post href="POST_LINK">&lt;/fb:post>
</pre>
<br /></div>
<div>
<br />
<div>
Replace the <b><span style="color: red;">POST_LINK</span></b> with the link of your post that you copied in Step 1.<br />
<br />
Example: https://www.facebook.com/ZenusPlace/posts/484613484953036<br />
<br />
This is how the code should look:<br />
<br />
<br /></div>
<div>
<pre class="brush:js;">&lt;div id="fb-root">&lt;/div>
&lt;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'));
&lt;/script>
&lt;fb:post href="https://www.facebook.com/ZenusPlace/posts/484613484953036">&lt;/fb:post>
</pre>
<br />
and this is the working demo of an embedded facebook post from our page into this blog post:<br />
<br />
<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>
<fb:post href="https://www.facebook.com/ZenusPlace/posts/484613484953036"></fb:post>
<br />
<br /></div>
As i said earlier you can embed your post anywhere you want, means you can also embed your facebook posts in your blog posts using HTML Editor.</div>
</div>
<div>
<br /></div>
<div>
It also works on Wordpress, and any other website where you are allowed to edit the HTML of your pages.</div>
<div>
<br /></div>
<div>
Hope this was helpful and you learnt something new. Leave a comment below if you have any question or need any help. Cheers!!</div>
</div>

How To Embed Facebook Posts to Blogger, Wordpress Or Any Website!

This Wednesday Facebook has just launched another Social Plugin which is currently in Beta stage and is being improved. Like Twit...

Removing "Powered By Blogger" Attribution Widget On Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-rBB25Asa6N0/UgBLCsqqbOI/AAAAAAAABaY/eKaeh0AE2lE/s1600/Attribution+Removal.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="239" src="http://4.bp.blogspot.com/-rBB25Asa6N0/UgBLCsqqbOI/AAAAAAAABaY/eKaeh0AE2lE/s320/Attribution+Removal.jpg" width="320" /></a></div>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Removing the text "Powered By Blogger" from the footer of your Blogger (blogspot) blog is a pretty easy job. It's a widget actually.</span><br />
<span style="font-family: inherit;">But just removing the widget won't work here, so what we need to do is, remove the whole section that contains the <b>attribution</b> widget in it.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">1. Go to your <b>Blogger Dashboard</b>, and select <b><span class="GINGER_SOFATWARE_correct" ginger_sofatware_markguid="9ab8928d-0f81-4707-89d8-4eadbc871a75" ginger_sofatware_uiphraseguid="55947af5-02d7-424b-947a-aeca46531349" grcontextid="template:0">template</span></b> of your desired blog.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-JhKZKwj3vJo/Uf_wsIDE7KI/AAAAAAAABZ0/Wt_Q7iqxXlM/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="187" src="http://4.bp.blogspot.com/-JhKZKwj3vJo/Uf_wsIDE7KI/AAAAAAAABZ0/Wt_Q7iqxXlM/s320/1.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
2. Click on <b>Edit HTML</b> button to edit the template.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZfZbF7ufj2o/Uf_wsRMjjeI/AAAAAAAABZ4/yIKqXOxkxn4/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="http://2.bp.blogspot.com/-ZfZbF7ufj2o/Uf_wsRMjjeI/AAAAAAAABZ4/yIKqXOxkxn4/s320/2.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
3. From the top of the HTML Editor click on <b> <span class="GINGER_SOFATWARE_correct" ginger_sofatware_markguid="3029884b-e15b-4ffd-a4d9-325a735df679" ginger_sofatware_uiphraseguid="33d67a91-d791-43fe-9386-cfd45612dc18" grcontextid="jump:0">jump</span> to widget</b> and select <b>Attrribution1</b>.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-x8ur7E9cTjM/Uf_wsaKTvgI/AAAAAAAABZ8/DWEPUnhttZQ/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="http://1.bp.blogspot.com/-x8ur7E9cTjM/Uf_wsaKTvgI/AAAAAAAABZ8/DWEPUnhttZQ/s320/3.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
4. Now find the widget codes as shown below.</div>
<br />
<br />
<pre class="brush:html;">      
 <b:section class='foot' id='footer-3' showaddelement='no'>
        <b:widget id='Attribution1' locked='true' title='' type='Attribution'>
          <b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>

<b:include name='quickedit'/>
  </b:includable>
        </b:widget>
      </b:section>
</pre>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-DByG53_Xc88/Uf_ws3hTWGI/AAAAAAAABaM/nG4W_dycrx0/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="http://3.bp.blogspot.com/-DByG53_Xc88/Uf_ws3hTWGI/AAAAAAAABaM/nG4W_dycrx0/s320/4.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
5. Now just delete the above codes and save your template. That's It. </div>
<div class="separator" style="clear: both; text-align: left;">
you have successfully removed the attribution widget.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-LHqjAHx7n9U/Uf_wtPrlF0I/AAAAAAAABaI/87ouM_rIWsg/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="http://2.bp.blogspot.com/-LHqjAHx7n9U/Uf_wtPrlF0I/AAAAAAAABaI/87ouM_rIWsg/s320/5.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Drop a comment here if you have any questions, Thank you.</div>

Removing "Powered By Blogger" Attribution Widget On Blogger

Removing the text "Powered By Blogger" from the footer of your Blogger (blogspot) blog is a pretty easy job. It's a widge...

How To Install Custom Blogger Template

<div dir="ltr" style="text-align: left;" trbidi="on">
<div align="center" style="margin-bottom: .0001pt; margin: 0in; text-align: center;">
<h2>
How To Install Custom Blogger Template</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-4yNuuUR_-xc/UeglIlxZyRI/AAAAAAAAA50/NxXce9bE4bM/s1600/images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-4yNuuUR_-xc/UeglIlxZyRI/AAAAAAAAA50/NxXce9bE4bM/s1600/images.jpg" /></a></div>
<div>
<br /></div>
<div>
<br />
<div style="text-align: left;">
<span style="text-align: left;">Blogger Templates play a great role to make your blog lucrative & SEO friendly. But you have to know the process of blogger templates installation. Every new blogger uses the default blogger templates because they don’t know how to upload or install the other blogger templates in their blog. Well, it's not that difficult actually. Just follow these simple steps I have mentioned here to install a new blogger template to your blog.</span></div>
<div style="text-align: left;">
<br /></div>
<h4 style="text-align: center;">
<span style="text-align: left;">How To Upload / Install a Blogger Template.</span></h4>
<div style="text-align: left;">
<ol style="text-align: left;">
<li>Download your new blogger template from any free blogger template provider website to your computer. The template is contained in a zip file; you have to extract the XML template from zip.</li>
<li>Login to your <b>Blogger Account</b>.</li>
<li>Now click on your blog name.</li>
<li>Click on "<b>Template</b>" From The Blogger Menu.</li>
<li>Now just click on <b>backup / restore</b> button and one box will pop up.</li>
<li>Now browse your XML Template file and click on upload and you have done.  </li>
</ol>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-JMUUJF9k_xM/Uegkv4wcmtI/AAAAAAAAA5k/9qa_4-zqWnE/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="108" src="http://3.bp.blogspot.com/-JMUUJF9k_xM/Uegkv4wcmtI/AAAAAAAAA5k/9qa_4-zqWnE/s320/1.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-AW1rr8KIXms/UegkwBWvlQI/AAAAAAAAA5o/yk8wsxMuDSo/s1600/2.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-AW1rr8KIXms/UegkwBWvlQI/AAAAAAAAA5o/yk8wsxMuDSo/s1600/2.jpeg" /></a></div>
<div>
<br /></div>
</div>
</div>
</div>
</div>

How To Install Custom Blogger Template

How To Install Custom Blogger Template Blogger Templates play a great role to make your blog lucrative & SEO friendly. But yo...

MetroIsm Glass - A Windows 8 Metro UI template for Blogger With AeroGlass Effect

<div dir="ltr" style="text-align: left;" trbidi="on">
<div align="center" style="margin-bottom: .0001pt; margin: 0in; text-align: center;">
<h2>
MetroIsm Glass - A Windows 8 Metro UI template for Blogger With AeroGlass Effect</h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-zn5p2bKOO6E/Uegbi6JgqqI/AAAAAAAAA5U/pOU3vjYglUg/s1600/MetroIsm+Preview.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="http://4.bp.blogspot.com/-zn5p2bKOO6E/Uegbi6JgqqI/AAAAAAAAA5U/pOU3vjYglUg/s320/MetroIsm+Preview.jpg" width="320" /></a></div>
<br /></div>
</div>
<h3 style="text-align: center;">
Description</h3>
<h2 align="center" style="text-align: center;">
<o:p></o:p></h2>
<div>
MetroIsm Glass is a Windows 8 Metro UI inspired blogger template created by <a href="http://facebook.com/zenkhas" target="_blank">Zenu Khas</a>. It's a free template so feel free to use it, in return i just want a small favor from you, please don't remove my link from the footer. That's all i want :)<br />
<br />
Below is a list of features:<br />
<br />
-Blurred Glass (Aero) containers.<br />
-Metro UI style Post Navigation buttons with "Fade On MouseOver" effect.<br />
-Removed default comments and Integrated with facebook comments.<br />
-Metro UI style post sharing buttons.<br />
-Dark black tooltip plugin.<br />
-Metro UI Charms style Search Box & Clock with MouseOver Effect.<br />
-Metro UI style social media widget.<br />
-Metri UI style Infinite Scrolling plugin with Auto-disappear effect.<br />
-YouTube ThumbsUp & ThumbsDown buttons on each post.<br />
- "About The Author" box under each post.<br />
<br />
<blockquote class="tr_bq">
The Social Sharing Buttons i have added are made by me from scratch, I have tried my best to make them look like Shareholic Social Sharing Buttons. Soon i will be sharing this widget in a diffrent post or you can copy and use it from this template if want.</blockquote>
<br />
Please do comment and let me know about your views. Thank You :)</div>
<div align="center" style="margin: 0in 0in 0.0001pt; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
Instructions</h3>
<div style="text-align: left;">
<ol>
<li>Download the template.</li>
<li>Extract <b>MetroIsm Glass.rar</b> using WinRAR.</li>
<li>Upload <b>MetroIsm Glass.xml</b> to your Blogger.</li>
<li>Done, Enjoy.</li>
</ol>
</div>
 Here is a quick guide: <a href="http://zenkhas.blogspot.com/2013/07/how-to-install-custom-blogger-template.html" rel="nofollow" target="_blank">How To Install Custom Blogger Templates</a><br />
<h3 style="text-align: center;">
Download Link</h3>
<h2 align="center" style="text-align: center;">
<o:p></o:p></h2>
<u1:p></u1:p>

<u1:p></u1:p>

<br />
<div align="center" style="margin-bottom: .0001pt; margin: 0in; text-align: center;">
<span style="font-size: 13.5pt;"><span style="font-family: ""sans-serif"","serif";"><a href="http://adf.ly/bQsRD" rel="nofollow" target="_blank">Download MetroIsm Glass Blogger Template</a></span><o:p></o:p></span><br />
<br /></div>
</div>

MetroIsm Glass - A Windows 8 Metro UI template for Blogger With AeroGlass Effect

MetroIsm Glass - A Windows 8 Metro UI template for Blogger With AeroGlass Effect Description MetroIsm Glass is a Windows 8 Met...