Do you want to add daily tips on your blog? like health daily tips...
How to make daily tips:
1. Log into your blogger account
2. Select Layout
3. Choose a Page Element -> select add a gadgets
4. Select the HTML / Javascript type
5. Copy and paste the following scripts<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var Tips = new Array();
Stamp = new Date();
today = Stamp.getDate();
Tips[1] = "Date 1";
Tips[2] = "Date 2";
Tips[3] = "Date 3";
Tips[4] = "Date 4";
Tips[5] = "Date 5";
Tips[6] = "Date 6";
Tips[7] = "Date 7";
Tips[8] = "Date 8";
Tips[9] = "Date 9";
Tips[10] = "Date 10";
Tips[11] = "Date 11";
Tips[12] = "Date 12";
Tips[13] = "Date 13";
Tips[14] = "Date 14";
Tips[15] = "Date 15";
Tips[16] = "Date 16";
Tips[17] = "Date 17";
Tips[18] = "Date 18";
Tips[19] = "Date 19";
Tips[20] = "Date 20";
Tips[21] = "Date 21";
Tips[22] = "Date 22";
Tips[23] = "Date 23";
Tips[24] = "Date 24";
Tips[25] = "Date 25";
Tips[26] = "Date 26";
Tips[27] = "Date 27";
Tips[28] = "Date 28";
Tips[29] = "Date 29";
Tips[30] = "Date 30";
Tips[31] = "Date 31";
function writeTip() {
document.write(Tips[today]);
}
// End -->
</SCRIPT>
<SCRIPT>
writeTip();
</SCRIPT>
Daily Tips
Label Cloud Animation
Tutorial to create Label Cloud Animation:
1. Log in to your blogger.
2. Click Layout -> Edit HTML
3. Save your template first, if later there is something wrong in doing it. Please click download full template to back up your template.
4. Find code <b:section class="sidebar" id="sidebar" preferred="yes">
5. Then copy the following script below code <b:section class="sidebar" id="sidebar" preferred="yes"><b:widget id='Label88' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> </div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "200", "200", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xD00CD2");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Note:
200 is width and height Label Cloud Box
# ffffff = Background Color Label Cloud. To View the color code click here
D00CD2 = Text colour. To see the color code click here
6. Save template
Welcome Speech
One day when you blogwalking, sometimes the first time we presented the words "Welcome" as a greeting.
Interested to try, oke follow this tutorial:
1. Log into your blogger account.
2. Choose Layout -> Edit HTML
3. Find code </head>
4. Copy and paste the following script before the code </head>
<script language="JavaScript">alert("Wellcome, please give a Comment");</script>
5. Save
6. Done
Displays Today's Date in Blog
Do you want display today's date in your blog.
Follow these steps:
Step One:
1. Log into Blogger
2. Select Layout -> Edit HTML
3. Copy paste the code below, and save the code between ]]></b:skin> and </head> :
<script type="text/javascript" src="http://mizwar.blog.googlepages.com/tampil_tanggal.js"></script>
Step Two:
This step is to put date position you want. Could put in Header, Footer or the Side Bar.
For example if youn put in side bar:
- Select "Layout"
- Click on "Add Gadget"
- Select "HTML / Javascript" type
- Copy paste the following script
<script>tampiltanggal();</script> - Save
4. Finish
Install and backup Template
- Log in to your Blogger Dashboard.
- Click on "Layout".
- Click on "Edit HTML".
- Click on "Browse".
- Now select your new blogger template file (it there as a xml file) and click on "Open".
- Click on "Upload".
- Now confirmation message will appear.Click on "KEEP WIDGETS".
- Finish
How To Backup Your Blogger Template
To before play with your blogger template you must backup it first.Don't forget to do that if you don't like to face troubles.Read the instruction below to backup your valuable blogger template.
- Log in to your Blogger Dashboard.
- Click on "Layout".
- Click on "Edit HTML".
- Click on "Download Full Template".
- Now you can save your current blogger template to the hard disk.
Insert Image Before Title Pages
If you want your blog more expressive, its better insert a picture/image or a small icon before title pages.
Look this tutorial:
1. Log in to your Blogger
2. Select Layout -> Edit HTML
3. Find the following code or similar like this code
.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
}
If does not present, find like this code:
.post-title {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
}
Delete code padding:30px 0px 0px 45px; and replace with the following code:
padding:48px 0px 0px 45px;
height:48px;
background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png) no-repeat left center;
replace http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png with your url image.
All the above code would look like this:
.post h3 {
margin:.5em 0;
padding:48px 0px 0px 45px;
height:48px;
background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png) no-repeat left center;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
}
4. Save
Install Meta Tags
Meta Tags are keywords entered into the template of our blog. This keyword is associated with a search engine / search engines, because the Meta keyword tag will be displayed in the search engine / search engines. The selection of keywords is not arbitrary. So choose the keywords that actually sought.
Meta Tag code in the template are usually like this script:
<meta content="KEYWORD1, KEYWORD2, Keyword3 ,....." name="description">
<meta content="KEYWORD1, KEYWORD2, Keyword3 ,....." name="keywords">
<meta content="INDEX, FOLLOW" name="ROBOTS">
Description:
1. Meta Description
Description of this blog serves as the information content of our blog to appear on search engines. How to install just put the words match the content of your blog with a comma as a barrier words. Example: Blog Tutorial, Tips and Triks Blogspot, Widgets, Free Templates, Adsense
2. Meta Keyword
This keyword as keywords will be our blog on the data by search engines. Fill out the important words that relate to our blog.
Example: Blogger Guide, Blogger Hack, Free Template
3. Robots Meta Tags
The main purpose of the use of a robots meta tag is to determine which web pages can be indexed by a spider and web pages which do not. This tag is very useful especially if something website uses frames for navigation. Surely we do not want to display the menus in the frame to be read by search engines.
How to install the Meta tags:
1. Log into your blogger account
2. Select Layout ---> Edit HTML
3. Search code <title><data:blog.pagetitle/></title>
4. please put the code Below Meta Tags <title><data:blog.pagetitle/></title>
5. Examples like the following:
<title><data:blog.pagetitle/></title>
<meta content='Blog Tutorial, Tips dan triks blogspot, widgets, free template, adsense' name='description'/>
<meta content='Panduan Blogger, Blogger Hack, free template' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
Install Alexa Rank On The Blog
To install the Alexa widgets:
- Log into your account bloger
- Select tLayout
- Select Elements page
- Select Add a Gadgets
- Select the HTML / Javascript
- Enter the following code
<SCRIPT Type='text/javascript' language='JavaScript' src='http://xslt.alexa.com/site_stats/js/t/a?url=www.panduan-blogger-mania.blogspot.com'> </ SCRIPT>
- Change-blogger-www.panduan-blogger-mania.blogspot.com with your blog name
- Save
- Finish
The result like this:
Authors and Reader : Different Background
- Login to blogger account
- Select "Layout --> Edit HTML" menu
- Check little box "Expand Widget Templates"
- You Should back up your template first. Click Download Full Template
- Copy the script below code before ]]></b:skin>
.comment-body-author {
background: #E6E6E6; /* Background Color */
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}
Description:
background: #E6E6E6; is background color. Look at Color Code Table if you want to replace.
dotted is line/border. Look at Style Border Code if you want to replace.
- After that, find code as below. Although not exactly the same, try to find a similar code with:
<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/>
<data:comment.author/>
</b:if>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<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>
- Red color Code is the code that you must add the HTML.
- Save Template.
Create Table of Blog Content
I would like to know how create it?
First Step:
1. Login to your account Blogger
2. Select Layout --> Edit HTML
3. Back up your template first, click Download Template Lengkap
4. Check small box Expand Widget Templates
5. Find the code below
<b:include data=’post’ name=’post’/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Second step:
This step we will create the table of contents.
1. Select Layout --> Page Element
2. Select Add a Gadgets
3. Click HTML/JavaScript
4. Insert the following code
<a href="http://YOURBLOGNAME.blogspot.com/search?max-results=100“>Archives</a>
5. SAVE Widgets
Description:
Change YOURBLOGNAME with your blog, and the value of 100 is the maximum amount of the title of the article will be displayed a one-page table of contents. Please replace if neccesary
Create Vertical Menu
Following the step:
First Step:
- Login to your account Blogger
- Click Layout
- Select Edit HTML
- Find code ]]></b:skin>
- Copy the following script, insert above code ]]></b:skin>
- Save Template
#vertikal-kuning{
border-bottom-width: 0;
}
#vertikal-kuning ul{
margin: 0;
padding: 0;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /* selection of letters */
}
#vertikal-kuning a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 200px; /* width */
text-decoration: none; /* so that the link is not underlined */
color: #333222; /* font color */
border-right:1px solid #000000; /* right side of the border color */
background-color: #FBEC04;
border-bottom: 1px solid #6A6731;
border-left: 7px solid #918C3B;/* the left side of the border color */
}
#vertikal-kuning a:hover {
background-color: #FAF6B9; /* background color */
}
#vertikal-kuning div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
Second step:
- Click Add Gadget
- Select "HTML/Javascript"
- Insert the following script
- Save
<div id="vertikal-kuning">
<div class="menutitle">CSS Library</div><!-- first title here -->
<ul>
<a href="http://infosehatbugar.blogspot.com/search/label/Kata%20BintangMu">Kata Bintang-Mu</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Kata%20ShioMu">Kata Shio-Mu</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Astrologi">Astrologi</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Ramalan">Ramalan</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Hiburan">Hiburan</a>
<a href="http://ramalankecocokanpasangan.blogspot.com/" target="_blank">Tes Pasangan-Mu</a>
<!-- To add new links in the store here -->
</ul>
<div class="menutitle">UniQue Template</div><!-- second title here -->
<ul>
<a href="http://peluang-bisnis-dirumah.blogspot.com/" target="_blank">Tambah Penghasilan-Mu</a>
<a href="http://ramalan-bisnis2009.blogspot.com/" target="_blank">Ramalan Bisnis</a>
<a href="http://panduan-blogger-mania.blogspot.com/" target="_blank">Tutorial Blogger Pemula</a>
<!-- To add new links in the store here -->
</ul>
</div> <!-- closing div-yellow vertical menu -->
Create Dropdown Menu
How to make it.....? Follow the steps:
- First, login to Blogger.com / Blogspot.com
- Click "Page Element"
- Select Add Page Elements --> HTML/JavaScript
Then enter the following script:
<form>
onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Artikel</option>
<option value="http://secretbloggertips.blogspot.com/2009/04/install-google-translator-2.html">1. Install Google Translator 2</option>
<option value="http://secretbloggertips.blogspot.com/2009/04/create-related-post.html">2. Create Related Post</option>
<!-- Add Link Here -->
</select>
</form>
The result is as follows:
If you want open in a new window, the steps are as follows::
<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option> - Articles - </option>
<option value="http://secretbloggertips.blogspot.com/2009/04/install-google-translator-2.html">1. Install Google Translator 2</option>
<option value="http://secretbloggertips.blogspot.com/2009/04/create-related-post.html">2. Create Related Post</option>
<!-- Add Link Here -->
</select>
</form>
The result will be like this:
Removing Numbers On Label
- First, login to Blogger.com / Blogspot.com
- Click Layout --> Edit HTML
- Check Expand Widget Templates
- Find code (<data :label.count/>)
- Delete code (<data :label.count/>)
- Save Template
Display Recent Post
Do You want display Recent Post on your blog....?
Follow the steps below:
- Login to Account Blogger
- Click Layout
- Select Page Element
- Click Add a Gadget
- Copy the following script :
- Change YOURBLOG.blogspot.com with the url address of your blog.Number 10 on the var numposts = 10 is the last show the 10 articles, please change in accordance with you.
- Save
<script src="http://www.geocities.com/sehatserasi72/recentpost.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
Making Walking Text on Blog
Script 1.
<marquee>Example Walking Text</marquee>
Result :
This will run from left to right.
Script 2.
<marquee direction="right">Example Walking Text</marquee>
Result:
This will run from right to left.
Script 3.
<marquee onmouseover="this.stop()" onmouseout="this.start()">Example Walking Text</marquee>
Result:
This will run from left to right and if you mouse over the text then he will stop.
If you want to put this Text under the header, follow these steps:
- Login to account blogger
- Select "Layout --> Edit HTML"
- Check the box "Expand Widget Template"
- Find code <div id="content-wrapper">
- Put marquee script above code <div id="content-wrapper">
- Save Template
- Finish
Modifications:
Create Rainbow Text Link
You may seen the Text Link, when you clickable text link, its blinking like rainbow. It seems nice...... If you want to know how to make it, follow these steps:
- First, login to your account http://blogger.com
- Click Layout --> Edit HTML
- Find code <head>
- Copy the following script, insert below code <head>
- Save Template
<script src='http://www.geocities.com/sehatserasi72/rainbow.js'>
</script>
Widgets
