Posts

Showing posts from April, 2019

Cara Membuat Menu FAQ Accordion Di Blog

Image
Cara Membuat Menu FAQ Accordion Di Blog - Pada kesempatan ini, saya akan membagikan tutorial membuat F.A.Q di blog dengan tampilan yang cantik dan keren, yaitu menggunakan fitur accordion.

Accordion ini tidak menggunakan javascript, hanya CSS saja sehingga tidak memberatkan blog kamu yah. Apa sih F.A.Q itu ? untuk apa F.A.Q ? semua jawaban ini silahkan cek google yah, karna saya hanya membagikan cara mempercantiknya saja.

DEMO

Cara Membuat Menu FAQ Accordion Di Blog
1. Log in blogger > Tema > Edit Tema > Salin kode di bawah ini tepat di atas kode </style>

.content { width: 80%; padding: 0; margin: 0 auto; } .centerplease { margin: 0 auto; max-width: 270px; font-size: 40px; } /*Question*/ .question { position: relative; background: #f9f9f9; margin: 0; padding: 10px 10px 10px 50px; display: block; width:100%; cursor: pointer; } /*Answer*/ .answers { padding: 0px 15px; margin: 5px 0; width:100%!important; height: 0; overflow: hidden; z…

Cara Membuat Menu Accordion Di Postingan Blog Responsive

Image
Cara Membuat Menu Accordion Di Blog - Di sini saya akan memberikan tutorial membuat menu scroll down pada blog, menu ini banyak fungsi, salah satunya membuat submenu di postingan blog agar terlihat lebih rapi.

DEMO
dan untuk contoh yang saya gunakan untuk postingan adalah

DEMO

Jika kamu tertarik untuk menggunakannya pada postingan kamu, silahkan ikuti tutorial di bawah ini :

Sebelumnya di blog kamu harus sudah terpasang kode JQuery

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
1. Log in Blogger > Tema > edit Tema > Salin kode di bawah ini tepat sebelum </style>

.accordion { max-width: 600px; margin: 4rem auto; width: 90%; font-family: "Raleway"; background: #f4f4f4; } .accordion__title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; padding: 1rem 1.5rem; background: #5B5F97; color: white; cursor: pointer; -webkit-transition: .3s ease; transition: .3s ease; } .accordion__title:hover { backgro…

Cara Memasang Notifikasi Cookie Di Blog Dengan Cepat

Image
Cara Memasang Notifikasi Cookie Di Blog Dengan Cepat - Untuk sobat yang sedang bingung bagaimana caranya pasang notifikasi cookies yang muncul di blog, kamu tidak salah mampir ke sini sob! karena saya akan share bagaimana caranya agar blog kamu muncul notifikasi cookies

seperti contoh di bawah ini



Saran saya, jika kamu ingin memasang cookies di blog, alangkah baiknya kamu sudah memiliki privacy policy di blog kamu.

Perlu diketahui juga, bahwa privacy policy ini salah satu syarat untuk sobat yang mau daftar menjadi partner google, yaitu Google AdSense.
Cara Memasang Notifikasi Cookie Di Blog Dengan Cepat
1. Buka situs https://cookieconsent.insites.com

2. Klik Tombol Download

3. Berikutnya silahkan sobat atur atau konfigurasikan tampilan yang sesuai dengan keinginan sobat

4. Lalu klik Copy Code

5. Buka log in blogger - Tema - Edit HTML - Salin kode yang tadi tepat di atas </head>

6. Simpan

Silahkan sobat bisa langsung cek blog sobat sendiri yah untuk tampilannya :)

Cara Memasang Syntax Kode HTML Di Blog

Image
Cara Memasang Syntax Kode HTML Di Blog - salah satu cara untuk memasang sebuah kode di blog yaitu dengan menggunakan syntax, penggunaan syntax ini cocok untuk kamu yang memiliki blog tutorial yang ada kode CSS dan Javascript.

Penggunaan kode CSS dan Javascript pada blog ini biasanya di awali dengan kode <pre><code> dan diakhiri dengan </code></pre>

Ada banyak sekali model syntax yang terdapat di google, namun di sini saya lebih tertarik menggunakan syntax highlighter ini yang saya dapatkan dari blog Arlina Design.

Selain tampilan yang menarik, syntax ini juga responsive dan sangat nyaman jika dipandang. Nah jika kamu tertarik untuk memakai syntax highlighter ini silahkan ikuti tutorial di bawah ini yah.

Cara Memasang Syntax Kode HTML Di Blog
1. Log in blogger > Tema > Edit HTML > Tambahkan kode di bawah ini tepat sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; pada blog kamu

<style type='text/css'> /*…

Cara Mengatasi Leverage Browser Caching di Blogger dan Wordpress

Image

Cara Cepat Membuat Sitemap Pada Blog

Image