Loading ... ... Please wait!

Jumat, 16 Januari 2009

Blogger Jadi ShoutBox



Jika pernah membuka artikel saya yang lain SHOUTBOX BERBASIS BLOGGER, maka posting ini juga masih berkaitan dengan bagaimana mengubah sebuah blog menjadi buku tamu atau shoutbox. Pada BLOGGER JADI SHOUTBOX ini kami menggunakan metode dan pendekatan yang berbeda.

Ada 2 Langkah Besar untuk menjadi SHOUTBOX yaitu
1. BLOGGER JADI BUKU TAMU
2. BLOGGER JADI SHOUTBOX

BLOGGER JADI BUKU TAMU
Langkah-langkah Membuat BLOGGER JADI BUKU TAMU


  1. Buka ACCOUNT di BLOGGER.COM, Pilih Buat Blog (Kenapa Buat Blog?? Buka Rahasia Blogger), isi judul dan alamat sesuka hati.

  2. Ganti Tamplate, Pilih SIMPLE II, sehingga dalam mode edit tampak seperti ini





  3. Bagian yang diberi tanda silang (X) merah di buang, caranya pilih edit, terbuka jendela popup, pilih tombol hapus

  4. Setelah dihapus akan tampak seperti ini




  5. Buka Posting, Judul: Buku Tamu (atau terserah anda), isi posting : Buku Tamu (atau terserah anda), Terbitkan Entri. Dan Lihat Hasilnya di Jendela Baru, kira-kira seperti ini



  6. Isi Komentar (bagian yang diberi lingkar merah), Isi apa saja, terserah, setelah itu lihat hasil, contoh seperti ini



  7. Buang beberapa bagian yang tidak diperlukan (yang dilingkar merah)

  8. Buang Langgan: Poskan Komentar (Atom). Caranya adalah : Buka mode EDIT HTML dan cari script dibawah ini

    .feed-links {
    clear: both;
    line-height: 2.5em;
    }

    ubah menjadi

    .feed-links {
    clear: both;
    line-height: 2.5em;
    display:none;
    }

    Simpan dan lihat hasilnya

  9. Buang Halaman Muka. Caranya adalah : cari script dibawah ini

    #blog-pager-newer-link {
    float: $startSide;
    }

    #blog-pager-older-link {
    float: $endSide;
    }

    #blog-pager {
    text-align: center;
    }

    ubah menjadi

    #blog-pager-newer-link {
    float: $startSide;
    display:none;
    }

    #blog-pager-older-link {
    float: $endSide;
    display:none;
    }

    #blog-pager {
    text-align: center;
    display:none;
    }

    Simpan dan lihat hasilnya

  10. Buang Title dan Isi Postingan. Caranya adalah : cari script dibawah ini
    .post {
    padding-$startSide:5%;
    padding-$endSide:10%;
    }

    Ubah menjadi

    .post {
    padding-$startSide:5%;
    padding-$endSide:10%;
    display:none;
    }

    Simpan dan lihat hasilnya

  11. Buang Date Header. Caranya adalah : cari script dibawah ini
    h2.date-header {
    padding-top:15px;
    color:$footercolor;
    padding-bottom:0px;
    margin-bottom:0px;
    font-size: 90%;
    }

    ubah menjadi

    h2.date-header {
    padding-top:15px;
    color:$footercolor;
    padding-bottom:0px;
    margin-bottom:0px;
    font-size: 90%;
    display:none;
    }

    Simpan dan lihat hasilnya

  12. Buang Navbar. Caranya adalah tambahkan script ini persis diatas ]]></b:skin>


    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none
    }

    Simpan dan lihat hasilnya

  13. Ubah Poskan Komentar menjadi POPUP, caranya adalah Buka Pengaturan, Pilih Komentar > Pada Kata-kata Penempatan Formulir Komentar, Pilih OPSI JENDELA MUNCULAN kemudian Simpan Setelan. Lihat Hasinya
    Kira-kira seperti ini



  14. Agar Tampilan menjadi rata pinggir, Buka Mode EDIT HTML, Centang Expand Template Widget kemudian cari script di bawah ini

    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>
    <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>
    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    </b:loop>
    </dl>

    ubah semua yang berwarna merah menjadi div
    tambahkan tag target='_blank' pada script yang berwarna hijau sehingga menjadi seperti ini

    <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
    Simpan dan Lihat Hasil
    Kira-kira seperti ini



  15. Menghilangkan kata "Mengatakan". Caranya adalah script yang berwarna biru pada point no 14, dihapus

  16. Mengubah Font Size dan Font Face. Caranya adalah cari script dibawah ini

    body {
    margin:0;
    font:$bodyfont;
    background:$bgcolor;
    color:$textcolor;
    }

    ubah menjadi

    body {
    margin:0;
    font-family:Tahoma, Arial, sans-serif;
    font-size:8pt;
    background:$bgcolor;
    color:$textcolor;
    }

    ukuran size 8pt bisa anda ubah sendiri sesuai selera

  17. Oleh karena komentar terbaru di blogger selalu di pasang pada bagian bawah, oleh karena itu, kita perlu mengubah halaman buku tamu tadi agar tampilannya pada posisi paling bawah. Caranya adalah sisipkan script dibawah ini diatas </head>

    <script>
    function resizeWindow()
    {
    x=document.body.scrollHeight;
    x=x+99999
    window.scrollTo(0,x);
    }
    </script>


  18. Sisipkan tag onload='resizeWindow()' didalam <body> sehingga menjadi
    <body onload='resizeWindow()'>

  19. Ada sedikit perbedaan antara IE dan FF, pada IE sulit menghilangkan scoll horisontal berapun kita mengubah ukuran layar, sehingga untuk menghilangkannya dibutuhkan tambahan script. Pada script point 17 tambahkan tag

    document.getElementById('bodi').style.width="270px";

    dibawah
    function resizeWindow() {

    sehingga menjadi

    function resizeWindow()
    {
    document.getElementById('bodi').style.width="270px";
    x=document.body.scrollHeight;
    x=x+99999
    window.scrollTo(0,x);
    }

    angka 270 adalah lebar dari layar buku tamu, anda bisa mengubahnya sesuai selera sendiri.

  20. Sisipkan tag id='bodi' dalam <body onload='resizeWindow()'> sehingga menjadi seperti ini
    <body onload='resizeWindow()' id='bodi'>

    Jadilah Sebuah BUKU TAMU



BLOGGER JADI SHOUTBOX
Untuk mengubah BUKU TAMU ini menjadi SHOUTBOX tinggal masukkan dalam Iframe kemudian Copy ke Widget Blog Utama Anda

Langkah - langkahnya adalah

  1. Buat IFRAME seperti ini

    <iframe width="450px" frameborder="0" src="http://gbblogproject.blogspot.com/2009/01/buku-tamu.html" marginheight="0px" name="tagboard" height="350px" marginwidth="0px"></iframe>

    Bagian yang berwarna merah, ganti dengan alamat BUKU TAMU anda yang baru saja dibuat
    atur ukuran lebar (width) dan tinggi(height) iframe sesuai selera

  2. Pada Blog Utama anda, buka TATA LETAK > ELEMENT HALAMAN > TAMBAH GADGET > HTML/JAVASCRIPT, Copy paste script diatas kemudian simpan, jangan lupa atur lagi lebar dan tinggi iframe agar balance dengan blog anda, lihat hasilnya. Kira-kira seperti ini




Related Posts by Categories



27 comments:

IHSAN mengatakan...
mantap boss
luzman mengatakan...
wah.. wah ribet juga yah caranya,, saya mah pake shotbox biasa juga gpp deh. lebih simpel.. hehe
riza mengatakan...
hebat juga kang,,inovasi baru itu,,kapan-kapan di coba ah
gukguks mengatakan...
kreatif ya...
david mengatakan...
wah keren
Kumpulnet mengatakan...
Thanks buat tipsnya...yahut nih :)
suryaden mengatakan...
keren... saya mau pake juga, nanti
kalo bisa prakteknya seh...
@ Coy mengatakan...
klo q udah dapat kode yg lbh simple tp thx udah posting yang seperti in
iFant mengatakan...
Bagus............!!
Kagum banget, n saya tunggu Blog in Blognya plus info lainnya..!!!
lookj mengatakan...
hm...duh belum ngerti..bahasanya disederhanain dikit bos...
kristo mengatakan...
thx infonya.
ebenk789 mengatakan...
waduh..!!! lebih menarik dari shoutmix dah..!!!

