How to hide the blogger navbar
Actually remove the navbar blogger (Navigation Bar) is an act that violates the TOS Blogger. But if you still want to do that, i tell you how to do :)
Use CSS script below :
/* CSS to hid navigation bar */
#navbar {
height:10px;
visibility:hidden;
display:none;
}
In edit HTML page, put the CSS script above after <b:skin><![CDATA[/* code and save template. DONE :D
source : http://www.o-om.com/2008/03/cara-menghilangkan-navbar-blogger.html
Use CSS script below :
/* CSS to hid navigation bar */
#navbar {
height:10px;
visibility:hidden;
display:none;
}
In edit HTML page, put the CSS script above after <b:skin><![CDATA[/* code and save template. DONE :D
source : http://www.o-om.com/2008/03/cara-menghilangkan-navbar-blogger.html
Making Recent Comments via Feed
Now we learn shows the recent Comments in the sidebar using RSS FEED. Thats very easy. The steps is :
Login to blogger dashboard Layout -> Page Element -> Add a Page Element -> Feed
1. Using default blogger Feed
http://blogname.blogspot.com/feeds/comments/default
2. Using Feedburner Feed
http://feeds.feedburner.com/NamaFeedComment
Do not forget to change the RED color with a name / name of the feed you post :)
source : http://www.o-om.com/2008/03/membuat-recent-comment-via-feed.html
Login to blogger dashboard Layout -> Page Element -> Add a Page Element -> Feed
1. Using default blogger Feed
http://blogname.blogspot.com/feeds/comments/default
2. Using Feedburner Feed
http://feeds.feedburner.com/NamaFeedComment
Do not forget to change the RED color with a name / name of the feed you post :)
source : http://www.o-om.com/2008/03/membuat-recent-comment-via-feed.html
Making Recent Post via Feed
Now we learn shows the recent blog post in the sidebar using RSS FEED. How very easily. The steps is :
Login to blogger dashboard Layout -> Page Element -> Add a Page Element -> Feed
1. Using default blogger Feed
http://blogname.blogspot.com/feeds/post/default
2. Using Feedburner Feed
http://feeds.feedburner.com/FeedPostName
Do not forget to change the RED color with a name / name of the feed you post :)
source : http://www.o-om.com/2008/03/membuat-recent-post-via-feed.html
Login to blogger dashboard Layout -> Page Element -> Add a Page Element -> Feed
1. Using default blogger Feed
http://blogname.blogspot.com/feeds/post/default
2. Using Feedburner Feed
http://feeds.feedburner.com/FeedPostName
Do not forget to change the RED color with a name / name of the feed you post :)
source : http://www.o-om.com/2008/03/membuat-recent-post-via-feed.html
Install icon smile (emoticon) in Blogger
Blogger user know ths smile icon is used in many wordpress user or other blog user, where there is any code text icon and then the smile will change the code with a visual icon smile. Unfortunately for the blogger does not support this icon smile. Do not lose heart. Many roads lead to Rome :D, all have the solution.
Try to see the example in this blog, there is every writing the text refers to the code would smile changed visually. For example, I have to use them smile icon :) and laugh :D and embarrassed when im shy :$ smile icon will appear on all the text in the blog at any location (NB: not in the shoutbox, links and images), the most profitable this icon smile emoticon can provide information in visitor commenting :o .
Follow the steps :
1. Login to your blogger dashboard, go to the menu template > edit HTML > Expand Widget Templates and find this code :
]]></b:skin>
2. Place the javascript code below, right under code ]]></b:skin>
<script src='http://louislim2.googlepages.com/addSmiley.js ' type='text/javascript'/>
3. Save and see the result :)
Try to see the example in this blog, there is every writing the text refers to the code would smile changed visually. For example, I have to use them smile icon :) and laugh :D and embarrassed when im shy :$ smile icon will appear on all the text in the blog at any location (NB: not in the shoutbox, links and images), the most profitable this icon smile emoticon can provide information in visitor commenting :o .
Follow the steps :
1. Login to your blogger dashboard, go to the menu template > edit HTML > Expand Widget Templates and find this code :
]]></b:skin>
2. Place the javascript code below, right under code ]]></b:skin>
<script src='http://louislim2.googlepages.com/addSmiley.js ' type='text/javascript'/>
3. Save and see the result :)
Standard code smile that can be used
:) or :-)
:D or :-D
:$ or :-$
:( or :-(
:p or :-p
;) or ;-)
:k or :-k
:@ or :-@
:# or :-#
:x or :-x
:o or :-o
Large Letter in front of Sentence
Making a big letter in the initial sentence may be characteristics, such as an example see the beginning of the sentence marked with the letter "M" in this article. Looks different now! if you want your article looks like it you can try to make it.
1. Login to Dashboard ==> LayOut ==> Edit HTML
2. Find this code =
.post-body {
.....
}
3. place the code below, right below that code, is not among them
.post bt {
float:left;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}
How to Use :
Happy Blogging :)
source : http://www.o-om.com/2008/04/huruf-besar-di-awal-kalimat.html
1. Login to Dashboard ==> LayOut ==> Edit HTML
2. Find this code =
.post-body {
.....
}
3. place the code below, right below that code, is not among them
.post bt {
float:left;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}
How to Use :
be sure to give this code of letters that will be enlarged size like this = <bt>M</bt>
Happy Blogging :)
source : http://www.o-om.com/2008/04/huruf-besar-di-awal-kalimat.html
Read More for Blogger
Often we find that blogs have read more facilities, namely to hide some post do not appear all in the frontpage. At the bloggers, read more facilities are not available, so you need to add your own. Here's the step :
1. Login to Dashboard and click menu Layout ==> Edit HTML
2. Mark Expand Widget Template
3. Find this code : <p><data:post.body/></p>
4. and replace with this code :
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More...</a>
</b:if>
You can change words in the RED color to word what you like
5. Save template
6. Go to menu Settings --> Formatting
7. Copy code below to the Post Template form
<span class="fullpost">
</span>
and Save Settings
8. Done
How to Use :
put the first paragraf / intro here
<span class="fullpost">
put the rest of the post here
</span>
1. Login to Dashboard and click menu Layout ==> Edit HTML
2. Mark Expand Widget Template
3. Find this code : <p><data:post.body/></p>
4. and replace with this code :
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More...</a>
</b:if>
You can change words in the RED color to word what you like
5. Save template
6. Go to menu Settings --> Formatting
7. Copy code below to the Post Template form
<span class="fullpost">
</span>
and Save Settings
8. Done
How to Use :
put the first paragraf / intro here
<span class="fullpost">
put the rest of the post here
</span>
How to make Random Image Header
Random image header in the bloggers we can actually change automatically every time the page on the Refresh or Reload. Objectives of the tutorial is still time to make it appear more stylish colors and have a distinctive color. In addition to creating a blog is more useful life also remove the tedium of visitors when visiting our blog, that blog does not monoton we need to add this header Random image.
Want to know how to make it?
Login to Dashboard -> open Template -> Edit HTML
Find this code = <b:skin><![CDATA[
Then copy the code below, paste the code under the code above, and then store and see the results.
</script>
<script type='text/javascript'>
var gambar= new Array()
gambar[0]="http://url-picture1"
gambar[1]="http:// url-picture2"
var acak=Math.floor( 2 *Math.acak());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + gambar[acak] + '") no-repeat top left ;');
document.write(" }");
document.write("</style>");
</script>
Blue = number of random images
source : http://www.o-om.com/2007/12/cara-buat-random-image-header-pada.html
Want to know how to make it?
Login to Dashboard -> open Template -> Edit HTML
Find this code =
<script type='text/javascript'>
var gambar= new Array()
gambar[0]="http://url-picture1"
gambar[1]="http://
var acak=Math.floor( 2 *Math.acak());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + gambar[acak] + '") no-repeat top left ;');
document.write(" }");
document.write("</style>");
</script>
Blue = number of random images
source : http://www.o-om.com/2007/12/cara-buat-random-image-header-pada.html
How to install a Random Post
For the new bloggers who want to make more visitors more in our blog, install Random Post for more options which are presented.
First :
<script type="text/javascript">
//<![CDATA[
var _yourBlogUrl = "http://editing-blog.blogspot.com";
function randomPost() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=1&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTotalPostsCallback(json) {
var totalResults = json.feed.openSearch$totalResults.$t;
if (totalResults > 0) {
getRandomPostNumber(totalResults);
}
};
function getRandomPostNumber(totalResults) {
var randomNumber = Math.floor((Math.random() * totalResults) + 1);
getRandomUrl(randomNumber);
};
function getRandomUrl(randomNumber) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTheUrlCallback(json) {
var theUrl = json.feed.entry[0].link[0].href;
window.location.href = theUrl;
}
//]]>
</script>
Do not forget to change the color red with your blog URL, then do not forget saved.
Second :
Then add a page Element -> HTML / Javascript
<a href="javascript:randomPost();">View Random Post</a>
Do not forget to save and see the results :)
source : http://www.o-om.com/2007/12/cara-pasang-random-post-menampilkan.html
First :
login to Dashboard -> open Template -> Edit HTML -> dont forget to backup the template first :)
Then copy the code below and paste right over the tag </head>
<script type="text/javascript">
//<![CDATA[
var _yourBlogUrl = "http://editing-blog.blogspot.com";
function randomPost() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=1&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTotalPostsCallback(json) {
var totalResults = json.feed.openSearch$totalResults.$t;
if (totalResults > 0) {
getRandomPostNumber(totalResults);
}
};
function getRandomPostNumber(totalResults) {
var randomNumber = Math.floor((Math.random() * totalResults) + 1);
getRandomUrl(randomNumber);
};
function getRandomUrl(randomNumber) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTheUrlCallback(json) {
var theUrl = json.feed.entry[0].link[0].href;
window.location.href = theUrl;
}
//]]>
</script>
Do not forget to change the color red with your blog URL, then do not forget saved.
Second :
Then add a page Element -> HTML / Javascript
<a href="javascript:randomPost();">View Random Post</a>
Do not forget to save and see the results :)
source : http://www.o-om.com/2007/12/cara-pasang-random-post-menampilkan.html
Recent Comment via Feed
I have previously described how to create Recent Comment with Javascript in HERE. So, now I will explain how to create Recent Comment via Feed. You may be confused to choose. Of course both have advantages and disadvantages. Recent Comment clear via JavaScript have advantages in the view while Recent Comment Feed with the view is more simple but the problem with the loading of the feed will be faster.
First login to Dashboard. Click Layout -> Page Element -> Add a Page Element -> Feed then in the Add Url input yout Feed address. Thers a 2 option feed can be use :
First login to Dashboard. Click Layout -> Page Element -> Add a Page Element -> Feed then in the Add Url input yout Feed address. Thers a 2 option feed can be use :
1. Use Blogger Feed
http://blogname.blogspot.com/feeds/comments/default
2. Feed with FeedBurnerhttp://feeds.feedburner.com/FeedCommentName
Dont forget to change the RED text with your blog name / comment feed name :)
source : http://www.o-om.com/2008/03/membuat-recent-comment-via-feed.html
Recent Post via Feed
I have previously described how to create Recent Post with Javascript in HERE. So, now I will explain how to create Recent Post Via Feed. You may be confused to choose. Of course both have advantages and disadvantages. Recent clear that post via JavaScript have advantages in the view while Recent Post Feed with the view is more simple but the problem with the loading of the feed will be faster.
How to use it ?
First login to Dashboard. Click Layout -> Page Element -> Add a Page Element -> Feed then in the Add Url input yout Feed address. Thers a 2 option feed can be use :
source : http://www.o-om.com/2008/03/membuat-recent-post-via-feed.html
How to use it ?
First login to Dashboard. Click Layout -> Page Element -> Add a Page Element -> Feed then in the Add Url input yout Feed address. Thers a 2 option feed can be use :
1. Use Blogger Default Feed
http://blogname.blogspot.com/feeds/post/default
2. Feed with FeedBurnerhttp://feeds.feedburner.com/FeedPostName
Dont forget to change the RED text with your blog name / feed name :)source : http://www.o-om.com/2008/03/membuat-recent-post-via-feed.html
Auto Hide Navbar Blogger
Eliminate Blogger NavBar (Navigation Bar) is one of the bloggers TOS violations, the solution is we can use the Auto hide navbar Blogger. How the Auto hide, when the visitors lead the mouse to the top of the original navbar will also appear as if the visitors lead the mouse to the bottom (not in the area navbar), then automatically navbar will be rid of.
How to Install :
In the EDIT HTML pages (on dashboard blogger) search the body { code and then place this code to the above body { code
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Source : http://www.o-om.com/2008/03/auto-hide-pada-navbar-blogger.html
How to Install :
In the EDIT HTML pages (on dashboard blogger) search the body { code and then place this code to the above body { code
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Source : http://www.o-om.com/2008/03/auto-hide-pada-navbar-blogger.html
Recent Comment on Blogger
Recent Comment is a short Comments from visitors are shown sequentially. To make Recent Comment we can use the source code below. How to Install it ?? just copy and paste the code on the page element blogger.
In the color RED : Change the address of your blog
<script style="text/javascript" src="http://www.geocities.com/oom_directory/recentcomments.txt"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://editing-blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
When the lazy practice code above you can install directly to your blog, just click button below :
source : http://www.o-om.com/2008/03/recent-comment-di-blogger.html
In the color RED : Change the address of your blog
<script style="text/javascript" src="http://www.geocities.com/oom_directory/recentcomments.txt"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://editing-blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
When the lazy practice code above you can install directly to your blog, just click button below :
source : http://www.o-om.com/2008/03/recent-comment-di-blogger.html
Recent Post in Blogger
Recent Post is the short title of the latest postings that are displayed sequentially to facilitate visitors to see the order of the posts have been created. To create a recent post, we can use the source code below.
How to Install it ?? just copy and paste the code on the page element blogger.
In the color RED : Change the address of your blog
<script style="text/javascript" src="http://www.geocities.com/oom_directory/recentpost.txt"></script><script style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://editing-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
When the lazy practice code above you can install directly to your blog, just click button below :
Source : http://www.o-om.com/2008/03/recent-post-di-blogger.html
How to Install it ?? just copy and paste the code on the page element blogger.
In the color RED : Change the address of your blog
<script style="text/javascript" src="http://www.geocities.com/oom_directory/recentpost.txt"></script><script style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://editing-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
When the lazy practice code above you can install directly to your blog, just click button below :
Source : http://www.o-om.com/2008/03/recent-post-di-blogger.html
How to create a Favicon
Favicon icon is located in the address bar or tab bar in the Web browser, how to create a favicon is easy to make you want to follow these steps:- Create an image size 32x32 with formats gif, jpg, png, and bmp (select one)
- Then open http://tools.dynamicdrive.com/favicon/
- In the browse button select the image that was created
- then click "create icon"
- click on the "download favicon" save picture
- save the icon in the address online storage can be in www.geocities.com or pages.google.com
- the last step open the entrance to the bloggers and edit the HTML
- Save, and then see the results.
search code <head> and paste the code below under the <head> code :
<link rel="shortcut icon" href="/favicon.ico">
Note: Replace the red color with the name of the url address of the place saved icon
Example :
<link href='http://www.geocities.com/oom_directory/favicon.ico' rel='shortcut icon'/>
<link rel="shortcut icon" href="/favicon.ico">
Note: Replace the red color with the name of the url address of the place saved icon
Example :
<link href='http://www.geocities.com/oom_directory/favicon.ico' rel='shortcut icon'/>
How to install bookmark button in each Post
In this issue we use the services addthis.com widget to bookmark it. The steps include bookmarks code is :- Browse http://www.addthis.com/ and registration first (if you not registered)
- Choose "Get the code for your widget!"
- Setting options :
- Choose "Get Your Free Button"
- Choose "Blog Button (New or Older Blogger)"
Which kind of widget? : --> Bookmarking Widget
Which widget? : --> (Select the appropriate button taste)
Where? Where do you want to put the widget? : --> On a Blog
Blogging Platform : --> Blogger
Which widget? : --> (Select the appropriate button taste)
Where? Where do you want to put the widget? : --> On a Blog
Blogging Platform : --> Blogger
- Login to http://blogger.com and click the Template menu -> Edit Html -> Templates ExPand Widget
- Find the code below : (Before you edit the code should do the Template Backup first)
- Then copy-paste the code below the bookmarks code above. (Do not forget to save.) Okay :D
<b:if cond='data:post.showBacklinks'> <a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a> </b:if> </b:if></span></p>
or can also under this code :
<!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span></p>
<!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span></p>
Note :
Some of the template is slightly different, so should not be placed on the code that I mentioned above. You can try to paste the code that I mention the location, please try in several different locations, find the location if appropriate.
Source : http://www.o-om.com/2007/10/cara-memasang-bookmark-pada-setiap.html
Happy Blogging :)
Some of the template is slightly different, so should not be placed on the code that I mentioned above. You can try to paste the code that I mention the location, please try in several different locations, find the location if appropriate.
Source : http://www.o-om.com/2007/10/cara-memasang-bookmark-pada-setiap.html
Happy Blogging :)
