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