Mengganti “Older Posts” Dengan Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks “Older Posts (posting lama)” dan “Newer Posts (posting baru)”. Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link “Older Posts (posting lama)” dan “Newer Posts (posting baru)” menjadi angka seperti gambar di bawah ini

1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke “Edit HTML”
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<!–Page Navigation Starts–>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<script type=’text/javascript’>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src=’http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js’ type=’text/javascript’/>
</b:if> </b:if>
<!–Page Navigation Ends –>

Kalau sudah silahkan dilihat hasilnya.

Regard

Rismawan Junandia

Highlight pada Script/Kode di Postingan

Memberikan Highlight untuk script atau kode pada postingan akan lebih memperjelas pembaca. Contohnya bisa kamu lihat pada blogku ini. Setiap kali ada script/kode maka akan selalu ada highlight (kotak) yg akan membedakan dengan tulisan yg lain. Nha kamu mau tahu cara pembuatamnya?


Gini nih caranya :
1. Login ke blogger lalu pilih Layout–>Edit HTML
2. Kemudian copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>

.alert { background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

Kode yang berwarna merah (#DDE4FF) adalah warna background kotak highlight, kamu bisa menggantinya dengan kode warna yang lain yang cocok dengan background blog kamu. Untuk kode-kode warna bisa dilihat DISINI

3. Kalau sudah kemudian Simpan.

Cara Posting
Supaya kode/scriptnya nanti bisa ada kotak highlight-nya maka untuk memposting harus pake cara2 tersendiri. Yaitu dengan menambahkan kode ini <p class=”alert”> sebelum kode/script yg akan diberi highlight. kemudian ditambahkan kode </p> diakhir script/Kode.

Dah gitu aja, gampang kan

Regard

Rismawan Junandia

Tips Mengedit HTML Blogspot

Jika kita mengotak-atik atau mengedit HTML blog kadang2 akan mengalami kesulitan, apalagi bagi yang masih agak pemula. Entah itu gak bisa nemu kode yang mau diedit lah, gak bisa disimpan karena error lah, Ada pesen error yang gak jelas lah, dan lah-lah yang lain, ya to…??? Nha trik dan tips kali ini akan mencoba gimana cara untuk mengatasi atau setidaknya mengurangi masalah “lah-lah” yang kadang2 atau sering terjadi tersebut.

Berikut ini beberapa tips untuk edit HTML bogger:

1. Backup Template

Membackup template ini penting karena jika terjadi hal-hal yang tidak dinginkan, misalnya blog jadi rusak maka kita bisa membuatnya seperti sediakala (sebelum rusak) jika kita sebelumnya sudah membackup template. Cara membackup template ini mudah. Cukup klik pada link “Download Full Template” lalu simpan file template di komputer kita. Kalo terjadi kesalahan yang tidak bisa kita atasi, kita tinggal upload aja file template tersebut.

2. Memberi Tanda Centang pada Kotak “Expand Widget Template”

Ini yang kadang2 dilupakan para “editor”. Kalau kotak “Expand Widget Templates” tidak dicentang maka kode2 yang dicari kemungkinan tidak ditemukan. Tapi kadang2 hal ini tidak perlu dilakukan tergantung dari petunjuk tutorialnya. Makanya perhatikan baik2 tutorialnya kalo mau Edit HTML blog.

3. Tips Mempermudah Pencarian

Untuk mempermudah pencarian kode yaitu dengan meng-copy dulu kode yang mau dicari kemudian tekan “Ctrl+f” lalu masukkan kode yang dicopy tadi kedalam kotak yg muncul. Kalo misalkan kode yang dicari tidak muncul maka cobalah mencari sebagian dari kode tersebut. Misal mau mencari kode <p><data:post.body/></p> jika tidak ketemu maka cb carilah sebagiannya atau seperti ini data:post.body kalau sudah ketemu maka klik tombol next untuk melihat apakah ada kode lain yang sama untuk memastikan kode yang dikehendaki. Tapi tips ini sepertinya sulit dilakakukan jika menggunakan browser “Chrome” paling mudah jika menggunakan “Mozilla Firefox”.

4. Tips Menghadapi Error Yang Muncul

Jika saat menyimpan hasil editan kemudian muncul pesan error, misal seperti ini:
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure…..
Maka hal yang harus kita lakukan adalah berusaha memahami pesan error tersebut. Kemudian kita cek kembali tutorial yang kita baca apakah langkah-langkah yang sudah kita lakukan bener2 sesuai dengan tutorialnya. kalau tidak yakin maka kita bisa mengulangi lagi tutorialnya dari awal dengan mengklik tombol “Clear Edit” terlebih dahulu.


Mungkin untuk masalah mengahadapi berbagai pesan error ini akan kita bahas lebih lanjut diepisode yang lainnya yang lebih spesifik.

Yak mungkin itu aja dulu tips-tips dalam pembahasan kali ini. Kita jumpa lagi di tips-tips berkutnya.

Regard

Rismawan Junandia

Menampilkan / Pasang Emoticon di Kotak Komentar

Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui icon2 (emoticon). Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di area komentar. Gimana? kamu mau memasang emoticon ini?


Seperti biasanya, di trik ini akan diberikan dua macam emoticon, yaitu emoticon kucing (seperti punyaku ini) dan emoticon yahoo. Kamu tinggal pilih mana yang kamu suka.

Emoticon Yahoo :

Emoticon Kucing :

Gini nih cara membuatnya :

1. Pertama login ke blogger, trus ke “Layout (Tataletak) –> Edit HTML
2. Beri tanda centang pada kotak “expand widget template”
3. Lalu letakkan script berikut sebelum kode </body>

Untuk Emoticon Yahoo :

<script src=’http://kendhin.890m.com/emoticon/smile1.js’ type=’text/javascript’/>

Untuk Emoticon Kucing :

<script src=’http://kendhin.890m.com/emoticon/smile2.js’ type=’text/javascript’/>

4. Kemudian cari kode berikut ini :

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

5. Kalo sudah ketemu letakkan kode2 berikut setelah kode <p class=’comment-footer’>

Ini untuk Yahoo emoticon :

<b><img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif’/>
:))
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif’/>
:)]
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif’/>
;))
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif’/>
;;)
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif’/>
๐Ÿ˜€
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif’/>
๐Ÿ˜‰
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif’/>
:p
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif’/>
:((
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif’/>
๐Ÿ™‚
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif’/>
๐Ÿ™
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif’/>
:X
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif’/>
=((
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif’/>
๐Ÿ˜ฎ
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif’/>
:-/
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif’/>
:-*
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif’/>
๐Ÿ˜
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif’/>
8-}
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif’/>
~x(
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif’/>
:-t
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif’/>
b-(
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif’/>
:-L
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif’/>
x(
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif’/>
=))
</b>

Kalo mo yang emoticon kucing pake yang ini :

<b><img border=’0′ src=’http://kendhin.890m.com/emoticon/capek.gif’/>
:f
<img border=’0′ src=’http://kendhin.890m.com/emoticon/bigsmile.gif’/>
๐Ÿ˜€
<img border=’0′ src=’http://kendhin.890m.com/emoticon/hi.gif’/>
๐Ÿ™‚
<img border=’0′ src=’http://kendhin.890m.com/emoticon/kagum.gif’/>
;;)
<img border=’0′ src=’http://kendhin.890m.com/emoticon/love.gif’/>
๐Ÿ˜ก
<img border=’0′ src=’http://kendhin.890m.com/emoticon/malu.gif’/>
:$
<img border=’0′ src=’http://kendhin.890m.com/emoticon/marah.gif’/>
x(
<img border=’0′ src=’http://kendhin.890m.com/emoticon/bingung.gif’/>
๐Ÿ˜•
</b>
<br/>
<b>
<img border=’0′ src=’http://kendhin.890m.com/emoticon/mumet.gif’/>
:@
<img border=’0′ src=’http://kendhin.890m.com/emoticon/muntah.gif’/>
:~
<img border=’0′ src=’http://kendhin.890m.com/emoticon/mentok.gif’/>
๐Ÿ˜
<img border=’0′ src=’http://kendhin.890m.com/emoticon/ngakak.gif’/>
:))
<img border=’0′ src=’http://kendhin.890m.com/emoticon/sedih.gif’/>
๐Ÿ™
<img border=’0′ src=’http://kendhin.890m.com/emoticon/senang.gif’/>
:s
<img border=’0′ src=’http://kendhin.890m.com/emoticon/tolong.gif’/>
:((
<img border=’0′ src=’http://kendhin.890m.com/emoticon/wow.gif’/>
๐Ÿ˜ฎ </b>

6. Kalo sudah trus di “save” dan coba lihat hasilnya

Tambahan
* Kadang-kadang ada beberapa template memiliki kode yang beda. Kalau caranya sudah dilaksanakan dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode untuk templatenya berbeda atau bisa juga karena mugnkin hosting untuk menaruh file emoticon dan javascriptnya sedang bermasalah.

Regard

Rismawan Junandia

Highlight Author Comment

Highlight Author Comment fungsinya adalah supaya komentar author (pemilik blog) berbeda dengan komentar orang lain . Contohnya bisa dilihat di blog ini. Untuk komentar pemilik blog akan ada bordernya dan ada efek lainnya. Nha berikut ini akan aku beberkan cara untuk membuat Highlight Author Comment ini. Dah siap semuanya ? OK lets dance togather ๐Ÿ˜€


1. Login ke blogger trus ke menu “Layout –> Edit HTML”
2. Beri tanda centang pada kotak “Expand Widget Templates”
3. Copy script berikut ini sebelum kode ]]></b:skin> atau copy ke dalam kode CSS.

.comment-body-author {
background: #E6E6E6; /* Warna Background */
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}

4. Kemudian cari kode2 seperti berikut. Mungkin kode yg ada di HTML kamu akan beda, tp walaupun beda usahakan semirip mungkin dengan kode berikut ini :

<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<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>
said…
</dt>

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

<dd class=’comment-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:loop>
</dl>

5. Kode yang berwarna merah adalah kode yang harus kamu tambahkan di HTML kamu. Posisinya harus benar, ingat itu.
6. Kalo sudah terus disave template kamu.

Comment author ini berdasarkan profil dari pemilik blog tsb. Jadi supaya efeknya muncul sebelum memberi komentar kamu harus login dulu di blogger. OK.
Oh ya ini bukan untuk komentar dari haloscan lho. Tapi hanya untuk kotak komentar yg dari blogger murni

Regard

Rismawan Junandia