Trik Ricky: Blogger
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

10/04/19

Membuat Halaman Under Maintenance Di Blogspot (CSS)

Membuat halaman khusus blog yang sedang perbaikan

Terkadang pasti ada saja masalah perbaikan yang serin dialami oleh para blogger, termasuk salah satunya memperbaharui design template pada blog, Dalam masa perbaikan tersebut tentu kita tak ingin agar pengunjung datang dan akhirnya membuat pengunjung pergi karena tampilan blog yang berantakan.

Nah untuk mencegah hal tersebut kita perlu membuat halaman khusus yang nantinya pengunjung akaan di arahkan ke halaman khusus ini, halaman ini berisi keterangan bahwa blog sedang di perbaiki/maintenance. Keterangan tersebut umumnya dibuat menuju link gambar tertentu, contohnya seperti ini.

Membuat Halaman Under Maintenance Khusus Dengan CSS


Jika blog kamu sedang ada perbaikan, entah perbaikan template atau apapun itu, ada baiknya membuat Halaman Under Maintenance ini agar nantinya pengunjung bisa kembali lagi dilain waktu setelah blog kita selesai di perbaiki, untuk membuatnya mudah kok, kamu hanya cukup meletakkan kode dibawah ini di atas syle yang pertama atau di atas </head>

<style type='text/css'>
/*<![CDATA[*/
html:after {
  content: "";
  background: #fff url(https://2.bp.blogspot.com/-7xbzasXFR50/Wa43L1IIFAI/AAAAAAAAskE/JKR51NgBl_EIuoZJylbY3QqhQv03tR2LwCLcBGAs/s1600/maintainance.jpg) no-repeat;
  background-size: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background-position: center;
}
body {
  display:none;
}
@media screen and (max-width:800px) {
  html:after {
    background-size: contain;
  }
}
/*]]>*/
</style>

Kamu juga bisa mengganti link gambar sesuai keinginanmu sendiri dengan mengganti kode yang di tandai merah

Nah jika sudah selesai simpan template dan lihat hasilnya dengan mengklik link blog kalian yang sudah terpasang Halaman Under Maintenance tersebut.

Demikian.. Happy Blogging gaaaesss..!!!

30/01/19

Mengatasi Artikel Terkait Tidak Muncul Pada Halaman Versi Mobile

Kode Penyebab artikel terkait tidak muncul

Artikel terkait merupakan sebuah link yang umumnya di sertai gambar yang saling berhubungan dengan artikel yang menjadi topik utama di halaman web atau blog. Artikel terkait ini juga berfungsi untuk mengarahkan pengunjung lebih mudah menjangkau topik terkait lainnya agar traffic blog menjadi meningkat.

Nah buat kamu yang masih pake template gratisan yang sudah banyak di bagikan di google mungkin pernah mengalami masalah pada artiket terkait yang tidak muncul sama sekali saat blog dibuka melalui mobile/gadget. Contohnya saja template Viomagz yang banyak di share di internet.

Mengatasi Artikel Terkait Tidak Muncul


Kenapa harus Viomagz? ini semua karena saya sendiri saat ini menggunakan template tersebut di salah satu blog saya dan masalah artikel terkait yang tidak muncul di halaman mobile tersebut saat ini sudah teratasi. Ternyata masalah tersebut ada pada sebuah script yang memang sengaja dibuat agar artikel terkait tidak muncul di halaman mobile.

Nah buat kamu pengguna template yang saya sebutkan diatas (Viomagz) dan ingin Artikel terkaitnya muncul juga di halaman mobile, silakan cari kode script dibawah ini, kode ini biasanya di letakan di bagian atas </body>

<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:125,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span class="bg_overlay"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:///g , "//").replace(//s[0-9]+(-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><div class="related-post-item-text"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span></div>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title-thumb" href="'+v+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a></div><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a><span>"+u+"</span></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>

Kemudian cari kode dibawah ini didalam kode script tersebut.

j(d.homePage.replace(/\/$/,"")

Selanjutnya ganti kode yang ada didalam tanda kurung dengan kode dibawah ini

(\&|$)|\/+$/, "")

Simpan template dan lihat reviewnya, hasilnya bisa kamu lihat di blog saya yang lainnya Disini.

