Cara Buat Sendiri 'Halaman Forum' di Platform Blogger - 2019

Apakah memang benar, kita dapat membuat Halaman Forum di Blog? Memang mustahil dengan fitur Blogger yang ada pada saat(postingan ini dibuat) ini.

TETAPI...

Menggunakan layanan dari pihak ke-3, kalian bisa membuatnya sendiri. Namun, sebelum membahas lebih lanjut mengenai cara pembuatan 'Halaman Forum' tersebut,

tahukah anda yang dimaksud Forum itu?

Jadi, Forum merupakan tempat/wadah berkomunikasi para anggotanya untuk membahas dan menyelesaikan berbagai masalah mengenai beberapa topik atau sub-sub kategori yang tersedia pada halaman forum tersebut.

Contohnya seperti website Kaskus, Winpoin, Detik dkk. Mereka memiliki halaman forum tersebut. Semakin banyak anggotanya yang aktif, semakin ramai pula pembahasan yang mereka diskusikan.

Nah, sudah mulai mengerti? Okelah, mari ikuti tutorial 2 Cara Membuat 'Halaman Forum' di Platform Blogger sebagai berikut ini.

BACA JUGA : Cara Download File MEGA di IDM, Gampang BANGET!

Cara Membuat Halaman Forum di Blogger

Ada 2 pilihan untuk membuat Halaman Forum di Blogger, yakni dengan layanan Google Groups atau Nabble. Kelemahan menggunakan Nabble, ialah tidak support pada https, jadi Forum yang dibuat menggunakan Nabble hanya bisa muncul pada http.

Contohnya, Klik Link Forum JuliKoding versi Nabble berikut. Jika kalian ubah menjadi https, otomatis tampilan tidak akan muncul.

Menurut saya pribadi, saya lebih merekomendasikan dari Google dong 😁 #IfYouKnowWhatIMean, dari segi tampilan pasti menang, apalagi dari Google(Terpercaya jelas) dan Halamannya pun Responsive.

Responsive? artinya tampilan dapat menyesuaikan perangkat yang kalian punya, misalkan Laptop, Smartphone dkk..

maka dari itu, pada tutorial ini saya hanya menjelaskan bagaimana membuat Forum di Blog menggunakan Google Groups. 

1. Pergi ke link Google Group dan klik tombol "Buat Grup".

2. Isikan semua kolom inputan dari Nama Forum, Alamat Email Forum, Deskripsi, Bahasa Utama Forum, dan Jenis Forum. Untuk jenis grup, silahkan pilih "Forum Web".

Setelah semua diisi dengan benar, klik tombol BUAT yang berwarna merah tuh, jelas banget :V

3. Maka akan tampil pemberitahuan bahwa Grup Forum berhasil dibuat. Lalu, bagaimana caranya memasang grup Forum tersebut di Blog kalian?

4. Gampang banget, klik tombol "Group Settings" maka pada bagian Embedding your Group, silahkan copy kodenya dan paste kan pada Halaman Statis Blog anda.

Untuk hasilnya, kalian bisa lihat di HALAMAN FORUM INI.

BACA JUGA : Cara Membuat dan Pasang Album/Galeri Foto di Blogger!

Selesai sudah, kalian bisa mengatur sendiri sesuka kalian mulai dari tampilan Forum, Topik yang dibahas dan bagaimana orang-orang dapat berinteraksi di forum tersebut.

Punya cara lain untuk membuat Halaman Forum di Blog? Diskusikan di Kolom komentar. Sampai jumpa di Tutorial berikutnya, 😋 GOMAWO..!

Membuat Galeri/Album Foto di Blog dengan Google Drive

Seperti yang kita ketahui bersama, di Platform Blogger ketika Upload Gambar maka posisi gambar otomatis berada ditengah, tidak berdampingan, tersusun ke bawah. 

Sehingga tidak menghemat ruang kosong yang ada, terlebih lagi apabila Gambar yang diupload banyak 😅 Repot deh harus scroll ke bawah...~ 

Menyusahkan visitor anda saja..

Oleh karena itu, kali ini kita akan Belajar Membuat Galeri/Album Foto di Blog tanpa Kode-kode rumit yakni menggunakan Fitur Embed dari Google Drive.

