Tema Baru Pada Blogger dengan Template Designer

Blogger in draft menyediakan tema baru untuk blogger dengan tampilan yang lebih menarik. Terdapat 4 kelompok tema dengan total 15 tema seluruhnya. Blog ini meminjam salah satu background dari template tersebut.
Coba simak video di bawah ini :



Seperti yang di perlihatkan pada video, untuk dapat memakai fasilitas ini kudu sign in ke blogge in draft DISINI.



Pilih Layout > Template Designer > pilih template yang dinginkan dan kombinasinya > Apply to blog > Selesai.

Artikel Terkait (Related Post) dengan Thumbnail

Related post pada blogger bisa dibikin lebih menarik lagi dengan adanya gambar thumbnail (seperti pada blog ini). Tujuannya lebih menarik pembaca untuk mengkliknya. Seblumnya pastikan setiap posting yang kamu buat ada unsur gambar didalamnya (gambar apa saja dan posisi dimana saja terserah).




Caranya lebih kurang sama dengan related post tanpa gambar :
1. Login ke blogger dashboard > Layout > Edit HTML dan cek "Expand Widget Templates" boks

2. Cari tag :
</head>

3. Kopi kode ini tepat diatasnya:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD2-UjvUVSa237X9omwcULql4HsMQaMZA6O2f4kFcY33U1pRCLKClju_5yfbuMr3ilUcEMjQGXuyuqHHgyr1FJzVZQxoQSKep0pNTnEwjrs9P32mRzFK0VPJRAzXKwz2rI6Tg4cICl3TQ/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Kemudian cari kode ini :
<div class='post-footer-line post-footer-line-1'>

atau ini (mana saja yang dapat):
<p class='post-footer-line post-footer-line-1'>

Kopikan kode ini tepat dibawahnya (salah satu diatas mana yamg ketemu):


<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; data:label.name &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger gadgets</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Save, selesai.

Untuk merubah jumlah thumbnailnya ganti angka pada :
var maxresults=5;

Untuk mengganti kata Realted Post dengan maunya kita ganti cari frase ini:
var relatedpoststitle="Related Posts";

Untuk mengganti thumbnailnya :
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD2-UjvUVSa237X9omwcULql4HsMQaMZA6O2f4kFcY33U1pRCLKClju_5yfbuMr3ilUcEMjQGXuyuqHHgyr1FJzVZQxoQSKep0pNTnEwjrs9P32mRzFK0VPJRAzXKwz2rI6Tg4cICl3TQ/s400/noimage.png";

Menambah Signature Pada Blog Post

Menambahkan signature (tanda tangan) pada blog post ? Why not...just for fun only. Pertama kamu harus buat dulu signaturenya. Kamu bisa coba mylivesignature untuk membuat tanda tangan. Cukup simple banget caranya. Selanjutnya kalau signaturenya sdh selesai tinggal ikuti prosedur biasa seperti dibawah ini.

1) Buat signature (spt diatas pakai MyLiveSignature ) atau web lain pembuat signature.

2) Copy URL signaturenya.

3) Log in ke blogger akun kamu.

4) Masuk ke Layout > Edit Html > Expand Widget Templates

5) Cari tag dibawah ini:
<P><data:post.body/></P>
kemudian copy tag dibawah ini tepat dibawahnya
<img src="http://YOUR PICTURE URL" />

Ganti: http://YOUR PICTURE URL dengan URL tanda tangan kamu.

6) Save template selesai

Menambah musik latar pada blog

Supaya pengunjung blog tidak merasa mengunjungi seperti kuburan, ada baiknya juga menambahkan musik latar pada blog kita. Sayangnya nggak semua pengunjung menyukai musik yang kita jadikan latar. Untuk itu buatlah musik latar yang bisa di perkecil volumenya atau bisa dimatikan oleh pengunjung yang tidak menyukai musik tersebut.

Seperti biasa Login->Layout->Edit HTML
Untuk musik yang langsung main saat blog dibuka (nggak peduli pengunjung suka atau tidak ), dapat dibuat dengan memasukkan tag dibawah ini tepat setelah tag <body>

<bgsound src="http://yoursite.com/yoursound.mp3" loop=infinite>

Ganti: http://yoursite.com/yoursound.mp3 , dengan URL musik yang diinginkan/atau file mp3 yang sudah kamu aplod ke hosting gretongan yang banyak tersedia.

Jika ingin musik latarnya bisa diperkecil atau bahkan dimatikan : Layout->Page Elements->add a gadget->HTML/JavaScript. Kopas kode dibawah ini lalu save (letakkan di side bar/diposisi man yang disukai)

<embed width="200" src="http://yoursite.com/yourmusic.mp3" autostart="false" loop="false" height="50"></embed>

