Online Money Xtreme

Showing posts with label Blogger Widgets. Show all posts

Scroll Bar for Blog Post Body

Thursday, February 19, 2009 at 9:10 PM Posted by Souras

Adding Scrollbar to Blog Post body
once you are logged into Blogger account, go to Template -> Edit HTML and scroll to this code. Add the portion shown in red:-

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;

Set 2 : Search for .post ( by browser Search) and Put the Red Portion in Curly Bracket. { }

.post {
height:200px;
overflow:auto;

}

This will give you scrollbars to every post:-

Scrollbars within Blog Post
Sometimes, you may not want to have the scrollbars to all the [...]

This will give you scrollbars to every post:-

Scrollbars within Blog Post

This setting, scrollbars will automatically appear according to your need:-

Sometimes, you may not want to have the scrollbars to all the blog posts, but only for several paragraphs within a post. Assuming you are writing an article and you wish to enclose some long text within a scrollbox, you have to first define a class within the stylesheet.

For example, we can insert in the stylesheet this code to specify the maximum height and width of the scrollbox. Once the text overflows

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;

Set 2 : Search for </b:link> by Browser search place the below code before it.

.scrollbox {

height:100px;

width:400px;

overflow:auto;

}

Step 3: Save the template.

Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode and put the below code where your want to appear scrolling bar.

<div class=”scrollbox”>TEXT TO BE INCLUDED IN THE SCROLLBOX.</div>

You can continue typing the post by switching back to the “Compose” mode.

After you are done, when you publish your post, you will see that only the part of the text comprised with the tags will be in a scrollbox, like this:-

AJAX Labels Reloaded

Saturday, January 31, 2009 at 1:14 PM Posted by Souras

The AJAX Labels is back with more features! I was planning to release this with my new template, but the template design is slipping beyond schedule.
Note: If you want to integrate AJAX Labels with Phydeaux3's Label Clouds, read this post and come back here.
Some of the new features are:

Built-in navigation system.
More user customizability. (You don't even need to know coding for that!)
Support for Unicode Categories in IE.
More user-friendly installation. (Code to be copied/modified in template is reduced)

The installation of this hack afresh would be easy. But upgrading from my previous version is a bit knotty. Anyway, I will explain both. If you get stuck, feel free to comment and I'll be there to help. FRESH INSTALLATION Click here for Up gradation instructions. If you already have AJAX Labels installed, you can directly jump to up gradation instructions. Like the first version, this one too needs the Prototype JS framework. You can either store it in a location of your preference, or use the location that I've given below. First of all, back up your template. It is always a good idea to back up your template, so that you can revert if you mess things up. 1. Click Page Layout->Edit HTML. Check the box saying "Expand Widget Templates" Look for the </head> tag in your template. Insert the following code just above that.

<style type='text/css'>                

#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}                 

#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}                 

.search-result-meta {background:#EFEFEF;padding:2px;}                 

.search-result-meta img {border-width:0;vertical-align:text-bottom;}                 

.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}                 

.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}                 

.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}                 

.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}                 

</style>                 

<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />                 

<script type='text/javascript'>                 

//<![CDATA[                 

// User customisable parameters                 

// ----------------------------                 

// maxresults - Number of results to show per page                 

// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.                 

// feedLabel - Text to show for the label feed link.                 

// catLabel - Label for categories.                 

// closeLabel - Label for Close button. You can use hypertext also.                 

var maxresults = 5;                 

var navFlag = 1; //ON by default                 

var feedLabel = "Subscribe to";                 

var catLabel = "Sorted into:";                 

var closeLabel = "Click to close";                 

//]]>                 

</script>                 

<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

Note: You can avoid the prototype script addition line if you already have added the prototype.js script to your template (It is quite likely, if you have added some hack to your blog). If you don't understand what I'm saying, never mind. Now the customization part. See the snippets in red above. Those are the stuff which you can customise. Just above that I have written comments on what each represent. To customize them, you just need to modify them to the appropriate value. For example, if you want to change the close button text from "Click to close" to, say, "[X]", then simply change "Click to close" in the red area to "[X]". Navigation Feature: The navigation feature allows pagination of the results. So you can view all the results in several pages. maxresults and navFlag together determine how it is shown. navFlag is the parameter saying whether you want this feature or not. The number of results shown per page will be decided by maxresults. The number of pages will be calculated automatically. Eg: Lets say, you have 13 posts with a particular label in your blog. Case 1: maxresults=5 and navFlag=1 You will have 3 pages (peekaboo blocks) with 5 results each. There will be a navbar which will let you go to any of those 3 pages. Case 2: maxresults=5 and navFlag=0 You will have a single page with 5 recently updated posts with the particular label. You won't be able to view other results Case 3: maxresults=20 and navFlag=1 You will have a single page with 13 results (Because 13 is less than 20). If you know CSS, you can modify the look of your result block as well. 2. Locate the following code in your template:

