BLOG KANG AAB

Dari sekian banyak artikel yang kita posting di blog kita, pastinya ada 1 atau lebih artikel yang paling popular. Artinya artikel kita yang sering dibaca ma pengunjung yang datang ke blog kita.

Buat blogger yang memakai blogspot, layanan ini mungkin belum ada..belum ada di pilihan panel control kita. Klo yang memakai wordpress, layanan ini pastinya udah ada. Jadi g usah repot-repot lagi

Nah, caranya buat bikin popular artikel di blog kita yaitu copy paste aja kode di bawah ini :
Bagi yang ingin jadi teman saya, copy kode di bawah ini :

Kamu liat yang kode namablog.blogspot.com, itu kamu ganti pake alamat blog kamu. Trus yang warna merah num=10 menunjukkan klo kamu bakalan nampilih 10 popular artikel di blog kamu, klo mau ganti y silahkan..misalnya jadi angka 5..dst.
Cara pasangnya :
1. log in di blogger.

2. Masuk ke Layout - Add Page A Element

3. Kemudian pilih HTML / Javascript - copy pastekan deh kodenya disitu..

4. Mission Complete

Selamat Mencoba....

Readmore »»

Akhirnya datang juga....
Setelah lama ditunggu-tunggu oleh para penggemar setianya, akhir blogger/blogspot menerbitkan juga comment box atau kotak komentar yang langsung muncul berada dibawah postingan. Kalau dulu hanya berupa link "Post a Comment", maka yang sekarang lain, yg sekarang kotak komentarnya langsung muncul persis dibawah postingan (seperti kotak komentar dibawah ini). Dengan adanya kotak komentar yang seperti ini, akupun rela mengganti kotak komentarku yang dulu (haloscan) dengan comentbox yang ini. Walaupun kotak komentar ini masih dalam draft tapi sudah bisa dinikmati.


Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.



1. Login ke http://draft.blogger.com, Ingat yang http://draft.blogger.com bukan blogger.com.
2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi "Embedded below post" (lihat gambar dibawah)



3. Kemudian klik "Save Setting"

Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).

4. Selanjutnya pergi ke menu "Layout-->Edit HTML"
5. Beri tanda centang kotak "Expand widget templates".
6. Trus cari kode berikut ini :

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



7. Kemudian ganti kode tersebut dengan kode dibawah 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> </b:if>

8. Lalu simpan template kamu.

Lihat deh hasilnya, coba kamu klik salah satu postingan kamu, maka dibawahnya akan muncul kotak komentar seperti punyaku ini (Bagi yang berhasil).

Readmore »»

Sebenarnya Widget ini diciptakan untuk Wp tapi untuk blogger pun bisa setelah dimodifikasi scriptnya, saya hanya copy paste di bloggerbuster, jika anda ingin melihat artikel aslinya kunjungin aja bloggerbuster, tapi bahasa inggris lho�.. . Nah untuk Lebih jelasnya mari kita praktek langsung saja�



Untuk pertama kalinya masuklah pada Pengaturan HTML , nah sekarang carilah script ini / yang hampir sama dengan ini
<b:section class='sidebar' id='sidebar' preferred='yes'>
Bila sudah ketemu pastekan kode dibawah ini dibawah kode diatas,
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>< data:title/>< /h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by < a href='http://www.roytanck.com/'>Roy Tanck< /a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani< /a>< /div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency


//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", " < tags>< b:loop values='data:labels' var='label'>< a expr:href='data:label.url' style='12'>< data:label.name/>< /a>< /b:loop>< /tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Jangan terburu buru SAVE, privew dulu apakah ada kesalahan script atau tidak
Dalam mode default spesifikasih widget tadi seperti ini
Width is set to 240px
Height is set to 300px;
Background color is white
Test color is grey
Font size is "12"
Jika anda menghendaki lain anda bisa merubah panjang dan lebar dengan mengubah kode dibawah ini
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
Jika anda ingin merubah warna latarbelakangnya berubah cari kode ini
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
Untuk merubah warna textnya cari kode ini
so.addVariable("tcolor", "0x333333");
untuk merubah besar textnya cari kode ini
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
�Note:Widget ini akan bekerja menggunakan FlashPlayer 7 keatas

Readmore »»

