A2Z Technology Blog: blogger

Add Google Buzz Share Button in Blogger Blog. Google Buzz Share Button Widget!

Google Buzz is a great social tool which is very similiar to Twitter and Facebook. It's a wonderful way to engage and interact with your readers! Make sure to implement these Google Buzz buttons into your blogger posts, so that users can easily share your content on Google Buzz.

Add Google Buzz it Button to Blogger

Go to Layout >Edit HTML in your Blogger Dashboard.
Back up your existing Template before making any changes!
Make sure to check the "Expand Widget Templates" box.
Here is the Google Buzz it Code:

<div style="float:right;padding:4px;">
<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title+ "&srcURL=" + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='http://i48.tinypic.com/idyc04.png' style='border:0px;'/></a>
</div>
Search for this line of code in your template:

<div class='post-header-line-1'/>
and place the Google Buzz it Code right after the code you searched for above.
If this doesn't work, then search for this code below and place the Google Buzz it Code directly before it.

<data:post.body/>
Now save your template and you're done!

Add Google Buzz Button with Share Count to Blogger

Here is the Google Buzz it with Share Count Code

<div style="float:right;padding:4px;"> <script type='text/javascript'> njuice_buzz_url = '<data:post.title/>'; njuice_buzz_title = '<data:post.url/>'; njuice_buzz_share = 'reader'; </script> <script type='text/javascript' src='http://button.njuice.com/buzz.js'/> </div>
Place the Google Buzz it with Share Count Code either
directly after this:

<div class='post-header-line-1'/>
OR
directly before this:

<data:post.body/>
To change the style of the widget add either

njuice_buzz_size = 'small';
or

njuice_buzz_size = 'simple';
just after

njuice_buzz_share = 'reader';
Save your blogger template and you're done!

How to Change the Favicon of a Blogger Blog? Change Blogger Blog Favicon Easily!

Blogger supplies every blog with the standard orange "B" blogger favicon. Having your own unique favicon is a great way to give your blogger template both a distinct and explicit brand. These small 16X16 pixel images will most definitely help your blog stand out from the rest of the blogspot blogs.

What is a Favicon?

A favicon is a small 16X16 image located at the top of your browser in the url bar.

How to Change your Favicon

First go to Layout >Edit HTML in your Blogger Dashboard.
Backup your existing template before making any changes!
Place the code below directly below the </head> tag in your template.

<link href='http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon' /> <link href='http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico' rel='icon'/>

Now save your template.
Once your template is saved view your blog and make sure to refresh the page and delete your cookies.

Creating your own Favicon

Replace the image URL (2X) with your own 16 pixel by 16 pixel image hosted on the internet.

http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico

You can host your own favicon blogger image at sites such as ImageShack; PhotoBucket; Flickr; etc.
Check out this Favicon Generator Tool which allows you to upload an image and it will format it for you!

How to Add Related Posts Widget in Blogger Blog? Related Posts Widget Without Thumbnails!

Now here is wonderful hack for displaying links to related posts beneath each of your blog posts. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Preview of Related Posts Links:

Error Fix:

If your related posts have not been working correctly:

Search for this line of code: http://theblogtemplates.com/scripts/Related_posts_hack.js
Replace the URL above with https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js

How to Add Related Posts Widget to Your Blog?

Go to Layout >Edit HTML in your Blogger Dashboard.
Back up your existing Template before making any changes!
Make sure to check the "Expand Widget Templates" box.
Search for the </head> tag.
Add the following code just before the </head> tag.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuSqpoi00yIRfhYSAFSduV1_sKewuBqwFVroILWb5VzxuFu_-kGZQqHHm9G0kw_ZStWBvEHComp2654Fickvygny8L1HD4VcO__aN-r7QIGDOYUFkY_IlP3OvElwMtKhfX7iypvDYVCpI/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js' type='text/javascript'/>

Now search for <data:post.body/>. In some of the templates this code may look like this
<div class='post-body>
or
<data:post.body/>
Add the following code just beneath the code you just searched for.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Now Save your Template and you're done!

Customization

In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number "5" to any desired number.

max-results=5

How to Make HTML Vertical Side Bar for Blogger Blog? HTML code for the Vertical Side Bar for blogger blog!

Two days ago we learnt an easy way to create a horizontal drop down menu with multi levels and today we will use exact same script and coding to create a vertical sidebar menu which could be fitted in any blog sidebar. We will again use some delicious CSS3 effects combined with JavaScript functions (for smooth slide effects) to craft a menu that may suit and blend any blog background. It will help you better organize your blog labels or categories thus providing visitors with better and easy navigation. The installation steps are as usual kept extremely simply. Kindly first view a demo,

Tip: To view demo copy and paste the entire code of step#3 inside MBT HTML Editor. Click the link below to open MBT editor.

Try it Now!

Add Sidebar Menu to Blogger

All widgets that we share on this blog can also be added to wordpress. there is only a difference of adding the codes at the right place, so wordpress users can try any of our widgets to customize there php based layouts.

Go To Blogger > Design
Choose HTML/Javascript Widget. Choose this gadget from the sidebar section inside your layout
Paste the following code inside it,

<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
<style>
/* ######### Sidebar Menu by www.MyBloggerTricks.com ######### */
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: #000000;
background-color: #FFFFE0;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
background-color: #000000;
color: #ffffff;
}
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

