Cara Membuat Fitur Reply Comment (Balas Komentar) di Blogger

Fitur Reply to Comment (Balas Komentar) sering kita temui di blog-blog Wordpress maupun Blogger. Perbedaannya, WordPress telah menyediakannya sebagai fitur bawaan. Selain itu, fitur reply comment WordPress mengandung threads yang independen. Masing-masing komentar dapat memiliki kesinambungan urutan seperti thread forum atau board. Di Blogger, fitur reply to comment pun dapat ditambahkan, namun sifatnya masih sangat sederhana. Hasil balasan komentarnya pun berupa komentar terbaru dan bukan thread. Tapi, tidak ada salahnya menambahkan fitur ini sebagai bagian dari tampilan desain blog yang tentunya akan memberikan kesan profesional pada blog Blogger anda.

Cara Membuat Reply To Comment (Balas Komentar) di Blogger/Blogger

Hack ini digunakan untuk menambahkan link fitur balas komentar Blogger. Ketika link tersebut di klik, maka akan muncul pop up window komentar baru, sama dengan jika anda melakukan setting kotak komentar agar muncul sebagai window baru dan bukan menyatu dengan bagian posting (berada di bawah posting).

Langkah-langkah menambah fitur reply to comment:

1. Copy kode berikut ke notepad atau text editor yang lain:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>Reply</a></span>

2. Cari ID blog anda. Dari dashboard, buka halaman design, comment, post, atau yang lainnya. Lihat ke kotak url di bagian atas browser. Lihat bagian belakang url. Di bagian itu akan terlihat ID blog.

Contoh:

http://www.blogger.com/post-create.g?blogID=3293775847481849705 

Di bagian berwarna merah itulah ID blog anda. Copy angka ID blog tersebut. Jangan sampai ada kekeliruan dalam meng-copy.
3. Ganti  ID-BLOG-MU  dengan angka ID blog yang telah di copy tadi.
4. Ganti Reply dengan text lain yang diinginkan.
5. Masuk ke edit HTML/Template.
6. Centang/klik 'Expand Widget Templates' (ni yg sering banget kelupaan, bis tu komen marah2 bilang kode yang harus dicari ga ada meskipun berulang2 dicari pe jenggotnya tambah panjang 5 meter)
7. Cari kode berikut:

<data:commentPostedByMsg/>

8. Masukkan seluruh kode yang telah diganti ID-nya tadi tepat DI BAWAH / SETELAH-nya.

9. Save Template.

Mengganti Text 'Reply' Comment dengan Gambar/Image Button

Jika ingin mengganti text 'Reply' dengan gambar, cukup ganti text tersebut dengan script gambar.

<img src='http://urlgambar.com/gambar.jpg' />

Selengkapnya, copy kode berikut:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img border="0" src='http://urlgambar.com/gambar.jpg' style='float:right;padding:4px;' title="Balas Komentar Ini"/></a></span>

Ganti dengan url gambar tombol/icon reply untuk blog.

Kostumisasi Posisi Tombol/Gambar Reply Button 

Ganti http://urlgambar.com/gambar.jpg  dengam url gambar reply button. Ganti right dengan left jika ingin gambar berada di sebelah kiri (tepat di sebelah nama komentator). Atur nilai padding 4px untuk memberi besaran ruang kosong di sekeliling gambar. Ganti Balas Komentar Ini dengan kalimat atau perintah lain. Atau, tinggalkan begitu saja.

Gambar Tombol/Button Comment Reply

Untuk mendapatkan gambar reply button yang sesuai, anda dapat dengan mudah mencarinya di Google atau gunakan gambar berikut sebagai tombol reply komentar:

Penting! Upload dan host sendiri gambar-gambar tersebut karena sewaktu-waktu gambar-gambar tersebut  dapat dihapus. Klik kanan, pilih 'save as'. Upload gambar ke Blogger (Picasa) atau lainnya.

Catatan: Beberapa problem yang muncul biasanya bersumber pada pencantuman ID blog yang keliru dan kesalahan dalam mencari kode yang sama persis. Pastikan benar mencentang 'Expand Widget Templates',  jika tidak ketemu, cari tanpa tanda < dan >.

DOnE! 

Read more »

Cara Membuat Efek Transparan Pada Gambar Blog (CSS Image Opacity)

