How to display codes in blogger post

Code without border.

Code with border.

Have you ever tried to display codes in blogger. Many blog posts display codes. I always wonder how is this code displayed. After deep search with Google, I found the secret. In this post, i will share with you, how to display codes as it is in any of your post.

• First of all copy your code and encode your code. Click here to do this.
• After you click on encode button your code will be encoded. Copy the code.
• Paste it in your post. Thats it.
• If you want to add a border or put the code inside a box, Place the encoded code inside <fieldset style="border: 1px dotted ;>------your code------</fieldset> tag

Lets try one:

• Go to Blogger >> Posting >> Create.
• Copy the code : <data:blog.pageTitle/> </title> </b:if> or <data:blog.pageTitle/> </title>
• Encode it.
• To display code inside a box, paste the code inside this tag. <fieldset style="border: 1px dotted ;>------your code------</fieldset>
• To display without box, simply paste it anywhere you want.
  
• Try Clicking on Preview.

Happy Blogging.

Read more

How to put a flash mp3 player in blogger post

Here is a simple tutorial to add small flash Mp3 player to any post in blogger.

Copy and paste the below code just before </head> tag in Layout >> Edit Html.

<script src=http://googlepage.googlepages.com/player.js type=text/javascript/>

Copy the below code and paste it wherever you want the flash player to be displayed, but paste it in the Edit Html tab of Create Post.

<object type="application/x-shockwave-flash" data="http://coloriteman.googlepages.com/player.swf" id="audioplayer1" height="17" width="185">
<param name="movie" value="http://coloriteman.googlepages.com/player.swf">
<param name="FlashVars" value="playerID=1&amp;soundFile=http://media.odeo.com/3/3/2/yahoo-song.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent"></object>

• Do not forget to replace http://media.odeo.com/3/3/2/yahoo-song.mp3 with the URL of your Mp3
• You can configure height and weight as required.

Note: If you are using Internet Explorer, you will probably need to click the player twice to make it play. (All other Web browsers will let you click once.) If you do not see the MP3 player, then you dont have the Flash player installed. (More than 90 percent of all Internet users do have it.)

Read more

How to add favicon icon to blogger

On the tabs of your Browser.


On the address bar of your Browser.

Favicon icon is also one of the SEO technique. So it becomes important for bloggers to change the default blogger favicon icon to the one of our choice. You can do this easily.

• Simply upload an image of size 16 x 16 px to your server or use any file upload service.
• Copy the link of the file location.
• You can also use the link of any 16 x 16 image available over the web.
• Now login to your Blogger account.
• Go to Layout >> Edit Html.
• Find in your codes.
  <data:blog.pageTitle/> </title> </b:if> or <data:blog.pageTitle/> </title>
  It will appear within the first 20-25 lines of codes.
• Immediately after this, type the following code.
  
  <link href=----------paste file location-------------- rel=shortcut icon type=image/x-icon/>
• Thats it. Click on Save Template.

Now you can see the favicon icon .

Read more

How to add space between words in a blogger post

Ave you ever tried to keep more than one space between two words. If no try first. Blogger does not allow you to add more than one space between two words. Even if you try pressing space-bar hundred times, it will not work.
Below words are separated with 10 spaces:
Vinod          Vinod

Now coming to the point, there are two ways to do this:

• Using non-breaking space (&nbsp;)
• using pre tag (<pre> </pre>)

To add any number add spaces, put that many number of (&nbsp;) between those words.
Eg: Copy and paste the following code in your post:
Vinod&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vinod

Now, well try the second method:
Using pre tag, we can add space with your Space-bar itself. Now, you can add hundred spaces with your Space-bar.
Try This: Vinod<pre>                   </pre>Vinod

Note: All these tricks have to be done in Edit Html tab of create post. After doing this trick, do not go to Compose tab. Otherwise, again there will be only one space.
Enjoy blogging!!!

Read more

Hyper Blogger Blogger template

Click for Demo

Configure Navigation Bar:
Access into Layout >> Page Elements
Click and Edit HTML/JAVA Script ( refer below image)



Copy and pase the below code into it:

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="------ Blog URL Here ----" title="Home">Home</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<br style="clear: left"/>
</div>

Edit the links in red as per your needs.


Configure Top right Social Bookmark area (Revised Code):
Access into Layout >> Page Elements
Click and Edit the top right HTML/JAVA Script ( refer below image)



Copy and paste the below code into it:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="-----Your feed link here------" target="_blank"><img style="width: 37px; height: 37px;" 0="" src="http://i568.photobucket.com/albums/ss121/vinod_3466/Feed1.png" class="linkopacity1"/></a>&nbsp;&nbsp;<a href="-------Your twitter URL here------" target="_blank"><img border="0" style="width: 48px; height: 41px;" src="http://i568.photobucket.com/albums/ss121/vinod_3466/twitter1.png" class="linkopacity1"/></a>&nbsp;&nbsp;<a class="addthis_button" href="http://www.addthis.com/bookmark.php"><img border="0" style="width: 35px; height: 35px;" src="http://i568.photobucket.com/albums/ss121/vinod_3466/addthis1.gif" class="linkopacity1"/></a>

Edit the links in red as per your needs.




Configure tabs:
Access into Layout >> Page Elements
Click on the tab number, in which you want to add contents. (Refer below image)


Just add gadgets according to your use in .

Add Image Gallery:
To add an image gallery with fade effect, write the normal code for image and simply add class="linkopacity" to img attribute. see the example below

<a href="http://i568.photobucket.com/albums/ss121/vinod_3466/FW005_1024x768.jpg" ><img style="width: 161px; height: 107px;" class="linkopacity" src="http://i568.photobucket.com/albums/ss121/vinod_3466/th_FW005_1024x768.jpg" /></a>

To remove the border for the image, add class="exception" to the img attribute.

Read more

how to Put Previous and next link in blogger

Many bloggers try to edit each and everything on the blog to customize the blog appearance. Weather it be images, widgets or anything. Sometime they fall into confusion that how to change the Newer and older post link at the bottom of the post. Here is a simple trick to change this or replace it with whatever you want in seconds. You can see a sample at the bottom of this post. You can even place an image in place of that or image and text both. Below steps will guide you to achieve this.

• Login to your Blogger Dashbord.
• Click on Layout.
• Click on Edit html
• Search for <data:newerPageTitle/> -This is Newer post link.
• Replace it with Previous or to place an image, replace it with <img src="Your-Image-Link" border="0" alt="Previous" /> or you can put both.
• Now, to change the older posts link, Search for <data:olderPageTitle/> and repeat the above step with appropriate changes.
• Click on Save Template.

Read more