Ganti URl lagu, jika ingin langsung on musiknya tinggal ganti false dengan true pada autostart dan jika ingin musiaknya berulang2 ganti flase dengan true pada loop. Nanti pada gadget yang ditambahkan akan terlihat seperti dibawah ini (setting di false semua):

Membuat Daftar Isi Blog

Banyak pemilik blog ingin agar blognya user friendly dan bisa memperlihatkan semua posting yang telah mereka buat. Namun sayangnya Blogger hanya menyediakan widget berupa Arsip Blog yang tidak bisa memperlihatkan seluruh daftar isi blog kamu. Dalam tips ini kamu bisa membuat daftar isi blog yang bisa memperlihatkan seluruh judul posting kamu sehingga pengunjung blog dengan mudah bisa mencari info yang diinginkannya dari blog kamu.

Seperti biasa : Masuk ke Dashboard -> Layout -> Edit HTML -> Expand Widget , cari tag dibawah ini:

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

Ganti seluruhnya dengan tag dibawah ini :

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#333333;color:white">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Save template, selesai step pertama

Langkah selanjutnya adalah membuat shortcut : Daftar Isi Blog. Bisa Kamu letakkan dimana saja. Bisa dengan cara : Layout -> add widget -> HTML/Java script -> Copy Paste tag dibawah ini :

<a href="http://YourBlogURL/search?max-results=200">Daftar Isi Blog</a>

Tag diatas ini juga bisa kamu selipkan pada widget yang sudah ada di blog. Jika tulisan Daftar Isi Blog tersebut di klik maka akan keluar daftar isi blog pada post body (tempat dimana posting kamu biasa ada). Klik disini untuk melihat hasil kliknya

Ganti YourBlog URL dengan URL blog kamu dan background, color, serta jumlah daftar isi (200)bisa diganti sesuai selera/cocokkan dengan template blog kamu biar matching.

Memberi komentar nomor pada blogger

Apa sih gunanya ? Kayaknya nggak ada yah, cuma untuk gagah2an blog saja . BTW nggak ada salahnya dicoba bagi yang mau, lagian nggak terlalu sulit. Seperti biasa ; Login ke dashboard ->Layout->Edit HTML (jangan lupa contreng expand widgets template). Cari tag dibawah ini, kemudian tambahkan tag yang berwarna hijau.

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

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

<dt style='clear: both;' 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/>

<span class='numberingcomments' style='float: right; font-size: 20px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter 1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

Tinggal save template hwalah, maka komentar di blog akan memiliki nomor pada sudut kanan atasnya.

Membuat MouseOver Efek

Untuk dapat membuat mouseover efek pada gambar atau tombol membutuhkan 2 gambar yang sudah di upload ke webnya atau ke image hosting gretong yang banyak tersedia. Gambar pertama adalah gambar yang akan tampil saat mouseover off dan gambar yang kedua saat mouseover on.

Coba letakkan mouse kamu pada tombol dibawah ini:


atau pada tulisan dibawah ini :


Cara membuatnya gampang aja kok, tersedia generatornya salah satunya ada disini. Tool ini juga bisa buat dipakai buat tombol mouseover pada navbar weblog kamu.

Mengganti Smiley Pada Shoutbox

Bagi yang memakai shout box cbox pada blognya pasti sudah tahu bagaimana kurang bagusnya smiley standar/bawaannya, cuma ada 3 warna pilihan serta smileynya kecil2 serta statis (tidak bergerak). Jadinya kurang seru yah...



Smiley asli ini bisa diganti dengan yang lebih seru loh (lihat gambar shotnya)...caranya mudah saja. Pastinya Login dulu ke cbox nya - Pilih Option - Smillies. Pada pilihan smiley pilih none selanjutnya pencet apply. Jadinya kosong smileynya....

Langkah selanjutnya, klik tombol New row untuk menambahkan baris sebanyak2nya sesuai dengan jumlah smiley yang ingin ditambahkan. Setelah itu tinggal menambahkan URL smiley yang dinginkan pada kolom URL serta jangan lupa menambahkan kode smiley pada kolom Code. Selanjutnya tinggal Save (di sebelah tombol New Row ). Selesai sudah...
WARNING: Jangan menekan tombol Apply, karena hasil kerja anda akan kembali kosong .

NB
Untuk URL smiley contoh bisa dibuka disini

Memposting Kode HTML

Jika kita memasukkan kode HTML kedalam postingan, seperti membuat tips tentang nge-blog, kode HTML yang kita masukkan tidak akan bisa masuk. Salah satu cara agar kode tersebut friendly/postable adalah dengan mengganti kode2 HTML tertentu dengan kode pengganti, seperti dibawah ini.

