blog: code

Tampilkan postingan dengan label code. Tampilkan semua postingan

Share and Bookmark Button after every Post Header with Direct Linking to favourite social networking site or some sharing sites like digg, stumble upon, myspace, twitter and facebook and many more : easly customized for blogger blogspot blogs

We always wanted a Share or Bookmark button on every blog post so that blog readers can post shar or Bookmark the post on thier favourite social networking site or some sharing sites like digg, stumble upon, myspace, twitter and facebook and many more...

If you want Share and bookmark button as used in this blog after the Post header then Follow the following steps and its all done... very easy indeed.

Now click on EDIT HTML >> check " Expand Widget Templates"

Use Browser Text Search Feature using shortcut "Ctrl+F" and type in "post-header-line-1" to find <div class='post-header-line-1'/> just after the comment section.

Its Just above "<data:post.body/>".

After "<div class='post-header-line-1'/>" paste the following code :

 <br /><!-- Share&Bookmark DIV Block START --><br /><div style="float: right; margin-bottom: 15px; margin-top: 15px;"><br /><fieldset><br /><br /><br /><legend>Share and Bookmark</legend><br /><br /><br /><!-- Share&Bookmark Button START --><br /><div><br /><div class="addthis_toolbox addthis_default_style"><br /><a class="addthis_button_compact" href="http://iloveindia.co.nr">Share&Bookmark</a><br /><span class="addthis_separator">|</span><br /><a class="addthis_button_facebook" href=""><br /></a><a class="addthis_button_myspace" href=""><br /></a><a class="addthis_button_google" href=""><br /></a><a class="addthis_button_twitter" href=""><br /></a><a class="addthis_button_stumbleupon" href=""><br /></a><a class="addthis_button_digg" href=""><br /></a><a class="addthis_button_delicious" href=""><br /></a><a class="addthis_button_technorati" href=""><br /></a><a class="addthis_button_yahoobkm" href=""><br /></a><a class="addthis_button_buzz" href=""><br /></a><a class="addthis_button_googlebuzz" href=""><br /></a><a class="addthis_button_mixx" href=""><br /></a><a class="addthis_button_orkut" href=""><br /></a><a class="addthis_button_blogger" href=""><br /></a><a class="addthis_button_igoogle" href=""><br /></a><a class="addthis_button_gmail" href=""><br /></a><a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4bd4572902be65f7" target="_blank">more...</a><br /></div><br /><script src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4bd4572902be65f7" type="text/javascript"><br /></div><br /><!-- Share&Bookmark Button END --><br /></fieldset><br /></div><br /><div style='clear:both; overflow:auto'><br /></div><br /><!-- Share&Bookmark DIV Block END --><br />

Save the Template. Its All Done. Now after every post title SHARE & BOOKMARK buttons will be shown.

To remove any sharing icon just remove the link in the code above, for example if you want to remove the YAHOO BOOKMARK Icon just remove "<div class='post-header-line-1'/>" and its all done.

Best of Luck. Happy sharing.

NOTE: Always Save your template before editing your HTML codes.

How to add a Menu Navigation Bar with hyper links at the top in a blogger blog with new XML template?

A blog does have a blogger navigation bar at the top but lacks a MENU BAR with links to your own blog or any other link with your own choice links, as we see in many websites. http://codezila.blogspot.com/

This helps in easy navigation across your blog/site. The reader will have a wide variety of choice and will stay on your site or blog for a longer time. This also helps in categorizing your blog posts according to their category or genre. http://codezila.blogspot.com/

Follow the following steps and its all done... very easy indeed.

http://codezila.blogspot.com/

Now click on EDIT HTML and check " Expand Widget Templates"

Use Browser Text Search Feature using shortcut "Ctrl+F" and type in "Inner layout" to find "/* Inner layout */" inside ""

Paste the following code after "/* Inner layout */" :

/****** Top Navigation ******/
#topnav {width: 100%; 
   height: 20px;
   text-align: right;
   font-size: 0.7em;
   color: #999999;
   float: right; }
   