Penasaran ingin membuatnya? Simak dan ikuti tutorial berikut di bawah ini.

BACA JUGA : Buat Halaman About ala Chatting di Blog

Embed Folder Google Drive sebagai Galeri Foto di Blog

1. Klik kanan pada Folder - Get Shareable link untuk mendapatkan URL Publik. Contoh : https://drive.google.com/open?id=1i7Bm5IaC4-J3alkPPPyReSKSADDSk_n0.

Kita cukup mengambil bagian ID nya saja, yaitu 1i7Bm5IaC4-J3alkPPPyReSKSADDSk_n0

2. Silahkan Paste ID kalian ke kode di bawah ini.

• Tampilan Dasar/List

<iframe src="https://drive.google.com/embeddedfolderview?id=ID_Folder_Kalian" width="100%" height="500" frameborder="0"></iframe>

Maka, hasilnya seperti di bawah ini..

• Tampilan Grid

<iframe src="https://drive.google.com/embeddedfolderview?id=ID_Folder_Kalian#grid" width="100%" height="500" frameborder="0"></iframe>

Hasilnya

3. Terakhir, Copy Paste ke Postingan/Halaman Blog anda dan Publish. 😁 untuk Mendownload/unduh File tersebut pun sangat mudah, cukup klik salah satu Gambar dan klik icon Unduh.

Itulah cara mudah untuk Membuat Galeri Foto atau Album Foto dengan Google Drive. Kalian dapat gunakan cara diatas di semua Platform, tidak hanya Blogger.

Sampai jumpa di #Tutorial Berikutnya..~ Gomawo

Cara Buat/Pasang Tombol Reaksi Emoticon di Postingan Blog

Selain menggunakan Vote atau kolom Komentar, pengunjung dapat menilai baik/buruk suatu Konten website melalui Tombol Reaksi berwajah Emoticon lucu.

Tombol Reaksi 😙 biasanya diletakkan dibagian akhir di setiap Artikel/Postingan blog. Jadi, dengan adanya tombol reaksi ini di Blog kalian diharapkan,

• Menambah Interaksi dari pengunjung(tak sekedar membaca saja, namun ada gerakan yang dilakukan pembaca) sehingga dapat,
• Mengurangi angka Bounce Rate(persentase pengunjung yang meninggalkan web/blog anda setelah HANYA membuka satu halaman saja. Misal, pengunjung tersebut membuka halaman utama web/blog atau halaman tertentu web anda, namun tidak membuka halaman lainnya. Sumber : JokoSusilo).
• Pembaca/pengunjung semakin yakin/percaya akan isi dari Artikel.

BACA JUGA : Cara Pasang/Letakkan Slide Presentasi di Postingan Blog

Intinya sangat bermanfaat deh, apabila kalian Pasang tombol Reaksi ini di Postingan Blog, bagi anda yang ingin memasangnya ikuti Tutorial berikut!

Tutorial Pasang Tombol Reaksi Emoticon di Postingan Blog

Ingat, ini bukan Cara membuat Tombol Reaksi tetapi sekedar Memasangnya 😅 jadi, kita perlu layanan dari ShareThis untuk mendapatkannya.

1. Buka situs ShareThis, dan buatlah akun baru dengan mengisi alamat domain website/blog kalian tanpa http:// misalnya namaweb.blogspot.com

2. Klik "Get The Code" dan Copy kode tersebut dan Paste kan ke bagian Template blog kalian.

Letakkan kode setelah tag <head> atau sebelum tag </head> dan Simpan. Maka, blog anda akan terverifikasi oleh ShareThis.

Bila mengalami error saat pemasangan kode, coba tambahkan amp; setelah kode &. Contohnya :

<script async='async' src='//platform-api.sharethis.com/js/sharethis.js#property=5b57a5884970c900111bb7b9&amp;product=social-analytics' type='text/javascript'/>

3. Nyalakan layanan "Inline Reaction Buttons" dan klik tombol Copy untuk menyalin kode tersebut.

4. Pergi ke Edit HTML - CTRL + F(Untuk mencari kode <data:post.body/>) - Paste Kode yang kalian salin sebelumnya disamping/dibawah kode <data:post.body/>

