Artikel pada Label :: Blogger-Hack :: | O-OM

PLEASE DISABLE YOUR ADBLOCK OR DNS BLOCKED FOR SUPPORT THIS SITE!

Tampilkan postingan dengan label Blogger-Hack. Tampilkan semua postingan

Tampilkan postingan dengan label Blogger-Hack. Tampilkan semua postingan

Tampilkan postingan dengan label Blogger-Hack. Tampilkan semua postingan

Menampilkan Next Comments Blogger untuk komentar diatas 200

Kita yang menggunakan Blogger Custom Template biasanya tidak terlalu memperhatikan masalah Next Comment ini, masalah ini biasanya baru ketahuan setelah jumlah komentar diblog kita sudah melebihi angka 200. Saya dulu sempat kaget juga melihat jumlah komentar blog saya yang seharusnya menampilkan lebih dari 500 komentar dan ternyata dari blogger sendiri hanya membatasi pada 200 komentar saja per artikel, selebihnya blogger meminta pengguna untuk melihat halaman lanjutan yang ditampilkan bedasarkan jumlah komentar dan link ke halaman komentar yang lebih baru. Anda bisa melihat contohnya pada gambar dibawah ini.

Tidak adanya fasilitas Next Comment ini pada Custom Template lama juga bukan kesalahan dari pembuat template terdahulu, saya bisa mengatakan ini karena blogger sendiri yang beberapa waktu lalu baru memperbaharui fasilitas ini, akibatnya tempate-template yang lama malah tidak support untuk menampilkan fasilitas ini. Tapi jangan kawatir, untuk menambah fasilitas Next Comment ini gak begitu sulit kok, ikutin saja tutorialnya di bawah ini:

Pertama cari kode dibawah ini, oh iya jangan lupa memberi centang pada Expand Template Widget.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Kalau sudah ketemu Copas aja semua kode dibawah ini, lalu letakan tepat dibawah kode diatas.

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

Dengan cara yang sama, Copas kembali semua kode diatas, kemudian cari kembali kode dibawah ini dan letakan kode yang baru saja kita copas tadi tepat diatas kode dibawah ini.

<p class='comment-footer'>

Silahkan disimpan, oh iya sayangnya kita tidak bisa melihat hasilnya kecuali komentar di blog kita ada yang sudah mencapai angka lebih dari 200 :(

Yups! Tutorial diatas sebenarnya sudah Finish, tapi bila ingin menampilkan tampilan yang berbeda menggunakan Custom CSS pada Blogger Next Comment, kita bisa menggunakan coding CSS dibawah ini:

.paging-control-container
{
float: right;
margin-top: 0pt;
margin-right: 6px;
margin-bottom: 0pt;
margin-left: 0pt;
font-size: 11px;
font-weight:bold;
}

Seperti biasa, untuk memasang Code CSS diatas tinggal masukannya saja pada deretan Code CSS yang ada pada halaman Edit HTML, lalu simpan dan lihat hasilnya. Silahkan dicoba aja ya :)

Baca Selengkapnya →

Memasang Total Comment pada Title Post

Pasti rekan sudah melihat ada yang menarik dari tampilan title post pada blog ini, disitu terlihat gambar icon kecil plus total komentar yang terletak berbarengan di sebelahnya. Untuk bisa memiliki tampilan seperti itu caranya sangat mudah sekali. ikuti saja tutorialnya dibawah:

Pertama buka halaman "EDIT HTML", kemudian beri tanda centang pada "Expand Template Widget". cari kode seperti dibawah

<a expr:href='data:post.url'><data:post.title/></a>

kalo sudah ketemu, tinggal Copy-paste aja semua kode dibawah ini dan letakan saja dibawah kode diatas.

<b:if cond='data:blog.pageType != "item"'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaNuSDrkE09bTOoIPoiDveXFeMGhuOPKvE7seY-4LAGTrz4aoAE2tHn8uVnRnT0KC71lQaTO-__nkSRFyHY5CBeLkCojpZ_uTVo2usYFjgwSuQxBH-Zpv27-SQ3u3pVb4uDoXVhd-lD7y/s400/icon_comments.png'/>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>

Semoga berhasil :)

Baca Selengkapnya →

Cara Menampilkan Blank Avatar / Default Komentar Avatar

Satu hal yang tidak saya suka dari komentar avatar blogger karena tidak mampu menampilkan avatar selain avatar blogger itu sendiri. Yang lebih kurang menyenangkan, komentar avatar hanya bisa menampilkan poto profile jika status kita hanya dalam keadaan login . Jadi jangan berharap avatar akan tampil jika kita hanya memasukan alamat URL saja, tentu ini akan mengurangi dari segi kerapian tampilan, karena akan terlihat space kosong tanpa dihiasi avatar sama sekali.

Nah agar space avatar tidak kosong, kita coba menambahkan avatar baru berupa gambar default pada blank avatar, ikuti caranya dibawah ini