Ada sebuah cara yang dapat anda gunakan untuk mempercantik blog, yaitu dengan menambahkan sebuah gambar dibalik judul artikel, caranya gimana? Mudah saja pertama yang anda harus siapkan adalah:
1.Sebuah design , boleh anda design menggunakan Photoshop, CorelDraw, atau mungkin windows Paint juga boleh.
2.Secangkir kopi hangat
3.dan cemilan.
Nah bila sudah lengkap semuannya, mari kita mulai�


1. Pertama login ke blogger.com
2. Masuklah pada menu Layout
3. Lalu klik menu Edit HTML
4. Setelah itu carilah kode seperti ini
.post h3 {
margin-top: 13px;
margin-$endSide: 0;
margin-bottom: 13px;
margin-$startSide: 0;
padding: 0;
color: $postTitleColor;
}
5. Nah bila belum ketemu cari yang hampir mirip, kalo sudah tambahkan kode ini
.post h3 {
margin-top: 0px;
margin-$endSide: 0;
margin-bottom: 0px;
margin-$startSide: 0;
padding-left: 10px;
padding-top: 18px;
color: $postTitleColor;
font: $posttitlefont;
background: url(http://www.serveranda.com/gambaranda.gif) no-repeat;
height: 80px;
}

Mudah kan, silahkan mencoba�



Readmore »»

Akhirnya setelah dicari-cari sy dapet juga layanan yang menyediakan fitur ini. form kritik dan saran ini bisa kamu liat di bagian bawah dari blog sy ini..judulnya Kritik, Saran atau Pasang iklan di blog ini.


Untuk membuat form ini, kebetulan saya menggunakan jasa "Response o-matic". dengan menggunakan jasa tersebut kita g perlu ngerti HTML atau temen2nya HTML yang lumayan bingung..he3. kita cuma perlu register..lalu buat deh formnya sendiri..gampang kan...

klo kamu juga mau bikin..tinggal masuk ja ke "Response O-Matic" lalu REgister / GET STARTED...
isi form pendaftarannya, klo udah y tinggal masuk ja ke member areanya..lalu bikin deh form sesuka hati kamu....

tinggal klik "add question"..klo menurut kamu formnya dah lengkap, ambil deh kode HTML...lalu pasng di blog kamu...

selamat mencoba y...

Readmore »»

Sebenarnya yang sudah mosting artikel tenyang ini sudah banyak tapi apa salahnya kalo ikut mosting , Pasti semua sudah tau apa maksud dari artikel ini, yaitu membuat sebuah icon tanggal yang berada disamping judul postingan. Untuk membuatnya pertama harus kita lakukan yaitu mengganti setting tanggal dulu, caranya seperti biasa Login dulu ke blogger terus pilih Settings --> Formatting, ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy) nha yang masih pemula pasti bingung maksudnya kan? itu lho disebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun contohnya 1.13.2008 terus simpan
Langkah yang kedua pilih menu Layout --> Edit HTML . Trus beri tanda centang pada kotak Expand Widget Templates, Oh ya, jangan lupa di back-up dulu templateny.

1. Cari kode ini <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas) kalo dah ketemu taruh script berikut ini dibawahnya persis
<SCRIPT type='text/javascript'>
//<![CDATA[

/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>



2. kalo udah cari kode ini:


.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

kalo gak ada coba cari yang ini


h2.date-header {
margin:1.5em 0 .5em;
}

3. Kalo dah ketemu taruh script berikut dibawahnya