Efek transparan pada gambar (image transparency/opacity) sering digunakan di Blog/web sebagai efek hover (mouse over) yaitu tampilan transparansi gambar (atau sebaliknya) ketika mouse diarahkan di atas gambar. Transparansi gambar merupakan salah satu efek yang dapat dibuat dengan CSS dan dimodifikasi sedemikian rupa, sama halnya dengan efek-efek yang lain, misalnya efek bayangan gambar (CSS 3 Box Shadow).

Dasar CSS Transparansi Gambar (CSS Image Transparency/Opacity)

Properti CSS yang digunakan sebagai perintah efek transparansi gambar adalah opacity:x. Properti ini digunakan oleh Mozilla Firefox dan beberapa browser lain. Sedang pada IE (Internet Explorer) digunakan properti filter:alpha(opacity=x). X adalah nilai transparansi, pada Mozilla Firefox dan beberapa browser lain, nilai defaultnya adalah 1.0, sedangkan pada IE adalah 100. Untuk memberikan besaran efek transparan, kecilkan nilai x-nya. Pengurangan dengan value yang sama antara browser lain dengan IE adalah 1/10, jadi kurangi 0.1 pada opacity dan kurang 10 pada filter untuk mendapatkan efek transparansi yang sama. Semakin kecil nilai x semakin besar transparansinya.

Contoh:

img {opacity:0.5;filter:alpha(opacity=50;}

Penggunaan Transparansi Gambar sebagai Efek Hover (Mouse Over)

Seperti yang telah dijelaskan di atas, efek ini sering digunakan dan dipadukan sebagai hover effect. Maka, posting kali ini akan berfokus pada penggunaan transparansi gambar sebagai efek hover.

Sebagaimana pada link (a) dan hover link (a:hover), kita pun dapat menerapkannya pada gambar.

img {opacity:1.0;filter:alpha(opacity=100;}
img:hover {opacity: 0.5;filter:alpha(opacity=50;}

Contoh (arahkan mouse ke atas gambar):

Atau sebaliknya, jika ingin gambar berubah jadi terang (tidak transparan) ketika mouse diarahkan diatasnya, tukar nilai transparansinya:

img {opacity: 0.5;filter:alpha(opacity=50;}
img:hover {opacity:1.0;filter:alpha(opacity=100;}

Contoh (arahkan mouse ke atas gambar):

 

Membuat Efek Hover Transparan Pada Gambar Secara Individual (tanpa link)

Jika ingin membuat efek transparan gambar yang ingin diberi efek tanpa mengandung link (diapit tag <a> dan </a>):

1. Masukkan script berikut di atas ]]></b:skin>

.brl-transparan {opacity:1.0;filter:alpha(opacity=100);}
.brl-transparan:hover {opacity: 0.5;filter:alpha(opacity=50);}

 atau sebaliknya,

.brl-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}

2. Save template.

3. Pada tag gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="brl-transparan"

Contoh:

<img class="brl-transparan" border="0" src="http://urlgambar.com/image.jpg" />

 

Membuat Efek Hover Transparan Pada Gambar yang Mengandung Link

Jika yang ingin diberi efek hover transparan adalah gambar yang mengandung link, maka dibutuhkan deklarator link (a) dan image (img) pada CSSnya:

1. Masukkan script berikut di atas ]]></b:skin>

a.brl-transparan img {opacity:1.0;filter:alpha(opacity=100);}
a.brl-transparan:hover img {opacity: 0.5;filter:alpha(opacity=50);}

 atau sebaliknya,

a.brl-transparan img {opacity: 0.5;filter:alpha(opacity=50);}
a.brl-transparan:hover img {opacity:1.0;filter:alpha(opacity=100);}

2. Save template.

3. Pada tag link gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="brl-transparan"

Contoh:.

<a class="brl-transparan" href="http://buka-rahasia.blogspot.com"><img  border="0" src="http://urlgambar.com/image.jpg" /></a>

 Berikut contoh gambar yang mengandung link beserta efek transparansi gambar-nya:

Klik untuk Memperbesar Gambar

Read more »

Cara Membuat Efek Bayangan Pada Gambar (CSS3 Box Shadow)

Tips-Tricks Blogger: Browsers compatible with CSS3 Box Shadow

Memperindah blog/website kini menjadi hal yang semakin mudah dan merupakan kebutuhan bagi setiap web designer dan developer. Keberadaan CSS3 memungkinkan kita untuk membuat berbagai macam efek tampilan dan fungsi. Sedangkan saat ini hampir seluruh browser telah compatible dengan CSS3.