Nah cara diatas bisa kamu terapkan pada template Viomagz atau template lain yang memiliki kode yang mirip dengan kode script tersebut. Namun jika kode script diatas tidak ada mungkin Widget tersebut hanya disembunyikan oleh tag kondisional yang biasanya seperti dibawah ini.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><div id='related-wrapper'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;&lt;h4&gt;Artikel Terkait&lt;/h4&gt;&quot;,numPosts:6,summaryLength:0,titleLength:&quot;auto&quot;,thumbnailSize:320,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,widgetStyle:3,callBack:function(){}}
  </script></div>
</b:if>

Hapus kode tag kondisional diatas atau ganti "false" jadi "true"

Demikian semoga Cara Mengatasi Artikel Terkait Tidak Muncul Pada Halaman Mobile Kali ini Bermanfaat, Happy Blogging.

03/01/19

Tools Screenshoot Halaman Web Full Page Di Hp & PC


Mengambil sebuah screenshoot di android tentu sangatlah mudah, namun semuanya itu hanya sebatas panjang dan lebar layar hp yang kita digunakan, ada bagian tertentu yang tidak bisa di jangkau dalam screenshoot tersebut alias terpotong. Lalu, bagaimana caranya agar bisa mengambil screenshot halaman web full tanpa terpotong dari atas hingga ke bawah di android?

Bagi sebagian orang mungkin screenshoot  ini bukanlah hal penting, namun tidak untuk para design web atau para pembuat website. Mendapatkan screenshot dari website hasil karyanya secara keseluruhan adalah hal yang penting, mengingat sebuah halaman website yang di screenshoot tersebut nantinya akan digunakan sebagai demo atau review ketika hendak di promosikan untuk dijual dalam sebuah artikel.

Untuk kamu yang sedang mencari-cari cara Screenshot Halaman web full page diandroid tentu kamu tidak salah lagi jika masuk ke website dan artikel kali ini, karena disini saya akan membagikan tutorialnya secara cuma-cuma. Nah gimana sih caranya, yuk simak tutorial nya berikut ini.

Cara Screenshoot Halaman Website Full Page


Sebelum saya menjelaskan gimana cara Screenshoot Halaman web full page tanpa terpotong di android, kamu bisa lihat dulu contoh screenshoot yang baru saja saya ambil pada salah satu blog saya yaitu lovelybekasi.web.id di bawah ini.

Ini tampilan Dekstop:


Dan ini tampilan mobile:


Mohon maaf jika gambar agak buram di karenakan gambar saya perkecil ukurannya agar tidak memberatkan loading blog, gambar asli hasil screenshoot diatas lebih jelas dan lebih tinggi resolusinya.

Nah jika kamu sudah melihat hasil yang saya lampirkan diatas sekarang mari kita coba Screenshoot Halaman Web kalian dengan cara sebagai berikut:

  • Buka browser kamu, bebas, boleh Chrome, modzila atau browser bawaan hp kamu.
  • Tap dan copy paste link https://web-capture.net ke kolom pencarian browser.
  • Masukan link website/blog km dikolom yang tersedia.
  • Pilih format gambar yang ingin dihasilkan screenshoot, ada 7 Pilihan format gambar yang tersedia yaitu adalah JPEG, PNG, SVG, File PDF, TIFF, BMP dan File Postscript (PS)
  • Setelah pilih format gambar, tap tombol Tangkap Halaman Web di bagian bawah kolom tempat kamu memasukan link web yang ingin kamu ambil gambarnya.
  • Tunggu hingga proses screenshoot selesai.
  • Unduh file hasil proses screenshoot tadi ke hp/PC kamu.
  • Selesai.


Nah coba lihat hasil download Screenshoot yang dihasilkan tadi. Gimana mudah bukan???

Dengan ini artinya kamu sudah berhasil membuat screenshot halaman website full satu halaman penuh, yuk share artikel ini agar teman-teman kamu tau Cara Paling mudah Screenshoot Web Full Page tanpa aplikasi yang telah saya bagikan kali ini.

17/10/18

Cepat Terindeks! Cara Submit URL Di Search Console Baru

Submit url artikel blog di webmaster

