Tips and Trick

Wednesday, February 27, 2008

How to Show Recent Post on the Sidebar

Posted by yudha art on 3:53 AM

To show your recent post on the sidebar is very easy, you just follow the instruction below then you will see your recent post on your blog sidebar. here’s the steps :

1. Login to Blogger then Chose "Layout"
2. Click on "Add page element" (chose where you want to put it) then chose "HTML/Javascript"
3. Copy the code below and put it in the "content" box.

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

4. Change YOURBLOGNAME with your blogname.
5. The number "10" it’s amount of recent post that will be shown, You can change it.
6. Click Save.

Get Try it .......

Widget to Put Comment Box Under Posting

Posted by yudha art on 6:09 AM

Sometimes ago I have posted an articel about "How to Create Commnet Box Under Posting" it use haloscan comment box. It working well for some bloger and bad for some bloger too. If you failed or dislike using haloscan comment box, may be this will be alternatifvfor you. This comment box is created by intensedebate.com, this comment box can be use as a widget, and to apply this widget is very simple, and to remove this is more simple it just like when you remove Page Element from your blog. Ok, if you interest to try this widget I’ll show you how to put it.

1. Login to Blogger.com the chose "Layout --> Edit HTML", click on the link "Download Full Template" to backup your template first

2. Then go to intensedebate.com site sgn up, the login and go to "dashboard"

3. On the up right you will see "add blog" button, click the button

4. Then you will see a box to insert your blog url, fill it then press the button .

5. Then you will see a page like this:

intense

6. For easy, chose"Widget (Recomended)".

7. There are some choice on the "Replace Comment System". Chose "On post without comments" if you want the comment box show under no comment articel (your previouse comment still exist). If you want the comment box exist on every posting chose "On all blog post" (You will lose your previouse comments, but it can be restored).

8. The click "Complete Installation" button.

9. You will see the page like this :

addwidget

10. Chose your blog then click "ADD WIDGET" button.

Finish...

Tutorial to Create DTree Menu

Posted by yudha art on 5:50 AM

DTree is a menu that be arranged like a tree. It will be like menu when you open "windows Explorer". It's very usefull if you have many posting (articel) in your blog. It can contain many link in small space. It will be like the below image :

Here's the step by step tutorial to create "DTree Menu" in blogger:

1. Login to Blogger, go to "Layout --> Edit HTML"
2. Put the code below over <head>

<link rel="StyleSheet" href="http://blogoholic.info/files/dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="http://blogoholic.info/files/dtree/dtree.js"></script>

3. Save your editting.

4. Now edit end copy the below code then put on your sidebar.

<div class="dtree">
<script type="text/javascript">

</script>
</div>

Change "link.html" with your own link.
The first number must be unique (d.add(1,0,'Node 1','link.html');
The second number is child of the number (look at the color).

You can add the below code to add a new node with your own image

d.add(10,0,'Profile','link.html','','','http://blogoholic.info/files/dtree/trash.gif');

change "http://blogoholic.info/files/dtree/trash.gif" with your own image.
it will be like this :

Tutorial to Create Blogger Template

Posted by yudha art on 6:35 PM

This tutorial is to create simple blogger template, with simple methods. The easiest way to create blogger template is by edit a template. But don't worry, althought this is a simple methods but it can produce a beautifull template, it depend on how you design it. This tutorial is not to create blogger template from beginning but this is to create template by editing a template. Ok lets begin.
Before we begin I suggest you to create a new blog,weI don't wont to destroy your blog.
To follow this tutorial you have to download this template first. downlad template.

We will create a template that contain four main elements, (Bakground, Header, Main and Footer) Like the image :

So you have to create the four elements, You can use Image editor software like Adobe Photoshop, Corel Draw, Paint, etc.
Here's the detail to design it:
1. Create a design like above image.
2. On the backgroun part it should be a Pattern/Tile.
3. Cut for every part (Background, Header, Main and Footer)
it should be like this :

background

header

main

footer

4. Upload your part image on the webhosting like geocities or on the image hosting like photobucket.

Alll right, now we will arrange these part to the HTML.
1. Go to blogger then go to "EDIT HTML" menu.
2. Click on the "Brows" button to upload above template or this template
3. Find this code

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://blogoholic.info/files/bg.jpg') repeat-x top left; }

4. Change the bold text with your image location
5. Then find this code, and change the blod text with your image location :

#center {background: #ffffff url('http://blogoholic.info/files/body.jpg') repeat-y top center;}

6. Find the code below and change the bold text with your image location:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; }

7. Find the code below and change the bold text with your image location:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') repeat-y top center; }

8. Now find the code below

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

this code width: 898px it's the widht of your blog, change it according to your image.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

This code width: 445px; is size/widht of main, you can change it.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

This code width: 153px; is widht of your right sidebar. and this code width: 195px; is widht your left sidebar. And this code padding-right: 50px; is gap of text on the right sidebar with right line. And this code padding-left: 10px; is gap of text on the left sidebar with left line.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; }