Baca Selengkapnya →

Mengembalikan dan Mengaktifkan Komentar Avatar Blogger pada Custom Template

Secara default sebenarnya komentar avatar pada blogger sudah bisa rekan aktifkan langsung tanpa merubah apapun pada tempate yang belum dimodifkasi. Tapi ini akan bermasalah bila template yang digunakan saat ini sudah menggunakan custom template. Nah biar komentar avatar ini bisa tampil kembali caranya sangat mudah, ikuti saja tutorial dibawah ini:

Baca Selengkapnya →

Akhirnya Blogger Punya Readmore Sendiri (Jump Breaks)

Kayakanya sekarang gak perlu lagi nih buka arsip lama saya Cara membuat readmore, lah kenapa om? la..kan sekarang blogger sudah support fungsi readmore sendiri :). Fasilitas Jump Breaks / Read More yang sudah lama jadi impian para Blogger ini akhirnya terwujud juga, berita gembira ini bisa rekan baca langsung diblog resminya blogger, blogger in draft. Berhubung fasilitas readmore ini masih dalam tahap uji coba pengguna, jadi hanya bisa digunakan pada area draft blogger saja. silahkan login dulu melalui http://draft.blogger.com

Baca Selengkapnya →

Membuat Mini Post atau Mini Artikel diBlogger

Sudah lama juga ya gak nulis tutorial, abis bingung mo nulis apalagi karena hampir semua tutorial blogger sudah saya bahas semua di blog ini. Nah tadi barusan ingat kalo beberapa waktu lalu banyak yang nanyain saya gimana cara menampilkan posting berbeda untuk setiap label tertentu? mungkin rekan yang sering berkunjung ke zoomtemplate.com sudah mengerti maksud saya ya, kalo belum silahkan lihat contohnya dengan mengklik link Older Posts sampai ketemu perbedaannya. Atau bisa lihat contohnya di http://tweets.o-om.com

Mini Post atau Mini Artikel ini sebenarnya cara lain menampilkan berita singkat dimana style post yang ditampilkan akan berbeda dengan posting sebenarnya. Minipost ini akan tampil sesuai dengan label atau kategori khusus..jadi untuk menampilkan setiap Mini post kita hanya cukup menentukan labelnya saja. Sebenarnya cara membuat mini post ini saya temukan dari salah satu blogger quiterandom.com silahkan dipelajari disana bila ingin lebih jelasnya :)

1. Masukan kode dibawah ini dalam deretan kode CSS

