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 😙 

Anti Jones! Cara Membuat Halaman About/Tentang ala Chatting di Blog

Setelah sekian lama Blogwalkling halaman about/tentang di beberapa Blog atau Website.

Hampir 90% isi didalam halaman tersebut hampir sama dan sangat membosankan untuk dibaca.

Tidak ada sesuatu yang Special atau UNIK sehingga halaman tersebut tidak memiliki daya tarik untuk dibaca pengunjung.

Hal inilah yang mendorong saya untuk membuat Halaman About/Tentang yang Berbeda dari yang lain. 😊

Setelah saya pikir-pikir, mungkin Halaman About ala Chatting merupakan solusi yang tepat, penasaran bagaimana rupanya?

Silahkan buka Halaman About JuliKoding yang dulu(jaman old) :v berikut.

Sumber Photo : Jeremy Wong

1#Tutorial Membuat Halaman Tentang/About ala Chatting

Halaman About/Tentang ala Chat ini memiliki fitur yang hampir sama dengan Aplikasi Chat lainnya.

Yaitu, tombol REPLY dimana ketika di click, maka akan muncul Balasan dari Admin Situs tersebut.

Inspirasi Muncul ketika saya galau karena Akun Line Terhapus 😂 dan Halaman About belum selesai dibuat

1. Copy Semua Kode di bawah ini..

<style>
.post-body{margin:0 auto; display: table;}
 #kotak1 img,#kotak2 img{border-radius: 100%; width: 150px; height: auto; float: left; margin: 10px;}