Belum lama ini google telah mengubah tampilan webmaster menjadi lebih baik, dengan menu yang lebih ringkas dan simple mungkin banyak di antara pembuat website atau blog bingung bagaimana cara submit url di webmaster baru agar tiap artikel baru yang di publikasikan lebih cepat terindeks di halaman pencarian.

Awalnya saya sendiri bingung, dan masih mengalihkan dan menggunakan webmaster lama untuk submit tiap url yang saya publikasikan. Namun ternyata untuk submit url di webmaster baru lebih mudah ketimbang submit url di webmaster lama. Nah buat kalian yang masih bingung gimana cara submit url di webmaster baru, kamu bisa ikuti langkah-langkah nya di bawah ini.

Cara Submit URL di Google Webmaster Baru


Silakan login terlebih dahulu menggunakan akun gmail yang terdaftar di situs Google Search Console dan tap menu Bar di Pojok kiri atas > Inspeksi URL > Masukan URL > Enter > Minta pengindeksan.

Submit URL Di Search Console Baru

Proses pengindeksan dibutuhkan waktu 1-2 menit, biarkan dan tunggu sebelum tab popup baru muncul.

Nah selesai, lakukan hal tersebut secara rutin setelah kamu selesai memposting artikel baru agar lebih cepat terindeks oleh mesin pencari google. Demikian Tutorial kali ini mengenai Cara Submit URL Di Search Console Baru.

04/05/18

Solusi Gambar Blog Menyamping Saat Share Ke Facebook

Gambar blog miring saat dishare ke facebook

Di google banyak sekali template gratis maupun berbayar yang di bagikan secara gratis, namun ternyata banyak sekali kekurangan dan salah satu kekurangan tersebut adalah masalah gambar berada di posisi kiri dan judul di posisi kanan saat link postingan di bagikan ke facebook.

Nah untuk menangani masalah Gambar Blog Menyamping Saat Share Ke Facebook sebenarnya tidak lah terlalu sulit, kamu cukup menambahakan beberapa rangkaian meta tag, dan untuk menerapakannya ikuti langkah-langkah berikut:

Solusi Gambar Blog Menyamping Saat Share Ke Facebook


Sebelum menambahkan beberapa meta tag di bawah ini baiknya backup dulu template kamu untuk menghindari hal-hal yang tidak di inginkan.

Jika sudah buka template dan cari kode seperti berikut.

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>

Tambahkan kode berikut tepat dibawah kode yang kamu cari tadi.

<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />

Jika di gabungkan hasilnya akan seperti berikut.

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-NlWOxoj13hY/Wus4YgVUK1I/AAAAAAAAADU/vGbbrEvX-fUbCx-TBrCgbRV9Ro7NU-OJACLcBGAs/s1600/KonveksiQu-Banner.jpg' property='og:image'/>
</b:if>
</b:if>

Simpan template dan coba share kembali salah satu postingan kamu ke facebook. Lihat hasilnya. Bagaimana apakah gambar artikel postingan kamu sudah tidak menyamping lagi?

Share yuk artikel ini agar teman-teman kamu tau bagaimana mudahnya mengatasi Gambar artikel Blog Menyamping Saat Share Ke Facebook.

Akhir kata

Demikian Semoga Solusi Gambar Blog Menyamping Saat Share Ke Facebook bermanfaat untuk kamu. Salam.

28/03/18

Cara Paling Gampang Edit HTML Via Smartphone

Cara Paling Gampang Edit HTML Via Smartphone

Sebagai seorang blogger pastinya kamu tidak asing dengan yang namanya HTML. HTML atau Hyper Text Multi Laguage adalah bahasa pemrograman yang terdiri dari rangkain dan kode-kode khusus seperti huruf, angka maupun karakter tertentu.

Hypertext Markup Language juga merupakan sebuah bahasa markah yang digunakan untuk design sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. (Sumber: Wikipedia)

Jadi dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML

Untuk mengedit HTML di blogger biasanya kita dapat melakukannya dengan masuk ke dasboard blogger > Theme > Edit HTML, namun hal ini tentu hanya bisa di akses dengan menggunakan Komputer. Lalu bagaimana jika kami ingin mengedit dengan menggunakan Smartphone???

Jika Kamu membuka dasbord blogger dengan smartphone tentu bisa saja namun screen yang di tampilkan hanya support tampilan desktop. Hal ini pasti akan sedikit menyulitkan pandangan mata kamu.