Kode	Pengganti	Keterangan
<	&lt;	Tanda kecil
>	&gt;	Tanda Besar
&	&amp;	Tanda Dan
"	&quot;	Tanda petik ganda
±	&plusmn;	Tanda plus minus
©	&copy;	Tanda hak cipta(copyright)
®	&reg;	Tanda terdaftar(Registered)

Tetapi sebetulnya nggak perlu repot2 seperti itu ada cara yang sangat mudah, sekarang sudah tersedia generatornya, contohnya disini. Tinggal Copy-Paste kode yang ingin di posting, kemudian klik tombol perubahnya (pada contoh link tinggal klik make it friendly), kemuadin copy-paste hasilnya kedalam postingan, gampang kan...Gitu ja kok repot .

(uʍop-ǝıpsdn) ʞılɐqɹǝʇ uɐsılnʇ ʇɐnqɯǝW

ɥɐʎɐd ɥɐsnsɹǝq ʞnʇun ɐıpǝsɹǝq snɹɐɥ ɐʎuʞıɹʇ ʇɐdɐp nɐɯ nɐlɐʞ ˙ʞılɐqɹǝʇ ʇɐnqıp ɐɾɐƃuǝs ˙ɐʎuɐɔɐqɯǝɯ ƃuɐʎ ƃuısnd uıʞıq ıʇsɐd ıuı uɐƃuıʇsod

˙ıuı ʞuıl ıƃunɾunʞ ɥɐlɐpɐ uɐʞnʞɐlıp nlɹǝd ƃuɐʎ˙˙˙ɐƃnɾ ʞɐƃƃu ¿ snsnɥʞ ǝɹɐʍʇɟos nlɹǝd ˙ɐsıq ɐƃnɾ ʞɹnld ıp uɐɐʎɐƃ-ɐʎɐƃ ʞnʇun ˙uɐnlɹǝdǝʞ ıɐƃɐqɹǝq ʞnʇun ıɐʞɐdıp ɐsıq ıuı uʍop-ǝpısdn uɐsılnʇ

˙ƃuıƃƃolq puɐ ƃuıʞɹnld ʎddɐɥ ˙ɐnɯǝs ɐsıq ıʇsɐd ɥıƃƃuɐɔ uıʞɐɯǝs olʞɐ ɹɐʇu uıʞƃunɯ ˙ɐsıq ʞɐpıʇ lɐʇıdɐʞ ɟnɹnɥ ɥɐlɐpɐ ɐʎuuɐɥɐɯǝlǝʞ

Mengganti Favicon

Buat yang belum tahu (habis aku yakin banyak yang sudah tahu), favicon adalah icon yang ada dipangkal URL. Kalau bloger maka iconnya ini: , kalau blog ini seperti yg bisa kita lihat memakai icon universitas andalas.

Favicon ini sangat mudah kok menggantinya sesuai dengan maunya kita, bisa pasang tampang sendiri, logo huruf atau karakter lain yang kita suka. Dari browsing aku dapatkan untuk mengganti favicon pada umumnya dilakukan pembuatan ikonnya dulu (ukuran kecil) dalam format PNG atau ICO kemudain baru menguploadnya. Atau tersedia langsung pembuatan favicon seperti disini.

Sebetulnya nggak perlu. Kamu tinggal upload saja gambar yang ingin dijadikan favicon ke iamge hosting yang tersedia free seperti dan lain-lain.

Langkah berikutnya seperti biasa: login ke dashboard - layout - edit Html cari tag: </head> (biar gampang pencet Ctrl F, lalu isi box pencarian dengan tag yang dicari) lalu kopas tag dibawah ini tepat dibawahnya

<link href='URL GAMBAR' rel='SHORTCUT ICON'/>

Kemudian ganti URL GAMBAR dengan direct link gambar yang telah di upload ke tadi, save template selesai. Hwalah.... favicon sudah berganti dengan favicon yang kita inginkan. Jika belum tampak juga, maka klik icon yang terlihat, tahan mouse lalu drag keluar icon dari tempatnya lalu lepaskan kembali mouse. Lakukan 2 atau 3 kali (biasanya nggak perlu prosedur ini).

Untuk pengguna browser IE kadang-kadang nggak manjur (makanya jangan makai IE ), sedangkan browser lain kayaknya oke (terutama FF 3 paling oke).

Lagi tentang Emoticon

Tadi pagi waktu nge-plurk sama ocha (anggota milis dokter unand) ditunjukkan URL emoticon, semua emo ada disitu : MSN, QQ, Yahoo dan lain sebagainya. Kalau mau memasukkannya dalam posting tinggal kopi paste HTML Code-nya saja pada posting (pada posisi Edit Html). HTML Code atau dierct link bisa muncul saat mengklik emo yang diinginkan.

MAu emo yang agak macho ?:


Mau yang agak girly ?:




Buat suka2 lah...Happy posting