.minipost.home {background: #fff; font: normal 12px 'Arial', sans-serif; padding: 5px;border:1px solid #c0c0c0}
.minipost.home .date {color: #000; font-size: 10px; font-weight: bold; text-transform: uppercase;}
.minipost.home .body {padding: 5px 0;}
.minipost.home .meta a {color: #990000; font-size: 10px; font-weight: bold; text-transform: uppercase;}
.minipost.item {background: transparent;}
.minipost.item .date {margin:1.5em 0 .75em; font:normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:#999999;}
.minipost.item .title {margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:#cc6600;}

2. Kemudian cari kode <b:loop values='data:posts' var='post'> lanjutkan lagi dengan memasukan kode warna pink yang pertama. Kalo sudah masukan lagi kode warna pink yang kedua dibawah kode <b:include data='post' name='post'/>

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<b:if cond='data:label.name != "minipost"'>

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

<b:else/>
<b:include data='post' name='minipost'/>
</b:if>
</b:if>
</b:loop>

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>

3. Langkah ke tiga cari kode berikut <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> Kemudian sisipkan semua kode dibawah ini dibawah kode diatas

<b:includable id='minipost' var='top'>

<b:if cond='data:blog.pageType != "item"'>
<div class='minipost home'>
<div class='date'><data:post.dateHeader/></div>
<div class='body'>
<data:post.body/>
<div class='clear'/>
</div>
<div class='meta'>
<a expr:href='data:post.url'>Read More</a> |
<a expr:href='data:post.url + "#comments"'><data:post.numComments/> comments</a>
<b:include data='post' name='postQuickEdit'/>
</div>
</div>

<b:else/>

<div class='minipost item'>
<div class='date'><data:post.dateHeader/></div>
<div class='title'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</div>
<div class='body'>
<data:post.body/>
<div class='clear'/>
</div>
<b:include data='post' name='postQuickEdit'/>
</div>
</b:if>

</b:includable>

4. Buat satu postingan dengan label "minipost", silahkan dicoba aja dulu :)

Baca Selengkapnya →

Cara pasang Auto Read More terbaru (Part 2)

(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.

Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<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'>Readmore</a>
</b:if>
<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..happy tutorial with o-om.com :)

Baca Selengkapnya →

Pasang Avatar Mybloglog pada kolom komentar

Sebenarnya memasang avatar Mybloglog di kolom komentar bukanlah hal yang baru, namun dari beberapa blog yang pernah saya kunjungi ternyata sedikit sekali mengaplikasikannya. Entah kenapa tutorial yang pernah dipopulerkan oleh si blogger cantik Amanda ini ternyata tidak begitu banyak peminatnya, padahal menurut saya widget ini ternyata lebih bagus dibandingkan tutorial yang dulu pernah saya ulas disini, memang ada bedanya sih, tutorial lama yang pernah saya tulis memang tidak menggunakan pemanggilan avatar melalui widget Mybloglog, tapi langsung menggambilnya melalui Profile Blogger.

Nah, ditengah kesibukan saya saat ini dan kemaren nyempetin waktu sebentar nyobain avatar yang sudah terbilang basi ini, eh hasilnya sungguh diluar dugaan.. ternyata sampai saat ini sudah ada sekitar ratusan ribu blogger yang ngantri dan tertarik ingin juga memasangnya (waks* ketahuan bener ngibulinnya wkwkwwk). Huh..berhubung terus menerus di desak dan malah ada yang berani bayar tutorial ini dengan harga tinggi yah mau gak mau saya tulis saja langsung tutorialnya. Halah ngalur ngidul gak jelas...(biasa lagi error mode on hihihi)

Ya sudah, lupakan tulisan dodol diatas, langsung aja ya..

1. Pastikan rekan sudah terdaftar di Mybloglog

2. Kalo sudah, sekarang kembali ke Blogger, lalu tuju langsung kehalaman Edit HTML. Cari tag </head> kemudian copy-paste saja semua script dibawah ini dan letakan diatasnya. (jangan lupa di save dulu)

<script type='text/javascript'>
//<![CDATA[
/*
Merlinox and Napolux MyBlogLog Avatar Creator
created by Merlinox (blog.merlinox.com)
helped by Napolux (www.napolux.com)

version 0.1 (20061214)
version 0.2 (20061215)
compatible with all blogger blog
*/

if(typeof(myLayer)!='function'){
function myLayer (x){
//individuo l'oggetto
if(document.layers){ // browser="NN4";
lay=document.layers[x];
}
if(document.all){ // browser="IE";
lay=eval("document.all." + x);
}
if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
lay=document.getElementById(x);
}
return lay;
}
}

//lo prendo da blogger
function myBlogAvatar(codiceCommento,autore,stile){
//scrivo lo span
//var myBlogSpan = "myBlog-" + codiceCommento;
//document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");

//metto tutto minuscolo perchè indexOf è case sensitive

if (autore != ""){
alt="MyBlogLog: " + autore;

myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>";
//myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
//myLayer(myBlogSpan).innerHTML = myBlog;
document.write(myBlog);
}
}
//]]>
</script>

3. Masih pada halaman Edit HTML, beri tanda centang pada Expand Widget Templates. Kemudian cari kode dibawah:

<b:loop values='data:post.comments' var='comment'>

Sudah ketemu? kalo sudah, silahkan copas semua kode dibawah ini dan letakan kembali dibawah kode diatas.

<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>

4. Simpan dan lihat hasilnya..met nyoba aja dah :)

Baca Selengkapnya →

Membuka Link Feed pada halaman baru

Anda pasti pernah menggunakan Feed Widget yang sudah disediakan dalam fasilitas Blogger, biasanya feed ini banyak juga dimanfaatkan untuk menampilkan Recent Comment dan Recent Post via feed, contohnya bisa anda lihat pada blog saya ini.

Selain fungsi diatas, biasanya beberapa program advertising seperti Ask2link dan Teks Link Ads juga memanfaatkan feed ini untuk menampilkan link mereka. Nah, sekarang yang jadi masalah, coba saja anda perhatikan ketika link feed ini diklik, maka halaman yang terbuka akan tetap pada halaman yang sama, tidak masalah bila halaman tujuan merupakan halaman kita sendiri, tapi akan jadi masalah bila halaman yang dibuka menuju kealamat lain, iya khan?

Tutorial kali ini kita akan mencoba menambahkan sedikit baris kode agar link feed ini bila diklik terbuka pada halaman yang baru (new window). Langsung aja ya, pertama anda masuk ke halaman Edit HTML dulu, kemudia beri tanda centang pada Expand Widget Template, silahkan anda cari seperti penggalan script dibawah.

Untuk mempermudah anda mencari Feed ID, blogger sebenarnya sudah memberikan nama default untuk feed ini yaitu Feed[nomor urut Feed], (Penting: bila feed anda hanya satu berarti anda hanya cukup mencari Feed1)

Lihat warna merah dibawah merupakan contoh Feed3 yang berarti Feed ID ke-3 yang akan dicari.

<b:widget id='Feed3' locked='false' title='Friends Blog' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content'>
<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<b:loop values='data:feedData.items' var='i'>
<li>
<span class='item-title'>
<a expr:href='data:i.alternate.href'>
<data:i.title/>
</a>

Bila anda sudah menemukan ID Feed, sekarang tambahkan kode target='_blank' lihat contoh penambahan kode warna merah dibawah.

<b:widget id='Feed3' locked='false' title='Friends Blog' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content'>
<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<b:loop values='data:feedData.items' var='i'>
<li>
<span class='item-title'>
<a expr:href='data:i.alternate.href' target='_blank'>
<data:i.title/>
</a>

Selamat mencoba, (i'm oom, i blogg stuff)

Baca Selengkapnya →

Resep Mengedit Script Followers

Melengkapi tutorial sebelumnya pada tulisan Customized tampilan "Blogger Followers", kali ini saya mencoba berbagi resep mengedit script pada Followers. Langung ke topik aja ya..saya ambil contoh mudahnya, seandainya anda kurang sreg dengan tampilan judul text link pada default Followers, anda bisa mengubahnya dengan kalimat anda sendiri, selain itu, anda juga bisa melakukan hidden text pada judul link jika memang diperlukan.

Untuk lokasi scriptnya, silahkan sesuaikan pada kode warna hijau, kemudian cukup dengan merubah kode yang saya tandai dengan warna merah dibawah ini. Silahkan dicoba :)

Mengganti tulisan Follow This Blog

<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>

Mengganti tulisan View All

<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>

Menghapus Pesan (jumlah) Followers

<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>

Mengganti Tulisan Stop Following

<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:stopFollowingMessage/>
</a>
</div>

Mengganti Tulisan Manage

<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>

Mengganti Tulisan Jika belum ada Followers

<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>

Ada kalanya anda tidak ingin menampilkan informasi Jumlah Followers pada title, atau mungkin anda ingin menghapus beberapa judul text link pada Followers yang dirasa kurang nyaman untuk ditampikan. Entah dasar apa anda ingin menghapusnya, menurut saya, link ini tidak terlalu mengganggu. Tapi jika anda menginginkannya, anda tinggal menghapus semua kode yang ditandai dengan warna hijau dibawah.

Menghapus (jumlah) Followers

<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>

Menghapus Link Manage

<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>

Hapus link Follow this blog

<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>

Menghapus Link Stop following

<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:stopFollowingMessage/>
</a>
</div>

Menghapus Title (jumlah) Follower Count

<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>

Sebelum mencoba hack kode diatas, disarankan untuk membackup template anda terlebih dahulu. Ok selamat mencoba, happy blogging with o-om.com

Baca Selengkapnya →

Customized tampilan "Blogger Followers"

Customized Blogger Followers - Terus terang, saya kurang nyaman dengan tampilan standar Blogger Followers. Bila anda perhatikan, terlihat link menu Follow this blog yang berada diatas, kemudian diikuti informasi jumlah followers dan link View all dibawahnya. Sekilas memang tidak terlalu mengganggu, tapi namanya juga selera, tentu saja terasa ada yang kurang.

Jika anda sependapat dengan saya, tidak ada salahnya untuk mencoba memodifikasi tampilan standar Followers ini agar nampak lebih manis. Jika Followers anda belum support di mode indonesia, silahkan klik disini untuk cara menampilkanya.

Lihat sample modifikasi tampilan dibawah:

Anda bisa melihat perubahan diatas, dimana link tertata rapi, serta sedikit sentuhan border (garis tepi) pada setiap photo.

Bila anda pada area mode sedang login, link Manage akan tetap pada posisi menggantikan Link View All. jadi jangan kuatir pada perubahan kodingnya :)

Mari kita coba memodifikasinya:

Untuk menambahkan border (garis tepi) pada gambar, pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah, Sebaiknya letakan kode tersebut dibawah kode <b:skin><![CDATA[

/* Follower (Modified by o-om.com)
----------------------------------
*/
.follower-grid {width:150px;}
.follower {width:32px; height:32px; float:left; margin:2px;}
.follower-img {float: left; border:1px solid #222; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px;}
.follow-this {margin:0.5em 0.5em 0.5em 0; font-weight:bold;}
.followers-canvas {margin:0.5em 0.5em 0.5em 0; font-weight:bold;}

Jangan lupa simpan dulu perubahan diatas. (Sebenarnya kode CSS diatas bisa anda modifikasi sesuai keperluan, jadi saya masukan saja kode CSS Followers secara lengkap jika suatu waktu anda ingin memodifikasinya)

Kita lanjutkan mengedit kode utamanya, disini agak rumit karena akan banyak kode yang harus anda perhatikan.

Pertama tuju ke halaman Edit HTML, jangan lupa beri tanda centang pada Expand Widget Templates, Kemudian cari kode tercetak tebal sesuai warna hijau di bawah ini:

<b:widget id='Followers1' locked='false' title='ini sesuai dengan title masing-masing' type='Followers'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>

<div expr:id='data:widget.instanceId + "-wrapper"'>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>
<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:stopFollowingMessage/>
</a>
</div>
</b:if>

<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>

<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>

<div class='followers-canvas profile-link'>
<data:followersFooterMessage/>
<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>
<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>
</div>

Kemudian ganti semua kode warna merah diatas, dengan melakukan (copy-paste) kode warna merah yang sudah saya modifikasi dibawah ini:

<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>

<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>

<div expr:id='data:widget.instanceId + "-wrapper"'>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a> -

<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>

<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span> - <data:followersFooterMessage/>
</div>

<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:stopFollowingMessage/>
</a>
</div>

</b:if>

Kemudian simpan pekerjaan anda, dan silahkan lihat perubahannya.

Jangan lupa untuk mem-follow blog oom disini atau anda bisa melihat siapa saja yang sudah bergabung di followers oom disini. Good Luck ya :)

Baca Selengkapnya →

Nomor Urut Komentar (Numbering Comments)

Menerima kiriman berita dari jagoan blogger cewek tepatnya Amanda, om dapat informasi mengenai salah satu blogger yang berhasil membuat atau menampilkan nomor urut komentar di blogger (Numbering Comments). Si pembuat kode yang om ketahui bernama Fernandooo1 ini telah berhasil melakukannya, tanpa pikir panjang om langsung beranjak ke ke TKP, setelah beberapa saat mencoba Wowww it work men :)

Penarasan pengen segera memasangnya? silahkan sambangi langsung blognya Fernandooo1

Maaf untuk menghargai Original Content, kali ini om belum berani menampilkan tutorialnya..blogger top sekelas Amanda saja cuma berani melakukan review, apa lagi cuma sekelas oom hehehe *tau diri mode on*

Special thanks for Amanda and Fernandooo1 for great tutorial :)

Baca Selengkapnya →

Kumpulan Blogger Hack dan Tutorial Singkat Blogspot

Dibawah ini merupakan Kumpulan tutorial singkat Blogspot dan beberapa Blogger Hack yang paling sering ditanyakan. Sengaja saya tidak membuat tulisan per-artikel mengingat penjelasannya terlalu singkat dan terbilang sederhana. Nah..untuk menjawab pertanyaan yang sama dan sering pada komentar dan Imel yang masuk saya kumpulkan aja jadi satu. Silahkan dicoba :)