.kotaknya1, .kotaknya2{background-color: #dedee3; width: 350px; height: auto; float: left; margin-top: 15px; border-radius: 15px; max-height: 500px;}
.kotaknya2{margin-left: 138px;background-color: #879fe3; color: white;}
#nama-orangnya{margin-left: 10px; margin-top: 5px; font-weight: bold;}
#isinya{margin-left: 10px;}
#tombolnya1, #tombolnya2{float: right; margin-right: 10px; padding: 5px; background-color: #879fe3; border-radius: 10%; margin-bottom: 10px;}
#tombolnya2{background-color: #4d4848; float: left; margin-left: 10px;}
#kotak1,#kotak2{clear: both; position: relative; top: 10px; left: 0px;}
#kotak2{display: none; left: 10px;}
@media (min-width:320px) and (max-width: 643px){
  #kotak1 img, #kotak2 img{width: 20%;}
  .kotaknya1, .kotaknya2{width: 70%; float: left;}
 .kotaknya2{margin-left: 0px;}
 }
</style>
<!-- Kotak Chat ala JuliKoding-->
<div style="max-width:700px; margin:0 auto;">
<div id="kotak1">
  <img src="Link-Gambar.png">
  <div class="kotaknya1">
   <p id="nama-orangnya">Siti Rahmah</p>
   <p id="isinya">Mau nanya nih, Admin dari Blog JuliKoding ini siapa ya?</p>
   <div id="tombolnya1" onclick="document.getElementById('kotak2').style.display = 'block'">REPLY</div>
  </div>
 </div>

 <div id="kotak2">
  <div class="kotaknya2">
   <p id="nama-orangnya">Ahmad Jazuli - Admin JuliKoding</p>
   <p id="isinya">Hallo sis, perkenalkan nama Saya Ahmad Jazuli.</p>
   <p id="isinya">Saya bertugas sebagai Admin dan Penulis dari Blog JuliKoding</p>
   <div id="tombolnya2">REPLY</div>
  </div>
  <img src="Link-Gambar.png">
 </div><!-- Tambahkan kode dibawah tag ini -->
</div>

2. Kemudian, paste kan kode tersebut pada Laman Baru - Mode HTML, kemudian publikasikan..

3. Jika ingin Membuat kotak CHAT selanjutnya, ikuti tutorial berikut ini..

2#Tutorial Menambahkan Kotak Chat di Halaman About

1.1 Pada bagian tag <style> hingga tag penutupnya </style>. Cari id kotak1 (gunakan CTRL + F untuk memudahkan pencarian)

1.2. Jika id kotak1 ditemukan dengan jumlah 3. silahkan tambahkan id kotak3 pada posisi yang sama dipisahkan dengan tanda koma ( , )..

1.3. Lalu cari id kotak2, dan jika ditemukan dengan jumlah 4. silahkan tambahkan id kotak4 pada posisi yang sama dipisahkan dengan tanda koma ( , )

2.1. Pada bagian HTML, copy kode berikut ini..

<div id="kotak1">
  <img src="Link-Gambar.png">
  <div class="kotaknya1">
   <p id="nama-orangnya">Siti Rahmah</p>
   <p id="isinya">Mau nanya nih, Admin dari Blog JuliKoding ini siapa ya?</p>
   <div id="tombolnya1" onclick="document.getElementById('kotak2').style.display = 'block'">REPLY</div>
  </div>
 </div>

 <div id="kotak2">
  <div class="kotaknya2">
   <p id="nama-orangnya">Ahmad Jazuli - Admin JuliKoding</p>
   <p id="isinya">Hallo sis, perkenalkan nama Saya Ahmad Jazuli.</p>
   <p id="isinya">Saya bertugas sebagai Admin dan Penulis dari Blog JuliKoding</p>
   <div id="tombolnya2">REPLY</div>
  </div>
  <img src="Link-Gambar.png">
 </div>
</div>

2.2 Lalu Paste kan tepat dibawah kode yang keterangannya "Tambahkan kode di bawah tag ini".

2.3 Dan jangan lupa untuk mengubah properti berikut ini..

• kotak1 menjadi kotak3,
• dan kotak2 menjadi kotak4

2.4 Maka kodenya kurang lebih seperti ini..

<style>
.post-body{margin:0 auto; display: table;}
 #kotak1 img,#kotak2 img, #kotak3 img,#kotak4 img{border-radius: 100%; width: 150px; height: auto; float: left; margin: 10px;}
.kotaknya1, .kotaknya2{background-color: #dedee3; width: 350px; height: auto; float: left; margin-top: 15px; border-radius: 15px; max-height: 500px;}
.kotaknya2{margin-left: 138px;background-color: #879fe3; color: white;}
#nama-orangnya{margin-left: 10px; margin-top: 5px; font-weight: bold;}
#isinya{margin-left: 10px;}
#tombolnya1, #tombolnya2{float: right; margin-right: 10px; padding: 5px; background-color: #879fe3; border-radius: 10%; margin-bottom: 10px;}
#tombolnya2{background-color: #4d4848; float: left; margin-left: 10px;}
#kotak1,#kotak2, #kotak3, #kotak4{clear: both; position: relative; top: 10px; left: 0px;}
#kotak2,#kotak4{display: none; left: 10px;}
@media (min-width:320px) and (max-width: 643px){
  #kotak1 img, #kotak2 img, #kotak3 img, #kotak4 img{width: 20%;}
  .kotaknya1, .kotaknya2{width: 70%; float: left;}
 .kotaknya2{margin-left: 0px;}
 }
</style>
<!-- Kotak Chat ala JuliKoding-->
<div style="max-width:700px; margin:0 auto;">
<div id="kotak1">
  <img src="Link-Gambar.png">
  <div class="kotaknya1">
   <p id="nama-orangnya">Siti Rahmah</p>
   <p id="isinya">Mau nanya nih, Admin dari Blog JuliKoding ini siapa ya?</p>
   <div id="tombolnya1" onclick="document.getElementById('kotak2').style.display = 'block'">REPLY</div>
  </div>
 </div>

 <div id="kotak2">
  <div class="kotaknya2">
   <p id="nama-orangnya">Ahmad Jazuli - Admin JuliKoding</p>
   <p id="isinya">Hallo sis, perkenalkan nama Saya Ahmad Jazuli.</p>
   <p id="isinya">Saya bertugas sebagai Admin dan Penulis dari Blog JuliKoding</p>
   <div id="tombolnya2">REPLY</div>
  </div>
  <img src="Link-Gambar.png">
 </div><!-- Tambahkan kode dibawah tag ini -->
<div id="kotak3">
  <img src="Link-Gambar.png">
  <div class="kotaknya1">
   <p id="nama-orangnya">Siti Rahmah</p>
   <p id="isinya">Mau nanya nih, Admin dari Blog JuliKoding ini siapa ya?</p>
   <div id="tombolnya1" onclick="document.getElementById('kotak4').style.display = 'block'">REPLY</div>
  </div>
 </div>

 <div id="kotak4">
  <div class="kotaknya2">
   <p id="nama-orangnya">Ahmad Jazuli - Admin JuliKoding</p>
   <p id="isinya">Hallo sis, perkenalkan nama Saya Ahmad Jazuli.</p>
   <p id="isinya">Saya bertugas sebagai Admin dan Penulis dari Blog JuliKoding</p>
   <div id="tombolnya2">REPLY</div>
  </div>
  <img src="Link-Gambar.png">
 </div>
</div>
</div>

2.5 Simpan dan Publikasikan.. 😀sekarang halaman About ala Chat berhasil dibuat.

BACA JUGA : Cara Membuat Halaman Partner Link Terbaru & Responsive di Blog

Mudah, bukan ?? Dijamin anda tidak akan Kesepian/Jones 👫 

Dan yang pasti, halaman ini Responsive dan wajib anda buat, khususnya yang ingin Memasang Iklan dari Google Adsense dll.

Sekian Tutorial Mudah Membuat Halaman About/Tentang ala Chatting yang Responsive di Blog. Ditunggu komentar kece kalian 👻💬

Butuh Backlink? Ayo Buat Halaman Partner Link Responsive & Ringan di Blog

Hai teman-teman Blogger Indonesia,

Sedang pilu atau galau akan Jumlah Pengunjung Situs yang tidak ada peningkatan 🙇??

Sama dong's 😅 hehehe.. Tapi jangan Give Up, mungkin usaha kamu belum MAKSIMUM..

Tidak ada Kesuksesan Seseorang TANPA Pengorbanan.. Betul?

Untuk menjawab pertanyaan tersebut, kita butuh yang namanya Backlink dalam meningkatkan Kedudukan Situs kamu,..

Banyak sekali Para Blogger yang menuliskan artikel/konten tentang Manfaat, Kehebatan,

sesosok Backlink ini, bahkan hingga Mistake/Kesalahan yang sering dialami para Blogger ketika melakukan Partner Link,.. 😂

1#APA itu Backlink...?? 🔗

Backlink adalah Link yang ditanamkan/diletakkan/dipasang di Situs(Web/Blog) orang lain..

Hal ini dilakukan agar Situs mereka lebih dikenal oleh Mesin Pencari (Google,Yahoo,dll)..

Selain itu, situs yang memiliki Backlink yang Berkualitas,

akan sangat menguntungkan, dalam hal SEO(Search Engine Organic) agar konten cepat PageOne, Rank Situs Meningkat 💹 dan jumlah Pengunjung pun ikut Meningkat..

2# Cara agar Dapat Backlink, gimana 🙋?? 

BANYAK banget, diantaranya dengan melakukan kegiatan seperti.,

• Comment Blog/Web : Menyisipkan Link dalam sebuah Komentar [Not Recommend] sering dianggap SPAM, alhasil Situs kamu akan terkena Penalti Google atau hal lainnya..
• Signature Forum : Ada beberapa Forum yang menyediakan Signature Forum seperti Forum Winpoin, Kompasiana, Bersosial, dan lainnya.. Kalian bisa Join dan berdiskusi di Forum sesuai Topik yang kalian suka 😄

Signature Forum ini akan selalu muncul ketika kamu Berkomentar atau Membuat Thread Post yang kalian suka..

SARAN : Bergabung di 1 atau 2 Forum tapi Selalu Aktif, Lebih Direkomendasikan 😊 dibandingkan join dibanyak Forum tapi tidak melakukan apapun 😔

• Partner Link : Jalinan Kerja Sama antara dua orang yang saling bertukar Link dengan kesepakatan bersama. Menaruh Link pun dapat disisipkan pada Widget atau Halaman Partner Link yang akan KITA Buat hari ini 👍 .. 

• Masih Banyak lagi, agar lebih men-detail, saya akan menjelaskan di Postingan secara Terpisah.. 😁 hehe, penasaran ?? Relax,..

BACA JUGA : Komplit! Buat Halaman Sitemap, Privacy, Contact, Disclaimer, Terms of Service di Blog

3# Tutorial Membuat Halaman Partner Link Responsive & Ringan

Setelah anda Mengetahui manfaat dari Backlink, Aktivitas bertukar Link, kali ini kita akan Membuat Halaman Partner Link yang Responsive dan Ringan.

MENGAPA Halaman Partner Link ini Ringan ? karena icon Social Media menggunakan Icon SVG sehingga lebih Fast Loading dibandingkan Font Awesome,..

Selain itu, Halaman ini juga disertai tombol Following 💌 pasti beda dong, dengan Halaman lainnya.

Jauh lebih kece 😘 hehehe..

Halaman ini bisa anda buat di Platform Blog atau Platform lainnya, seperti Wordpress 😁 caranya..

1. Copy Semua Kode CSS dan HTML di Bawah ini..

<style>
.partner_box{background-color: #d3d7ea; width: auto; max-width: 930px; max-height: 1000px; height: 264px; box-shadow: 2px 2px 2px 2px grey;}
.partner_gambar{float:left; margin-right: 20px; background-color: #bdc1d1; padding: 10px;border:2px solid black; box-sizing: inherit;}
.partner_gambar #tes {clear: both; text-align: center;}
.partner_gambar #tes img{width: 150px; height: auto;border:2px solid black;}
.partner_gambar p{text-align: center; line-height: 7px; font-weight: bold;}
.partner_teks h4{font-family:sans-serif; font-size:22px;display:block;margin:0;margin-bottom:2px; display:inline;}
.partner_teks h4 a{color:#fff; text-decoration: none; text-shadow: 3px 3px 5px black;}
.partner_teks h4 a:hover{color:#404040}
#sosmed{margin:auto; position: relative; top: 5px;}
.partner_teks p{margin:10px;font-size:80%; font-weight:bold; font-family: verdana; margin-bottom:8px; color: #d2d1dc; text-shadow: 2px 2px 4px #000000; line-height: 18px;}
 @media (min-width:320px) and (max-width: 450px){
  .partner_box{height: auto;}
  .partner_gambar{float: none;width:100%;}
  .partner_teks h4{font-size:20px; margin-top: 10px;}
  .partner_gambar img{position: center;}
}
@media (min-width:450px) and (max-width: 768px){
  .partner_box{height: auto;}
}
</style>
<div class="partner_box">
<div class="partner_gambar">
<div id="tes">
<img id="bayangan" src="Link-Logo-Blog-Kamu.jpg" /></a>
   </div>
<p style="font-size: 18px;">Ahmad Jazuli</p>
<p>Blogger Banua</p>
</div>
<div class="partner_teks">
<!-- Box Teks --><br />
<h4>
<a href="http://julikoding.blogspot.co.id/">JULIKODING</a></h4>
<a href="https://www.facebook.com/julikoding"><svg id="sosmed" style="width:24px;height:24px;margin-left:5px;" viewBox="0 0 24 24">
    <path fill="#2d397f" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" />
</svg></a>
<a href="https://twitter.com/julikoding/"><svg id="sosmed" style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#2196f3" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z" />
</svg></a>
<a href="https://plus.google.com/u/0/+AhmadJazuliBeON"><svg id="sosmed" style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#f83232" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M19.5,12H18V10.5H17V12H15.5V13H17V14.5H18V13H19.5V12M9.65,11.36V12.9H12.22C12.09,13.54 11.45,14.83 9.65,14.83C8.11,14.83 6.89,13.54 6.89,12C6.89,10.46 8.11,9.17 9.65,9.17C10.55,9.17 11.13,9.56 11.45,9.88L12.67,8.72C11.9,7.95 10.87,7.5 9.65,7.5C7.14,7.5 5.15,9.5 5.15,12C5.15,14.5 7.14,16.5 9.65,16.5C12.22,16.5 13.96,14.7 13.96,12.13C13.96,11.81 13.96,11.61 13.89,11.36H9.65Z" />
</svg></a>
<a href="https://www.instagram.com/ahmdjazuli/"><svg id="sosmed" style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#c93750" d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
</svg></a>
<a href="https://www.blogger.com/follow-blog.g?blogID=7650287574293818356">
<span onclick="this.innerHTML='FOLLOWING'" style="background-color: #8a95cf; padding: 7px; border-radius: 7px; color: white;margin-right:10px; float: right;">FOLLOW<svg id="sosmed" style="width:24px;height:24px;position:relative;top:5px;margin-left:5px;" viewBox="0 0 24 24">
    <path fill="#000000" d="M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z" />
</svg></span>
</a>
<br />
DESKRIPSI PENDEK tentang Blog Kamu DISINI :3</div>
</div>

2. Kemudian, Buka Dashboard Blog Kamu, pergi ke Laman - Buat Laman Baru - Aktifkan Mode HTML dan Paste kode tersebut..

3. Setelah itu, Ubah data(Gunakan CTRL + F agar mempermudah pencarian) sebagai berikut :

• Ubah kode src="Link-Logo-Blog-Kamu.jpg" /> dengan Link Logo Partner Kamu, 
• Ubah nama Profil Ahmad Jazuli dan Blogger Banua sesuai Profil Partner Mu😀
• Ubah juga Link Blog JuliKoding dengan Link Partner kalian
• Ubah Link Soscial Media seperti facebook, instagram dan lainnya ..
• Terakhir, ubah ID Blog Partner Kalian pada kode di bawah ini..

<a href="https://www.blogger.com/follow-blog.g?blogID=7650287574293818356">

Blog ID ? Dimana saya bisa Menemukannya 😵 ?? 

Biasanya, ketika anda Membuka Halaman Dashboard Blog, kalian dapat menemukan Blog ID kalian pada bagian LINK..

3. Setelah semua data diubah, silahkan Publikasikan.. Kalian juga bisa Lihat Hasilnya Di Halaman Partner JuliKoding 

4# Cara Menambahkan Kolom Partner Link

Untuk menambahkan kolom Partner Link tersebut, kalian tidak perlu Copy Paste kode keseluruhan. Cukup Copy HTML nya saja..

<div class="partner_box">
<div class="partner_gambar">
<div id="tes">
<img id="bayangan" src="Link-Logo-Blog-Kamu.jpg" /></a>
   </div>
<p style="font-size: 18px;">Ahmad Jazuli</p>
<p>Blogger Banua</p>
</div>
<div class="partner_teks">
<!-- Box Teks --><br />
<h4>
<a href="http://julikoding.blogspot.co.id/">JULIKODING</a></h4>
<a href="https://www.facebook.com/julikoding"><svg id="sosmed" style="width:24px;height:24px;margin-left:5px;" viewBox="0 0 24 24">
    <path fill="#2d397f" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" />
</svg></a>
<a href="https://twitter.com/julikoding/"><svg id="sosmed" style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#2196f3" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z" />
</svg></a>
<a href="https://plus.google.com/u/0/+AhmadJazuliBeON"><svg id="sosmed" style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#f83232" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M19.5,12H18V10.5H17V12H15.5V13H17V14.5H18V13H19.5V12M9.65,11.36V12.9H12.22C12.09,13.54 11.45,14.83 9.65,14.83C8.11,14.83 6.89,13.54 6.89,12C6.89,10.46 8.11,9.17 9.65,9.17C10.55,9.17 11.13,9.56 11.45,9.88L12.67,8.72C11.9,7.95 10.87,7.5 9.65,7.5C7.14,7.5 5.15,9.5 5.15,12C5.15,14.5 7.14,16.5 9.65,16.5C12.22,16.5 13.96,14.7 13.96,12.13C13.96,11.81 13.96,11.61 13.89,11.36H9.65Z" />
</svg></a>
<a href="https://www.instagram.com/ahmdjazuli/"><svg id="sosmed" style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#c93750" d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
</svg></a>
<a href="https://www.blogger.com/follow-blog.g?blogID=7650287574293818356">
<span onclick="this.innerHTML='FOLLOWING'" style="background-color: #8a95cf; padding: 7px; border-radius: 7px; color: white;margin-right:10px; float: right;">FOLLOW<svg id="sosmed" style="width:24px;height:24px;position:relative;top:5px;margin-left:5px;" viewBox="0 0 24 24">
    <path fill="#000000" d="M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z" />
</svg></span>
</a>
<br />
DESKRIPSI PENDEK tentang Blog Kamu DISINI :3</div>
</div>

#NOTE : Kodingan dari Halaman Partner Link ini saya buat sendiri dengan ide sendiri juga 😄 Jadi, bagi teman-teman yang ingin CopyPaste, jangan lupa kasih Sumbernya yo..  

Hargailah orang lain, maka Harga Diri Anda akan semakin Mahal dan Mempesona,.

Itulah Tutorial Singkat, bagaimana Cara Membuat Halaman Partner Link yang Responsive dan Fast Loading, jangan lupa Follow & Subscribe JuliKoding 💖

Komentar lah dikit-dikit biar ada fungsinya juga Kolom Komentar di Bawah 😉💬

Cara Membuat Halaman About, Contact, Privacy , Disclaimer, TOS dan Sitemap

Salah satu syarat utama agar Blog Anda disetujui oleh Google Adsense untuk penayangan Iklan adalah dengan menampilkan halaman About, Kontak, Disclaimer, Privacy, TOS (Terms of Service) dan Sitemap.
Oleh karena itu, pada tips blog #2 ini kita akan belajar Cara Membuat Halaman-halaman tersebut di Blog sebagai berikut ini.

1. Cara Membuat Halaman About (Tentang) di Blog

Seperti yang anda lihat pada halaman About Blog JuliKoding, halaman about berisi perkenalan diri dan tujuan yang ingin dicapai, serta konten-konten apa saja yang akan dibahas oleh Blogger tersebut. Kalian dapat memberikan informasi singkat tentang Blog Anda.

2. Cara Membuat Halaman Contact (Kontak) Blog

Selain kolom Komentar, ada cara lain untuk pengunjung dapat berkomunikasi ke admin Blog yaitu Halaman Kontak. Halaman Kontak ini sangat penting dan bermanfaat bagi Admin Blog ataupun Pengunjung Blog tersebut. Karena segala kritik dan saran dapat anda curahkan melalui halaman ini.

Untuk Membuat Halaman Kontak yaitu Buka Dashboard Blog - Laman - Laman Baru - Pada Mode HTML, copy dan pastekan kode di bawah ini...

<p>Silahkan isi form di bawah ini untuk menghubungi admin Juli Koding. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan. </p>
<style scoped="scoped">
.post-outer {background: #fff}
.post-footer {display: none}
#contactForm .floating-label-form-group {
  font-size: 14px;
  position: relative;
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus {position: relative;}
#contactForm .floating-label-form-group:before {
  display: block;
  position: absolute;
  right: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  background-color: #0400bf;
  content: "";
  transition: width 0.4s ease-in-out;
}
#contactForm .floating-label-form-group:after {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  background-color: #0400bf;
  content: "";
  transition: width 0.4s ease-in-out;
}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before,
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after {
  width: 50%;
}
#contactForm .floating-label-form-group input,
#contactForm .floating-label-form-group textarea {
  z-index: 1;
  position: relative;
  padding-right: 0;
  padding-left: 0;
  border: none;
  border-radius: 0;
  font-size: 18px;
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: lighter;
  background: none;
  box-shadow: none !important;
  resize: none;
}
#contactForm .floating-label-form-group label {
  display: block;
  z-index: 0;
  position: relative;
  top: 2em;
  margin: 0;
  font-size: 12px;
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: lighter;
  line-height: 1.764705882em;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
  -webkit-transition: top 0.3s ease, opacity 0.3s ease;
  -moz-transition: top 0.3s ease, opacity 0.3s ease;
  -ms-transition: top 0.3s ease, opacity 0.3s ease;
  transition: top 0.3s ease, opacity 0.3s ease;
}
#contactForm .floating-label-form-group::not(:first-child) {
  padding-left: 14px;
  border-left: 1px solid #eeeeee;
}
#contactForm .floating-label-form-group-with-value label {
  top: 0;
  opacity: 1;
}
#contactForm .floating-label-form-group-with-focus label {
  color: #0400bf;
}
#contactForm {
  border-top: 1px solid #ddd;
}
#contactForm textarea.form-control {
  height: auto;
}
#contactForm .form-control {
  display: block;
  width: 100%;
  color: #555;
}
#contactForm input:focus,
#contactForm input:active,
#contactForm textarea:focus,
#contactForm textarea:active {
  outline: none;
}
#contactForm .btn,
#contactForm .contact-form-button-submit {
  font-family: "Helvetica", "Arial", sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 0;
  padding: 0 25px;
  height: 51px;
  line-height: 51px;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  margin: 20px 0 0;
  background-image: none;
}
#contactForm .contact-form-button {
  height: 51px;
  line-height: 51px;
}
#contactForm .btn-default:hover,
#contactForm .btn-default:focus,
#contactForm .contact-form-button-submit:hover,
#contactForm .contact-form-button-submit:focus {
  background-color: #0400bf;
  border: 1px solid #0400bf;
  color: white;
}
.contact-form-error-message-with-border,
.contact-form-success-message-with-border {
  background: #fff;
  border: 1px solid #ddd;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  color: #666;
  font-size: 16px;
  font-weight: normal;
  line-height: 30px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
  margin: 20px 0 0;
}
.contact-form-cross {
  height: 11px;
  margin: 0 5px;
  vertical-align: 0!important;
  width: 11px;
  -moz-box-shadow: none!important;
  -webkit-box-shadow: none!important;
  -goog-ms-box-shadow: none!important;
  box-shadow: none!important;
}
</style>
<br />
<form id="contactForm" name="contact-form">
<div class="floating-label-form-group">
<label>Name</label>
    <input class="form-control" id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" />
  </div>
