Test Template

Populars Post

2009-08-25T07:40:00.000-07:00

Tutorial Populars Post :

1. Login ke Blogger.
2. Pilih Tata Letak
3. Buka Element Halaman
4. Pilih HTML/Java Script
5. Copy Paste Kode dibawah ini :

<script language="JavaScript">
aBold = true;
numposts=200;
maxshowresult=10;
home_page = "http://irur07.blogspot.com/";
</script>
<script src="http://ruri.andari.googlepages.com/popularpost.txt" type="text/javascript"></script></div>

6. Save / Simpan.

Create Label With Scrool Bar

2009-08-14T01:20:00.000-07:00

Ikuti tutorial dibawah ini :

- Pilih Tata Letak/Layout pada Dashboard
- Pada menu Elemen Halaman, pilih Tambah Gadget/Add Gadget pada suatu tempat widget
- Scroll ke bawah dan akan menemukan Pilihan 'Label'
- Klik Tambah dan pilih opsi sesuai keinginan
- Kemudian Simpan

Setelah selesai membuat Label, mari kita kembali ke topic semula yaitu membuat scroll label, gini caranya:
1. Pilih Tata Letak/Layout pada Dashboard
2. Pada menu, pilih Edit HTML
3. Pada halaman Edit HTML, download dulu template kamu dengan klik Download Template lengkap
4. Klik Expand Widget Template
5. Kemudian cari kode berikut:

<b:widget id='Label1' locked='false' title='NAMA LABEL' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

- Yang berwarna kuning adalah kode yang harus ditambahkan di script itu
- Ganti tulisan NAMA LABEL dengan Nama Label yang tertampil di blogmu.
- Tulisan yang berkedip adalah panjang Label yang ditampilkan, kamu bisa menggantinya sesuai keinginan.
- Kemudian Pilih Simpan dan hasilnya.

Create Related Post For Blogger

2009-08-12T17:50:00.000-07:00

Artikel Terkait atau biasa yang disebut dengan Related Post bisa digunakan sebagai media untuk meningkatkan pageviews dari blog kita, dengan bantuan artikel terkait ini pengunjung bisa dengan mudah mencari postingan-postingan lainnya yang berkaitan dengan Label/Kategori postingan tersebut. Related Post ini akan membantu memperindah blog juga dengan penempatannya lho. Ya, memang bisa sih diletakkan di mana saja, tetapi pada penelitian memang bagus kalau diletakkan di bawah postingan saja.

Meluncur ke Blogger--->Layouts--->Edit HTML
Centang bagian Expand Template Widget
Cari kode berikut ini:

<p><data:post.body/></p>

Kemudian paste kode berikut di bawah kode tadi:

<b:if cond='data:blog.pageType == "item"'>
<H2>Artikel Lainnya</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='ardi33'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('ardi33').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

Simpan dan lihat hasilnya...
Ket : Yang warna biru dapat kamu sesuaikan dengan ukuran masing-masing

How to Hide or Show Blogger Navbar

2009-05-02T16:22:00.000-07:00

The Blogger Navbar is a navigation and search bar on top of all blogspot blogs. It is available in several colors, and is configured in the Template tab in Blogger’s interface. You can get more information about Navbar from Blogger here

The reason whi I remove the Blogger navbar on EVERY Blogger template is its mismatch color. Even though Blogger provide several useful features and different colours, it always not blend well with my templates. It’s an eye sore and makes style="text-decoration: underline;">my blog theme look less professional.

Show/Hide blogger navbar:

Step 1. Log in to blogger account
Step 2. On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog’s HTML.
Step 3. Delete the code below to show the Navbar

#navbar, #navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

or Add that code to your css code to hide the Navbar. That is all.

How to display the title of the post without the content (pages) posts

2009-05-02T16:08:00.000-07:00

When performing a search or a content label (category) on our blog. it’s always display full content for example if we choose label “tutorial” it will be display all post on tutorial label with full content. How if the post in tutorial has 100 post? It will be difficult for us and for our reader to wait our blog loading to display it.

So we will make it short, from Full content display to short display with only display the title and posting date. Of course, loading page will be faster 50x than normal when opening page label.
Let’s move on, simply follow this Steps:

Go to Template -> Edit HTML -> Do not forget to do the backup template:) -> then check the 'Expand Widget Templates'

See the code below:


<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

Then look for the code blue above, if the change has been met over the blue color code with the code below:

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Save and See the results!

How to comment form under post for Forte template

2009-05-01T17:55:00.000-07:00

Setiap template memiliki perbedaan, tidak semuanya sama. Hal yang berbeda dari template ini adalah struktur Code Html yang terpasang didalamnya. Masalah yang sangat riskan adalah bahwa secara original, template Forte ini tidak memiliki Comment Box di bawah postingnya.

Saya sudah mencari dan menemukan tutorial tentang bagaimana memasang Comment Box untuk blogger. Tutorial dari Om Jack dan Amanda cukup bagus. Code yang ada ditutorial mereka sangat berbeda dengan struktur code dalam template Forte. Namun setelah saya explorer lebih jauh (try and error) akhirnya saya berhasil mengatasinya. Berikut caranya :

Simply go to Layout>Edit HTML in your blog's dashboard and check the "Expand widget templates" box. Then search for this section of code:

<h5 class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</h5>