Agar Title SEO Friendly

Agar title blogger lebih lebih bersahabat dengan Search Engeine (SEO Friendly) kita dapat mengganti Title standar dengan Title kode yang sudah dimodifikasi.

Cari kode title dibawah ini:

<title><data:blog.pageTitle/></title>

Kemudian ganti semua kode diatas dengan kode dibawah

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Menghapus Link Subsribe Post (atom) atau Berlangganan: Posting (atom)

Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template Widget, cari kode dibawah lalu hapus kode warna merah dibawah.

<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> 
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

Menghilangkan Navbar

Masuk halaman Edit HTML kemudian letakan dibawah kode <b:skin><![CDATA[

#navbar{height:10px; visibility:hidden; display:none}

Auto Hide pada Navbar Blogger

Pada halaman Edit HTML, kemudian letakan kode dibawah kode <b:skin><![CDATA[

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Mengganti Default Atom dengan RSS

Kadang mungkin kita ingin menggunakan default feed sebagai RRS, caranya masuk halaman Edit HTML, Kemudian cari kode warna hijau dibawah

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

Ganti kode warna hijau dengan kode dibawah ini:

<a class='feed-link' expr:href='data:f.url + "?alt=rss"' type='application/rss+xml' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>

Memasang Icon Sebelum title Post

Pertama cari .post h3{ pada deretan kode CSS kemudian masukan sesuai kode warna hijau dibawah:

.post h3{ background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzcx-ikujWbUjEtbAmV74AkPCKjRGWdQquMtcivGvYoEWe1ElqhLU42FQVA7KdPQKpAwY7WisVpNHdEQfyRuR28Vzv0PzgSl67ssSbjBm4zlT2Kn1NhUvdi2o52q2-rvdk9_FEgGKYmTFg/s400/dotlink.gif") 0px 0px no-repeat; margin:.5em 0; padding:0 20px 0; font-size:120%; font-weight:bold; font-style:normal; line-height:1.3em; color:#333}

Pasang Icon Pada Setiap Judul SideBar

Pertama cari #sidebar-wrapper h2{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:

#sidebar-wrapper h2{ background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzcx-ikujWbUjEtbAmV74AkPCKjRGWdQquMtcivGvYoEWe1ElqhLU42FQVA7KdPQKpAwY7WisVpNHdEQfyRuR28Vzv0PzgSl67ssSbjBm4zlT2Kn1NhUvdi2o52q2-rvdk9_FEgGKYmTFg/s400/dotlink.gif") 0px 0px no-repeat; margin:.6em 0 .6em; padding:0 20px; font-size:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; color:#222; border-bottom:1px solid #C0C0C0}

Memasang Icon di link Sidebar

Pertama cari #sidebar-wrapper li{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:

#sidebar-wrapper li{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzcx-ikujWbUjEtbAmV74AkPCKjRGWdQquMtcivGvYoEWe1ElqhLU42FQVA7KdPQKpAwY7WisVpNHdEQfyRuR28Vzv0PzgSl67ssSbjBm4zlT2Kn1NhUvdi2o52q2-rvdk9_FEgGKYmTFg/s400/dotlink.gif") no-repeat 0px .20em; margin:0; padding:0 0 .25em 17px; line-height:1.2em}

Memasang Icon Sebelum Title Post pada halaman List Label

Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template Widget, cari kode warna hijau di kemudian masukan sesuai kode warna merah dibawah:

<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:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzcx-ikujWbUjEtbAmV74AkPCKjRGWdQquMtcivGvYoEWe1ElqhLU42FQVA7KdPQKpAwY7WisVpNHdEQfyRuR28Vzv0PzgSl67ssSbjBm4zlT2Kn1NhUvdi2o52q2-rvdk9_FEgGKYmTFg/s400/dotlink.gif'/>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Pasang Icon Sebelum Jumlah Komentar

Pertama cari #comments h4{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:

#comments h4{ background:#eee5e5 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaNuSDrkE09bTOoIPoiDveXFeMGhuOPKvE7seY-4LAGTrz4aoAE2tHn8uVnRnT0KC71lQaTO-__nkSRFyHY5CBeLkCojpZ_uTVo2usYFjgwSuQxBH-Zpv27-SQ3u3pVb4uDoXVhd-lD7y/s400/icon_comments.png") no-repeat 3px .3em; width:430px; margin:.1em 0; font-size:12pt; font-weight:bold; line-height:1.5em; letter-spacing:.1em; color:#111; padding-left:25px}

Pasang Icon Sebelum Nama Komentator

Pertama cari #comments-block .comment-author{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:

#comments-block .comment-author{ margin:.5em 0; padding-left:25px; background:#FFFFCC url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaocSMG7-9VakbBoQWwkRlhI_WfUw8jkoEHb7uW8FCPaEFDgiUnxIbeYHiuqNjjxLeJFhH-7xJzMu1ZAh3HDtKW4vY0CFHkhkwae3F2cB2io6ok7NF7I5b7UZO6_U_it8ZhPTRmxGS9lVa/s400/icon_comment.gif") no-repeat 3px .3em; color:#111}

Mengganti Tulisan Posting Lebih Baru - Halaman Utama - Posting Lama dengan tulisan sendiri atau bergaya Icon

Anda mungkin ingin mengganti tulisan standar Posting Lebih Baru - Halaman Utama - Posting Lama dengan gaya sendiri atau anda juga bisa menganti tulisan tersebut dengan icon. Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template Widget, cari kode warna hijau di bawah kemudian ganti kode warna merah dibawah sesuai keinginan.Untuk menganti gaya tulisan sendiri anda bisa langsung menulisnya sedangkan jika ingin mengganti dengan gaya icon tinggal ganti dengan kode <img src="http://loakasit-gambar-anda.com/contoh.jpg"/>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>

Cara mencetak halaman (Print Page)

Anda mungkin ingin mencetak perhalaman langsung ke default Printer, caranya tinggal memasang kode dibawah ini langsung disetiap halaman atau letakan di dalam halaman Post.

<a href="javascript:print(document)">Cetak Halaman Ini</a>

Baca Selengkapnya →

Horizontal Menu Navigasi

Yang sering berkujung ke blog om pasti sudah tidak asing dengan horizonal menu navigasi. Nah tutor kali ini kita mencoba membuat menu navigasi yang sebenarnya meminjam salah satu widget dari bawaan standar blogger. Dengan sedikit sentuhan pada CSS, widget Linklist yang semula banyak digunakan sebagai blogroll secara vertikal akan kita modifikasi menjadi menu navigasi secara horizontal. Ya sudah, dari pada om cuap2 gak jelas langsung ke cara pembuatan aja ya :)

Pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah ini lalu letakan diatas kode ]]></b:skin>

/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

/*-- (Search) --*/
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

Masih pada halaman Edit HTML kemudian cari kode <div id='outer-wrapper'><div id='wrap2'> biasanya kode ini terletak di bawah html tag <body> kemudian copi-paste semua kode dibawah ini, dan letakan kodenya dibawah kode warna hijau diatas.

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == '') {this.value = 'Cari artikel disini';}' onfocus='if (this.value == 'Cari artikel disini') {this.value = '';}' type='text' value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Silahkan disimpan dan lihat hasilnya. oh hampir lupa..rekan bisa menyesuaikan warna latar dan textnya sendiri ya :)

Untuk menambah menu, silahkan buka kembali "Elemen Halaman" kemudian perhatikan widget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan. Selamat Mencoba :)

Baca Selengkapnya →

Huruf besar di awal kalimat

Membuat huruf besar di awal kalimat mungkin bisa menjadi ciri khas tersendiri, sebagai contoh lihat awal kalimat yang ditandai dengan huruf "M" pada artikel ini..tampak beda khan! jika anda ingin artikel anda tampak seperti itu anda bisa mencoba membuatnya.

Pertama, buka halaman Edit HTML anda kemudian cari code CSS dibawah ini

.post-body {
.....
}

Jika sudah ketemu, tambahkan kode dibawah ini dibawah kode diatas (pastikan dibawahnya, bukan diantaranya)

.post bt {

float:left; color:

$headerBgColor;

font-size:100px;

line-height:80px;

padding-top:1px;

padding-right:5px; }

Cara menggunakannya :

Ketika anda menulis di halaman posting pastikan pada awal kalimat tambahkan <bt></bt>

Contoh :

<bt>M</bt>embuat huruf besar di awal kalimat mungkin jadi ciri khas tersendiri

Sumber : http://beautifulbeta.blogspot.com/

Baca Selengkapnya →

Rahasia dibalik "Meta Title Tag" Blogger

Jika anda perhatikan Title diblog o-om.com sekilas tidak ada kejanggalan, namum dibalik Title Blog o-om.com sebenarnya tersimpan rahasia yang jarang diketahui para Blogger.

Keyword pada Meta Title Tag Blogger mempunyai peranan cukup vital, hampir seluruh Search Engine memberikan penekanan pada pengunaan Title (judul). Judul sebaiknya mewakili 2 sampai 3 kata kunci, semakin dekat posisi kata kunci pada awal judul maka akan semain baik. Jika anda mempunyai penekanan pada judul yang pendek ini tidak terlalu bermasalah, namun ada kalanya judul yang anda masukan lebih dari 10 kata dan terlihat panjang. Terus terang ini menjadi masalah serius jika anda benar-benar fokus pada penggunan title, pengunaan title yang panjang akan merusak judul postingan anda di Search Engine. ini disebabkan keberadaan keyword pada judul postingan anda akan dirampas oleh title blog anda. Perlu anda ketahui search engine tidak akan menampilkan result percarian text keseluruhan tapi akan memotong keyword anda dengan tanda [....] sebagai text lanjutan.

Jika anda perhatikan Title diblog o-om.com sekilas tidak ada kejanggalan, namum dibalik Title Blog o-om.com sebenarnya tersimpan rahasia yang jarang diketahui para blogger. walau anda View Source pada browser, anda tidak akan melihat apapun perubahan kode pada meta title blog ini karena browser sudah melakukan konversi Html ke modus default standar, jadi bukan menampilkan Html seperti Script default pada Edit Html Blogger.

Bisa anda lihat Title utama blog ini terbilang panjang, dimana O-OM'S BLOG merupakan Judul blog, kemudian diikuti beberapa kata kunci utama. Lalu apa yang terjadi pada result pencarian search engine ketika saya menggunakan Title yang panjang pada title standar blogger, sebagai contoh keyword "Cara membuat Favicon" masalah utama jelas pengguna tidak akan pernah menemukan kata kunci dengan judul tersebut, sudah jelas terlihat punggunaan Title yang panjang akan menjadi masalah vital dimana anda akan kehilangan kata kunci pada judul posting.

Contoh masalah pada Title yang panjang:

O-OM'S BLOG | Tips dan Trik Blogger untuk Pemula: Cara ....

Lihat perbedaan hasil pencarian diatas dengan hasil pencarian dibawah ini, mana menurut anda yang terbaik?? Tentu saja yang dibawah, jelas sekali keyword judul posting berada dibelakang Judul blog sebelum kata kunci utama. klik Disini untuk lebih jelasnya

Contoh Title yang panjang setelah dimodifikasi:

O-OM'S BLOG: Cara Buat Favicon | Tips dan Trik Blogger ....

Bagaimana saya memanipulasi agar judul posting berada diantara antara Judul blog dan Kata kunci utama, ikuti cara dibawah ini agar anda mengetahui perbedaannya.

1. Masuk Pada Layout -> Elemen halaman -> tuju pada Header kemudian klik Edit.

2. Pada Judul Blog masukan nama blog anda (Sebaiknya gunakan 2 kata saja)

3. Kemudian Masuk ke halaman Edit HTML lalu cari kode dibawah ini.

<title><data:blog.pageTitle/></title>

Lalu tambahkan katakunci anda seperti contoh text warna merah dibawah ini (silahkan ganti dengan kata kunci anda sendiri)

<title><data:blog.pageTitle/> | katakunci1, katakunci 2, katakunci3</title>

4. Silahkan di Simpan dan lihat hasilnya.

Title terlalu panjang "No Problem" sekarang anda tidak perlu takut menggunakan Title yang panjang, apalagi kehilangan keyword judul postingan pada search engine...silahkan mencoba melakukan experimen sendiri. Thanks O-OM

Baca Selengkapnya →

Ubah atau hapus Angka Label (Count)

Label pada standar blogger biasanya menampikan jumlah dari banyaknya posting dalam satu kategori, tanda ini biasanya ditandai dengan tanda kurung ( ) jika anda ingin mencoba mengubah atau menghapus angka dalam label (Label Count) ikuti tutorialnya dibawah ini:

Gambar dibawah hanya sebuah contoh bagaimana anda ingin mengubah tanda label (100) menjadi [100] atau <100> atau sekaligus tidak menampilkannya.

Caranya:

1. Masuk pada menu Edit HTML

2. Jangan lupa beri tanda centang pada Expand Template Widget

3. Kemudian cari kode seperti dibawah ini

(<data :label.count/>)

4. Silahkan anda ganti tanda ( dan ) dengan apa saja.

Contoh :

[<data :label.count/>]

atau

{<data :label.count/>}

5. Jika anda tidak ingin menampilkannya tinggal hapus aja semua kode (<data :label.count/>)

6. Jangan lupa disimpan :)