INFO : biasanya kode <data:post.body/> pada suatu template ada lebih dari 1. Jadi, 

• Kalian bisa Paste Kode di semua <data:post.body/> atau,
• Bila ingin menghemat baris kode, Paste Kode di salah satu <data:post.body/> dan cek satu-persatu.

5. Terakhir, beralih ke ShareThis. Klik tombol Update dan tunggu sekitar 5 menit/lebih untuk melihat hasilnya.

BACA JUGA : Cara Membuat Kode berwarna-warni di Postingan Blog

Bagaimana, mudah bukan? 😂👍 kalian tak perlu khawatir mengenai Pagespeed menurun, yang penting kegunaanya bagi pengunjung.

Kalian juga bisa tambahkan kata-kata Ajakan kepada pengunjung agar meng-klik Tombol Reaksi tersebut di bagian EDIT HTML.

Itulah Tutorial Lengkap untuk Memasang Tombol Reaksi Emoticon di Postingan Blog, maju terus #bloggerindonesia 😁#ayeaye

2 Cara Membuat Kode Warna-warni di Blog dengan Syntax Highlighter

Pernahkah kamu melihat postingan Blog/Website yang menyertakan kode-kode dalam warna yang berbeda-beda..?

Yaps,..! Biasanya dapat anda temukan pada situs yang membahas Tutorial Coding/Programming.

Terlihat lebih Elegan dan Menarik, itulah yang terlintas dipikiran saya. Ingin rasanya, membuat seperti kode-kode 😋 yang bewarna seperti itu.

Nah, Bila kamu ber-kecimpung dalam Dunia Programmer, pasti tak asing lagi dengan Syntax Highlighter.

#APA itu Syntax Highlighter ??

Syntax Highlighter adalah fitur dari Teks Editor yang digunakan untuk bahasa Pemograman, Script, atau Markup seperti HTML.

Fitur ini menampilkan teks, terutama Source Code dalam berbagai warna dan font sesuai dengan kategori sehingga memudahkan penulisan dalam bahasa terstruktur seperti Bahasa Pemograman.

Jadi, kegunaannya kurang lebih seperti Pulpen Stabilo ✏ untuk memberikan tanda di sebuah tulisan tertentu dengan warna.

BACA JUGA : Gokil! Buat Halaman ABOUT ala Chatting di Blog

Cara Membuat Kode Berwarna dengan Syntax Highlighter

Untuk membuat kode bewarna tersebut, ada 2 cara yaitu Membuat sendiri dengan CSS atau Memasang script pada template Blog/Website kalian.

NAMUN, Tutorial kali ini saya hanya akan membahas bagaimana Cara Memasang Syntax Highlighter di Blog menggunakan Highlight.js. Berikut langkah-langkahnya : 

1. Copy kode di bawah ini, dan Paste ke Template Blog kalian. Disarankan untuk meletakkan tepat diatas tag </body>.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

INFO : Versi terbaru saat ini dari highlightjs ialah 9.12.0.

2. Selesai deh 😄 sekarang tinggal uji coba. Buat Postingan baru di Blog kalian dan Copy Paste kode yang ingin diberi warna dalam Mode Compose.

3. Lalu ubah Mode ke HTML. Kemudian apit kode tersebut dengan tag <pre><code> .....kodenya....</pre></code>

INFO : Tag <pre> dan <code> wajib digunakan, karena fungsi <pre> untuk Menampilkan sesuai dengan yang kita ketik. Sedangkan <code> untuk Menampilkan kode Pemograman.

4. Sekarang coba Publikasikan/Pratinjau postingan kalian dan lihat hasilnya.

5. Bila ingin mengganti/mengubah warna kode, kalian bisa coba demonya DISINI. Sedangkan untuk mengubahnya, cukup ganti nama Style CSS dari Script CSS yang tadi.

Contoh pake Style CSS default :

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/>

Contoh pake Style CSS yang lain :

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css"/>

Itulah Tutorial bagaimana membuat kode berwarna di Blog dengan Highlight.js. Sampai jumpa di Tutorial berikutnya 😙