<b:loop values='data:post.labels' var='label'>                

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Replace it with this:

<b:loop values='data:post.labels' var='label'> 



<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

3. Optional:If you have the labels widget in your template.

Locate the following code in your template:

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>

Replace it with this:

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat

(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>

4. Click on the button below.

<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><span id="preserve28e29bc50e8543bdbc285c3b47ad246c" class="wlWriterPreserve"><script type="text/javascript">document.write(closeLabel);</script></span></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><span id="preservee463285a218e49dfabc9efcfc5e8ae87" class="wlWriterPreserve"><script type="text/javascript">document.write(closeLabel);</script></span></div></div>This will take you to an Add Widget Screen. Select your blog and click on Add widget. 5. Save your template. That was a breeze, wasn't it? UPGRADATION Caution! If you are installing AJAX Labels for the first time, don't proceed any further. You are already finished with your installation. This section is only for upgrading from the previous version. 1. Back up your template first. (Be pessimistic in these matters ;) ) 2. Go to Edit HTML. Look for my previous installation of Javascript. It is very easy to find. It is enclosed within  and  Delete that entire portion. 3. Now check Step 1 of the FRESH INSTALLATION section. Follow that step and come back here. 4. Search for the following snippet in your template. '"javascript:getCat(\"" + data:label.name + "\")"' There will be two places where this occurs. Replace both places with this '"javascript:getCat(\"" + data:label.name + "\",null)"' 5. Save your template and go to page layout screen and delete the HTML/Javascript widget you had created when you installed the previous version. 6. Go to step 4 of FRESH INSTALLATION section. Follow that step and come back here. 7. Save your template and you are done. There! That was not very difficult. ACKNOWLEDGEMENTS Tsung-Kai Chen - For his several comments and the bugs he found in the previous version. Bahram - For the heads up on the Unicode Category issue in IE. Update 1: The code had minor syntax errors (due to wrong copy paste)because of which the hack was not working. Problem is fixed now. Reinstalling the hack will make it work. Update 2: Drat! Another silly mistake. The Close button was not working. I've fixed this. Just delete the widget and add it again (Step 4) . You don't have to redo any other steps. Update 3: Arrgh!! Another bug. I have made the corrections. You will have to redo Steps 2, 3 and 4. This will remove support for the rel-tag microformat. I will release an update if I find a way to work around that.

Add Widget to provide Button-Link to your Blog.

Saturday, January 24, 2009 at 10:19 AM Posted by Souras

You can now add a widget to your blog with a button which when clicked adds a button link to your blog from the reader's blog. This is done automatically without the reader having to type in even a line of code.....

First create a button by going to http://cooltext.com/Buttons and create a button for your blog. Then upload this button picture to a freehost like Googlepages and copy down the url of the picture. Let us call it : URL OF YOUR BUTTON PICTURE.

To do this go to Layout from the Dashboard after logging in to your account. In the Page Elements section click on Add Page Element link in the sidebar. In the new pop up window which opens choose Html/Javascript option. In the content section paste the following code :

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="FAVOURITE" name="widget.title" type="hidden"/>

<textarea style="display:none;" name="widget.content">

</textarea>
<input
value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>

<input
value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>

<input value="LINK TO THIS SITE" name="go" type="submit"/>
</form>
<p>Click above button to get a button link to this blog</p>

In the middle code replace the Capital letters with the appropriate values. Add all the above code in blue including the code in the middle picture. Click on picture to enlarge it. Then save the widget.

View blog. You will see below button in your sidebar:

When a reader clicks on this button he is taken to a page where he has to select his blog where he wants to add the link to your blog as shown below :

Here the reader can change the Title and edit the content if he/she wants. On clicking Add Page Element the link is added to the Page Elements tab in the sidebar of his blog. He/She can then rearrange its location in the blog by drag and drop method.

Using this method I have added it to my blog in the right sidebar at the bottom.

Add Widget for Blogger To Add Others To You.

Wednesday, November 26, 2008 at 3:51 PM Posted by Souras

The Layouts feature of Blogger opens up all sorts of new possibilities for people to customize their blogs in interesting ways. And even better, you can design new widgets or modules for others to add to their own blogs.

