TheTricks.net » Blogger tutorial http://www.thetricks.net Blogging Tips, News, Tech Info Wed, 28 Jul 2010 17:50:03 +0000 en hourly 1 http://wordpress.org/?v=3.0 Add Discussion Forum in Blogger http://www.thetricks.net/2010/05/add-discussion-forum-in-blogger.html http://www.thetricks.net/2010/05/add-discussion-forum-in-blogger.html#comments Sun, 23 May 2010 05:25:20 +0000 nandu http://www.thetricks.net/?p=569 Many want to move to self hosted wordpress, so they can make discussion forum for their visitors. If you can do same even in blogger then why move to wordpress? Of course, there are many things which you can do using wordpress which are unable to do in blogger. You can see “]]> Many want to move to self hosted wordpress, so they can make discussion forum for their visitors. If you can do same even in blogger then why move to wordpress? Of course, there are many things which you can do using wordpress which are unable to do in blogger. You can see “LIVE DEMO HERE“

Step by step tutorial:

1. Go to Nabble.com

2. Click on “Start free Forum”

3. Fill out First name, Forum name and Description and Click Create Forum.

4. Click on “Register to Claim this Forum” so you can change forum setting later. (Refer to Image)

5. Fill out EMail address, Password and other required information. It require to activate account. Go to your email address to activate account.

6. Click on “Embedding Options”. (Refer to Image)

7. Keep that window and open new window. Log in to your blogger account and Click on edit post. (Refer to image)

8. Click on Edit Page and then click New Page. (Refer to Both Images)

9. Go back to that Forum and copy code. Paste in Body part of page. Give title to Page. Click Create page and You are done.

Need more Help? Contact me using contact form.

What next?

Subscribe with us for latest Tricks and Tips…!

Enter your email address:

Follow us on Twitter @thetricks.

]]> http://www.thetricks.net/2010/05/add-discussion-forum-in-blogger.html/feed 0 Show favicon in blogger and WordPress http://www.thetricks.net/2010/01/show-favicon-in-blogger-and-wordpress.html http://www.thetricks.net/2010/01/show-favicon-in-blogger-and-wordpress.html#comments Sun, 10 Jan 2010 19:09:04 +0000 nandu http://www.thetricks.net/?p=428 Most people want to show small image before URL in address bar of browser. Small image is known as favicon. For blogger and wordpress, tricks is different. I will explain here tricks for both. Before that look how it looks.:

You can see small black icon. That is call favicon.

For Blogger:

For blogger,…

]]> Most people want to show small image before URL in address bar of browser. Small image is known as favicon. For blogger and wordpress, tricks is different. I will explain here tricks for both. Before that look how it looks.:

icon

favicon demoYou can see small black icon. That is call favicon.

For Blogger:

For blogger, here is small code you need to add in HTML code of blogger theme.

First you need to find code:

<head>

Just copy and paste below code after <head> code:

<link href='http://www.iconj.com/ico/m/k/mk13dr2mta.ico' rel='shortcut icon'/>

Insted of “http://www.iconj.com/ico/m/k/mk13dr2mta.ico” change to your favicon URL.

Its done for blogger user.

For wordpress:

In wordpress, it is more simple than blogger. Just upload your favicon in /public_html/ with .ico extension.

WordPress will get your favicon directly. If this trick won’t work then you can use same trick as blogger but in wordpress you need to add that code in public_html/index.php

Happy Blogging…!

Click here for wordpress!

]]> http://www.thetricks.net/2010/01/show-favicon-in-blogger-and-wordpress.html/feed 4 Show Commenter Photos in Blogger http://www.thetricks.net/2010/01/show-commenter-photos-in-blogger.html http://www.thetricks.net/2010/01/show-commenter-photos-in-blogger.html#comments Sat, 09 Jan 2010 00:49:05 +0000 nandu http://www.thetricks.net/?p=413 Blogger user have seen author photo in comment box of wordpress blog, and I think you definitely want to add also in blogger. Here is tricks for it.

Log in to blogger account. Go to layout >> Edit html and click on small box next to Expand Widget Templates.