Apalagi jika kita ingin mengedit HTML untuk merubah tampilan blog, setelah tampilan Kode2 HTML tersebut terbuka kita tidak dapat melakukan hal-hal yang biasa diakukan ketika mengunakan dekstop seperti mengedit maupun menghapus kode-kode tertentu yang kita inginkan.

Untuk bisa mengedit file HTML kamu perlu menambahkan aplikasi tambahan yang bisa membuka file dan mengedit file HTML dengan mudah. Dari dari sekian banyak aplikasi sejenis yang sudah saya coba, saya rekomendasikan sebaiknya kamu menggunakan aplikasi Quick Edit.

Lalu bagaimanakah cara menggunakannya agar kamu dapat dengan mudah mengedit file HTML, CSS maupun JavaScript untuk merubah design blog atau website? simak aja Cara Paling Gampang Edit HTML Via Smartphone berikut ini.

Cara Edit HTML Dengan Quick Edit


Buka smartphone kamu dan lakukan langkah-langkah berikut:

  • Langkah Pertama Download dan instal terlebih dahulu aplikasi Quick Edit di Google Play Disini atau jika ingin Versi Premiumnya (Tanpa iklan) saya punya File Apk nya (Quick Edit V1.3.5) silakan Unduh Disini.
  • Download Template/Tema blog yang ingin kamu edit.
  • Buka file tema yang kamu download tadi.
  • Edit sesuai keinginan anda.
  • Simpan kembali.
  • Upload kembali Tema yang kamu edit tadi ke blog.
  • Selesai

Backup template kamu sebelum mengedit dengan Quick Edit dengan cara mengcopy filenya menjadi 2 bagian, 1 untuk edit, 1 untuk backup.

Nah untuk memudahkan kamu mencari kode-kode tertentu Tap tiga titik di pojok kanan atas dan ketik HTML, CSS, maupun Script ingin kamu edit.

Upps bagaimana? Mudah sekali bukan. Jika ada kesulitan, sisipkan komentarmu yah dibawah. Selamat mencoba. 

01/01/18

Dukungan Https Kini Sudah Tersedia Untuk Custom Domain Blogger

Dukungan Https Kini Sudah Tersedia Untuk Custom Domain Blogger

HTTPS merupakan singkatan dari Hypertext Transfer Protocol Secure adalah protokol komunikasi internet yang memiliki fungsinya melindungi integritas dan privasi data pengguna antara komputer pengguna dan situs/web/blog yang dikunjungi.

Pengguna internet Zaman Now tentu menginginkan penelusuran yang aman dan bersifat pribadi saat menggunakan mengunjungi sebuah situs/web/blog agar privasi mereka terlindungi selama terkoneksi dengan jaringan initernet. HTTPS Zaman Now ini tentu sangat baik menjalankan fungsinya sebagai media untuk melindungi koneksi/jaringan si pengguna internet itu sendiri ke situs/web/blog.

Bila kita mengakses dasboard blogger melalui www.blogger.com tentu menu pilihan untuk setting HTTPS suport ini belum muncul, dan untuk membukanya kita harus mengakses alamat draft.blogger.com dengan cara pilih setelan > dasar dan lihat bagian kanan pilihan yang ada seperti gambar berikut:

Setting Https Untuk Custom Domain Blogger

Berikutnya aktifkan HTTPS Availability dengan memilih YES pada kolom pilihan, halaman dashboard akan te-refresh otomatis yang kemudian akan masuk ke proses pengalihan url yang semula HTTP dan akan di alihkan ke HTTPS atau menunggu HTTPS aktif (lihat gamabar)

Proses Pengalihan Http ke Https Untuk Custom Domain Blogger

Dalam mode pilihan diatas untuk beberapa saat blog tidak bisa diakses. Tak perlu khawatir, pengalihan url dari HTTP ke HTTPS hanya sebentar, setelah menu pilihan kedua "Https redirect" sudah bisa diklik, pilih juga "Yes" pada pengaturan ini. Lihat gambar dibawah ini:

Proses Redirect Http ke Https Berhasil