/* ######### Vertical Menu ######### */
.markermenu{
width: 175px; /*width of side bar menu*/
clear: left;
position: relative;
}
.markermenu ul{
list-style-type: none;
margin: 5px 0;
padding: 0;
border: 1px solid #9A9A9A;
}
.markermenu ul li a{
background: #F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKoYyyINDEqnya13UITuufqmPiR55i7B_UKwkNOo37qZhggytT9xR7dMviWHgTdCh4QS0Jrs_Qg3R1FjB_bdWeyV5BmgKFqGkRLxTgZXnZ9DQt3I59GF9WUWdu3UCq8uZfcd83CBQMQvk/s400/bulletlist.gif) no-repeat 3px center;
font: bold 13px "Lucida Grande", "Trebuchet MS" ;color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}
* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}
.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}
.markermenu ul li a:hover, .markermenu ul li a.selected{
color: #ffffff;
background-color: #000000;
}

</style>
<div id="ddsidemenubar" class="markermenu">
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#" rel="ddsubmenuside1">LINK2</a></li>
<li><a href="#" rel="ddsubmenuside2">LINK3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#" rel="ddsubmenuside3">LINK5</a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul id="ddsubmenuside1" class="ddsubmenustyle blackwhite">
<li><a href='#'>LINK2 ITEM 1</a></li>
<li><a href='#'>LINK2 ITEM 2</a>
<ul>
<li><a href='#'>LINK2 ITEM 2.1</a></li>
<li><a href='#'>LINK2 ITEM 2.2</a></li>
</ul>
</li>
<li><a href='#'>LINK2 ITEM 3</a>
<ul>
<li><a href='#'>LINK2 ITEM 3.1</a></li>

</ul>
</li>

<li><a href='#'>LINK2 ITEM 4</a></li>
</ul>

<ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite">
<li><a href='#'>LINK3 ITEM 1</a></li>
<li><a href='#'>LINK3 ITEM 2</a></li>
<li><a href='#'>LINK3 ITEM 3</a>
<ul>
<li><a href='#'>LINK3 ITEM 3.1</a></li>
<li><a href='#'>LINK3 ITEM 3.2</a></li>
<li><a href='#'>LINK3 ITEM 3.3</a></li>
<li><a href='#'>LINK3 ITEM 3.4</a></li>
</ul>
</li>
<li><a href='#'>LINK3 ITEM 4</a></li>
<li><a href='#'>LINK3 ITEM 5</a>
<ul>
<li><a href='#'>LINK3 ITEM 5.1</a></li>
<li><a href='#'>LINK3 ITEM 5.2</a>
<ul>
<li><a href='#'>LINK3 ITEM 5.2 1</a></li>
<li><a href='#'>LINK3 ITEM 5.2 2</a></li>
<li><a href='#'>LINK3 ITEM 5.2 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>LINK3 ITEM 6</a></li>
</ul>
<ul id="ddsubmenuside3" class="ddsubmenustyle blackwhite">
<li><a href='#'>LINK5 ITEM 1</a></li>
<li><a href='#'>LINK5 ITEM 2</a></li>
<li><a href='#'>LINK5 ITEM 3</a></li>
<li><a href='#'>LINK5 ITEM 4</a></li>
<li><a href='#'>LINK5 ITEM 5</a></li>
</ul>

Make these important changes:

Replace the # symbols everywhere with respective page links
Replace the bolded black texts with Page Titles
To create a sub slidemenu inside a Main Menu link simply add a rel attribute like rel="ddsubmenuside1Change the drop down number of slidemenu accordingly.
Normal HTML li and ul rules apply here to create sub slidemenu and sub sub slidemenu links.
Main links are mentioned first and sub slidemenu links are mentioned separately after the JavaScript call function.
To change the background colour of menu edit #F2F2F2
To change the width, background color and font color of the sub slidemenu edit respectively #FFFFE0 , #000000 and 170px
To change background colour and font colour in mouse hover mode edit #ffffff and #000000

4. Save your widget
5. All done!
Visit your blogs and look at your blog sidebar to see it working just fine.

How to redirect blogger blog to blogspot.com address? From Country Based Blogger Address to blogspot.com!

It is not a new thing since few days that your blogspot.com blog may redirect to a country based
domain. Perhaps it is worldwide. Every blogger blog owner may have the same problem of automatic
redirection. So here in this post, we have a tweak that enables your blog to stay on blogspot.com URL.

Well, first of all let’s answer the question. Why a .com redirect to a ccTLD (Country Specific Top Level
Domain) URL may hurt you? This is because according to MR. Search Engine Optimizer’s law, you can’t
host the same content on different domains. If you are using blogger on your own top level domain,
then there is no point of worry. But if your blog has a .blogspot.com address in its tail, then it may hurt
you.

So, let’s get into the answer now. Here is the simplest JavaScript code (Pretty short too!) that you can
use to save your blog from being redirected:

if ((window.location.href.toString().indexOf('.com/'))=='-1') {
window.location.href =

window.location.href.toString().replace('.blogspot.in/','.blogsp
ot.com/ncr/');
}

Place this in the HTML code of your blog and you won’t see any redirect further.

Demo

Note:

This code is for stopping .blogspot.in redirects. You need to change it to your own country’s TLD.

A2Z Technology Blog

Saturday, March 24, 2012