Baca Selengkapnya →

Mengganti text link "Post a Comment"

Default Blogger biasanya menampilkan link "Post a Comment" dibawah kolom komentar, meskipun blog tersebut sudah di set ke dalam bahasa indonesia, jika anda ingin mengubah tulisan tersebut dengan gaya anda sendiri misalkan "Tulis sebuah komentar" atau "Ingin becuap-cuap" atau dengan tulisan lainya. Cara mengubah text tesebut sangat mudah ikuti caranya dibawah ini:

1. Masuk halaman Edit Html

2. Beri tanda centang pada Expand Template Widget

3. Cari Kode dibawah ini :

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b><font color='#444'>
<img alt='Post a Comment' border='0' height='47' src='http://oom.blog.googlepages.com/comments.gif' width='61'/>
<data:postCommentMsg/></font></b></a>
</p>

Ganti tulisan ditandai warna merah diatas sesuai keinginan anda.

4. Kemudain simpan template anda, Selamat mencoba :)

Baca Selengkapnya →

Cara menghilangkan "Navbar Blogger"

Sebelum menghilangkan navbar blogger (Navigation Bar) ada baiknya saya informasikan bahwa cara ini salah satu pelanggaran TOS Blogger, jika etap ingin menghilangkannya bisa gunakan script dibawah ini:

