Cara Menambahkan Fitur Ajax Search Pada Blog

Pada kesempatan kali ini saya memberikan tutorial Cara Menambahkan Fitur Ajax Search Pada Blog, tutorial ini pertama kali dibuat oleh DTE yaitu blognya Taufik Nurohman, apa ya keunggulan fitur ini dari yang lainnya.

Tentu ada keunggulan search ajax jika dipasang pada blog dimana akan dimuat konten blog yang ditulis pencarian tanpa harus membuka halaman lagi. Misalnya aja kamu mengetik kata kunci di kolom pencarian maka daftar isi konten akan memuat konten yang sesuai yang di tulis.

Cara Menambahkan Fitur Ajax Search Pada Blog

Pertama buka Blogger > Klik menu Tema dan klik Edit HTML. Selanjutnya, sobat hanya perlu menambahkan link di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan otomatis akan langsung bekerja pada kolom penelusuran di blog sobat.

<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/ajaxsearch.js?live=true&amp;image=true'/>

Dan saya juga telah sedikit memodifikasi dengan menambahkan CSS agar tampilannya terlihat lebih menarik. Tambahkan kode di bawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>

/* Ajax Search */

*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.ajax-search{padding:20px;background:#fff!important;box-shadow:0 0 15px rgba(0,0,0,0.15);max-height:450px!important}

.ajax-search h3{font-size:14px;font-weight:normal;margin:0 0 20px 0}

.ajax-search li{position:relative;display:inline-block;float:left;width:50%;margin:0 0 10px 0;overflow:hidden}

.ajax-search li h4{font-size:13px;font-weight:normal;margin:0 15px 0 0}

.ajax-search li h4 a{color:#000;transition:all .3s}

.ajax-search li h4 mark{background-color:transparent;color:#000;text-decoration:underline;transition:all .3s}

.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#f44336}

.ajax-search-image{float:left;margin:0 10px 0 0}

.ajax-search-image img{border-radius:5px}

.ajax-search-pager a{display:inline-block;clear:both;overflow:hidden;background:#f44336;color:#fff;font-size:13px;padding:5px 10px;border-radius:3px;margin:15px auto 0 auto}

.ajax-search-pager a:hover{background:#333;color:#fff}

@media screen and (max-width:768px){.ajax-search li{position:relative;display:inline-block;float:left;width:100%;margin:0 0 10px 0;overflow:hidden}}

</style>

Klik Simpan tema dan selesai.

Pengaturan

Berikut beberapa opsi parameter dari Fitur Ajax Search yang bisa sobat gunakan sesuai kebutuhan.

Opsi	Keterangan
live	Jika opsi ini bernilai false, maka artikel tidak akan muncul secara otomatis sampai sobat menekan tombol search atau enter.
url	Ganti nilainya dengan alamat blog sobat atau alamat blog lain yang ingin sobat tampilkan.
image	Ganti nilainya menjadi true untuk menampilkan gambar artikel.
target	Jika bernilai "_blank", semua link akan terbuka di tab baru.

Untuk opsi selengkapnya, sobat bisa kunjungi blog DTE :] di artikel ini

Bagaimana caranya gampang banget kan, itulah Cara Menambahkan Fitur Ajax Search Pada Blog, selamat mencoba 

Cara Mengganti Favicon di Blogger Tampilan Terbaru

Cara Mengganti Favicon di Blogger Tampilan Terbaru adalah artikel yang akan share kepada kamu semua, mungkin bagi blogger pemula masih membingungkan tampilan terbaru blogger saat ini.

Dulu pas tampilan classic blogger sangat mudah mengganti atau uploud Favicon ini, cukup di menu tatak letak, namun sekarang sudah hilang dan berganti di menu setelan. 

Sebenarnya apa itu Favicon?

Favicon adalah logo yang mewakili logo utama dimesin pencari dimana saat akses website maka logo tersebut ada di samping judul blog atau judul halaman. 

Cara Mengganti Favicon Pada Tampilan Terbaru Blogger

Buka akun Blogger kamu > Setelan, kemudian scroll kemabawah sampai menemukan tulisan Favicon.

Setelah itu klik tulisan tersebut, maka akan diarahkan ke halaman uploud Favicon atau logo.

Setelah itu kamu pilih logo untuk website atau blog yang ingin di uploud, setelah itu Simpan. 

Logo blog ini harus memiliki ukuran persegi dan tidak melebihi 1 MB, karena jika tidak akan gagal untuk mengganti logo Favicon tersebut. 

Bagaimana gampang banget kan, wassalam. 

Cara Verifikasi Pemilikan Domain di Niagahoster 2020

Pada kesempatan kali ini saya akan share kepada kalian tentang Cara Verifikasi Kepemilikan Domain di Niagahoster, setiap kamu daftar di webmaster tool tentu akan disuruh verifikasi kepemilikan domain milik kamu menggunakan data file TXT.

Kenapa Harus di Verifikasi?

Tentunya kalian akan bertanya seperti itu kenapa ya domain di Google Webmaster Tool harus di Verifikasi, ini bertujuan dan memberitahukan kalau domain tersebut adalah milik anda jadi tidak akan bisa orang lain mengklaim itu domain milik kamu jadi akan lebih aman. 

Cara Verifikasi Kepemilikan Domain di Niagahoster adalah tutorial yang akan saya kasih untuk anda karena saya beli domain tersebut di penyedia layanan tersebut, bagaimana caranya ini langkah nya :

Verifikasi Kepemilikan Domain di Niagahoster di Blogger

Pertama kamu harus masuk ke Google Webmaster Tool dulu, kemudian pilih menu Setting > Kepemilikan Domain > Penyedia Nama Domain

Disini kamu akan dikasih kode acak yang disuruh dipasang di penyedia layanan domain kamu, setelah itu Copy kode nya. 

Kamu masuk ke penyedia layanan domain atau tempat dimana membeli domain tersebut, kalau saya akan log in ke Niagahoster.

Setelah itu pilih domain kamu > pilih DNS Manegement > Add Record.

Kemudian pilih jenis file yaitu TXT, Copy Kode tadi di Text Data yang lain biarkan kemudian pilih Save Record. 

Kemudian masuk ke Google Webmaster Tool, Klik tombol Verifikasi. 

Selesai, sekarang kamu sudah verifikasi domain milik kamu di Google Webmaster Tool. 

Bagaimana caranya mudah banget kan, bila masih bingung bisa di tanyakan melalui kolom komentar dibawah ini, wassalam. 

Panduan Lengkap Verifikasi Ahrefs Webmaster Tool (Step by Step)

Ahrefs adalah sebuah tool yang populer sekarang ini, dengan ahrefs ini bisa cek backlink, keyword, site audit, dan masih banyak. Apalagi sekarang Ahrefs meluncurkan fitur baru yang bernama Ahrefs Webmaster Tool yang baru di rilis.

Dengan menggunakan Ahrefs Webmaster Tool ini data yang ada maka akan bertambah lengkap karena akan tau berapa backlink yang ada pada blog, visitor organik yang ada di blog dan masih banyak lagi.

Apabila masih bingung kali akan share Panduan Ahrefs Webmaster Tool Lengkap bila belum mengetahui tau caranya, nah langsung aja beriku ini tutorial nya.

Cara Verifikasi Blog ke Ahrefs Webmaster Tool

Pertama kamu kunjungi aja Ahrefs Webmaster Tool, maka akan seperti ini. Kemudian klik Sign Up for Free

Kemudian Masukkan Email kamu, setelah itu akan mendapat email untuk konfirmasi, setelah itu akan disuruh masukkan Nama, Password, dan jawab pertanyaan tersebut, jika sudah diisi semua klik Continue. 

Setelah itu kamu akan disuruh untuk membuat projek baru, klik aja Add Manual. Apabila kamu log in dengan Google bisa kamu Koneksikan dengan Akun Google kamu. 

Selanjutnya akan disuruh untuk masukkan URL blog dan nama project tersebut, jika bingung bisa lihat gambar dibawah ini. 

Apa bila sudah diisi semua klik aja Continue, setelah itu kamu akan disuruh memasukkan Kode Verifikasi seperti kalian daftar Google Webmaster Tool. 

Masukkan kode tersebut dibawah kode <head> pada blog kamu, kamu pilih aja HTML Tag untuk verifikasi nya.

Apabila berhasil maka akan di arah kan dihalaman diatas, kemudian klik Finish. Nah sekarang kamu sudah berhasil verifikasi blog di ahrefs webmaster tool tersebut.

Nah itu Panduan Ahrefs Webmaster Tool, jika ada pertanyaan bisa dikolom komentar. Wassalam. 

Cara Menghilangkan Notifikasi seller.json di Google Adsense Untuk Blogger

Akhir - akhir ini ada notifikasi tentang seller.json pada Google Adsense namun tentu bingung para publikasi adsense harus diapakan notifikasi tersebut.

Kalau berbicara mengenai seller.json ini sama aja ads.txt namun ini tidak harus menggunakan hosting, seperti halnya ads.txt yang harus dipasang di Blogger atau WordPress. Terus kalau ada notifikasi tersebut harus diapakan ya.

Sellers.json adalah standar IAB Tech Lab yang meningkatkan transparansi dalam ekosistem iklan dan membantu memerangi penipuan. Sellers.json berfungsi melalui file informasi penjual yang tersedia secara publik. Penayang dapat memilih untuk membagikan nama individu atau nama bisnis mereka (bergantung pada jenis akun AdSense mereka) dalam file. Hal ini memberikan cara yang andal bagi pengiklan untuk menemukan dan memverifikasi identitas penayang.

Setting seller.json Adsense Untuk Blogger dan WordPress 

Untuk memperbaiki kalian bisa ikuti aja langkah berikut ini :

1. Masuk ke akun Google Adsense kamu 
2. Kemudian klik Akun 
3. Setelah itu pilih Informasi Akun, pilih Edit
4. Tambahkan domain bisnis anda jika ada
5. Kemudian pilih Transparans

Selanjutnya tambahkan URL blog kamu, dan ikuti selanjutnya. 

Contoh 

Dalam contoh ini, penayang telah membuat informasinya transparan di file seller.json Google. 

Berikut ini yang dilihat pengiklan: "sellerId": "pub-1234567890123456", "sellerType": "PUBLISHER", "name": "Example Company Inc."

Nah itulah cara Setting seller.json Adsense Untuk Blogger dan WordPress, selamat mencoba

Source : https://support.google.com/adsense/answer/9889911?hl=id

Pada kesempatan kali ini saya akan share tutorial Cara Menambahkan Centang di Samping Judul Blog, mungkin ini sangat sepele ya bagi kalian khususnya Blogger pemula. Untuk apa sih gunanya ditambah tanda centang atau cecklist disebelah judul blog.

Tanda seperti ini adalah sebagai tanda di mana selesai, atau sudah dan terverifikasi. Ada beberapa keuntungan apa bila blog kamu ditambahkan tanda seperti ini seperti :

• Mudah di temukan oleh mesin pencari 
• Lebih banyak pengunjung dari Google
• Lebih di percaya oleh Google 
• Lebih cepat ke index Mesin Pencari
• Dll

Jadi tidak heran apa bila sekarang banyak sekali blog yang menambahkan tanda centang di samping judul di blog mereka. Bagaimana caranya menambahkan tanda centang pada blog berikut ini adalah tutorial nya. 

Cara Menambahkan Tanda Centang di Samping Judul Blog

Langkah pertama yang kalian lakukan adalah masuk ke Dashboard pada akun Blogger kamu, setelah itu masuk ke Tampilan, klik menu Edit HTML. Kemudian masuk kode di bawah ini di samping kode <data:blog.pageName/>

√

Jika masih bingung seperti apa naruhnya kode tersebut, contohnya seperti di bawah ini :

<b:if cond='data:view.isMultipleItems'>
><title><data:blog.pageTitle/></title>
<b:else/> <b:if cond='!data:view.isError'> <title>&#8730; <data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>

Setelah itu klik Simpan Template. 

Untuk melihatnya anda bisa buka salah satu artikel berikut ini apakah sudah muncul tanda centang apa belum. Nah itulah tutorial Cara Menambahkan Tanda Centang di Samping Judul Blog. Semoga bermanfaat. 

Memasang Halaman Error Page 404 di Template Blogger

Image Sudar Blogger

Pada kesempatan kali ini saya akan Memberikan Tutorial Memasang Halaman Error 404 di Blogger.

Halaman Error 404 adalah Halaman Notifikasi ke sebuah server kalau halaman yang kita tuju itu error atau tidak tersedia. Halaman yang error itu karena mengubah tanggal pada link atau mengubah nama URL yang menjadikan halaman tersebut menjadi tidak tersedia.

Bagi Kamu yang ingin membuat halaman error 404, bisa simak tutorial berikut ini jika blog kamu ada halaman error maka akan terlihat profesional dimata pengunjung.

Tutorial Memasang Halaman Error 404 di Blogger

Pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian cari dan tambahkan kode di bawah ini sebelum </head>

<b:if cond='data:view.isError'>
<style>
/* Error 404 */
body{background:#fff;line-height:1.4em;overflow:hidden}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}
@keyframes charge{from{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#error-page{background:#fff;margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box}
#error-inner{margin:12% auto 35px;padding:0;list-style:none!important}
#error-inner .box-404{display:inline-block;position:relative;font-weight:bold;width:200px;height:200px;background:#e84118;color:#fff;font-size:70px;line-height:200px;margin:25px auto}
#error-inner .box-404 .zigg{display:inline-block;position:relative;animation:rotating .6s linear}
#error-inner .box-404::after{content:&#39;&#39;;width:0;height:0;position:absolute;top:0;right:0;border-width:30px;border-style:solid;border-color:#fff #fff transparent transparent;display:block}
#error-inner .box-404::before{content:&#39;&#39;;width:0;height:0;position:absolute;top:0;left:0;border-width:30px;border-style:solid;border-color:#fff transparent transparent #fff;display:block}
#error-inner .box-404 div::after{content:&#39;&#39;;width:0;height:0;position:absolute;bottom:0;left:0;border-width:30px;border-style:solid;border-color:transparent transparent #fff #fff;display:block}
#error-inner .box-404 div::before{content:&#39;&#39;;width:0;height:0;position:absolute;bottom:0;right:0;border-width:30px;border-style:solid;border-color:transparent #fff #fff transparent;display:block}
#error-inner h2{color:#2d2d2d;font-weight:700;line-height:1.4em;font-size:30px;animation:charge .5s linear}
#error-inner p{line-height:1.7em;font-size:16px;color:#111;padding:0;margin:15px auto 0 auto;max-width:640px;animation:charge .5s linear}
#search-404{max-width:75%;display:block;margin:0 auto 15%;position:relative}
#search-404 .icons{width:26px;height:26px;fill:#4285f4;vertical-align:middle}
#search-404 .icon-Forward{width:20px;height:20px}
#search-404 p{font-size:90%;color:#999;padding:20px 20px 0;text-align:right}
#search404 input[type=search]{width:100%;border-radius:99em;height:48px;box-shadow:0 1px 6px 0 rgba(32,33,36,0);border:1px solid #dfe1e5;padding:0 48px 0 24px;line-height:48px;font-size:16px;box-sizing:border-box;outline:0;background-color:#fff;transition:all .3s}
#search404 input[type=search]:focus{background:#fff;box-shadow:0 1px 6px 0 rgba(32,33,36,0.28)}
#search404 .src-btn404{background:transparent;border:none;padding:0 20px;outline:none;height:48px;line-height:48px;font-weight:700;margin:0 auto;cursor:pointer;position:absolute;right:0;top:0;z-index:999}
@media screen and (max-width:640px){#error-inner{margin:5% auto 35px}#search-404{max-width:100%}}
</style>
</b:if>

Langkah selanjutnya, Cari kode <body> kemudian letakkan kode ini dibawahnya.

<b:if cond='!data:view.isError'>

Kemudian tambahkan kode di bawah ini sebelum </body>

</b:if>
<b:if cond='data:view.isError'>
   <div class='error-wrapper' id='error-wrapper'>
      <div id='error-page'>
         <div id='error-inner'>
            <div class='box-404'>
               <div><span class='zigg'>404</span></div>
            </div>
            <h2>Page Not Found</h2>
            <p>The page you were trying to visit has disappeared or moved to another dimension. Perhaps searching will help.<br/></p>
         </div>
         <div id='search-404'>
            <form action='/search' id='search404'>
               <input name='cof' type='hidden' value='FORID:10'/>
               <input name='ie' type='hidden' value='ISO-8859-1'/>
               <input class='src-form404' name='q' placeholder='Search here...' required='required' type='search'/>
               <button class='src-btn404' title='Search' type='submit'>
                  <svg class='icons icon-Search' viewBox='0 0 24 24'>
                     <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/>
                  </svg>
               </button>
            </form>
            <p>
               Or, back to 
               <a expr:href='data:blog.homepageUrl'>
                  homepage 
                  <svg class='icons icon-Forward' viewBox='0 0 24 24'>
                     <path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/>
                  </svg>
               </a>
            </p>
         </div>
      </div>
   </div>
</b:if>

Langkah selanjutnya klik tombol Simpan tema dan lihat hasilnya.

Bagaimana, mudah banget untuk membuat nya ini yang saya buat adalah Halaman Error 404 di Blogger seperti blog ini bisa di cek sendiri.