.dateblock {
background: url("http://kendhin.890m.com/kalender/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}


Kode http://kendhin.890m.com/kalender/bluecalend.gif
adalah gambar icon kalender. kamu bisa menggantinya mengantinya
dengan gambar-gambar dibawah ini caranya ganti hurus yang dicetak tebal dengan
kode gambar berikut ini, misalnya kamu pingin kelender yang berwarna merah,
caranya kamu ganti text bluecalend.gif
dengan redcalend.gif.

Trus kode color:#3366CC; adalah kode warna
tanggal,kamu bisa menggantinya dengan warna yang lain.
4. langkah selanjutnya yaitu kamu cari kode ini
<data:post.dateHeader/>, cara nyarinya biar gampang copy kode tersebut,
terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, nha langsung
ketemu kan. kalo udah ketemu ganti kode tersebut dengan script dibawah ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Simpan Template kamu dan lihat hasilnya. Berhasil nggak ya?

Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {

Refrensi: Komunitas Blogger Indonesia

Readmore »»

Pengunjung blog tidak dapat menunggu terlalu lama jika sedang mengakses sebuah blog, idealnya mereka tidak perlu terlalu lama menunggu untuk meload sebuah blog, jika terlalu lama pengunjung pun akan berpindah ke situs yang lebih menarik tentunya.�Nah pertanyannya bagaimana cara membuat blogku di load lebih cepat?�
Ikuti langkah-langkah berikut ini�


Pernahkak anda berfikir mungkin blog anda cepat bila diakses lewat computer anda tapi belum tentu cepat jika orang lain mengakses dengan komputer mereka. Nha tujuan dari artikel ini adalah agar orang lain dan anda akan sama-sama merasa bahwa blog anda itu mudah diakses walaupn dengan koneksi yang berbeda.
Cari tau berapa cepat blog anda di load
Untuk pertamakalinya buka http://www.websiteoptimization.com/services/analyze/index.html
Nah pada bagian URL masukkan url blog anda�



Proses itu tidak akan berjalan lama, tunggulah sebentar nanti akan keluar hasil seperti gambar dibawah ini�.



Setelah itu kita akan tau seberapa cepat blog anda, melalui warna- warna.
� Untuk yang berwarna hijau mempunya arti blog sudah optimal dan tidak perlu melakukan perubahan
� Untuk yang berwarna kuning, itu tidak buruk tapi lebihbaik di benahi agar lebih cepat di akses
� Kalo untuk yang merah, pada halaman/ bagian itu harus dibenahi karena terlalu lambat untuk di akses
Nah dari hasil diatas jika anda kebanyakan hijau dan kuning ya�tidak perlu khawatir karena load blog anda tidak terlalu buruk tapi jika kebanyakan merah ya�benahi lagi blog anda, itu pertanda blog anda berat untuk diload.
Untuk mempercepat blog anda untuk di load pertama yang anda harus lakukan adalah:
1. Hapus Widgert/ script yang benar-benar kamu tidak membutuhkan
Kusunya untuk blogger sebuah widget bertujuan untuk mempercantik tampilan/ membuat tampilan itu interaktif, maka jangan sembarang hapus widget, yang perlu diperhatikan�
� Apakah widget ini sangat anda butuhkan ?
� Apakah widget ini mempunyai nilai / kegunaan bagi pembaca(jika widget ini tidak ada apakah pembaca akan kesulitan mencari sebah artikel)?
� Apakah pembaca anda akan mengeluh jika anda menghapus widget dari tampilan blog anda?
Saya kira itu poin poin yang anda harus perhatikan ketika anda hendak membuang sebuah widger.
2. Kurangi jumlah gambar yang anda gunakan untuk layout blog anda
Gambar juga menyumbang size-nya untuk memperberat load blog anda. Jadi jika anda mengunakkna banyak gambar sebagai widget di sidebar atau template anda mengandung gambar sebagia dasar template anda lebih baik di kurangi.

Bonus Tips
Jika anda memang tidak ingin menghilangkan sebagian gambar di template maupun widget anda, Coba tips ini, Buat post baru pada blogger, upload semua gambar dalam satu post tentunya gambar yang ingin anda gunakan, nah gambar itu akan di hosting ke server gambar blogger, privew post tadi klik kanan setiap gambar, maka anda akan melihat URL gambar tadi, copy URL itu dan gunakan sebagai pengganti url yang ada di template anda atau anda bisa gunakan sebagai widget di sidebar.
3. Perkecil ukuran gambar
Dengan cara ini pun dapat mengurangi beban blog anda tinggal kecilkan ukuran file gambar anda (termasuk penggunaan dalam postingan maupun tempale) kedalam ukuran byte atau kilobyte. Yah dampaknya memang anda akan kehilangan kualitas gambar yang bagus tapi anda juga mendapat pengaruh yang positif pula, blog anda tidak akan lama diakses seorang
4. Sederhanakan CSS anda
Css dalam blog termasuk mempunyai file yang besar dalam blog ada. Ini karena css dalam blog <b:skin> (atau <style> untuk blogger classic template) mengunakan garis yang terpisah, atau mempunyai ketidakgunaan �menggunakan spasi� dan mungkin juga dengan komentar HTML.Dengan menyederhanakan CSS dapat mempercepat load blog anda tapi takmungkin kita akan mengedit satu persatu dan resiko kesalahan juga besar, maka kita akan menggunakan jasa CSS Optimizer website, caranya:
1. Copy seluruh kode diantara <b:skin> smapai </b:skin> untuk blogger classic template <style> sampai</style>
2. Dalam browser tab kunjungi CSS Optimizer website, dan paste seluruh CSS yang sudah dicopy ke kotak yang disediakan
3. Klik tombol Optimize (disana tidak perlu mencentang"do not remove line breaks").
4. Nah selanjutnya akan muncul kotak yang berisi kode yang sudah di kompress dan seberapa besar kompresinya



Copy all of this code to your clipboard.
5. Tumpangi kode css yang berada di b:skin atau style dengan kode yang sudah di kompres
6. Privew template anda untuk memastikan template anda tidak ada kejanggalan, setelah itu SAVE

Readmore »»

Baik, akan takcoba kita membuat tulisan berjalan, seperti tulisan Assalamu'alaikum pada beranda blog ini. Caranya sangat mudah, karena sesungguhnya kita cuma minta dibuatkan ama bigoo.ws. Lalu kita tinggal ngedit dikit. Tapi jangan meniru persis punyaku, karena bigoo.wsnya terlanjur tak hilangkan. Maaf ya bigoo.ws. Untuk menggantikan kesalahanku itu, coba tak-link sekalian pada postingan ini.

Jadi kunjungi Bigoo.ws atau klik aja di sini. Lalu pilihlah mana yg anda inginkan. Aku lupa, mana yg kugunakan untuk tulisan yg aku pakai, keliatannya bigoo.ws udah banyak perubahan. Jadi silahkan pilih sesuai keinginan anda. Mungkin yg termasuk text welcome.

Cuma, punyaku tak edit sedikit. Terutama untuk lebar dan warna backgroundnya yg gak matcing ama templateku. Maka setelah kita copy kode html yang diberikan dan kita paste pada widget kita. Ehm, widgetnya termasuk html/javascript lho, jangan lupa. Paste aja disitu.



Untuk menyesuaikan dengan template kita, maka kita perlu mengganti warna backgroun dan lebar widget/konten tersebut.

carilah kode seperti
... type="application/x-shockwave-flash" bgcolor="#000000" http://www.macromedia.com/go/getflashplayer" width="810"
height="40" ...

lha kalo masalah warna backgroun ya ada di bgcolor="000000" itu bisa diganti kode warna lain (yg didalam tanda petik kalo punyaku tak sesuaikan menjadi bgcolor="f9f9f9"), kalo gak tau kode warnanya apa, bisa kita lihat pada edit template, pada font dan warna. jadi kita bisa mengetahui kode warna di situ. enaknya lagi kita langsung bisa memilih warna yang kita inginkan pada template kita kan? Kodenya ada pada kotak Edit kode hexa warna, itu kode warna pada warna yg kita klik.Mudah kan bermain warna?



kalo masalah ukuran agar sesuai dengan template kita, terutama masalah lebar, kalo masalah tinggi biasanya gak perlu kita rubah, ya itu sih terserah kita juga sih. tapi biasanya yg penting masalah lebar widget/konten tersebut. Karena kalo gak sesuai, kelihatan wagu.

Jadi, untuk menyesuaikan lebar widget tersebut, lihat dulu lebar kolom dimana anda meletakkan widget tersebut baru menyesuaikan lebar widgetnya. Lihat pada edit html pada template. Memang disini kita harus belajar memahami bahasa html. Yah, q sendiri sedikit mengerti, tapi itu bisa kita jadikan bekal.



lha, lihat aja di bagian deklarasi layouts, dimana kita meletakkan kontennya, lalu sesuaikan lebarnya konten dengan lebar kolom dimana kita menaruh konten, biar ukurannya gak wagu atau nabrak kolom konten yang lain. Karena kalo nabrak kolom konten yg lain, bisa mengganggu konten yg lain. Berlaku juga untuk konten-konten lain seperti shoutbox dari oggix, bisa kita edit lebarnya biar sesuai dengan lebar kolom dimana kita menaruhnya.

SUKSES SELALU.
Readmore »»

Nah cara yang satu ini lumayan bagus untuk membuat komentar kita (pemilik Blog) berbeda dari yang lainnya, nah ingin tau caranya mudah kok tinggal baca aja sampai selesai :).
Cara yang pertama baca Bismillah, sudah kan mari kita mulai

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.
Mungkinkode yg ada di HTML kamu akan beda,
tp walaupun beda usahakan semiripmungkin
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>
5. Kode yang berwarna biru adalah kode yang harus
di tambahkan di kode html anda.
6. Kalo sudah terus disave.
Nah agar efek ini muncul ya harus login
di blogger dulu sebelum komentar....

oh ya ada tambahan , kalo anda inggin
membuat komentar anda disertakan foto ,
caranya mudah
pada kode background: #E6E6E6; /* Warna Background */
tambahkan kode seperti ini
background: #E6E6E6 url(http://i261.photobucket.com/
albums/ii65/adephotobucket/
comment-2.gif) right bottom no-repeat;
nah untuk right bottom bisa diubah Left, Center, Up
dan no repeat artinya gambar
tidak diulang
ok silahkan mencoba, dan trimakasih pada mas Sanusi untuk tambahan infon

Readmore »»

Baiklah, sekarang akan coba saya bahas bagaimana cara kita membuat Baca selengkapnya seperti yang saya pakai pada beberapa postingan saya. Sebenarnya banyak temen-temen yang udah pernah membahas, seperti yang tak pakai ini, juga ilmu dari temen-temen yg lain. Dengan batuan dari Mbah Google, coba kita ketik 'membuat read more', wah banyak kan yang membahas?

Jadi begini, q nyoba bahas juga ah, biar postingannya berisi, he5. Yang jelas pembuatan 'Baca selengkapnya' tuh sama aja dengan membuat 'Read More' tentu saja dengan sedikit modifikasi. Keduanya itu paling tidak kita akan bergelut dengan bahasa html. Kita akan mengedit HTML dari template juga HTML dari postingan.

Kalo gak salah, saya waktu itu dapat ilmunya dari isnaini.com. Terus saya edit sedikit.
jadi caranya:


• Login ke blogger.com, pilih blog yang pengen kamu edit, klik link Layout kemudian masuk ke Edit HTML
• Untuk bisa ngedit template secara keseluruhan, kamu harus centang/tandai/aktifkan Expand Widget Templates
• Masukkan kode berikut sebelum tag atau tepat sesudah kode } ]]> seperti ini:
span.fullpost { display:none; }