Pada awal posting tentang CSS3 ini, saya akan mempresentasikan penggunaan CSS3 Box Shadow pada gambar untuk memunculkan efek bayangan (image shadow). Basic penggunaan CSS3 Box shadow adalah dengan menggunakan syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

h shadow: posisi dan besar bayangan horizontal

v shadow: posisi dan besar bayangan vertical

blur: besaran dan jarak blur (opsional)

spread: ukuran bayangan (opsional)

inset: aturan yang ditambahkan untuk mengubah bayangan jatuh ke bagian dalam objek (opsional)

Contoh:

(Biasanya aturan yang lazim digunakan tidak menggunakan spread dan inset)
box-shadow: 5px 5px 3px #666666;

Aturan di atas sangat lah sederhana, pada prakteknya kita harus menambahkan property lain agar compatible dengan browser-browser lainnya (yang berplatform webkit dan moz). Maka property lengkapnya adalah:

-webkit-box-shadow: 5px 5px 3px #666666;
-moz-box-shadow: 5px 5px 3px #666666;
box-shadow: 5px 5px 3px #666666;

Efek bayangan Box Shadow ini sebenarnya dapat diterapkan pada berbagai objek blog/web yang berbentuk kotak dan bahkan juga pada objek yang berlekuk, yang dalam hal ini adalah rounded corners. Untuk mengaplikasikan ke gambar, kita dapat memasukkannya langsung ke dalam dengan menggunakan atribut style atau memberikan atribut class dan meletakkan aturan CSS-nya di bagian lain, baik di bagian HTML posting, widget, atau meletakkannya langsung sebagai aturan umum untuk semua objek yang diberi class/id yang sama di bagian head (antara <head> dan </head>).

Contoh pengaplikasiannya:

Salah satu cara yang digunakan untuk memasukkan kode CSS3 Box Shadow-nya:

Tambahkan class pada tag html gambar dan beri aturan CSS3 Box shadow yang sesuai dengan classnya. Contoh:

<img class="boxshadow" border="0" class="bayang2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUmP4ZL_P8K_V8EJd_U2et6oySpUeeLQGMkhK_uMzyYWBip_KXOwQSYyDyDHLEgAPi_ot3j10SlXoDF9H5z90uwAuczIP51ThDZ1-ZGAx6SMRsIPYjxmku_IDJ5rPY67yubRErdT5IW0OF/s1600/anti_copycats-pencuri+konten.jpg" />

Untuk membuat efek bayangan box shadow pada blog anda:
Masuk ke dashboard > design/rancangan > Edit HTML (untuk Blogger), kemudian masukkan kode CSS ini di bagian head, lebih tepatnya di ATAS </head>, dan save template.

