Info Guweh: Blogger Hack

Showing posts with label Blogger Hack. Show all posts

Sunday, December 6, 2009

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.

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.

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 :)

Tuesday, September 29, 2009

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/AVvXsEi_M3XyELqtynSgVC5T1p4_Jblw6a2_iaSsJDQEmcNx2nulDQCRVdLW6PUwSyCbEU_AqTGqw_Nc2WlkX_qrhjR6CL-y_MNZOMBgWaByx2-I8AIbW3VFP7hWHclzt1zXrJPpMwNcDJvq1sDk/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 :)

Tuesday, September 22, 2009

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

Letakan kode CSS dibawah ini diatas kode ]]></b:skin>

/* Avatar */

.avatar-image-container img {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjSVSNIMmFo-WRWKQnbIEtQ6wwweb_IDgt4xxSzUib0mws4X8tns_ubyIddmd6yEZLFnUTtp77rGddM-E8KEf8yPXiRKy-FEE9deDkNg15hlNxqt-VbI25LR899gGa1fSU12z6c-evgDf7/s320/AvatarBlogger.png);

width:35px;

height:35px;

}

Cari kode dibawah ini.

Kemudian ganti kode diatas dengan kode dibawah ini.

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;'
width='35px'/>

</b:if>

Selamat mencoba, semoga sampai tujuan :D

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:

Mengaktifkan Komentar Avatar Blogger Pada Custom Template

Pertama cari kode dibawah ini.

Kemudian ganti kode diatas dengan kode dibawah
ini.

Setelah mengganti kode diatas, kemudian cari baris
kode dibawah ini.

Kemudian letakan kode dibawah ini setelah kode diatas.

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

Untuk mengaktifkan atau menonaktifkan gambar profil dalam komentar, buka
halaman Pengaturan - Komentar. Lalu beri tanda check "Ya" pada "Tampilkan
gambar profil dalam komentar?"

Mengembalikan Komentar Avatar jika menggunakan avatar dari MyBloglog

Sebelumnya saya pernah menulis tutorial

memasang komentar avatar menggunakan mybloglog, nah bila rekan hanya ingin
menggunakan avatar standar blogger, rekan bisa dengan mudah mengembalikannya.
ikuti tutorial dibawah ini.

Untuk memudahkan rekan menghapus kodenya, pertama coba cari dulu kode dibawah
ini

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

Kemudian lihat baris kode dibawahnya seperti ini

<div
style='border:0;float:left;margin: 0 5px 0 0;'>

<script>

myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');

</script>

</div>

Kalo sudah ketemu, tinggal hapus aja semua kode diatas, kemudian ikuti
kembali cara mengaktifkan komentar avatar seperti yang tertulis diatas.

Wednesday, September 9, 2009

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

Disini ada dua cara mengaktifkan fasilitas readmore sekaligus mengatur letak
pemenggalan teks, yang pertama, jika berada pada area Compose, kita
tinggal mengatur saja letak pemenggalannya dengan mengarahkan mouse sesuai
posisi cursor, kemudian diikuti dengan mengklik icon kecil "insert jump
break".

Cara yang kedua, merupakan cara manual, seperti cara konvensional yang
biasa kita lakukan pada halaman EDIT HTML, kita tinggal menggunakan kode
berikut ini  dan letakan
dilokasi text yang ingin dipenggal.

Gambar diatas diambil dari bloggerindraft.blogspot.com

Wednesday, August 5, 2009

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 :)

Tuesday, March 31, 2009

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:

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 :)

Saturday, March 14, 2009

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)

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 :)

Thursday, December 4, 2008

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)

Monday, September 15, 2008

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

Mengganti tulisan View All

Menghapus Pesan (jumlah) Followers

Mengganti Tulisan Stop Following

Mengganti Tulisan Manage

Mengganti Tulisan Jika belum ada Followers

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

Menghapus Link Manage

Hapus link Follow this blog

Menghapus Link Stop following

Menghapus Title (jumlah) Follower Count

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

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:

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 :)

Tuesday, August 5, 2008

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 :)

Monday, August 4, 2008

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:

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:

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/AVvXsEhlHbAJKCpeMM51dqQuk6tBmwBfnxo82pSSk7Pn5WuEpZwWmqaQYjmsFrir7zywOxwfzyTrh2Cpo1YRYSP6dyBI31ThhjMkyC_6kWC1qQ6gdzAu-_2WgPMuwJrEG-CUzeXHfzLOeMcpmswd/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/AVvXsEhlHbAJKCpeMM51dqQuk6tBmwBfnxo82pSSk7Pn5WuEpZwWmqaQYjmsFrir7zywOxwfzyTrh2Cpo1YRYSP6dyBI31ThhjMkyC_6kWC1qQ6gdzAu-_2WgPMuwJrEG-CUzeXHfzLOeMcpmswd/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/AVvXsEhlHbAJKCpeMM51dqQuk6tBmwBfnxo82pSSk7Pn5WuEpZwWmqaQYjmsFrir7zywOxwfzyTrh2Cpo1YRYSP6dyBI31ThhjMkyC_6kWC1qQ6gdzAu-_2WgPMuwJrEG-CUzeXHfzLOeMcpmswd/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/AVvXsEhlHbAJKCpeMM51dqQuk6tBmwBfnxo82pSSk7Pn5WuEpZwWmqaQYjmsFrir7zywOxwfzyTrh2Cpo1YRYSP6dyBI31ThhjMkyC_6kWC1qQ6gdzAu-_2WgPMuwJrEG-CUzeXHfzLOeMcpmswd/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/AVvXsEi_M3XyELqtynSgVC5T1p4_Jblw6a2_iaSsJDQEmcNx2nulDQCRVdLW6PUwSyCbEU_AqTGqw_Nc2WlkX_qrhjR6CL-y_MNZOMBgWaByx2-I8AIbW3VFP7hWHclzt1zXrJPpMwNcDJvq1sDk/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/AVvXsEgVvTT1KRidZvMV4mft3ehID1DDvSwlqZJ32cUEh600PPBeuLindkBB_wd3hcyC8qGy09uOwjCfqEAfxJLLcA-gOffTklDhrzoi_me6JYusk2anStiDbxf83WtZL6QLEm7ATPX8DW50iPsv/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"/>

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>

Wednesday, July 23, 2008

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.

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 :)

Saturday, April 19, 2008

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/

Sunday, April 13, 2008

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.

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

Monday, April 7, 2008

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 :)

Wednesday, March 19, 2008

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 :

Ganti tulisan ditandai warna merah diatas sesuai
keinginan anda.

4. Kemudain simpan template anda, Selamat mencoba :)

Sunday, March 16, 2008

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.