Information Blog: blogger

Showing posts with label blogger. Show all posts

How to display codes in blogger post

Posted by gilogo at 5:50 PM Labels: blogger, codes, computer, display, how, in, post, to

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.

How to put a flash mp3 player in blogger post

Posted by gilogo at 1:53 PM Labels: a, blogger, computer, flash, how, in, mp3, player, post, put, to

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&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.)

How to add favicon icon to blogger

Posted by gilogo at 5:27 PM Labels: add, blogger, computer, favicon, how, icon, to

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 .

How to add space between words in a blogger post

Posted by gilogo at 9:52 PM Labels: a, add, between, blogger, computer, how, in, post, space, to, words

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 ( )
using pre tag (<pre> </pre>)

To add any number add spaces, put that many number of ( ) between those words.
Eg: Copy and paste the following code in your post:
Vinod     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!!!

Hyper Blogger Blogger template

Posted by gilogo at 6:01 AM Labels: blogger, computer, hyper, template

Click for Demo

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

Photobucket

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:

       <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>  <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>  <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.

how to Put Previous and next link in blogger

Posted by gilogo at 6:14 PM Labels: and, blogger, computer, how, in, link, next, previous, put, to

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.

Add Remove page Post View Counter Widget For Blogger

Posted by gilogo at 4:00 AM Labels: add, blogger, counter, for, page, post, remove, view, widget

Update: script Not Work sory

Most of you are always thinking of a way to track that how many times is your posts or articles on your blog are viewed. Blogger a major free blog hosting provider does not have a individual post views counter widget like other blogging platforms, wordpress have. This is new improved version must work smoothly for all blogger blogs.

Features Added

New code makes Faster loading
Post views shown as image rather than text
You can show counter on Homepage too.
No ads at all. Advert Free.

How To install individual Page views counter widget for Blogger ??

Step#1 Log into your Blogger dashboard. Go to layout and than click on edit/html

Now check on expand widget content , than find the bellow code

<div class=post-header-line-1>
and paste the bellow code after the above line

<b:if cond=data:blog.pageType == &quot;item&quot;><img height=16 src=http://forums.bit-tech.net/images-light/misc/stats.gif width=16/><img alt=counter expr:src=&quot;http://demo.bloggerwidgets.cz.cc/counter.php?page=&quot; + data:post.id + &quot;&amp;digit=4&quot;/>  <b>Views</b><b:else/><img height=16 src=http://forums.bit-tech.net/images-light/misc/stats.gif width=16/><img alt=counter expr:src=&quot;http://demo.bloggerwidgets.cz.cc/counter2.php?page=&quot; + data:post.id + &quot;&amp;digit=4&quot;/>  <b>Views</b></b:if>

Now click Save Template

Change Mouse cursor of your Blogger blog to Animated Cursors

Posted by gilogo at 4:00 AM Labels: animated, blog, blogger, change, cursor, cursors, mouse, of, to, your

How to change mouse cursor in blogger blog to animated cursors. Many bloggers are asking such kind of questions but there is no tutorial available on the internet. This tutorial will help you to change the mouse cursor of your blog to animated cursors. As you can see in this blog, i haved installed a dark blue 3d cursor. You can also add it in your blogspot blogs and change it according to your will.

UPDATE: I updated some of my posts, this post I update How to change mouse cursor in blogger blog to animated cursors ..........

How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your blog is....(more)

cursor, cursor pointer, cursors, mouse cursor, Totally Free Cursors, Myspace Cursors, Animated Cursors Widget Generator For Blogger

I take the cursor image from http://www.cursors-4u.com/ and you can change it anytime depends on your festive moods.

How to Install mouse cursor in blogger blog to animated cursors

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.

Step 1:

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

And now click Save Template

Some cursors are give bellow

mouse pointer , cursor cursors , mouse cursor , tumblr cursors , cursors for windows 7 , mouse icon , cursor pointer , free cursor , cursor download

Optionally use this Widget installer to add this link to your blogger blog.

Click the following image to add the widget to your blogger:

Mouse Cursor Styles

Question:

How do I change the style of the mouse cursor from JavaScript?

Answer: Most modern browsers support the following cursor styles

(hover your mouse over the style name to see the cursor change to that style):

auto        move           no-drop      col-resize

all-scroll  pointer        not-allowed  row-resize

crosshair   progress       e-resize     ne-resize

default     text           n-resize     nw-resize

help        vertical-text  s-resize     se-resize

inherit     wait           w-resize     sw-resize

To set or change the mouse cursor style for an element of your page from script,

you can set the elements property element.style.cursor to one of the above values.

(Alternatively, without JavaScript, you can use the attribute style="cursor:value;" in that elements HTML tag.)

Author - 24work is a Blogger And Designer, he created this script and wanted to share with bdlab Readers.You can find 24work on his Blog.

Note: We are going to add more mouse pointer , cursor cursors , mouse cursor , tumblr cursors , cursors for windows 7 , mouse icon , cursor pointer , free cursor , cursor download oftenly so keep visiting this page.

Mouse Cursor Styles

Question:

Search

Archive