soalnya gak ribet :D
boeedi mengatakan...
Mantap Boss.. Mau coba ne.. Tapi kok Komentarnya masih "Nofollow" sih bos... dibuat "Dofollow" dong hehe... makasih..
budiawanhutasoit mengatakan...
sip..nanti coba dipraktekkan..
btw, blognya udah DO FOLLOW kan bos..
Abdul Gamal mengatakan...
Kami mohon maaf pada semua user yang memberi komentar. Mengubah rel komentar dari nofollow menjadi dofollow, kami anggap sebagai resiko tinggi. Kami sangat mengerti mengapa BLOGGER.COM menjadikan comment berstatus nofollow sebagai defaultnya. Itu merupakan Sistem Proteksi mereka sebagai langkah taktis melawan SPAMMER. Oleh karena itu kami menganggap jangan-jangan menghack script comment adalah tindakan yang melanggar peraturan dan bisa beresiko di banned. Dan sekedar info, ROBOT PENJELAJAH BLOGGER tetaplah ROBOT, kadang ROBOT ini juga salah menginterpretasikan setiap tindakan kita mengotak-atik script blogger yang mungkin sah-sah saja tapi dianggap sebagai ancaman potensial spammer.

BLOG PROJECT ini merupakan My Blog utama kami sehingga kami menjadi begitu sangat hati-hati untuk mengubahnya demi menjaga agar blog ini bisa tetap survive. Tapi bukan berarti kami jadi tampak paranoid. Kami tetap berstrategi dengan bermain cantik. Memasang satu blog cadangan kami yang sudah kami ubah menjadi dofollow sebagai umpan. Jika dalam batas waktu yang kami anggap aman ternyata ROBOT SPAM BLOGGER menganggapnya sebagai hal biasa dan sah-sah aja barulah kami mengubah blog utama menjadi dofollow. Mohon Maaf sekali lagi
NAdia mengatakan...
Penjelasan Paham Bos!!!, Praktek tunggu dulu. Tapi Makacih Banget informasi & Inovasinya !!!
MITRA RISET mengatakan...
mas ada info baru nih dicek ya
http://mitrariset.blogspot.com/2009/01/searching-dibayar-bedaa-gabungan.html
Keluarga Besar Hadiwiryanan mengatakan...
mohon bimbingan nih, harus banyak belajar....
mo develop my blog. gimana tanggapannya dari master ??
ayuzuricha mengatakan...
waduh berarti punyaku dah parah neh, gak masuk daftar blog yah :D:D enjoy the day aja wis :(
arton mengatakan...
keren banget blognya, komentar yang jalan di palung bawah gimana bikinnya bos?
muryanto mengatakan...
masih bingung mas tapi kapan kapan di coba lagi.
agus widyatama mengatakan...
Siip luamayan tutorialnya, saya sebagai pemula akan mencoba menerapkanya, ne alamat blog saya : aguswidyatama.blogspot.com dan www.uangpro.com

jangan lupa di kunjungi ya
shidiq mengatakan...
Tips yang bagus sekali. Blognya juga bagus, bagaimana cara buatnya?
Pak gendut mengatakan...
bagus sekali pak ini yang saya cari dari dulu trims atas tutorialnya
NAZA LUCKZANA mengatakan...
keren abis bos, wah cuman ada keinginan kalo pingin menambahkan reply disetiap, teman yang komen, ataupun menambahkan posting terakhir, mereka gitu gimana caranya.........
NAZA LUCKZANA mengatakan...
bos disamping tulisan "beri komentar sebagai" terdapat form dan tulisannya masih kebasaran menurutku. bagaimana caranya agar tulisan dalam form itu menjadi kecil setidaknya seukuran 8 pt. terima kasih sebelumnya
admin mengatakan...
@Nasa Luckzana, itu gak bisa di edit, soalnya merupakan iframe, script htmlnya terpisah

Posting Komentar

 
 
 
 
 
 


CLOSE
MAIN MENU
REFRESH