Here's the general concept: First, design your widget. Then, on your website, create a form that sends its results to me through comment. In that form you include the content of the widget you've created, and maybe some other optional information. When someone clicks the "submit" button on your form, they'll be taken to Blogger where they can add your widget into their blog's layout.

Let's look at a simple example to start with. The following code provides the user with a single button, labeled "Add Me." Clicking that will let me add a widget to your layout that links to the Online Money Xtreme.

<input type="hidden" name="widget.title"

value="Online Money Xtreme"/>

<input type="hidden" name="widget.content"

value="<a href='http://onlinemoneyxtreme.blogger.com/' >Tip and Trick for Blogger</a>"/>

<input type="hidden" name="widget.template"

value="<data:content/>" />

<input type="hidden" name="Online Money Xtreme"

value="http://onlinemoneyxtreme.blogger.com"/>

<input type="hidden" name="Online Money Xtreme"

value="http://www.blogger.com/img/add/add2blogger_lg.gif"/>

</form>

You'll notice we used hidden input fields here, because we don't want the user to change any of the information; I want everyone to get the same widget. You could have easily used other kinds of form fields if, for instance, you wanted the user to enter a title for the widget themselves. It's the name attributes of the form fields that are important, rather than the type attributes.

The important parts of the form are the following:

form action="http://www.blogger.com/add-widget" - (Required) Your form must submit its information to this URL in order for it to be handled properly by Blogger. We recommend using the POST method to submit, but GET also works, if you don't have too much data in your widget.
widget.title - (Optional) The title you specify will display in the user's Page Elements tab when they edit their layout. It will also be shown as part of the default widget template. The title can be up to 100 characters long, and may contain well-formed HTML.
widget.content - (Required) This is the actual content of your widget, which will be displayed on the user's blog. It can include almost any well-formed code that you want, except for <html> and <body> tags. Note, however, that you will need to escape the code, as in the example above (e.g. <a> becomes <a>).
widget.template - (Optional) This should follow the widget tag guidelines. You can also use any of the globally available data tags. If no template is specified, it uses <data:title/> <data:content/> as a default.
infoURL - (Optional) You can use this to specify a page on your site that describes your widget or gives other information about it. It will be used as a "more info" link on the setup page people see when adding your widget.
logoURL - (Optional) You can add an image URL here, and the image will be displayed next to the "more info" link. It should be thumbnail sized (i.e. less than 100x100 pixels).

Note.

1. You can change the red URL and Text with your URL and Text.

2. You can change the orange text with your LOGO (100x100).

How to Create Vertical Menu ?

Monday, November 24, 2008 at 1:23 PM Posted by Souras

We have learned how to create horizontal menu before. Now we will try to make a vertical menu. We will make a vertical menu like the image. Ok let's do it

1. Login to blogger then choose "Layout-->Edit HTML"

2. Put the script below before this code ]]></b:skin> or put it in CSS code area.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

You can change the menu color, look at the red text (blue1.gif and blue2.gif). Change it with some color menu below. For example, if you want to choose red color, then the code would be like this :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

Then.

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Vertical Menu Color :

	blue1.gif blue2.gif
	black1.gif black2.gif
	green1.gif green2.gif
	pink1.gif pink2.gif
	red1.gif red2.gif

3. Save your template.
4. Then go to "Page Elements" menu
5. choose "Add a Gadget -->HTML/JavaScript" the insert the code below.

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="Bikini Tube'>Bikini Tube'>http://bikinitube.blogspot.com">Bikini Tube</a></li>
<li><a href="Celebrites Proe'>Celebrites Proe'>http://celebritiespro.blogspot.com">Celebrites Pro</a></li>
<li><a href=http://onlinemoneyxtreme.blogspot.com >Free Template</a></li>
</ul>

Note :
- The red code is the links.
- The Blue code is anchor text.
- If you want to add menu, just copy the blink code and paste it.
6. Then click "Save"

How to Create Tab View in Blogger Blog

at 12:52 AM Posted by Souras

Tab View is very usefull box. We can fill it with many contain. It will save our blogs area. (See Image Below)

Here is Tutorial how to create a tab view:

1. Login to blogger, go to "Layout --> Edit HTML"
2. Then find this code ]]></b:skin>
3. Insert the below code before ]]></b:skin> or in CSS tag.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. You can change the code according to the red text explanation.
5. The next step is put the code below before </head>