<div class="floating-label-form-group">
<label>Email Address</label>
    <input class="form-control" id="ContactForm1_contact-form-email" name="email" placeholder="Email" type="text" value="" />
  </div>
<div class="floating-label-form-group">
<label>Message</label>
    <textarea class="form-control" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
  </div>

<input class="btn btn-default" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
  <br />
<div class="clear">
</div>
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<script>
$(function() {
  $("body").on("input propertychange", ".floating-label-form-group", function(e) {
    $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
  }).on("focus", ".floating-label-form-group", function() {
    $(this).addClass("floating-label-form-group-with-focus");
  }).on("blur", ".floating-label-form-group", function() {
    $(this).removeClass("floating-label-form-group-with-focus");
  });
});
</script>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7650287574293818356';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x7650287574293818356','//julikoding.blogspot.co.id/','7650287574293818356');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '3040763926886085284', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Catatan : Ubah julikoding.blogspot.co.id menjadi alamat Blog anda. Simpan dan Publikasikan. Selamat, Sekarang anda telah membuat halaman Kontak. Sumber kode : KompiAjaib.com

3. Cara Membuat Halaman Privacy Police

Kali ini, kita akan belajar untuk membuat halaman Disclaimer, Privacy dan Terms Of Service (TOS) dengan cara otomatis/instan. Maksudnya ? Kita hanya perlu mengisi beberapa informasi singkat di Web Online yaitu Privacy Police Online. 