• Selanjutnya mengatur supaya postingan terpotong, cari kode

dalam template kamu dan tambahkan kode dibawah ini:


Baca Selengkapnya..


• Nah supaya terpotong, setiap kali kamu posting, klik pada bagian posting dimana kamu pengen tulisan Baca Selengkapnya... muncul, dan ketik sisa postingan sampai selesai . Untuk menmbahkan kode ini, ketika posting kamu harus dalam mode Edit HTML bukan Compose
Jadi kira-kira seperti itu, udah banyak yg bahas lho! aku cuma ya ngedit dikit, he5.


Readmore »»

Mungkin anda sudah tidak asing dengan apa yang dinamakan Related Posts. Kalo misalnya belum tahu, saya kasih sedikit gambaran, Related Posts itu adalah Artikel yang Bersangkutan dimana kalo misalnya kita menampilkan suatu artikel maka akan tampil juga artikel lain dengan label yang bersangkutan. Pasti dah ngerti kan sekarang...

sekarang bagaimana cara buat Related Posts. Silahkan ikuti tutorialnya.

1. Login di Blogger
2. di menu Dashboard klik Layout --> edit HTML.
3. Kasih tanda checklist pada kolom Expand Template Widget.
4. Cari kode HTML berikut :



5. Kemudian copy kode ini:

Related Posts per category

Widget by Related Post di Blogspot

6. Taruh kode yang barusan di copy seperti ini :


(Taruh disini)
7. Save Templates dan selesai

Selamat Mencoba.....!

Readmore »»

Baik, akan takcoba kita membuat tulisan berjalan, seperti tulisan Assalamu'alaikum pada beranda blog ini. Caranya sangat mudah, karena sesungguhnya kita cuma minta dibuatkan ama bigoo.ws. Lalu kita tinggal ngedit dikit. Tapi jangan meniru persis punyaku, karena bigoo.wsnya terlanjur tak hilangkan. Maaf ya bigoo.ws. Untuk menggantikan kesalahanku itu, coba tak-link sekalian pada postingan ini.

Jadi kunjungi Bigoo.ws atau klik aja di sini. Lalu pilihlah mana yg anda inginkan. Aku lupa, mana yg kugunakan untuk tulisan yg aku pakai, keliatannya bigoo.ws udah banyak perubahan. Jadi silahkan pilih sesuai keinginan anda. Mungkin yg termasuk text welcome.

Cuma, punyaku tak edit sedikit. Terutama untuk lebar dan warna backgroundnya yg gak matcing ama templateku. Maka setelah kita copy kode html yang diberikan dan kita paste pada widget kita. Ehm, widgetnya termasuk html/javascript lho, jangan lupa. Paste aja disitu.