6. Then "save" it.
7. Go to "Page Elements" menu
8. Chose "Add Page Element" --> "HTML/Javascript" in place where you want to put this tab.
9. Insert this code :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Note :
- The number or the blue text(350px) Is size of the tabview.
- The green code is the main menu text
- The red code is the content of tabview. you can fill it with links, banner, widget, comment or anything.
- To add more menu, see on the blink code. Add the code under it.
Good luck every body.

Auto Smile Icons Make Blog More Expressive

Thursday, November 20, 2008 at 2:38 PM Posted by Souras

In this episode I will explain to you "how to make your blog more expressive with smile icon" without copy an image and put to your blog, but with only little code and then it will be smile icon image automatically. For example, if you type this code :) it will atomatically change to this image , this code :p will be like this and etc. Do you interest? if no, go from my blog

Here's the trick:

These are the following steps to do this.

1. Login to blogger then chose "layout --> Edit HTML"
2. Find this code ]]></b:skin>, if you found it then put the code below under it.

<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>

3. Save your editing.

* Before you type the code you have to press "space" first"

Here is the code to show smile icon

:) -->

:( -->

:p -->

:D -->

:$ -->

;) -->

:@ -->

:# -->

:k -->

:x -->

:o -->

:O -->

:L -->

:r -->

:s -->

:y -->

:~ -->

:v -->

:f -->

:d -->

:c -->

:z -->

How to Create Search Engine in Blogger

at 2:26 PM Posted by Souras

Now I will show how to create "Search Engine" in your blogger. This Search Engine is use to find article in your blog, not to find article at all website in the world. It's very easy, just follow the trick below you will have search engine in your blog. Here's the step:

These are the following steps to do this.

1. Login to Blogger, Go to "Layout --> Page Elements". Click "Add a page elements" then chose "HTML/Java Script".
2. Put the code below into "Content" Box

Change yourblogname with your blog's name. The number "30" is width of your search engine, you can change it for appropriate to your layout.

GOOD LUCK!!!

Comment Box under blogger Posts

at 11:10 AM Posted by Souras

Now, blogger(BlogSpot) have developed their comment box. Last time ago, if we want to post a comment there should be only a link under our posting, and we have to click the link send a comment, it's not interesting. But now we can find a comment box under our post exactly. It's original from blogger, it's not like haloscan or intense debate. But it's truly from blogger/BlogSpot. You can see it under this post.

Here is the trick to create comment box under your post.

1. Login to http://draft.blogger.com
2. Go to Setting-->Comments. then change "Comment Form Placement" to be "Embedded below post" (look at the image below)

3. Then "Save Setting"
Try to see your blog and click on your title post. if there is a embedded comment box below your post just stop this step here. But if there is no comments box, just follow the next steps here.

4. Go to "Layout-->Edit HTML" and back up your templates by
5. Check the "Expand widget templates" box.
6. Find this code :

7. Then replace it with this code :

8. Save your Template.

Enjoy the Widget.

How to Show Recent Comments in Blogger

Tuesday, November 18, 2008 at 1:40 PM Posted by Souras

It's very usefull to Show Recent Comments on main blog page. We can know who have given comments on aur articles without open it one by one. At this time I will show you how to show recent comments on our main page blog. It's very easy

Step 1. Login to blogger then go to "Layout"
Step 2. Then copy this code :

- The 8 number is the sum of comments that will show up.
- Change trick-blog.blogspot.com with your blog's name.

3. You can show it in page elements. Just click on "add page elements --> HTML/Javascript" Then insert the script in it and save.

How to Create Search Engine in Blogger

at 12:31 PM Posted by Souras

1. Login to Blogger, Go to "Layout --> Page Elements". Click "Add a page elements" then chose "HTML/Java Script".

2. Put the code below into "Content" Box and Save

Change yourblogname with your blog's name. The number "30" is width of your search engine, you can change it for appropriate to your layout.

Star Rating Widget for Blogger Blogs Posts

at 12:12 PM Posted by Souras

I will show you how to install Post Rating widget to your blog.The Simple steps given below will install this beautiful widget easily.Below is the screen shot of this widget

How to implement it on blogger/blogspot?

here are the steps;

1. Go to your template editor under your dashboard. Tick the “Expand Widget Template”

2. Find this code

<data:post.body/>

3. Put the codes below right after that line above (or download it here),



<script language='JavaScript'>
var OutbrainPermaLink='<data:post.url/>';
var OB_demoMode = false;
var OB_Script = true;
</script>
<script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

4. Save your template, and done!

Please be creative. you can move the code as long it still inside the include=’post’ under the blog widget.

If you have problem installing this widget then just log on to - Outbrain.com