a. Pertama, pergi ke situs Privacy Police Online 
b. Kemudian isi Judul Web/Blog, Alamat Web/Blog, Link halaman Kontak pada Web/Blog dan Email anda.

c. Jika anda memiliki iklan, silahkan conteng atau abaikan.
d. Klik Generate Policy untuk melihat tampilan/preview halaman Privacy yang anda buat.
e. Setelah selesai, klik Generate HTML dan Copy Semua Kode HTML tersebut.
f. Buka Buka Dashboard Blog - Laman - Laman Baru - Mode HTML - Pastekan Semua Kode HTML tersebut, Simpan dan Publikasikan. Sekarang Anda telah berhasil membuat Halaman Privacy Police.

4. Cara Membuat Halaman Terms Of Service (TOS)

Sama seperti sebelumnya, untuk membuat halaman Terms Of Service atau disingkat dengan TOS, kita hanya perlu pergi ke situs Privacy Police Online. Pada bagian atas, akan ada teks Terms Of Service Generator. 

- Pada halaman tersebut, isilah informasi pada bagian pertama_Your Site Information & Contact. Untuk bagian kedua dan ketiga, kalian bisa abaikan jika tidak penting. 

- Klik Generate Document untuk melihat hasil sementara dan Generate HTML untuk kalian copy paste kan kode HTMLnya ke Laman Blog Anda. Untuk cara pemasangannya sama seperti tutorial sebelumnya. 