This code height:196px; width:898; is height and widht of your header, Change it according to your Header Image.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') no-repeat top center; }

This code width: 898px; height:80px; is widht and height of your footer.

9. Try to modify and preview it until looks good.
10. If it looks good you can save it.

GOOOD LUCK!!!!!!

How to Hide Your Post Date, Time and/or Author

Posted by yudha art on 1:15 AM

There are some reason for bloger to hide Post date, time and author. May be they want to see their blog looks clear or everything. Now I will show you the trick to "hide your post date, time and or author". the mothods is very simple, just find the code that I pointed to you and delete it. You can chose which part want to delete, date only, time only, author only or it all. Ok, if you decided to do it lets begin the hack.

1. Login to blogger the go to "Layout --> Edit HTML"
2. Click on the "Download Full Template" to back up your template first.
3. Check on the "Expand Widget Templates" check box.

Hide Post Date
find this code and delete it.
<data:post.dateHeader/>.

Hide Post Time
find this code and delete it.
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'
title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>.

Hide Post Author
find this code and delete it.
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
.

5. Save your editting

Good Luck ............

Related Post :
Change Post Date Become Calender Icon

Show or Hide Your Full Post in Blogger

Posted by yudha art on 8:15 PM

This is the way to show or hide your full post on the main page of your blog. This is different from my old "Read More " methods. If in old "Read More" Methods it will show "Read More" link, then if you click the link you will load and go to another page that will show your full post/articel. But with my next methode below, if you click the link you will see your full post/articel in the same page and it no needs time to load, it only expand your full post. Do you want to try it? here is the trick:

1. Login to Blogger, Chose "Layout --> Template --> Edit HTML
2. Click "Download Full Templates" link to back up your template.
3. Check on the "Expand Template Wdiget" Check Box.
4. Copy the code below and paste above this code </head>

5. Then find this code <div class='post-header-line-1'/> .
6. If You found it you will see a code like this:

7. The next step is change or replace the code (Only Number 6 code) to be like this:

8. Under it you will see a code like this <p><data:post.body/></p>
9. Put the code below under it.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-]Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

10. So, the full code will like this :

<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

11. Save Your Editing.
12. Go to menu "Setting --> Formatting"
13. On the bottom page you will see a box beside text "Post Template". Copy the code below and paste in to the box

14. Save your setting.
15 If you want to post an articel place your part articel above this code <span id="fullpost">. Then the remain or full post put between this code <span id="fullpost"> and this </span>

GOOD LUCK>>>>>

Tuesday, January 1, 2008

Posted by yudha art on 8:26 AM

Privacy Policy for tips-trick-blogs.blogspot.com

If you require any more information or have any questions about our privacy policy, please feel free to contact us by email at browcom9000@gmail.com.

At tips-trick-blogs.blogspot.com, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by tips-trick-blogs.blogspot.com and how it is used.

Log Files
Like many other Web sites, tips-trick-blogs.blogspot.com makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.

Cookies and Web Beacons
tips-trick-blogs.blogspot.com does use cookies to store information about visitors preferences, record user-specific information on which pages the user access or visit, customize Web page content based on visitors browser type or other information that the visitor sends via their browser.

DoubleClick DART Cookie
.:: Google, as a third party vendor, uses cookies to serve ads on tips-trick-blogs.blogspot.com.
.:: Google's use of the DART cookie enables it to serve ads to users based on their visit to tips-trick-blogs.blogspot.com and other sites on the Internet.
.:: Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy at the following URL - http://www.google.com/privacy_ads.html

Some of our advertising partners may use cookies and web beacons on our site. Our advertising partners include ....
Google Adsense
Commission Junction
Widget Bucks
Adbrite
Clickbank
Azoogle
Chitika
Linkshare
Amazon
Kontera

These third-party ad servers or ad networks use technology to the advertisements and links that appear on tips-trick-blogs.blogspot.com send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies ( such as cookies, JavaScript, or Web Beacons ) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and / or to personalize the advertising content that you see.

tips-trick-blogs.blogspot.com has no access to or control over these cookies that are used by third-party advertisers.

You should consult the respective privacy policies of these third-party ad servers for more detailed information on their practices as well as for instructions about how to opt-out of certain practices. tips-trick-blogs.blogspot.com's privacy policy does not apply to, and we cannot control the activities of, such other advertisers or web sites.

If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.

So far, we have created ... 133,728 Privacy Policies.

Tips and Trick

ChatBox

This is featured post 1 title

This is featured post 2 title

This is featured post 3 title

This is featured post 4 title

This is featured post 5 title

Wednesday, February 27, 2008

How to Show Recent Post on the Sidebar

Thursday, February 21, 2008

Widget to Put Comment Box Under Posting

Tuesday, February 19, 2008

Tutorial to Create DTree Menu

Tuesday, February 12, 2008

Tutorial to Create Blogger Template

Saturday, February 9, 2008

How to Hide Your Post Date, Time and/or Author

Tuesday, February 5, 2008

Show or Hide Your Full Post in Blogger

Tuesday, January 1, 2008

Labels

Archives