Untuk merayakan kebebasan semu liburan ini gw bakal bagi-bagi tutorial yang berhubungan sama widget komentar tambahan yang bernama 'Disqus', lalu sebuah tambahan author box simple-but-neat di blog.

Sebelum mulai, ada baiknya untuk tahu fungsi dari masing-masing widget tambahan tsb :

1. Disqus. Buat comment box. Bisa auto-reply. Lebih professional looking dibandingkan comment box bawaan Blogger. Sebenernya ada banyak website lain yang provide app sejenis ini, misalnya IntenseDebate.

2. Author box. Letaknya ada di setiap ending postingan. Bisa naro biografi singkat kita disana. Benefitnya ya blognya jadi lebih asik aja gitu. Lebih keren. Cuma menurut gw, untuk author box sendiri lebih asoy digunakan kalo blog lo ada auto read more-nya.

ADDING DISQUS TO YOUR BLOGGER SITE

Nah sekarang kita mulai tutorialnya. Untuk screenshot-nya sendiri kalian bisa liat di ending postingan ini, ada comment box loading disana. Nah, tul. That's it.

1. Masuk ke homepage Disqus

2. Klik 'Add Disqus To Your Site'

3. Isi Site URL (link blog kita), Site Name, sama Site Short Name (yang bisa digunain buat log-in) jangan lupa isi username, password, dan e-mail. PENTING: Gunakan e-mail yang kalian pake untuk login di akun Blogger. Karena itu akan memudahkan kalian untuk proses verifikasi maupun pemilihan blogsite nantinya.

4. Setelahnya, kita akan disuruh pilih platform provider website.


Kalo pake blogspot, pilih blogger. Kalo WP, pilih wordpress, Tumblr ya Tumblr. Tapi kalo platform kita gak tertulis disana, pilih Universal Code. Jadi mau gak mau code nya harus kita masukin secara manual. That's what I did to my webs.com site. Tapi karena kita berfokus pada Blogger, jadi pilih Blogger.

5. Jadi setelah kita pencet, keluarnya ini :


Just simply follow the step. Pencet tombol 'Add ... to my Blogger site'. Nanti bakal keluar Add Page Element. 



Pilih blog yang bakal ditambahin fitur ini. Kemudian klik 'Add Widget'.

6. Selesai. Untuk meng-import komentar-komentar yang udah 'terlanjur' ada di blog sebelum pake Disqus, bisa langsung ke Tools - Import.

7. Untuk costumize tampilan Disqus di blog bisa ke page Admin - Settings. Udah. Sesederhana itu.
PENTING:
Kalo kalian mau meng-allow Guest untuk bisa ikut memberikan komentar, bisa ke Admin - Settings - General. Lalu tick di box 'Allow Guest To Comment'.
Sedangkan kalo mau comment box-nya menampilkan comment doang kayak punya gw, langsung ke tab Discovery dan pilih option Just Comments. (karena defaultnya di Disqus dipenuhi dengan discovery box yang isinya iklan gak jelas, gw pribadi gak suka).

AUTHOR BOX AT THE END OF THE POST

I found this Author Biography Boxes For Blogger tutorial in a site called Code It Pretty. I customized the code to adjust with my blog width and my taste and it works just fine. I really like it. It's a lot better than some other author boxes I found in the internet because it's neat, simple, and real pretty.

Jadi sebenarnya ini karya seorang web designer yang gw 'rombak' codenya karena faktor iseng dan pengen. Jangan pesimis dulu, ini gak bakal seribet yang dibayangin kok. Cukup mudah buat meng-costumize sebuah code, kuncinya rajin-rajin browsing.

Ini punya dia :

Ini hasil rombakan rounded-corner, font, dan border image gw :

Let's go to the tutorial!

Jadi perkenalan dulu, disini ada yang namanya HTML dan ada juga yang namanya CSS. Biar gampang jelasinnya, pikirkanlah HTML itu sebagai sebuah baju, sedangkan CSS itu adalah kain, jarum, mesin jahit, dan pretelan-pretelannya. Jadi bisa dibilang CSS itu adalah 'elemen' yang ada di HTML. Is it clear enough? I guess I'm a bad explainer, so langsung ke tutorialnya ajah ya.

HTML SECTION

1. Login ke blog. Go to Template - Edit HTML. Cari kode berikut. CTRL + F untuk memudahkan pencarian.

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url   "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

2. Kalo udah, copy paste kode HTML dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<div class='signature'>
       <p class='sig-content'>INSERT YOUR SHORT BIO HERE</p>
       </div>
      </b:if>

3. Letakkan dibawah kode </b:if> diatas sehingga struktur kodenya jadi seperti ini :


Bagian berwarna merah bisa diganti sesuai biografi tulisan masing-masing. Sekedar informasi, kalau mau menyisipkan paragraf bisa pake kode 'br' seperti gambar diatas. Dan kalo mau nambahin link sosmednya bisa pake a href juga. SELESAI DEH HTML-NYA. SO EASY RIGHT?

CSS SECTION

Ini adalah bagian dimana kalian bisa berkreasi sama author box-nya. Tapi kalo belom nempel-nempel banget sama yang namanya CSS, leave them be. Karena kalo salah satu, bisa merusak semuanya. Tapi berkreasi emang kayak gitu kok. Hancur dulu, keren belakangan. #prinsipgw

Ini code CSS dari situsnya:

.signature {

    background: #A2A2C0 url(http://s.cdpn.io/652/dorothy-gale.jpg) left no-repeat;

    width: 700px;

    height: 150px;

}

.sig-content {

    width: 475px;

    font-size: 1.2em;

    padding-left: 170px;

    padding-top: 1em;

    position: relative;

    color: white;

}

.sig-content a {

    color: white;

    text-decoration: underline;

}

Ini code CSS yang udah gw rombak (yang warna beda, ada border, rounded, dkk) :

.signature {

    background: #000000 url(MASUKIN LINK URL FOTO, RESOLUSI 150x150) left no-repeat;

    width: 600px;

    height: 150px;

-webkit-border-radius: 40px;

-moz-border-radius: 40px;

border-radius: 40px;

-webkit-box-shadow: #000 0 2px 10px;

-moz-box-shadow: #000 0 2px 10px;

box-shadow: #000 0 2px 10px;

}

.sig-content {

    width: 475px;

    font-size: 1.2em;

    padding-left: 170px;

    padding-top: 1em;

    position: relative;

    color: white;

}

.sig-content a {

    color: white;

    text-decoration: underline;

} 

Bedanya di besar kotak, warna, border radius, sama elemen-elemen sehabis height. Selebihnya sama. Jadi terserah mau copas yang mana.

Sebenarnya yang gw tau ada dua cara buat masukin kode CSS ini. Yang pertama simple banget. Yang kedua harus ngotak. Yang pertama adalah login di dasbor blog -> Template -> Costumize -> Advanced -> Add CSS. Copas code CSS diatas. Ganti-ganti aja kalo merasa butuh. 

Yang kedua, ini cara yang gw pake karena ternyata Add CSS tidak berfungsi di blog gw. Yaitu dengan menyisipkan tepat dibawah kode </script> Tapi untuk menyisipkan kode ini, kalian harus menambahkan elemen lain yaitu:

<style type='text/css'>-MASUKIN CODE CSS DIATAS-</style>

Lihat bagian yang di tandain di gambar bawah. There we go :





Udah sih gitu doang. Diutamakan banget pake cara simpel pertama. Kalo gagal baru alternatifnya yang kedua.

Have a nice day. Kalo ada yang ditanyakan monggo. Semoga bermanfaat :)