Untuk menyesuaikan dengan template kita, maka kita perlu mengganti warna backgroun dan lebar widget/konten tersebut.

carilah kode seperti
... type="application/x-shockwave-flash" bgcolor="#000000" http://www.macromedia.com/go/getflashplayer" width="810"
height="40" ...

lha kalo masalah warna backgroun ya ada di bgcolor="000000" itu bisa diganti kode warna lain (yg didalam tanda petik kalo punyaku tak sesuaikan menjadi bgcolor="f9f9f9"), kalo gak tau kode warnanya apa, bisa kita lihat pada edit template, pada font dan warna. jadi kita bisa mengetahui kode warna di situ. enaknya lagi kita langsung bisa memilih warna yang kita inginkan pada template kita kan? Kodenya ada pada kotak Edit kode hexa warna, itu kode warna pada warna yg kita klik.Mudah kan bermain warna?

kalo masalah ukuran agar sesuai dengan template kita, terutama masalah lebar, kalo masalah tinggi biasanya gak perlu kita rubah, ya itu sih terserah kita juga sih. tapi biasanya yg penting masalah lebar widget/konten tersebut. Karena kalo gak sesuai, kelihatan wagu.

Jadi, untuk menyesuaikan lebar widget tersebut, lihat dulu lebar kolom dimana anda meletakkan widget tersebut baru menyesuaikan lebar widgetnya. Lihat pada edit html pada template. Memang disini kita harus belajar memahami bahasa html. Yah, q sendiri sedikit mengerti, tapi itu bisa kita jadikan bekal.


lha, lihat aja di bagian deklarasi layouts, dimana kita meletakkan kontennya, lalu sesuaikan lebarnya konten dengan lebar kolom dimana kita menaruh konten, biar ukurannya gak wagu atau nabrak kolom konten yang lain. Karena kalo nabrak kolom konten yg lain, bisa mengganggu konten yg lain. Berlaku juga untuk konten-konten lain seperti shoutbox dari oggix, bisa kita edit lebarnya biar sesuai dengan lebar kolom dimana kita menaruhnya.

SUKSES SELALU.

Readmore »»

TerUpdate : 04-oktober 2008
Akhirnya penantian untuk mempunyai kotak komentar di bawah postingan ( artikel ), terlaksana juga. ini tak lepas dari pengembangan yang terus menerus di lakukan oleh tim Blogger in draf

Dengan adanya pilihan yang ketiga ini, sangat memudahkan teman-teman kita untuk ngasih komentar tampa perlu menunggu jendela baru.
caranya :
1. buka situs blogger in draf. kemudian klik tulisan " Blogger In Draf ". ( di samping kanan )
2. setelah terbuka Panel Kontrol pilih link Pengaturan -> Komentar . dan pilih radio button " Di semat di bawah entry " ( eg. Embedded Below Post ). kemudian Simpan Perubahan.

Jika cara di atas kotak komentar-nya belum keliatan atau tidak berhasil maka saudara bisa menambahkan seperti cara ketiga di bawah ini
3. Buka tab Tata Letak ( edit layout ) - > Edit Html.
tandai/centang Expand Template Widget.


Cara pertama :
cari kode ini.


setelah ketemu, simpan di bawah-nya kode ini.



kemudian Simpan Perubahan. ( Save Template )
Cara Kedua :
Jika cara di atas tidak bisa.. bisa anda lakukan cari ini.
cari kode di bawah.

4. Setelah ketemu ganti dengan kode ini.

5. Setelah beres Simpan Perubahan ( Save Template )
Note :
Pada langkah ke tiga , Ketika kita mencari kode yang di maksud, Mungkin setiap template yang di pakai berbeda sedikit pada kode comment-footer-nya. tapi itu mudah yang terpenting ada susunan kode seperti di atas tersebut.


Readmore »»

