Stay Connected

Thursday, 28 March 2013

How to show blogger widget in scroll box

Login to your Blogger account

Find the Widget ID. See How to find blogger widget ID and Section ID

Go back to Dashboard > Design > Edit Html
(Don't forget to take Backup before you make any change)

Now Check the "Expand Widget Templates" on top right of the HTML window

Find the below code in your template (To find the code you may use Ctrl+F) :

 ]]></b:skin>

Add the below code before ]]></b:skin> the line


/* Scroll box by emdadblog START */
#YourWidgetId .widget-content {
height: 200px;
overflow: auto;
}
/* Scroll box by emdadblog END */

Where to change :

YourWidgetId = put your own blogger widget id

Height: 200px = change height according to your wish

Save and enjoy

Blogger widget in scroll box mission accomplish
Read More

Build SEO Friendly Breadcrumb Trail For Your Blog


Breadcumb

WHAT IS A BREADCRUMB?


A “breadcrumb” (or “breadcrumb trail”) is also known as secondary navigation scheme that reveals the different location in a website or blog. Breadcrumbs usually look like horizontally across the beneath of your blog post title. Often we see it below title bars or headers. And it provide links back to each previous pages. Any visitors can easily navigate through Breadcrumbs current page. It is something like hierarchical site structures. First shows parent pages of the current one and after that its children pages. Breadcrumbs provide a trail for the blog/website visitors to follow back to the starting or entry point.

We can see some specimen of breadcrumbs below :-

Home page > Section page > Subsection page
or

Home page: Section page: Subsection page

or

home page : section page 1 : section page 2

TYPES OF BREADCRUMBS

Until now we have got only three types of breadcrumbs:
  • Attribute-based: path (or history) breadcrumbs are dynamic and show the path that the user has taken to arrive at a page.
  • Location-based: location breadcrumbs are static and show where the page is located in the website hierarchy.
  • Path-based: attribute breadcrumbs give information that categorizes the current page.
You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

BENEFITS OF USING BREADCRUMBS


You maybe think it is useless but Breadcrumbs has some benefits. Here are just some of the benefits of using a breadcrumb trail.



  • Convenient for users.
  • Reduces clicks or actions to return to higher-level pages
  • Doesn't usually hog screen space
  • Reduces bounce rates

HOW TO MAKE SEO FRIENDLY BREADCRUMBS

We have already got many tutorials that explain how to create breadcrumbs in Blogs. This time I will explain how you can create a SEO friendly breadcrumbs that will show all labels indexed by Search Engines as well as in your blog site. This structure is different from WordPress, which can make the child category. Structures in blogger only Home then all of your blog Labels.

Home > Label1 > Label2 > Label3

To Install this add just follow the below Tutorials. You will find it really easy to install. Before applying this code block my blog link was appear like below:

tips and tricks

After applying the code I got the result like below image-

tech blog

As well as you will get some changes in your blog like below image-

blogger tricks



Step 1 Click on -> Template -> Edit HTML

Step 2 Now Click On  Expand Widget Templates

Step 3 Now Find this code ]]></b:skin> by pressing  Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin> 

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Step 5 Now Find this code <b:includable id='main' var='top'> by pressing  Ctrl + F

Step 6 Replace the above code by below code.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Step 6 Now Save the Templates. And check the blog. 
Read More

Tuesday, 12 March 2013

How To Insert Rainbow Animation To Post Title LInk For Blogger Blog




Make your blog to look more awesome by changing the color of Link when Mouse over it. 7 colors are changing randomly, but before doing this make sure you backup your template,to do this just follow the few steps bellow;
  • Sign In to you Blogger Account.
  • Go to "Design"> Edit HTML
  • Mark "Expand Widget Template"
  • Press ctrl F on your keyboard
  • Find <head> then type the code below immediately after <head>

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1;  elmB = t2;  elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1;  elmB = t2;  elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1;  elmR = t2;  elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1;  elmR = t2;  elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1;  elmG = t2;  elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1;  elmG = t2;  elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1)    elmR = "0" + elmR;
if (elmG.length == 1)    elmG = "0" + elmG;
if (elmB.length == 1)    elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>
  • Click on "SAVE TEMPLATE"
Now your link widget should display rainbow animation, and all credits goes to netoopsblog, use the comment box if you love this, share this with with friends too using the share button below. 
Read More

Monday, 11 March 2013

Add Breadcrumb Navigation To Blogger Blogs


I came across the breadcrumb navigation trick for blogger during its inception. But, I thought there is no use adding such a widget other than improving the navigation. The navigation simply can be improved by adding a blog archive or using the labels widget in blogger. But, I found that apart from improving the navigation it also facilitates Search Engine Optimization. Basically, the search engines view a breadcrumb as a text link to posts and provides importance to the subject of the linked page.

To basically understand this, I should define what a breadcrumb is??? To keep it simple, a breadcrumb is a widget like stuff that displays the visitor's location within a blog. Basically, it improves the navigation for a blog and helps the visitor easily jump from one part of the blog to another. To have a better understanding of what I am blabbering, please have a look at the following screen shot.
breadcrumbs-for-bloggerLet us now install this hack to improve our SEO and site navigation. Just follow the simple steps given below.
1. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Search for the following line in your template. Use "CTRL+F" to fasten your search.
]]></b:skin>
3. Add the following piece of code just above the line mentioned in step 2.
.breadcrumbs
{
float: left;
width: 590px;
font-size: 11px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}
4. Save your template. Just make sure that your template is expanded. Click on the "Expand Widget Templates". Now, search for the following piece of code in your expanded template.
<b:includable id='main' var='top'>
5. Replace the following block of code with the code mentioned in this text document - "Breadcrumb For Blogger".
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
6. Save your template. That's all folks!!!

Visit any of your post page and enjoy the hack!! If you still face any problem regarding this widget, I am always ready to help you via mails. Even comments below the post will do!! For all those who had a smooth installation, just enjoy the hack!!!
Read More

Sunday, 10 March 2013

How To Add Two Columns to blogger Sidebar


1.Log in to your dashboard--> layout- -> Edit HTML
2.Scroll down to where you see like this code.

<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Feed2' locked='false' title='Recent Posts' type='Feed'/>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>
  </div>
3.Now add below code between  </b:section>  and  </div>  .
Read More

Hey Buddy ! Anz Here

Followers

Popular Posts

Template And Design By Blogshear