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
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 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 :)
3 Step to Making Blog
Mungkin ada diantara Anda yang belum tahu tentang blog dan bertanya-tanya tentang blog, maka saya akan mengulas sedikit tentang blog menurut versi saya sendiri.1. Apa itu Blog ?
Blog ( singkatan dari Web log) adalah situs yang sifatnya lebih pribadi, yaitu lebih berat kepada penggambaran dari si pembuat blog itu sendiri. Blog dibuat oleh para desainer penyedia blog agar bekerja secara otomatis dan mudah untuk dioperasikan , jadi bagi kita-kita yang masih bingung dengan bahasa pemrograman untuk membuat sebuah website tidak jadi persoalan. Apabila anda sudah bisa membuat sebuah account email di internet, maka dalam membuat blog pun saya yakin anda bisa.
2. Cara membuat blog
Seperti halnya e-mail, dalam membuat blog pun kita harus mempunyai sebuah account terlebih dahulu, oleh karena itu silahkan daftarkan diri anda terlebih dahulu di free blog provider (penyedia hosting/domain blog gratis). Free blog provider sangatlah banyak terdapat di internet dan beberapa yang populer adalah http://www.blogger.com , http://www.wordpress.com serta http://blogsome.com. Dalam kesempatan kali ini saya akan mengulas tentang cara pembuatan blog di http://www.blogger.com . Silahkan anda klik di sini atau dengan cara mengklik gambar dibawah untuk mendaftar. Lihat gambar di bawah ini :
Setelah anda berada pada situs blogger.com, anda akan melihat gambar seperti gambar di atas. Silahkan lakukan langkah-langkah berikut ini :
- Klik tanda anak panah yang bertuliskan " CREATE YOUR BLOG NOW "
- Isilah email Addres dengan alamat email anda (tentunya yang valid)
- Tuliskan password yang anda inginkan pada form Enter password
- Isikan kembali password anda tadi pada form Retype password
- Isi Display name dengan nama yang ingin anda tampilkan
- Tulis tulisan yang tertera pada form Word Verification. Beri tanda tik pada kotak di pinggir tulisan I accept the Terms of Service.
- Klik gambar anak panah yang bertuliskan " CONTINUE "
- Tuliskan judul blog yang anda inginkan (nanti bisa di rubah lagi) pada form Blog title
- Tulis nama situs anda pada form blog addres (URL)
- Tulislah tulisan verifikasi yang ditampilkan pada form Word Verification, jika sudah selesai klik gambar panah yang bertuliskan " CONTINUE ".
- Pilihlah gambar (template) yang anda inginkan (nanti bisa di rubah lagi), kemudian klik gambar anak panah yang bertuliskan "CONTINUE"
- Setelah keluar tulisan "your blog has been created". Klik gambar panah bertuliskan "START POSTING". Silahkan anda tuliskan semau anda, jika sudah selesai klik tombol "publish".
3. Isi ( Content ) blog :
Bagi para pemula, biasanya mereka bingung setelah daftar membuat blog apa yang harus di isi ( diposting ) dalam sebuah blog. Isi ( content ) dari sebuah blog tentu saja terserah kepada si pemilik blog itu sendiri, apakah mau di isi puisi, perjalan hidup, teknik, ataupun apa saja. Nah di sini saya menyarankan, isilah blog anda tersebut dengan minat ataupun hoby serta keahlian anda sendiri, karena tentu saja di luar sana banyak sekali orang yang tentunya sama minat dan hoby nya dengan anda, sehingga mereka akan tertarik untuk membaca tulisan-tulisan anda.