Mempunyai daftar tabel seluruh posting atau lebih keren dengan nama "Show Table of Contents" pasti mempunyai nilai plus tersendiri, selain mempermudah pengunjung dalam menjelajahi isi blog, cara ini juga dapat memberikan kecepatan pencarian dibandingkan dengan menggunakan box search atau mencari suatu artikel berdasakan label. Kode yang akan kita gunakan menggunakan javascript yang sedikit telah saya modifikasi, semula hasil tampilan bahasa kode ini mengunakan bahasa inggris dan terlihat kurang familiar, jadi saya modifikasi saja menggunakan bahasa indonesia dan telah saya tambahkan beberapa icon biar terlihat lebih fresh :). Pengen tau cara buatnya ikuti tutorial dibawah ini.

Tampilan link sebelum di klik


Tampilan daftar seluruh posting

Langkah Pembuatannya sebagai Berikut:


Langkah Pertama:

Jangan lupa Backup template Blog sobat

Langkah Kedua:

Kemudian Tambahkan sebuah Element halaman -> HTML/Javascript

Copy/Paste code dibawah ini

Jangan lupa ganti dengan alamat blog sobat pada kode warna merah diatas

Jangan lupa disimpan :)

Kemudian Tambahkan sebuah element halaman yang baru -> HTML/Javascript

Copy/Paste code dibawah ini

Jangan lupa disimpan :)

Langkah ketiga:

Langkah selanjutnya buka Template -> Edit Html

Copy/paste code dibawah ini pada deretan CSS code atau kalo masih bingung cari code lalu paste aja dibawah kode tersebut

/* Show Table of Contents
-----------------------------------------
*/
#toc {
border: 0px solid #78B749;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #cccccc;
color: #444;
padding-left: 5px;
font-weight:bold;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:95%;
text-decoration:none;
text-align: Left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:95%;
text-decoration:underline;
text-align: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
text-align: left;
font-size:95%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}

Langkah Terakhir:
Yup! udah selesai jangan lupa disimpan dan lihat hasilnya :)

Selamat mencoba and Happy Blogging :)

Artikel saya ambil dari:o-om

Readmore »»

Akhirnya Control Panel (CP) yang sebelumnya masih pada draft blogger benar-benar di terapkan juga, ini bisa dilihat pada CP anda masing-masing. Selain Pembaharuan tampilan, blogger juga mengaktifkat fitur terbaru pada layanan mereka yaitu Blogger Reactions. Seperti biasa fasilitas ini hanya bisa diaktifkan melalui blogger in draft.



Blogger Reaksi (reactions) bisa dikatakan versi terbaru dari star ratings, yang membuatnya berbeda, dengan reactions kita bisa menentukan sendiri kalimatnya. Sepertinya tidak perlu saya jelaskan panjang lebar, rekan semua pasti mengerti apa maksudnya.

Untuk mencoba Blogger Reactions, login dulu di http://draft.blogger.com/ kemudian pada halaman Edit Layout klik "Edit" lalu beri tanda centang pada “Reaksi"

Untuk template yang sudah dimodifikasi, cara diatas ternyata tidak berjalan dengan sukses, untuk menampilkan blogger reaction kita bisa menggunakan cara manual, ikuti caranya di bawah ini



Pertama pada Edit HTML (jangan lupa beri tanda centang "Expand Template Widget") cari kode dibawah ini:



Kemudian masukan kode dibawah diantara kode diatas, contohnya seperti ini:

Readmore »»

Akhirnya, dibahas juga bagaimana cara membuat backgroun blog. Papa Ipam sempet tanya itu, tentunya tergantung template yang kita buat, beberapa template bisa diganti backgrounnya, tapi beberapa yang lain tidak bisa, karena model template yang berbeda . Seperti template yg digunakan oleh Papa Ipam (template harbor buatan Douglas bowman), bodynya tuh pecah-pecah, jadi sulit ngrubah templatenya.

Coba kalo pake template seperti punyakku, template 3 kolom nyoba 780 dari isnaini.com, tapi ini udah tak modif jadi selebar 810. Tapi pada template blogger ada koq yg bisa dirubah backgrounnya. Seperti template Denim ciptaan Darren, Rounder sepertinya juga bisa, Teris Scribe ciptaannya Todd, Thisaway ciptaannya Dan Rubin, Ms Moto ciptaan Zeldman, dan beberapa yang lain. Cirinya tuh Bodynya dibelakang halaman posting. Kalo Model Harbor kan enggak gitu, Harbor tuh satu halaman penuh, gak ada bodynya (bodynya dipecah-pecah).

