Cara mempecepat Loading Form Kotak Komentar di Blog

Kotak Komentar Defalut

Salam sobat-sobat blogger, pada artikel saya kali ini saya akan mempostkan Cara mempecepat Loading Form Kotak Komentar di Blog. Sekedar untuk memberi tau sebenarnya kotak komentar defalut di blog selain mengandung banyak error dan soucrenya tidak sepenuhnya XTML, sebenarnya form komentar default blogger juga mempunyai permasalahan lain yaitu, terdapat kejanggalan dalam cara penulisan kode pemanggilan iframe dari form tersebut. mungkin sobat-sobat semua langsung akan mengatakan Why you can say "janggal"?, karna pemanggilan iframenya dibuat terpisah menjadi dua bagian yaitu :

Kode src yang biasanya digunakan untuk memanggil data external, entah kenapa dibuat terpisah dengan tautan link menuju halaman form komentar yang asli dari blogger, permasalahan ini membuat loading form komentar kita menjadi lambat.

Efeknya mungkin tidak terlalu terasa namun akan terlihat lambanya loading page terutama kotak komentar blog kita saat para pengunjung blog membaca konten post kita sampai habis terlebih dahulu. Why?, karna saat para pembaca selesai membaca artikel, form komentar memang sudah berhasil diload hingga selesai dengan sempurna. Namun, bila kita bandingkan lebih lanjut, lama loading form komentar dengan widget-widget yang ada disidebar menu, saya jamin pasti akan terlihat seberapa lama loading iframe kotak blog tersebut.
Seringkali, elemen dari sidebar tampil terlebih dulu dibandingkan dengan form komentar. Hal ini tentu saja membingungkan, karna seharusnya, form komentar adalah elemen yang tampil pertama kali setelah konten post, sesuai dengan letak kodenya yang berada persis dibawah kode main post blog. Baru setelah itu, kode sidebar dan footer.
Dan kalo blog sobat-sobat semua mengalami masalah yang persis seperti pembahasan sebelumnya, berikut ini ada cara untuk memperbaiki "kejanggalan" form komentar tersebut.

1. Login ke akun Blogger sobat masing masing
2. Masuk ke menu Design
3. Kemudian pilih Edit HTML, kemudian berikan tanda centang (check mark) pada kolom Expand Widget Template. (jangan lupa untuk melakukan backup template blog terlebih dahulu, untuk mengatisipasi dari kesalahan nantinya) 
4. Lalu carilah kode seperti ini di template sobat semua :
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
5. Sobat-sobat semua perhatikan kode diatas. Kode data:post.commentFormIframeSrc dan src yang seharusnya bisa ditulis bersamaan, malah dibuat terpisah, dengan target src iframe yang dibiarkan kosong.
6. Browser biasanya cenderung lambat dalam merespon kode src yang null alias kosong, maka kita harus mengganti struktur penulisannya menjadi lebih benar. Bagaimana caranya? Pindahkan kode data:post.commentFormIframeSrc kedalam target src yang kosong, seperti ini :
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>
7. Selanjutnya, hapuslah kode <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    Sekarang kode form komentar kita sudah lebih singkat seperti dibawah ini :
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>
8. Save template, dan selamat mencoba kinerja form komentar sobat sekarang.

Selamat mencoba & semoga artikel saya bisa membantu sobat-sobat semua ^.^

Read More

Aplikasi untuk Lakukan Chat di Facebook

Digsby 3D

Salam teman-teman blogger, wah sepertinya saya sudah jarang sekali update artikel tentang Facebook Trick nah tadi sewaktu saya blogwalking saya menemukan Aplikasi untuk Lakukan Chat di Facebook yang simple, nama dari aplikasi ini adalah Digsby Messenger. Sebenernya bukan hanya facebook saja yang di support oleh tools ini, masih banyak lagi layanan-layanan chat yang sanggup dijalankan oleh tools yang bisa dibilang mungil ini.
Sebelum sobat-sobat menggunakan tools ini, sobat semua diwajibkan untuk mendaftar terlebih dahulu di

jaringan digsby, pendaftaran nya simple sekali kok, tinggal ikuti saja langkah-langkah yang diberikan.

Untuk masalah instalasi, kita bisa langsung mendownload dan melakukan instalasi secara online di www.digsby.com, Sedangkan buat sobat-sobat blogger yang malas melakukan instalasi secara online atau terbentur oleh koneksi internet yang kurang memadai, bisa mendownload file instalasi offline pada gambar dibawah:

Selamat mencoba ^,^

Special thanks to om : Remo-xp

Read More

Cara membuat Page Number di Blog

Halo sobat-sobat semua, kali ini saya akan membahas bagaimana Cara membuat Page Number di Blog  pada template Blogspot, umumnya template blogspot menggunakan navigasi Previous dan Next/Posting lebih baru dan Posting Lama yang ada pada bagian bawah postinagn blog, yang fungsinya yaitu membantu pembaca/pengunjung blog kita untuk menganti halaman menuju tulisan sebelum atau setelah dari tulisan yang sedang dibaca tanpa ada keterangan nomor halaman. Contohnya dapat langsung dilihat di blog saya ini (pada halaman awal diujung bawah post), agar sobat-sobat blogger tidak bingung saya juga telah memberikan contoh gambar dibawah ini :