Step:1 Now Find code ]]> Blogger user have seen author photo in comment box of wordpress blog, and I think you definitely want to add also in blogger. Here is tricks for it.

Log in to blogger account. Go to layout >> Edit html and click on small box next to Expand Widget Templates.

Step:1 Now Find code </head> and paste below code just before </head>

<script src=’‘http://www.thetricks.net/blogger/blogger_comment_photos.js“ type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

Step: 2 Find below code.

<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
<a expr:name=’”comment-” + data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>

Add this line <div class=’commentphoto’ style=’float:left;’/> after

<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>

You can change float:left to float right according to your choice.

Step 3: Find below code: You can find this code, if you follow above 7 line code.

<dd class=’comment-footer’>
<span class=’comment-timestamp’>
<a expr:href=’”#comment-” + data:comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
</b:loop>
</dl>

Add this line <div style=’clear:both;’/> after red code </dd>.

Regular image size is 75 x 75. If want to change than you have to upload external .js file on your server and change it. Here is line if you want to change.

BloggerProfiles.imageWidth = 75;
BloggerProfiles.imageHeight = 75;

For your purpose, I have uploaded some regular size.

For 100 x 100 use this link instead of http://www.thetricks.net/blogger/blogger_comment_photos.js

http://www.thetricks.net/blogger/blogger_comment_photos100.js

For 125 x 125 use this link

http://www.thetricks.net/blogger/blogger_comment_photos125.js

I hope this will work for you.

Credit: Singpolyma

]]> http://www.thetricks.net/2010/01/show-commenter-photos-in-blogger.html/feed 0 Find Exact Number of Subscribe for any Blog http://www.thetricks.net/2009/10/find-exact-number-of-subscribe-for-any-blog.html http://www.thetricks.net/2009/10/find-exact-number-of-subscribe-for-any-blog.html#comments Mon, 12 Oct 2009 23:57:00 +0000 nandu http://www.thebloguser.com/testing/?p=120 Everyone want more and more subscriber everyday and to it may of them shows you wrong subscribe number such as 20k user have subscribed to us.

Subscribe list also help us to buy that blog. Owner can show wrong number of subscribe using image and if you see…

]]> Everyone want more and more subscriber everyday and to it may of them shows you wrong subscribe number such as 20k user have subscribed to us.

Subscribe list also help us to buy that blog. Owner can show wrong number of subscribe using image and if you see more than thousand subscriber then you definitely want to know exact number of subscriber. Showing exact number of subscribe is trust from our visitor.

But now, you can see it using little hack.

Feed address will be something like this if you are using blogspot:

http://feeds.feedburner.com/blogspot/indianmonsters

To see the number of readers, you need to add ~fc between the feed address.

So new link will be like this:

http://feedproxy.google.com/~fc/blogspot/indianmonsters

So, you can know exact number of subscriber using this trick.

If you didn’t subscribe with us, then it is time to subscribe. Subscribe now and don’t miss latest tricks from our blog.

]]> http://www.thetricks.net/2009/10/find-exact-number-of-subscribe-for-any-blog.html/feed 0 Change color of Subscribe now Button http://www.thetricks.net/2009/09/change-color-of-subscribe-now-button.html http://www.thetricks.net/2009/09/change-color-of-subscribe-now-button.html#comments Wed, 30 Sep 2009 18:05:00 +0000 nandu http://www.thebloguser.com/testing/?p=119 I know its has been long that I haven’t post any new tricks, but since I am studying too, I have to take care my study. Here is my another nice tricks for subscribe button. You have seen that some of blogger have changed color of Subscribe Button and you also want to do it.…

]]> I know its has been long that I haven’t post any new tricks, but since I am studying too, I have to take care my study. Here is my another nice tricks for subscribe button. You have seen that some of blogger have changed color of Subscribe Button and you also want to do it. Be happy here is trick for it.


First of all see demo here..




You can see that I have change color of Subscribe…! button to orange.
To use this trick. Log in to your feed burner and get code for subscribe form. It will looks like this:

<form style=”border:1px solid #ccc;padding:3px;text-align:center;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=blogspot/indianmonsters’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”><p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p><input type=”hidden” value=”blogspot/indianmonsters” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input type=”submit” value=”Subscribe” /><p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p></form>