<style type="text/css">
.boxshadow {-webkit-box-shadow: 5px 5px 3px 0px #666666;-moz-box-shadow: 5px 5px 3px 0px #666666;box-shadow: 5px 5px 3px 0px #666666;}</style>

 Kemudian setiap anda ingin memberikan efek bayangan (image shadow) pada gambar di posting, sidebar widget yang bergambar, tinggal tambahkan class="bloxshadow" pada tag HTML image-nya:

<img class="boxshadow" border="0" src="http://urlgambar.com/gambar.jpg" />

Kostumisasi efek bayangan:

a. Anda dapat mengubah nilai h shadow, v shadow, dan blur (dalam px) serta kode warna sesuai dengan keinginan. Untuk mengetahui koleksi kode warna silahkan lihat Hex Color Code Generator.

b. Untuk mengubah efek bayangan jatuh ke kiri, gunakan nilai negatif (-) pada h shadow dan v shadow, contoh:

-webkit-box-shadow: -5px -5px 3px #666666;
-moz-box-shadow: -5px -5px 3px #666666;
box-shadow: -5px -5px 3px #666666;

 Hasilnya:

Coba terus dan silahkan bereksperimen dengan nilai vertical, horizontal, blur, dan warna, serta efek jatuhnya bayangan.

Read more »

Cara Membuat Daftar Isi (Sitemap) di Blogger/Blogspot

Daftar Isi (Table of Contents) sering pula di sebut sebagai sitemap (peta situs) karena isinya digenerasikan (generated) dari url sitemap feed. Jika sitemap blog di search engine berfungsi sebagai alat untuk mempermudah pemetaan isi blog/website oleh search engine, maka sitemap yang ini berfungsi sebagai alat navigasi dan pemetaan bagi pengunjung/visitor untuk melihat seluruh isi konten atau artikel blog/website dalam satu halaman khusus. Tentunya ini sangat menguntungkan pengunjung dan juga pemilik blog/website dalam usaha meningkatkan jumlah pageview.

Daftar isi kali ini dibuat dengan aturan javascript yang file-nya sudah saya upload dan dapat langsung digunakan. Isi yang ditampilkan dibagi berdasarkan label, sehingga perlu digarisbawahi bahwa setiap posting  harus memiliki label. Tanpa label, posting tidak akan termuat di daftar isi. Simak cara membuat label blogger bagi yg belum mengetahui cara buat label..

Cara membuat daftar isi/sitemap blog di blogger/blogspot:

1. Buat sebuah halaman posting baru, sebaiknya halaman statis (static page).

Dashboard > New Post/Edit Post > Edit Pages > Create New Page

2. Beri judul sesuka anda, misalnya: "Daftar Isi", "Table of Content", "Sitemap Blog", dan lain lain.

3. Pada bagian kanan kotak posting klik "Edit HTML".

4. Masukkan script berikut:

<script src="http://yourjavascript.com/18113981113/bukarahasiablog-toc.js">
</script>
<script src="http://buka-rahasia.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Ganti http://buka-rahasia.blogspot.com dengan url blog/website anda.

5. Jika ingin melihat hasilnya klik "preview/pratinjau".

6. Publish post.

7. Pasang link halaman tersebut ke link list blog, menu, atau di tempat yang diinginkan.

8. Done!

---------------------------------------------------------------
Update:
Buat @Idnay yg komentar dibawah minta tulisan "new" berwarna putih, saya sudah buatkan scriptnya:
ganti: http://yourjavascript.com/18113981113/bukarahasiablog-toc.js
dengan: http://yourjavascript.com/111006011142/bukarahasiablog-toc-putih.js

Read more »

Cara Membuat Auto Read more (Thumbnails) Blogspot V2

Script auto readmore blogger/blogspot dengan thumbnails (gambar preview) ini adalah penyempurnaan dari script auto readmore V1, di mana ditemukan adanya masalah pada halaman statis. Ketika halaman statis ditampilkan, auto readmore ikut muncul, sehingga harus diberi pengecualian (b if cond & b else) untuk static pages pada scriptnya. Selain itu, javascript dlm auto readmore ini juga bersifat internal jadi tidak perlu lagi memuat file .js eksternal yang diupload ke hosting lain. Meskipun file template menjadi sedikit lebih besar, namun loading  page menjadi lebih cepat daripada auto readmore sebelumnya.

Langkah-langkahnya:

1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.

2. Jika dulu sudah diisi script auto  readmore yang pertama, hapus terlebih dahulu, gunakan panduan dari posting auto readmore V1 untuk mengetahui mana saja yang harus dihapus.

3. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<!-- Auto read more script -http://buka-rahasia.blogspot.com- Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {   
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script -http://buka-rahasia.blogspot.com- End -->

Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<!-- Auto read more -http://buka-rahasia.blogspot.com- Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://buka-rahasia.blogspot.com- End -->

Kostumisasi:
Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:

<img border='0' src='url (direct link) gambar readmore'/>

Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan menghosting gambar.
----------------
Update (12102011):
Di komentar sobat Ari di bawah ditanyakan: bagaimana cara agar tampilan teks di post summary - auto readmore bisa rata kiri kanan (justified)? 
Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:

<div expr:id='&quot;summary&quot; + data:post.id'>

Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style='text-align:justify;'
Jadinya:

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

----------------
4. Preview terlebih dahulu, jika sudah beres, kemudian save.

Gunakan kotak komentar untuk menyampaikan pertanyaan, permasalahan, atau apapun tentang script ini.

Read more »

Cara Membuat & Memasang Tanda Tangan di Blog

DI BLOG (BLOGGER), kita dapat membubuhkan tanda tangan (signature) sebagai sebagai identitas penulis blog (blog author). Dengan adanya tanda tangan ini, posting-posting blog terasa lebih khusus, karena memiliki tanda tangan sang penulis blog yg unik. Sobat Blogger bisa membuat dan memasangnya di blog Blogger dengan mudah. Kehadiran online signature maker memberikan kemudahan untuk membuat tampilan tanda tangan tersebut. Selain untuk digunakan di email, gambar tanda tangan ini bisa digunakan pula di blog sebagai blog author signature.

Cara Membuat Gambar Tanda Tangan Secara Online

Untuk membuat tanda tangan dengan online tool, saya memilih menggunakan MyLiveSignature, sehingga tutorial ini akan mengetengahkan langkah-langkah membuat signature dengan online tool tersebut.

1. Masuk ke mylivesignature.com.

2. Ada beberapa opsi disana, jika ingin membuat tanda tangan tanpa register, klik "Proceed". Jika ingin daftar, klik "register"

3. Setelah klik proceed, anda akan masuk ke halaman opsi jenis signature yang akan dibuat. Ada 4 cara membuat signature: dengan wizard, dengan menulis sendiri di screen tool, upload gambar yang di-scan, atau menggunakan font. sendiri. Saya sarankan untuk membuat dengan wizard (pilih opsi pertama), karena cara itu lebih mudah.

4. Tuliskan nama anda atau nama yg ingin dibuat sebagai tanda tangan. Klik 'next step'.

5. Langkah selanjutnya adalah memilih jenis font tanda tangan. Ada banyak jenis font dan langsung bisa dilihat melalui preview. Pilih font yang diinginkan dengan klik opsi di sebelah preview. Setelah itu 'klik next'.

6. Pilih warna tanda tangan dan background. Sesuaikan background dengan background halaman blog, atau pilih/centang "transparent".

7. Setelah gambar jadi, anda akan dibawa ke halaman hasil akhir gambar. Di halaman tersebut terdapat gambar tanda tangan/signature dan di bwahnya tertera ID dari tanda tangan tersebut. SImpan ID jika dibutuhkan kembali di kemudian hari. Untuk menyimpan gambar, klik kanan, lalu pilih 'save as' atau 'save image as'

Cara Memasang Tanda Tangan di Bawah Posting Blog

1. Pastikan terlebih dahulu gambar tandatangan tadi telah di upload. Kemudian simpan direct url dari gambar tersebut.

2. Untuk menampilkan gambar di bawah posting kita bisa menggunakan dua cara:

  a. Dengan memasukkan html gambar di fitur blogger untuk menyisipkan widget di posting:

Dari Setting > Formatting > Lihat ke bagian kosong di sebelah kanan Post template di bagian bawah halaman.
Isikan script image ke dalamnya:
< img border="0" src="urlgambartandatangan.jpg" />
Ganti urlgambartandatangan.jpg dengan url gambar tandatangan sobat.

Kelemahan dari cara ini adalah susunan struktur pada badan post kadang-kadang bisa kacau, dan membutuhkan waktu load yang lebih lama

b. Dengan memasukkan gambar di bagian template HTML melalui Edit HTML Blogger:

Melalui Edit HTML, sobat dapat memasukkan script secara lebih leluasa dan juga dapat menambahkan aturan-aturan tertentu agar struktur tampilan lebih sempurna.

- Di beberapa tutorial, saya melihat script yang dimasukkan hanya dalam bentuk HTML gambar seperti ini:

< img border="0" src="urlgambartandatangan.jpg" />

Namun, jika hanya dengan HTML gambar, struktur gambar menjadi tidak independen karena dia mengikuti aturan (div) pada tulisan di atasnya (tulisan posting di bagian akhir/bawah). Sehingga kadang-kadang gambar betubrukan dengan tulisan atau bergeser.

- Untuk membuat gambar berstruktur independen maka tambahkan struktur sendiri pada tag gambar:

<div>< img border='0' src='urlgambartandatangan.jpg' /></div>

Dengan cara ini, gambar dapat berada di baris selanjutnya di bawah tulisan posting.

- Agar gambar bisa diatur posisinya, akhirnya gunakan aturan berikut:

<div style='padding:5px;float:right'>< img border="0" src='urlgambartandatangan.jpg' /></div>

- right akan menampilkan gambar di sisi kanan, ganti dengan left jika ingin gambar berada di sebelah kiri.Ganti urlgambartandatangan.jpg dengan url gambar tandatangan yg telah di-upload.

- Setelah selesai mengedit script, masuk ke dahsboard > design > Edit HTML.

- Jangan lupa centang "Expand Widget Templates"

- Cari <data:post.body/>

- Letakkan kode yang telah diedit tadi tepat di BAWAH-nya.

- Save Template.

Note: Jika blog telah menggunakan fitur auto readmore, ada lebih dari satu <data:post.body/>, letakkan kode tanda tangan di bawah <data:post.body/> yg kedua.

Read more »

Cara Membuat & Memasang Disqus Comment di Blogger

Disqus Comment adalah layanan third party yg menyediakan widget comment serta comment system yg sangat lengkap. Comment system ini dapat ditambahkan di berbagai macam platform blog dan website termasuk Blogger. Tampilannya pun tampak lebih professional dan elegan sehingga dapat menjadi daya tarik bagi pengunjung.

Fitur-fitur disqus comment system antara lain:

1. Comment moderation. Pemilik blog dapat melakukan moderasi sebelum komentar di-publish.

2. Inline media embedding. Di dalam comment diswus, dapat disisipkan media seperti video,gambar atau audio yg terintegrasi langsung dengan Youtube, Flickr, dan lainnya.

3. Mobile commenting. Disqus compatible diakses melalui mobile internet.

4. Social media integration. Dapat diintegrasikan dengan social media seperti Facebook, twitter dll.

5. Community box. Disqus juga merupakan wadah komunitas pengguna comment system tersebut.

6. Like and share. Tool yang terintegrasi dengan system untuk melakukan vote (like) dan sharing.

7. Realtime system. Comment disqus bersifat realtime sehingga pengguna dapat melakukan diskusi secara langsung melalui reply.

8. Spam-be-Gone. Salah satu fitur disqus yg dapat menyaring spam.

9. Mobile apps. Disqus tersedia untuk berbagai macam mobile media seperti iPhone, SmartPhone, dll.

10. Imprt & Export. Kita dapat melakukan impor atau ekspor comment yang lama.

11. International language. Disqus support hampir semua bahasa.

12. Theme customization. Kostumisasi tampilan disqus sesuai template blog atau keinginan blogger.

13. Tweets and reactions. Disqus dapat membawa tweets dan reaksi tweets ke dalam kotak komentar.

14. Dan masiiiihhhhhh banyak lagi!

Setting Blogger Sebelum Menambahkan Disqus Comment

Sebelum sobat melakukan langkah-langkah untuk membuat dan menambahkan disqus comment, lakukan setting terhadap blog terlebih dahulu:

1. Pastikan telah login di Blogger.

2. Backup template.

3. Patikan blog telah menggunakan sistem Blogger Layouts (tentunya semua blog blogger saat ini telah menggunakan sistem ini, namun pastikan layout anda bisa di-set melalui halaman Page Elements, tempat anda biasa memasang widget).

4. Pastikan sistem comment telah aktif (ini jg pasti semua udah ya, kecuali yg blog-nya gak boleh dikomentari). Blogger > Settings > Comments.

5. Masih pada halaman tersebut, cek apakah comment telah diperbolehkan untuk siapapun (anyone). Lihat "Who Can Comment", pilih "anyone".

Cara Membuat dan Memasang Disqus Comment ke Blogger

Setelah semua setting di Blogger beres, lakukan langkah-langkah berikut:

1. Masuk ke Disqus.

2. Buat account sekaligus isi form yang berisi nama Blog, url blog, dan shortname (nama pendek) blog. Klik "continue".

3.  Pada halaman setting, lakukan setting bahasa dll sesuai keinginan. Klik "continue" lagi.

4. Pilih platform blog sesuai blog, dalam hal ini, pilih Blogger.

5. Setelah masuk ke halaman instruction, pada opsi nomir 3, ada tombol bertuliskan 'Add site "nama blog" to Blogger'. Klik tombol tersebut.

5. Setelah itu, anda akan masuk ke halaman "Add Page Elements" Blogger. Pilih blog yang akan dipasangi Disqus Comment dan beri nama pada kolom nama widget. Setelah beres, kilk "Add Widget".

6. Agar Discuss Comment Widget tampil secara maksimal, pada halaman "Page Elements" drag/geser widget Disqus ke bagian paling bawah di sisi kanan, baik di sidebar kanan, ataupun footer bar kanan (jika ada).

7. Save dan lihat hasilnya.

Komentar-komentar lama yg masih berada pada sistem Blogger Comment dapat pula diimpor ke Disqus melalui fitur import. Letaknya berada di bawah Tools. Cukup ikuti langkah-langkahnya dan komentar lama pun akan terimpor ke Disqus.

Read more »