Jika pemgaturan sudah disetting seperti gambar diatas maka blog sudah kembali bisa diakses, tentunya url blog juga sudah berubah menjadi HTTPS. Jadi Jika ada link di blog awalnya menggunakan url Http maka otomatis akan dialihkan ke Https, begitu juga jika ada pengunjung yang mengakses dengan url blog yang lama dan masih menggunakan Http maka otomatis alan dialihkan ke HTTPS.

Di samping itu juga untuk anda yang menggunakan adsense maka adsense anda yang biasanya tayang dengan normal akan hilang/blank beberapa saat, namun anda tak perlu khawatir, masalah ini tak akan berlangsung lama, adsense membutuhkan waktu beberapa saat dan akan otomatis nantinya untuk menyesuaikan iklan yang mendukung Https.

Dalam hal ini juga ada beberapa hal yang wajib dilakukan setelah Https aktif diantaranya adalah:

  • Ganti semua Url lama yang di edit di Html dengan cara masuk ke edit HTML, tekan Ctrl + Shif + R untuk memunculkan kotak di pojok kanan atas.
  • Ketikan url lama anda yang masih menggunakan Http pada kolom yang muncul kemudian tekan Enter (http//:www.namadomainanda.com)
  • Ketikan https//:www.namadomainanda.com dan tekan Enter kembali.
  • Periksa template blog anda untuk mixed content. Jika Https blog anda masih berwarna abu-abu artinya menandakan template blog memiliki mixed content, tentu hal ini harus diperbaiki agar HTTPS berubah warna menjadi hijau. Semua Url js dan gambar menggunakan Https dan dapat diakses dengan normal.
  • Rubah url sitemap di robots.txt menjadi Https. Sebelumnya Tambahkan dulu properti baru di Search Console untuk nama domain anda dengan awalan Https
  • Selesai

Demikian Tutorial Blogger kali ini mengenai Dukungan Https Kini Sudah Tersedia Untuk Custom Domain Blogger. Semoga apa yang bisa saya share kali ini bermanfaat, salam hangat.

19/12/17

Mengalihkan Halaman Pencarian Blog Ke halaman Pencarian Google

Mengalihkan Halaman Pencarian Blog Ke halaman Pencarian Google
Umumnya hasil pencarian pada blog atau web muncul di halaman blog saja, namun jika anda ingin mengalihkan hasil pencariannya ke galaman google, anda cukup menambahkan beberapa rangkaian html dibawah ini ke tempat dimana anda meletakan kode search form tersebut.

Sekarang perhatikan HTML berikut, jika anda sering mengutak-atik template pasti paham dengan susunan kode ini:

<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='https://www.google.com/search' id='search-wrapper' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://www.google.com/search?q={q}' itemprop='target'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input class='search-form' itemprop='query-input' name='q' placeholder='Cari artikel...' required='required' type='search'/>
<input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/>
<button class='search-button' title='Search' type='submit'SEARCH</button>
</form></div>

Dari rangkaian kode di atas anda tak perlu mengganti semuanya, pada tiap template pasti memiliki kode yang berbeda, namun intinya tetap sama. Dari beberapa kode di atas pasti sudah ada dalam kode search form pada template anda saat ini, yang anda lakukan adalah cukup sesuaikan kode yang saya block merah dengan id dan class pada CSS search form anda saat ini.

Sebagai contoh, dibawah ini adalah kode awal sebelum kode diatas di tambahkan:

<form action='/search' id='searchform'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' placeholder='Search here....' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>

Maka hasilnya akan seperti dibawah ini:


<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='https://www.google.com/search' id='searchform' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://www.google.com/search?q={q}' itemprop='target'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' placeholder='Cari artikel....' required='required' type='text'/>
<input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form></div>

Perhatikan kode yang saya tandai, yang berwarna merah adalah id dan class nya, kode yang berwarna kuning adalah kode yang saya ubah, dan kode yang berwarna biru adalah kode yang saya tambahkan.

Simpan template dan coba ketikan kata kunci di kolom search form anda, jika belum berhasil anda bisa mengganti search form anda dengan Search form with keyframe effect seperti artikel yang sudah saya bagikan sebelumnya Disini.

Demikian Artikel mengenai cara Mengalihkan halaman pencarian blog ke halaman pencarian Google. Selamat beraktifitas.