Now find this code:

<input type=”submit” value=”Subscribe” />
Change it to this to get orange color for Subscribe button:

<input value=”Subscribe…!” type=”submit” style=”font-style:veranda; font-size:14px; font-weight:bold;color:Black;background-color:#FF6600;text-align:center;”/>

Now change Subscribe….! to your choice of text
Change #FF6600 to your choice of color. This code is for orange.

I hope this will work for you. If not, then feel free to contact me. And don’t forget to subscribe with us to get latest future tricks about Blogger and maybe more.

]]> http://www.thetricks.net/2009/09/change-color-of-subscribe-now-button.html/feed 0 Remove “pencil and setting button” quick editing button permanently http://www.thetricks.net/2009/06/remove-pencil-and-setting-button-quick-editing-button-permanently.html http://www.thetricks.net/2009/06/remove-pencil-and-setting-button-quick-editing-button-permanently.html#comments Thu, 18 Jun 2009 02:07:00 +0000 nandu http://www.thebloguser.com/testing/?p=115 Some time it is hard to judge how does our theme will look, and to make sure it, you first look preview of them. But, because of some type of extra image in theme such as setting button, our theme doesn’t look nice, and unable us to judge exact look of theme. So, you definitely…

]]> Some time it is hard to judge how does our theme will look, and to make sure it, you first look preview of them. But, because of some type of extra image in theme such as setting button, our theme doesn’t look nice, and unable us to judge exact look of theme. So, you definitely want to remove. Some of you still didn’t get what am I talking then take look at image demo:

It is easy and here are step for that.

1. Log in to your blogger account.
2. Click Layout >> Edit HTML.
3. Click on small box just before Expand Widget Templates. (Back up your Template)
4. Find this Code:

<b:include name=’quickedit’/>

5. Remove it and you are done..!

Don’t forget to save templates.

]]> http://www.thetricks.net/2009/06/remove-pencil-and-setting-button-quick-editing-button-permanently.html/feed 3 Add recent post widget with thumbnail http://www.thetricks.net/2009/06/add-recent-post-widget-with-thumbnail.html http://www.thetricks.net/2009/06/add-recent-post-widget-with-thumbnail.html#comments Thu, 11 Jun 2009 04:20:00 +0000 nandu http://www.thebloguser.com/testing/?p=114 In my previous post I talked about how to show recent post widget in blogger. Most people loved it and for that instance I thought to post same idea but with thumbnail. You can also show image as thumbnail in recent post widget.

Before we get started how to do it, take look…

]]> In my previous post I talked about how to show recent post widget in blogger. Most people loved it and for that instance I thought to post same idea but with thumbnail. You can also show image as thumbnail in recent post widget.

Before we get started how to do it, take look at its demo image:

Here are step for that.

1. Log in to your Blogger account.
2. Click Layout >> Page Element.
3. Click on Add Gadget and add below code in it.

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://img195.imageshack.us/img195/7350/blocko.gif";

imgr[1] = "http://img195.imageshack.us/img195/7350/blocko.gif";

imgr[2] = "http://img195.imageshack.us/img195/7350/blocko.gif";

imgr[3] = "http://img195.imageshack.us/img195/7350/blocko.gif";

imgr[4] = "http://img195.imageshack.us/img195/7350/blocko.gif";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#000000";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 7;

home_page = "http://example.blogspot.com/";

</script>

<script src="http://www.thebloguser.com/blogger/recentposts_thumbnail.js" type="text/javascript"></script>

Change green text with your choice of height and width and blue text with your blog name like http://yourname.blogspot.com

4. Move your Widget as your choice and save it. You are done.

What is next to do?

If you didn’t subscribe at then do it now. So, you will not loose any update on this blog.

I really want to thanks Kranthi. He have made this tricks.

]]> http://www.thetricks.net/2009/06/add-recent-post-widget-with-thumbnail.html/feed 15 Blink texts – Html http://www.thetricks.net/2009/05/blink-texts-html.html http://www.thetricks.net/2009/05/blink-texts-html.html#comments Sun, 31 May 2009 02:54:00 +0000 nandu http://www.thebloguser.com/testing/?p=111 I think you have seen somewhere, text is blinking and you may want to do that some time and it is really easy.

