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

Add KickIt Badge for DotNetKicks.com in blogger

We can add KickIt Badge for DotNetKicks in blogger using the javascript. But, It is loaded after loading all elements even it is in middle of page. Suppose, your page has a lot of ads and links and you have added DotNetKicks javascript below the post then It appears after loading all links/ads/content. Here are the steps to fix this problem without using javascript.

Blogger Backup Reader

Suppose you have all your content in blogger and you are not connected with internet.
OR
You can’t reach blogger service or blogger is too slow with your area.
OR
Your content has been updated and you want to see old content in blogger.

One Solution: Blogger Backup Reader

How to Use:

Step 1: Take Backup:

Open your blogger account > Settings > Basic > Export Blog > Download

Step 2: Download Blogger Backup Reader.


Step 3: Installation

Before Installation, Make sure you have .NET Framework 2.0 or higher.
For this check following location in your machine
<WINDOWS dir>\Microsoft.NET\Framework\v2.0.50727

If it is not, Download and install it from here.
After this extract the downloaded zip file and run setup.exe, give path and install it.

Step 4: Read Backup:

Click File -> Open, select the backup file and enjoy it.



All titles will appear Left side Title Box. By default, First post will appear in right side Content Box.



You can filter the posts by label. Click on category and select label now you will see all titles of selected labels only.



You can view the post in full screen.
For this, Click on View -> Full Screen.
To turn off full screen, Click again on "full screen" option.



You can save the post content as html file by clicking File -> Save as HTML option



Blogger SEO Tips: Update Title Style and Add Meta tag

In blogger, By default, the Blog title appears first, the important information(which is the post title) is pushed to the end. There is a chance for the search engines to append this long a title. Also, it wouldn’t look appealing to searchers on google. So for a good Title, Page title should come first.

Second thing META DESCRIPTION Tag: The importance of this tag In words of Googlewebmaster:

"Why does Google care about meta descriptions?
We want snippets to accurately represent the web result. We frequently prefer to display meta descriptions of pages (when available) because it gives users a clear idea of the URL's content. This directs them to good results faster and reduces the click-and-backtrack behavior that frustrates visitors and inflates web traffic metrics."

I saw there are lot of posts about this but they define meta tags for whole blog means each post has same meta description. I dislike. So I decided to give page title as a meta description. so that each post has different meta description tag.

TO DO both points in blogger:
Goto Edit Html tab and find the codes below
<title> <data:blog.pageTitle/> </ title>
Replace it With
<b:if cond='data:blog.pageType == &quot;item&quot;'> <meta expr:content='data:blog.pageName' name='Description'/> <title> <data:blog.pageName/> | <data:blog.title/> </title> <b:else/> <meta expr:content='data:blog.pageTitle' name='Description'/> <title> <data:blog.pageTitle/> </title> </b:if>
It will display the name of a particular entry first without bringing the name of the blog in first position as well as add meta description tag.

Add Digg, Technorati, Stumble Upon, Delicious buttons in Blogger

Social bookmarking or networking is a great way to increase traffic. There are many bookmarking services like Digg,Technorati,Delicious,StumbleUpon,Reddit,Blink List,Furl,
Mixx,Facebook,Google Bookmarks,Yahoo My Web,..etc and some services like addthis and sharethis provides sharing services of these bookmarking services. our object is to add these bookmarking services in blogger to increase traffic.

Technique 1:
1. In your blogger account click on Layout-> Edit HTML
2. Check on "Expand widget templates"
3. Now search following tag:
<data:post.body/>
4.Copy and paste following code below or after <data:post.body/> tag

<!--Digg-->
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url
+ "&title=" + data:post.title' target='_blank'><img alt='Digg'
border='0' src='http://benny.ayong.googlepages.com/digg.png' title='Digg'/></a>
<!--technorati-->
<a expr:href='"http://technorati.com/faves?add=" + data:post.url'
target='_blank'><img alt='Technorati' border='0'
src='http://benny.ayong.googlepages.com/technorati.png' title='Technorati'/></a>
<!--Delicious-->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url +
"&title=" + data:post.title' target='_blank'><img alt='Delicious'
border='0' src='http://benny.ayong.googlepages.com/delicious.png'
title='Del.icio.us'/></a>
<!--StumbleUpon-->
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url +
"&title=" + data:post.title' target='_blank'><img alt='StumbleUpon'
border='0' src='http://benny.ayong.googlepages.com/stumbleupon.png' title='Stumble
Upon'/></a>
<!--Reddit-->
<a expr:href='"http://reddit.com/submit?url=" + data:post.url +
"&title=" + data:post.title' target='_blank'><img alt='Reddit'
border='0' src='http://benny.ayong.googlepages.com/reddit.png'
title='reddit'/></a>
<!--Blinklist-->
<a
expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&
Url=" + data:post.url + "&Title=" + data:post.title'
target='_blank'><img alt='BlinkList' border='0'
src='http://benny.ayong.googlepages.com/blinklist.png' title='BlinkList'/></a>
<!--Furl-->
<a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title +
"&u=" + data:post.url' target='_blank'><img alt='Furl' border='0'
src='http://benny.ayong.googlepages.com/furl.png' title='Furl'/></a>
<!--Mixx-->
<a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.title +
"&u=" + data:post.url' target='_blank'><img alt='Mixx' border='0'
src='http://benny.ayong.googlepages.com/mixx.png' title='Mixx'/></a>
<!--Facebook-->
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.title
+ "&u=" + data:post.url' target='_blank'><img alt='Facebook'
border='0' src='http://benny.ayong.googlepages.com/facebook.png'
title='facebook'/></a>
<!--Google Bookmarks-->
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" +
data:post.title + "&u=" + data:post.url' target='_blank'><img
alt='Google Bookmark' border='0'
src='http://benny.ayong.googlepages.com/googlebookmark.png' title='Google
Bookmark'/></a>
<!--YahooMyWeb-->
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t="
+ data:post.title + "&u=" + data:post.url' target='_blank'><img
alt='Yahoo' border='0' src='http://benny.ayong.googlepages.com/yahoomyweb.png'
title='Yahoo Myweb'/></a>



5. Save your template.
6. Now you will get error:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "url" must end with the ';' delimiter.

7. for this Convert all & to &amp; in added html.
8. Now Save again.
The result is

New Technique:
Use "AddThis" or "ShareThis".

I recommend "ShareThis" because there are some problems in AddThis hover in different browsers.

Publish Source code in Blogger

After posting any source code, First we make sure that the code is correct and same as the original. For HTML or script source code, we require HTML Encoding so that blogger doesn't execute this code.The Source code format should be different from content and there should be option for copy code or print code so that user don't need to select entire code and press ctrl+c. I use "Syntaxhighligher" to display source code in blogger. It fullfills all requirement. First Layout is very pretty with line numbers and it provides "View Plain" (To display only source code in another window),"Copy to clipboard" and "Print?" options. We will see How can we use syntaxhighlighter in blogger without any hosting.

1.In the blogger,Click on Layout tab ->Edit HTML and put following things Before </head>

<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>


2. put following things Before </body>

<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>


3. encode (HTML Encode) your source code. for this, you can use this.
OR

Copy your code in notepad and replace all < in &lt; etc.

4. Put your updated code between:
<pre name="code" class="Cpp">
….My code here…
</pre>