Page Number

Nah, kurang lebih seperti itulah tampilan dari page number yang akan kita buat untuk kali ini, berikut adalah langkah-langkah membuat navigasi nomor halaman.
Berikut adalah langkah-langkahnya :

1. Login ke blogger sobat
2. Klik Tata Letak dan pilih Edit HTML
3. Kalau sudah, beritanda centang Expand Template Widget
4. Lalu cari kode berikut (Ctrl + F)  "]]></b:skin>" (tanpa tanda petik)
5. Kemudian masukan kode script dibawah ini tepat di atas kode: ]]></b:skin>
.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; }
6. Selanjutnya kita cari lagi kode berikut: </body>
7. Kemudian masukan kode script berikut tepat di atas kode: </body>
<b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/> </b:if>
8. Terakhir kita cari kode script berikut: 'data:label.url'
9. Gantilah kode script diatas dengan kode disamping ini : 'data:label.url + &quot;?&amp;max-results=5&quot;'
10. Simpan Template dan lihat hasilnya
    

Read More

Cara membuat Buku Tamu Melayang di Blog

Buku Tamu Melayang

Hay para sobat blogger semua,...!!! pada kali ini saya akan menerangkan bagaimana Cara membuat Buku tamu melayang di Blog seperti yang ada di samping kanan atas blog saya. Buku Tamu pada kali ini menggunakan background, dan kalau diklik pada background maka otomatis akan keluar form isian Nama, Website dan Message. Buku Tamu atau Guest Book tersebut melayang dan auto hide, yang artinya para sobat sekalian tidak perlu khawatir buku tamu menganggu artikel pada blog sobat sekalian dan buku tamu ini juga tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap terlihat (diam ditempat semula).

Langkah pertama sobat semua register dulu di Cbox. Apabila sobat semua belum mengetahui cara untuk registrasi di Cbox sobat bisa membaca di artikel saya yang sebelumnya di Cara membuat Buku Tamu di Blog.

Setelah itu untuk membuatnya ikuti langkah berikut :

• Masuk ke Blogger
• Klik Rancangan
• klik Elemen Laman
• klik Tambah Gadget
• Klik "HTML/JavaScript"
• Kemudian Copy/Paste kode di bawah ini :

 <style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZUnHLpA8iEUbsIf74Fak557s7fp7k-x0TAFgfQVxFuASTHtRZOQ6wITBRxB-cwNFp5Y-Bj0x3tFMEnDWVVdynEBvGGLxTDcAtSLL_pUkONZm2KIuBxQTnWVVx8NC2DPZ0ORAHkNC50yVa/s1600/buku+tamu.png') no-repeat; } .gbcontent{ float:left; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> 
<!-- BEGIN CBOX - www.cbox.ws - v001 -->

Copy kan code CBOX disini

<!-- END CBOX -->
<br/>Mau buat buku tamu ini ?<br/>Klik <a href="http://www.masnugh.co.cc/2012/01/cara-membuat-buku-tamu-melayang-di-blog.html"target="_blank"> di sini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

Selamat mencoba ^,^

Read More

Cara membuat Buku Tamu di Blog

Buku Tamu

Hay para sobat blogger semua,...!!! pada kali ini saya akan menerangkan bagaimana Cara membuat Buku Tamu di Blog. Fungsi dari buku tamu adalah untuk meniggalkan pesan keadmin / keteman-teman yang sering mengunjungi blog sobat-sobat sekalian, buku tamu ini bisa juga di gunakan sebagai tempat untuk berdikusi tentang suatu masalah, dan msh banyak lagi fungsi yang lainya.

Langsung saja tanpa berbelit-belit lagi :

Pertama sobat-sobat sekalian buka dulu alamat CBOX 

(karena untuk kali ini saya menggunakan aplikasi dari CBOX)

Lalu klik Sing Up seperti pada gambar dibawah:

 

Kemudian isi form yang diminta sesuai dengan data diri sobat-sobat sekalian, seperti pada contoh gambar dibawah:

 

 Jangan lupa kasih centang buat "I have read and do agree to the Cbox terms and conditions of service" ea sobat, setelah itu klik Create "MyCbox!" maka akan tampil form seperti gambar dibawah :

Setelah itu sobat-sobat sekalin bisa login pada akun yang telah dibuat tadi di Cbox dan melaukuan setting" tampilan Cbox sesuai dengan keinginan sobat masing-masing. Setelah tampilan sesuai dengan keinginan sobat semua bisa klik publish! untuk menggunakan Buku tamu (ada dibawah menu utama di web CBOX), maka akan keluar tampilan seperti berikut:

Isikan semua data sesuai dengan data sobat sendiri, kemudian copy script yang ada di dalam step 3 lalu masuk ke Blogger sobat, Klik Rancangan,Klik Elemen Laman, Klik Tambah Gadget, Klik "HTML/JavaScript", Copy/Paste script yang tadi telah didapat dari Cbox kemudian simpan dan tralala Buku tamu sudah siap diggunakan di blog sobat-sobat semua.

Selamat mencoba ea, klo ada yang mau ditanyakan silahkan tinggalkan kommand di bawah ^,^

Read More