Replace this entire section of code greend with the following instead:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</b:if>
</b:if>
</p>

Save and Good luck!

Comment Form Under Post On Blogger, Finally Officially Embedded!

2009-05-01T17:44:00.000-07:00

To enable inline comments for your Blogger powered blog, you need to log into your dashboard through Blogger. Then go to Settings>Comments and scroll down the page to see the new "Comment form placement" setting:

Check the radio setting for "Embedded below post" which will enable the display of the comment form below your blog posts. If you have customized your template, you will need to make a small change to your template code for this comment form to display. But don't worry, it's a very simple customization to make!

Simply go to Layout>Edit HTML in your blog's dashboard and check the "Expand widget templates" box. Then search for this section of code:
<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</b:if>
</p>

Replace this entire section of code with the following instead:
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</b:if>
</b:if>
</p>

Save it. And done.

Change the Title Tags for your Blog

2009-05-01T17:16:00.000-07:00

Until recently, the title tags generated for each page of your Blogger blog would display the blog title first, then the name of your post. This wasn't so good for SEO (search engine optimization) as this made keywords from your post titles appear after your blog title.

Luckily, Blogger have come up with a simple fix for this problem for those who use Layouts templates: the tag!

This new tag is already installed for new blogs (or if you change your existing template to one of Blogger's default ones). However, if you have customized your template or uploaded a third party template, you will need to change the original <data:blog.pageTitle/> to the new <data:blog.pagename> tag for this change to take effect.

But don't worry: this is REALLY easy! Here's what you have to do:

1. Go to Layout>edit HTML in your Blogger dashboard.
2. Search for this tag: <data:blog.pagetitle>
3. Replace this tag with the following:
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
4. Save your template! (See, this is an easy hack!)

Once you've changed this tag, you'll see that on post pages, the default [blog name] page title format for your post titles in the browser window will be replaced solely by your post title instead.

This will increase the chances of your posts being picked up in search engine results for keywords which appear in your post titles (and can ultimately help draw more targeted traffic to your blog.

I hope this little trick will be useful to you all! And for the Blogger team (if you're reading this):

Statistics Widget For Blogger

2009-04-30T20:20:00.000-07:00

Statistics widget that shows all the statistics counting total no of posts and comments in your blog.The credits of this widget goes to My Blog.The bloggers who have thousands of comments on there blog will sure love to use this widget in there blog as it will dispaly the all counts of there comments and post counts too.

Now How to add this widget to you Blog. Follow the instructions.

Go to dashboard of your blogger > Layout > Add a Gadget > HTML/JAVASCRIPT

Add the below codes to it-

<script style="text/javascript">

function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

</script>

<ul><li><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

<li><script src="http://YOURBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>
<noscript><a href="http://YOURBLOG.blogspot.com" target="_blank">Blogger Hacks</a></noscript>

Now Just change the code in red to your blog url or your domain name to display of your total no of posts and comments.

And now save it. Its Done enjoy using this.

How to Show Recent Post on the Sidebar

2009-04-30T20:06:00.000-07:00

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.

How to Make Read More in Blogger

2009-04-30T19:27:00.000-07:00

Ada 3 langkah, untuk membuat paragraf pengantar yang akan ditampilkan di halaman depan:

1.Penambahan ‘Conditional CSS’
Conditional CSS mengubah bagaimana postingan tampil di halaman yang berbeda.
Caranya, klik Layout ---> Edit HTML.
Lalu backup template dengan mengklik Download Full Template.
Lalu cari dan temukan kode ini </head>
Tambahkan kode berikut tepat di atasnya:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Gunanya adalah membuat class bernama fullpost yang akan tampil hanya di halaman detail (permalink).

2.Penambahan Read more
Langkah kedua, menambahkan link "Read More" (atau apa pun sesuai selera Anda) yang akan tampil setelah paragraf pengantar.
Untuk itu klik checkbox Expand Widgets Template tepat di atas kotak Edit Template.
Lalu scroll sampai ketemu kode:
<data:post.body/>
Tambahkan kode berikut setelahnya:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more!</a>
</b:if>

Kalau sudah, klik Save Template. Link Read more ini hanya akan tampil di halaman depan (home) dan arsip (Archive). Kalau diklik, akan membuka halaman baru berisi satu tulisan penuh.

3.Penambahan di Post Template
Langkah terakhir adalah menambah format di template postingan, sehingga setiap membuat postingan baru akan memudahkan Anda, di mana menempatkan paragraf pengantar dan di mana sisa keseluruhan tulisan.

Klik Settings ---> Formatting, lalu geser ke paling bawah halaman.
Copy dan Paste kode berikut ini ke kotak Post Template:

<span class="fullpost">
Continue teks
</span>

Show Related Article to Your Post

2009-04-30T19:12:00.000-07:00

The advantage of showing related article to your post is it will help your readers find more information related to the topics. This is base on label or category. This is usually put to the end of the article. After your visitors finish read your article, they will find some links that related to the post base on label or category.
Here's the tutorial to create "related article to your spot":

1. Login to Blogger
2. Go to "Layout-->Edit HTML"
3. Click on "Expand Widgets Template" checkbox.
4. Then download THIS SCRIPT
5. Open it then copy the scripts.
6. Paste the script after this code : <data:post.body/>. If you have "Read more widget" you will find two codes. Put it under the first code.
7. Save your template.