Oke kalo udah diputuskan pake template yg mana, baru deh kita rubah backgrounnya. Misal kalo pake template yg dalam blogger sendiri sih lebih mudah, tapi kalo dari pihak lain, misal seperti yg saya pakai disini (dari isnaini.com) perlu penyelamatan dulu pada widget-widgetnya, terutama yg berjenis HTML/javascript. Inget, selalu-selalu an selalu download dulu templatenya, n widgetnya (kode html).

Oke udah dirubah ke template yg kompatible dengan merubah background? He5 (menyesuaikan bahasa komputer), setelah itu masuk ke kode html. disitu ada kode
body {
font: normal normal 72% Trebuchet, Trebuchet MS, Arial, sans-serif;
text-align: center;
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
color: #4c4c4c;
background: #ffffff;
}
jadi yang antara tanda { } itu bisa macem-macem tergantung templatenya, lalu rubah aja dengan kode kayak gini

body {
background:#4E95E6 url("http://i188.photobucket.com/albums/z25/hafid_umm/BOSTON_SKYLINE.jpg") fixed;
margin:0;
padding:0;
font:12px Verdana;
color:#000000;
font-size/* */:/**/13px;
font-size: /**/13px;
text-align:left;

}
dimana untuk mengganti foto milik sendiri urlnya (http://i188.photobucket.com/albums/z25/hafid_umm/BOSTON_SKYLINE.jpg) bisa diganti dengan foto milik kita sendiri. Kalo saya pake hosting photobucket, bisa juga pake yg lain semisal googlepages, atau geocitiesnya yahoo. jadi selamat mencoba ganti background anda.

SUKSES SELALU!! Readmore »»

Salah satu cara mempromosikan blog adalah dengan menggunakan fasilitas layanan ping. cara ini merupakan cara praktis agar blog selalu diketahui banyak pengunjung.
Blogger sebenarnya telah menyediakan layanan ping bisa dilihat pada halaman pengaturan->Publikasikan->ping. jika kamu gak puas dengan layanan blooger kamu bisa memilih salah satu layanan yang ada dibawah

Ping Tips:
Lakukan ping jika kamu telah mengupdate blog kamu.
Lakukan ping jika kamu melakukan posting terbaru
Jangan lakukan ping terlalu sering karna ini bisa dikatakan sebagai spam
Lakukan ping seperlunya dan jangan berlebihan

Ping favorite saya:
http://mypagerank.net/service_pingservice_index
http://www.pingoat.com/
http://pingomatic.com/

Dibawah ini merupakan kumpulan alamat ping service yang bisa kamu gunakan untuk promosi blog.

• 1470.net
• a2b.cc
• amagle.com
• apple.com
• bakeinu.jp
• bblog.com
• bitacoles.net
• bitacoras.com
• bitacoras.net
• blog.goo.ne.jp
• blogbuzzmachine.com
• blogdb.jp
• blogdigger.com
• blogflux.com
• blogg.de
• blogg.de
• bloggers.jp
• blogmatcher.com
• blogmura.jp
• blogoole.com
• blogoon.net
• blogpeople.net
• blogrolling.com
• blogroots.com
• blogshares.com
• blogstreet.com
• britblog.com
• bulkfeeds.net
• cocolog-nifty.com
• coreblog.org
• datashed.net
• effbot.org
• exblog.jp
• fakapster.com
• feedburner.com
• feedster.com
• focuslook.com
• google.com
• holycowdude.com
• icerocket.com
• imblogs.net
• lasermemory.com
• mod-pubsub.org
• mod-pubsub.org
• moreover.com
• moreover.com
• msn.com
• myblog.jp
• newsgator.com
• newsgator.com
• newsisfree.com
• newsisfree.com
• pingates.com
• pingoat.com
• pingomatic.com
• pingqueue.com
• popdex.com
• pubsub.com
• rootblog.com
• snipsnap.org
• syndic8.com
• tailrank.com
• technorati.com
• topicala.com
• topicexchange.com
• wasalive.com
• weblogalot.com
• weblogs.com
• weblogs.se
• weblogues.com
• wpkeys.com
• yahoo.com
• yahoo.com

Refrensi: Blogywalkie.com

Readmore »»