Just use blink html code.

<blink> Your Text </blink>

You will get result like this one.

Your text

]]> I think you have seen somewhere, text is blinking and you may want to do that some time and it is really easy.

Just use blink html code.

<blink> Your Text </blink>

You will get result like this one.

Your text

]]> http://www.thetricks.net/2009/05/blink-texts-html.html/feed 1 Add sexy social Bookmark to your Blogger http://www.thetricks.net/2009/05/add-sexy-social-bookmark-to-your-blogger.html http://www.thetricks.net/2009/05/add-sexy-social-bookmark-to-your-blogger.html#comments Sat, 23 May 2009 02:51:00 +0000 nandu http://www.thebloguser.com/testing/?p=108 As you know that social networking is very useful tools to get huge traffic. In this post I will teach to add social bookmarking site to submit your blog.

I think you have seen “sharing is sexy”. I found that one and it is interesting. I did for my blog. Check it out. If you…

]]> As you know that social networking is very useful tools to get huge traffic. In this post I will teach to add social bookmarking site to submit your blog.

I think you have seen “sharing is sexy”. I found that one and it is interesting. I did for my blog. Check it out. If you want to add just let use this tricks and you will be done.

Sharing is sexy

Here are step if you want to do it for your blog:
1. Login to blogger with Google ID
2. Click Layout.
3. Then click edit HTML tab.
4. Click the Download full template link. Save your template (Don’t forget)
5. Please mark the little box to Expand Widget Templates.
6. Find the code like this : </head>
7. Copy below code and paste it before </head>

<style type=’text/css’>
div.sexy-bookmarks {
height:54px;
background:url(‘http://img710.imageshack.us/img710/7070/sharingsexy.png’) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(‘http://img710.imageshack.us/img710/7070/sharingsexy.png’) no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(‘http://img710.imageshack.us/img710/3131/sexysprite.png’) no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>

8. Find the code like this :
<data:post.body/> (If you have used readmore hack in your template. then find last code like this and paste after that)

9. Copy below code and paste it after <data:post.body/>

<style type=’text/css’>
div.sexy-bookmarks {
height:54px;
background:url(‘http://img710.imageshack.us/img710/7070/sharingsexy.png’) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(‘http://img710.imageshack.us/img710/7070/sharingsexy.png’) no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(‘http://img710.imageshack.us/img710/3131/sexysprite.png’) no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>

10. Change Your feed burner id which is blinking.

11. Save your template and don’t forget to subscribe if you didn’t, because “sharing is sexy”

Original By Naeem Nur

]]> http://www.thetricks.net/2009/05/add-sexy-social-bookmark-to-your-blogger.html/feed 12 How to Create Blogroll in Blogger http://www.thetricks.net/2009/05/how-to-create-blogroll-in-blogger.html http://www.thetricks.net/2009/05/how-to-create-blogroll-in-blogger.html#comments Thu, 21 May 2009 18:36:00 +0000 nandu http://www.thebloguser.com/testing/?p=105 If you want to add Blogroll in your widget, you can use either Link list Gadget from your Add Gadget button or you can also add with simple code like below.


Here are step:

1. Log in to your Blogger account.
2. Click Layout >> Page Element.
3. Click on Add Gadget and add below…

]]> If you want to add Blogroll in your widget, you can use either Link list Gadget from your Add Gadget button or you can also add with simple code like below.


Here are step:

1. Log in to your Blogger account.
2. Click Layout >> Page Element.
3. Click on Add Gadget and add below code in it.

<div style=”border: 1px solid #000;
overflow: auto;
width: 150px;
height: 200px;
text-align: center; “>

#link1 <br />
#link2 <br />
#link3 <br />
#link4 <br />

</div>

You can change width and height and link 1,2,3,4 as you want. Or change color #000 as your choice.

]]> http://www.thetricks.net/2009/05/how-to-create-blogroll-in-blogger.html/feed 0