Showing posts with label Blogger Tutorials. Show all posts
Showing posts with label Blogger Tutorials. Show all posts

10 November 2011

How To Add Stylish Social Icons For Bloggers Part 1

|0 comments
I'm adding social icons for bloggers whom happens to stumble here in my blog.
These Social icons &  picture below credits by  Kim Madia .
I hope these icons goes well to style up your blog or website social widgets better.
How To  Add Stylish Social Icons For Bloggers

All icons sizes here in these post are 30px X 43px ,to extract files  for downloads to your computer.
  • Then go to Google Picasa Web .
  • Click to Upload.
  • Drag icons images or select photos from your computer.
How To  Add Stylish Social Icons For Bloggers
  • Click to the image & next click to Link To This Photo.
How To  Add Stylish Social Icons For Bloggers
  • Select sizes then click to checkbox "Image only (no links)" .
  • Copy embed image & replace image code to your image source.
Image Source code example :
<img src="Add Embed Image Code Here" />

I will see you again in on my next post "How To Add Stylish Social Icons For Bloggers Part 2 ".Hope you did found what you are looking.....Cheers!!!

Adding Breadcrumbs In Bloggers Blog

|0 comments
Add Breadcrumbs Navigation in blogger
To all bloggers out there,have you added breadcrumbs navigation in your blog ?
If your blog does not have these ,it's better for you to add breadcrumbs in you bloggers blog for search engine to crawl faster to your website.
You can do these simple tutorials by following these few steps :
Note : Back up your templates first.
  1. In your HTML (Design Tabs) ,click to check box at Expand Widget Template
  2. Press Control F & search for ]]></b:skin> 
  3. Add the code below above ]]></b:skin>
  4. .breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;  padding: 0px 0px 3px 0px;  border-bottom: double #EAEAEA;}
  5. Copy & Paste to find these code below (these code might appear more than once in your  blogger template) <b:include data='top' name='status-message'/> 
  6. Add <b:include data='posts' name='breadcrumb'/> below each of  <b:include data='top' name='status-message'/>
  7. Finally look for these code : <b:includable id='main' var='top'> copy & paste below code provided above  <b:includable id='main' var='top'>
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Preview & Save your template .
All the best & hope you will enjoy on my next blogging post .
back to top