5. Cara Membuat Halaman Disclaimer

Apakah membuat halaman Disclaimer seperti cara sebelumnya ? 😄 Betul sekali, silahkan pergi ke Disclaimer Generator. Selanjutnya, isilah informasi atau data seperti tutorial membuat halaman Privacy dan Terms Of Service. 

- Klik Generate Disclaimer dan copy paste kan kode HTMLnya ke Laman Blog Anda. Mudah bukan ? sekarang anda telah membuat halaman Disclaimer. 

- Seperti yang kalian ketahui, halaman Disclaimer Julikoding menggunakan bahasa Indonesia. Untuk mengubah bahasa tersebut, kalian dapat gunakan tool milik Google yang sering dikenal dengan Google Translate.

6. Membuat Halaman Sitemap/Peta Situs Blog

Halaman Sitemap atau biasa disebut Peta situs berguna untuk memudahkan Pengunjung menjelajahi seluruh isi artikel dari suatu Web/Blog. Jika di dunia Bajak Laut namanya Peta Harta karun, Dunia Blog itu namanya Peta Situs, hehe 😋 just kidding . 

Banyak sekali artikel dari beberapa Web/Blog yang memamerkan kode buatannya untuk membuat halaman Sitemap/Peta Situs di Blog anda lebih Keren dan Dinamis. Dan kode dibawah ini merupakan salah satunya. Kalian bisa copy dan Paste kode di bawah ini, pergi ke Laman Blog - Publikasikan. 