/* CSS to hid navigation bar */

#navbar {
height:10px;
visibility:hidden;
display:none;
}

Cara pasang:

Pada halaman Edit HTML kemudian letakan kode diatas dibawah kode <b:skin><![CDATA[/* kemudian simpan template.

Baca Selengkapnya →

Tampilan beda untuk komentar pemilik blog

Membedakan tampilan komentar pemilik dengan pengujung atau istilah kren-nya Author Comment Highlight tentu akan mempermudah pengunjung lain untuk melihat mana komentar dari pengunjung blog dan mana komentar pemilik blog.

Tanpa banyak cuap-cuap langsung aja ya ketahap pembuatannya?

Pertama:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Template Widget

cari kode <dd class=’comment-body’> atau lihat arahan kode warna hijau dibawah ini, jika sudah ketemu kode <dd class=’comment-body’> tambahkan kode dengan warna merah di atas kode tersebut. kemudian tambahkan juga kode </b:if> seperti tampak pada kode dibawah.

<dl id=’comments-block’>
        <b:loop values=’data:post.comments’ var=’comment’>
<b:if cond=’data:comment.author == data:post.author’>
<dt class=’owner-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>
<data:commentPostedByMsg/>
</dt>
<b:else/>
          <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>
            <data:commentPostedByMsg/>
          </dt>
</b:if>

<b:if cond=’data:comment.author == data:post.author’>
<dd class=’owner-Body’>
<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>

<b:if cond=’data:comment.author == data:post.author’>
<dd class=’owner-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:else/>

Kemudian tambahkan kode CSS dibawah ini

Cari kode dengan warna hijau, jika sudah ketemu tambahkan kode dengan warna merah dibawahnya.

#comments-block .comment-body p {
margin:0 0 .75em;
background:#f3f3f3 no-repeat left bottom;
}

.owner-Body {
margin:0;
padding:0 0 0 20px;
}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
color:#FF0000;
text-decoration:bold;
}

Selamat mencoba..ups hampir lupa ucapan terima kasih buat mas anang yang menulis lebih dulu tutorial ini.

Baca Selengkapnya →