#topnav img {
   border: none; 
   padding: 5px; }


/****** Navigation ******/
#navigation {
   width: 100%;
   background: 
url(http://1.bp.blogspot.com/_3SdVQe5mP8U/Sssg9YVGb_I/AAAAAAAALfE/7QSG50RJYnM/s320/menu_button.JPG) repeat-x;
   height: 35px;
/*   border-top: ##58b2eb solid 1px; */
   margin-bottom: 2px;}
#navbar_link {
   height: 34px;
   float: left; }
#navigation #navbar_link ul {
   float: left;
   height:34px;
   width: 100%;
   list-style-type: none; }
#navigation #navbar_link ul li {
   display: inline; }
#navigation #navbar_link ul li a {
   padding: 0px 15px;
   color: #ffffff;
   text-decoration: none;
   line-height: 1.7em;
   float: left;
   border-right: 2px solid #0c5684;
   text-decoration: none;
   font-size: 1em;
   font-weight: bold;
  }

#navigation #navbar_link a:hover { 
   text-decoration: none; 
   border-right: 1px solid #0c5684;
   color: #FFFFFF;
background: #ddd 
url(http://2.bp.blogspot.com/_3SdVQe5mP8U/Sssf0YtHOyI/AAAAAAAALe8/H9Gh5b9Dn90/s320/menu_button.JPG) repeat-x;
}
   
.1ST a {
background:  url(http://2.bp.blogspot.com/_3SdVQe5mP8U/Sssel0xFZRI/AAAAAAAALe0/Mm9U_ETVHeQ/s320/menu_button.JPG) repeat-x; 
}

Now Uncheck " Expand Widget Templates" at the top right.

Use Browser Text Search Feature using shortcut "Ctrl+F" and type in "header-wrapper" to find

div id="header-wrapper"

Now before this header div ends , paste the following code after /b:section

<!--navigation links-->
<div id='navigation'>
      <div id='navbar_link'>
        <ul>
           <li class='1ST'><a expr:href='data:blog.homepageUrl'>Home</a></li>
           <li><a href='url1'>Link Title</a></li>
           <li><a href='url2'>Link title2</a></li>
           <li><a href='url3'>link title 3</a></li>

<!-- add as many links as you want -->

        </ul>
      </div><!-- end of navbar_link -->
      </div><!-- end of navbar -->

Replace the url1/url2/... with your own links and Link Title1/2/3.... with your link title.

Save the Template. Its All Done. You can see the green navigation bar as shown above.

Having problem with the code? feel free to ask through below comment area.

enjoy a new look to your blog or site.

How to add adsense ads just after the post title and after Post Ends in blogs.

It is always beneficial to show the ads just after the post title before the real content starts. But by default the ads are shown either in the sidebar or after the comment link at the bottom of the post. So many a time your visitors did not even give a look to the ads which is not desirable.

So what to do to make the adsense ads come just after the post Title and at the post bottom before the Comments or reaction buttons or anything else.

Follow the following steps and its all done... very easy indeed.

Click on EDIT in BLOG POSTS (a pop-up window "configure blog posts" will open)

Check the radio button "SHOW ADS BETWEEN POSTS" at the last of "Post Page Option" in the pop-up.

Scroll down and click on Ok (you can edit the colour of the ad displayed, its better to match the ad colour to your blog colour especially ad background and border must be same as blog background colour)

Save the template by clicking on the BLUE button at the top right.

Now click on EDIT HTML >> check " Expand Widget Templates"

Use Browser Text Search Feature using shortcut "Ctrl+F" and type in "adcode" to find <adcode> just after the comment section.

Then add "!" before adcode like  (this makes the defalut adcode as a comment for the browser and it will ignore it while interpreting the codes)

Then Find "<data:post.body/>" using "Ctrl+F".

After and Before "<data:post.body/>" paste this code:

Save the Template. Its All Done. Now after every each post title your ad will be shown and at the bottom also. To edit the type of ad size and colour see point 4. But its better to use a square size ad format.