<style scoped="scoped" type="text/css">
#table-outer{padding:7px 10px;margin:0 auto}
#table-outer table{width:auto;margin:0 auto}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:none;margin:0;padding:5px;font-size:86%;text-transform:uppercase;outline:0;-webkit-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-moz-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
#feed-container{display:block;clear:both;margin:0 30px;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
#feed-container li .inner{margin:15px 16px;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:700}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin:10px 0 0}
#feed-container li img{margin:0 10px 5px 0;padding:5px;float:left;display:block;}
#result-desc{margin:0 30px;padding:0;border-bottom:2px solid #eee}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 10px 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 30px 0;text-align:center;font-weight:700}
#feed-nav a,#feed-nav span{border:1px solid #C9C9C9;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a,#feed-nav span:hover{color:#1B1B1B}
#feed-nav a:active,#feed-nav a:hover{color:#555}
#feed-nav span{cursor:wait}
@media (max-width:600px){#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner{margin:5px auto;height:auto}
#feedContainer li{float:none;display:block;width:auto;height:auto}
#feed-container li .news-text, #feedContainer:after,#feed-container li img{display:none!important}}
</style>
<div id="table-outer">
<table><tbody>
<tr><td><label for="feed-order">Urutkan artikel berdasarkan:</label></td> <td><select id="feed-order"> <option selected="" value="published">Artikel terbaru</option> <option value="updated">Artikel yang terakhir di update</option> </select></td></tr>
<tr><td><label for="label-sorter">Filter artikel berdasarkan kategori:</label></td> <td><select disabled="" id="label-sorter"> <option selected="">Loading....</option> </select></td></tr>

<tr>                 <td><label for="feed-q">Cari artikel dengan kata kunci:</label></td> <td><form id="post-searcher">
<input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />
</form>
</td></tr>
</tbody></table>
</div>
<br />
<header id="result-desc"></header>
<br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://cdn.rawgit.com/ahmdjazuli/javascript/d1d49dad/sitemap_julikoding.js" type="text/javascript"></script>

Sumber kode diatas dari IndraDP. Sekian tutorial singkat untuk Membuat Halaman about, kontak, privacy, disclaimer, terms of service dan Sitemap. Semoga dengan adanya tutorial ini dapat membantu dan bermanfaat bagi sobat.
Jangan lupa, untuk Membaca artikel Blog JuliKoding lainnya.