Friday, August 5, 2011

Usefull Blogger Hack - FULL

Blogger Hack and  collection of Short Tutorial for Blogspot 
Below is a collection of brief tutorials Blogspot and Blogger Hack, 
Some of it is the most frequently asked questions.
I give the explanation fairly simple. So check this out. How To  : Make Blogspot Tittle More SEO Friendly
To make blogger tittle become friendly with Search Engeine (SEO Friendly) we can do it by replacing the standard Title Title, with code that has been modified.
First, search title code below:
<title> <data:blog.pageTitle/> </ title>
Then replace all the above code with the code below
<b:if cond='data:blog.pageType == "index"'><title> <data:blog.pageTitle/> </ title><b:else/><title> <data:blog.pageName/> </ title></ B: if>

How To  : Removing Links Subsribe Post (atomic) or Subscribe to: Posts (atom)Login to your dashboar, then  Edit HTML page, check the Expand Widget Templates.
locate the following code and delete the red code.
<b:includable id='feedLinks'><b:if cond='data:blog.pageType != "item"'> <! - Blog feed links -><b:if cond='data:feedLinks'><div class='blog-feeds'><b:include data='feedLinks' name='feedLinksBody'/></ Div></ B: if>

How To  : Remove Navbar
Login,  Edit HTML page, then put code below , under the tag <b:skin> <! [CDATA [

# Navbar {height: 10px; visibility: hidden; display: none}



How To  : Auto Hide the Blogger Navbar


Like step before, go to Edit HTML, then put the following code under the tag <b:skin> <! [CDATA [

 
# Navbar-iframe {opacity: 0.0; filter: alpha (Opacity = 0)}# Navbar-iframe: hover {opacity: 1.0; filter: alpha (Opacity = 100, FinishedOpacity = 100)}

How To  : Changing Default Atom with RSS
Sometimes we may want to use the default atom as the RRS feed, 

how todo it?  Enter the Edit HTML page, then look for the green color code below
<b:includable id='feedLinksBody' var='links'><div class='feed-links'><data:feedLinksMsg/><b:loop values='data:links' var='f'><a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'> <data:f.name/> (<data: f . feedType />)</ a></ B: loop></ Div></ B: includable>
Change green color code above with the code below:
<a class='feed-link' expr:href='data:f.url + "?alt=rss"' type='application/rss+xml' target='_blank'> <data:f.name/> (<data:f.feedType/>) </ a>

Installing Icon Before Post title
First search code .Post h3 {

then insert  green code below:
.Post h3 {background: url ("http://2.bp.blogspot.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/8XPCqtzzzs4/s400/dotlink.gif") 0px 0px no-repeat; margin: .5 em 0; padding: 0 20px 0; font-size: 120%; font-weight: bold; font-style: normal; line-height: 1.3em; color: # 333}


 
How To  : Attach Icon On Any Title Sidebar
First look for # sidebar-wrapper h2 { 

At rows of CSS code, then enter the appropriate code in green below:

 
# Sidebar-wrapper h2 {background: url ("http://2.bp.blogspot.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/8XPCqtzzzs4/s400/dotlink.gif") 0px 0px no-repeat; margin: .6 em 0. 6em; padding: 0 20px; font-size: 11px; font-weight: bold; line-height: 1.4em; text-transform: uppercase; color: # 222; border-bottom: 1px solid # C0C0C0}


How To  : Install icon in the Sidebar link
First look for # sidebar-wrapper li {

At rows of CSS code, then enter the appropriate code in green below:
#sidebar-wrapper li{background:url("http://2.bp.blogspot.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/8XPCqtzzzs4/s400/dotlink.gif") no-repeat 0px .20em; margin:0; padding:0 0 .25em 17px; line-height:1.2em}

Installing Icon before post on page List Title Label
Login Edit HTML page, then check the Expand Widget Templates, locate the green color code below, 

Then add some code in the right place like this sample (colored red)

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<img alt='&gt;&gt;&gt;' border='0' src='http://2.bp.blogspot.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/8XPCqtzzzs4/s400/dotlink.gif'/>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>



How To  : Attach Icon Before Number of Comments
First search # comments h4 {

at rows of CSS code, then enter the appropriate code in green below:
#comments h4{ background:#eee5e5 url("http://1.bp.blogspot.com/_C6KkooKXCEw/SJGzpJXhKoI/AAAAAAAACGw/QZ7IzDBHgFU/s400/icon_comments.png") no-repeat 3px .3em; width:430px; margin:.1em 0; font-size:12pt; font-weight:bold; line-height:1.5em; letter-spacing:.1em; color:#111; padding-left:25px}

How To  : Attach Icon Commentator Before Names
First search # comments-block. Comment-author {

at row CSS code, then enter the appropriate code in green below:
#comments-block .comment-author{ margin:.5em 0; padding-left:25px; background:#FFFFCC url("http://4.bp.blogspot.com/_C6KkooKXCEw/SJGzpDac4VI/AAAAAAAACGo/2L5Y5P_BDWU/s400/icon_comment.gif") no-repeat 3px .3em; color:#111}
How To  : Change Newer Posts - Home - Older post with your own writings style or Icon
You may want to replace the standard style Newer - Home - Older post with your own style, or you wanna replace that text with icon ?

To do that, first Login Edit HTML page, then check the Expand Widget Templates, locate the green color code below and then replace the red code below with your own.
To change your own writing style you can directly write it, but if you want to replace it with the your own icon, just change the red code below with your picture-url.
<img src = "http://Yourpicture-URL.jpg"/>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
<data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
<data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/></a>
</b:if>
</b:if>

</div>


How To  : How to print page
You may want to print per page directly to the default printer, thing that you need is just attach the code below directly on each page or put it in the Post page.
<a href="javascript:print(document)"> Print This Page </ a>

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

0 comments: on "Usefull Blogger Hack - FULL"

Post a Comment