Cara Membuat Kotak Kode Script untuk Posting Blog

October 06, 2017 Add Comment
Cara Membuat Kotak Kode Script  untuk  Posting Blog

Tutorial kali ini cocok bagi Sobat Blogger yang suka berbagi kode semacam HTML,CSS,Javascript,jQuery pada posting Blognya. Sebenernya cara yang akan saya berikan ini tidak jauh beda dengan pembuatan Synthax Hightlighter yang sudah umum kita temukan tutorialnya.

Namun kali ini saya membuat kotak kode yang lebih sederhana ( simple precode disertai seleksi ) dan memiliki fungsi yang sama dan tampilan yang tidak kalah menariknya di banding Synthax Hightlighter .

Pada konsepnya simple precode ini sama fungsinya dengan Synthax Hightlighter. Langsung aja kepada tahan dan proses pembuatan simple precode dengan seleksi. Sobat bisa melihat DEMO dibawah ini

Cara Membuat Simple precode dengan seleksi

1. Buka Blogger > Template > Klik Edit HTML > Simpan kode CSS di bawah ini sebelum ]]></b:skin>  atau </style>

/* CSS Simple Pre Code */
pre {background: #fff;white-space: pre;word-wrap: break-word;overflow: auto;}
pre.code {margin: 20px 25px;border: 1px solid #d9d9d9;border-radius: 2px;position: relative;box-shadow: 0 1px 1px rgba(0,0,0,.08);}
pre.code label {font-family: sans-serif;font-weight: normal;font-size: 13px;color: #444;position: absolute;left: 1px;top: 16px;text-align: center;width: 60px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;pointer-events: none;}
pre.code code {font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;display: block;margin: 0 0 0 60px;padding: 15px 16px 14px;border-left: 1px solid #d9d9d9;overflow-x: auto;font-size: 13px;line-height: 19px;color: #444;}
pre::after {content: "double click to selection";padding: 0;width: auto;height: auto;position: absolute;right: 18px;top: 14px;font-size: 12px;color: #aaa;line-height: 20px;overflow: hidden;-webkit-backface-visibility: hidden;transition: all 0.3s ease;}
pre:hover::after {opacity: 0;visibility: visible;}
pre.code-css code {color: #0288d1;}
pre.code-html code {color: #558b2f;}
pre.code-javascript code {color: #f57c00;}
pre.code-jquery code {color: #78909c;}

2. Berikutnya simpan script di bawah ini sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Script di atas berfungsi untuk menyeleksi otomatis setiap pengunjung blog Anda  melakukan klik dua kali pada area yang dibungkus tag pre, kbd, dan blockquote.

3. Setelah itu simpan template.

Cara penerapan pada postingan Blog

Silakan tambahkan kode di bawah ini pada tab HTML post

<pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>
<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Demikian Tutorial Cara penerapan Simple Pre Code dengan Seleksi pada Posting Blog.
Dan apabila Sobat mendapati kendala silahkan tulis kendala/problem pada kotak komentar dibawah….

Semoga bermanfaat.

Cara Sederhana Mempercepat Loading Blog

September 16, 2017 1 Comment
Cara Sederhana Mempercepat Loading Blog

Banyak dari sahabat Blogger yang mengeluhkan lambatnya proses loading blog ketika di akses, bahkan ketika di test pada Speed page insight Google juga dapat skor yang tidaK MEMUASKAN.

Umumnya masalah yang terjadi adalah terlalu banyakknya template dengan Javascript, CSS, dan Widget Bundle bawaan Blogger. Kebanyakan  pengguna tidak sadar dengan memasang terlalu banyak widget yang didalamnya menyimpan ( CSS dan Javascript ) sebenernya berpengaruh besar terhadap loading Blog ketika di akses.

Dibawah ini adalah contoh link Javascript Bundle dan CSS Bundle bawaan yang sebenernya kita tidak begitu butuh namun terpasang pada template ber-platform blogspot.

<!-- dibawah ini contoh link yg memperlambat loading blog -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>

<script type='text/javascript' src='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-widgets.js'></script>

<link href='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-css_bundle_v2.css' rel='stylesheet' type='text/css'/>

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=33xxxxxxxx=33xxxxxxxx8'/>

Bagaimana Cara Hapus JS, CSS, Bundle dan Widget Bundle di Blogger

Silahkan masuk ke Akun Blogger >> Theme >> Edit HTML.

Silahkan cari kode <head> silahkan ganti dengan kode dibawah ini

&lt;!--<head>--&gt;&lt;head&gt;

Silahkan cari kode </head> kemudian ganti dengan kode dibawah ini

&lt;!--</head>--&gt;&lt;/head&gt;

Lanjut cari kode <body> .Kemudian ganti dengan kode sperti dibawah inisilahkan ganti dengan kode dibawah ini

&lt;!--<body>--&gt;&lt;body&gt;

Lalu cari kode </body>  silahkan ganti dengan kode dibawah ini

&lt;!--</body>--&gt;&lt;/body&gt;

Kemudian cari kode <b:skin><![CDATA[  lalu ganti dengan kode dibawah ini:

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[

Simpan template

Bagaimana cara cek hasilnya ?

1. Silahkan tulis atau copy pastekan link ini : view-source:http://nama-blog-anda.blogspot.com/ pada address bar ( browser anda ) lalu tekan enter. Untuk nama-blog-anda silahkan ganti dengan URL blog milik anda yaaa….

2. Silahkan scroll kebawah dan lihat hasilnya kode Javascript, CSS, dan Widget bawaan Blogger berubah menjadi warna hijau.. Kode yang berwarna hijau tersebut akan dianggap sebagai HTML comment tag dan tidak lagi dieksekusi sebagai script.

3.Untuk cek Speed loading Blog silahkan cek disini

Selesai, semoga bermanfaat.....

Cara Memasang Ikon SVG untuk Mempercepat Loading Blog

September 16, 2017 Add Comment
Cara Memasang Ikon SVG untuk Mempercepat Loading Blog

CrepictDGZ berbagi lagi, kali ini saya akan memberikan Tips Cara Mempercepat Loading Blog dengan menggunakan Ikon SVG. Selama ini Fontawesome adalah ikon yang umum digunakan dalam setiap desain template ( termasuk desain saya sendiri ) hehehehe… ntar ja templatenya diupdate, maklum lagi sibuk kerja.

Namun ada sisi yang kurang enak dengan memasang FontAwesome yaitu memperlambat loading blog. Karena dengan menggunakan  Font Awesome template harus manggil script sebelum menampilkan Ikon FontAwesome. Pemanggilan script eksternal jadi salah satu point penting yang perlu dipertimbangkan bagi pengguna platform Blogger yang tidak bisa mengatur cache dan expired header. FontAwesome memang tak memperlambat blog secara signifikan, namun untuk test page speed loading akan berdampak pada score saat dilakukan test seperti di GTMetrix atau Google Page Speed Insight dll.

Dari judul diatas berarti Anda harus mengganti penggunaan Ikon FontAwesome yang sebelumnya terpasang di Blog dengan SVG ikon.

Contoh HTML script Font Awesome yang terpasang di template seperti dibawah ini :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Dan Anda wajib menghapus kode diatas jika sudah mempergunakan SVG Ikon.

Bagaimana Cara Memasang Ikon SVG di Blog ?

Kita harus masuk ke situsnya untuk mendapatkan Ikon SVG yang akan kita pasangkan di Blog. Silahkan masuk ke  Material Design Icon. Disini Anda bisa milih berbagai jenis icon SVG yang akan kita pasangkan di Blog dengan mengambil kodenya untuk dipasangkan pada template blog.
Cara Memasang Ikon SVG untuk Mempercepat Loading Blog
Silahkan klik pada ikon yang dipilih. Pilih toggle kode '</>' lalu pilih view SVG maka akan tampil kotak dengan kode seperti di bawah ini sebagai contoh saya akan mengambil ikon Account-Multiple.

Cara Memasang Ikon SVG untuk Mempercepat Loading Blog

Kemudian simpan kode SVG di atas pada Edit HTML template. Saya akan contohkan misalnya Anda ingin mengganti  ikon "account" pada link profil ( yang masih menggunakan FontAwesome ) di rubah ke SVG ikon Account-Multiple seperti .

Pada umumnya kode HTML ikon link profile adalah seperti dibawah ini
 <span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
               <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn author'>
                        <a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </span>

Setelah Anda tambahkan Kode dari SVG ikon akan tampak seperti dibawah ini 

<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<!-- Pastekan dibawah kode SVG ikon -->
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<!-- Batas kode SVG ikon -->
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>

Supaya gambar SVG pas ukuran baik tinggi dan lebarnya di Blog, maka kita pindahkan inline style-nya style="width:24px;height:24px" dan fill="#000000" ke dalam style CSS menjadi seperti dibawah ini

.post-author svg {width:24px;height:24px;}

Dengan menghapus inline style dan menggantinya dengan kode CSS di atas diharapkan kita bisa dengan mudah mengatur besar kecil ukuran ikonnya.
Dan jika ingin mengganti warna ( fill="#000000" )  pada ikon-nya, kita gunakan css berikut.

.post-author svg path {fill: white;}

Penting : Jika Anda sudah menambahkan style CSS seperti diatas, maka kode HTML SVG ikon diatas harus di revisi/ganti ( lihat HTML SVG ikon langkah sebelumnya diatas ). Maka perubahannya adalah seperti dibawah ini

<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<!-- Jika sudah memasang kode style CSS kode SVG seperti ini -->
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<!-- Batas kode SVG  -->
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>

Demikian Tutorial Cara Menggunakan Ikon SVG untuk Mempercepat Loading Blog, meski mungkin sulit dipahami bagi Sahabat Newbie namun belajar dari kesalahan adalah cara bagaimana agar kita tahu dan menemukan cara yang benar.

Sekian dan Semoga bermanfaat…

Membuat Tombol Download dengan Countdown Timer Responsive

September 03, 2017 Add Comment
Membuat Tombol Download dengan Countdown Timer Responsive

Salam Blogger, CrepictDGZ kali ingin berbagi tips bagaimana cara membuat tombol download dengan disertai countdown timer ( hitung mundur ). Maksud dari countdown timer disini adalah hitungan mundur setelah tombol download di klik, sebelum menuju ke link download yang sebenernya…nanti bisa dilihat demonya biat lebih jelas.

Keuntungan dari countdown timer adalah membuat space waktu kepada pengunjung selama 10 detik, tentu waktu ini akan memberikan sedikit peluang kepada Adsense ( iklan ) yang ada di Blog kita.

Lebih cocok tombol semacam ini dipasang pada Blog Download Software atau bagi-bagi Aplikasi Andoid.

DEMOBLOGDEMO on Codepen

Membuat Tombol Download dengan Countdown Timer Responsive

1. Silahkan masuk ke Akun Blogger Sobat lalu masuk ke menu Tema >> Edit HTML

2. Simpan kode dibawah ini sebelum kode < /head>

/*Auto Download with Countdown Timer*/
#btn{cursor:pointer;margin-top:10px;padding:10px 20px;border:none;border-radius:3px;background:#fdfdfd;color:#3cc091;float:right;text-transform:uppercase;font-size:16px;font-weight:600;text-shadow:none;}
#btn:hover, a#download:hover{background:#3cc091;margin-top:10px;color:#fff;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;  -ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.dgzwrap{display:block;width:100%;margin: 20px auto;border-radius:4px;font-family:&#39;Poppins&#39;, sans-serif}
.dgz-wrap1{background:#576269;color:#fff;padding:10px 20px;display:block;border-top-right-radius:3px;border-top-left-radius: 3px;margin-bottom:2px}
.size-wrap{color:#fff;display:inline-block;font-size:1.5em;font-weight:700;line-height: 38px;text-align:left}
.bottom-wrap{padding:10px 20px;background:#3cc091;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#fff}
#download{float:right}
a#download{padding:10px 20px;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700;text-align:center}
.title-wrap span{display:inline-block;line-height:38px;float:right;margin-top:10px;background:#3cc091;padding:0 10px;border-radius:3px;}
.area-size{display:block}
.area-size span{margin-right:3px}
.post-labels, .post-timestamp{display:none}
a.home-link{color:#555;font-size:20px;}
a.home-link:hover{color:#222}
@media screen and (max-width:600px){
.dgzwrap{float:none;width:100%}}
@media screen and (max-width:320px){
.size-wrap{display:block;text-align:center}
#btn, a#download{width:100%;margin-bottom:10px}
.title-wrap span{float:none;width:100%;text-align:center}
.area-size{text-align:center}
}

3. Kemudian simpan kode dibawah ini diatas kode < /body>

<script type='text/javascript'>
//Download button with Countdown Timer by crepictdesign.blogspot.co.id
//<![CDATA[
function generate() {
    var linkDL = document.getElementById("download"),
        btn = document.getElementById("btn"),
        direklink = document.getElementById("download").href,
        waktu = 10;
    var teks_waktu = document.createElement("span");
    linkDL.parentNode.replaceChild(teks_waktu, linkDL);
    var id;
    id = setInterval(function () {
        waktu--;
        if (waktu < 0) {
            teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
            clearInterval(id);
            window.location.replace(direklink);
            linkDL.style.display = "inline";
   
        } else {
            teks_waktu.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> " + "File siap diunduh dalam " + "" + waktu.toString() + " Detik....";
            btn.style.display = "none";
        }
    }, 1000);
}
//]]>
</script>

4. Simpan Template Sobat..

Penerapan Tombol Download Countdown Timer pada Posting Blog

1. Silahkan membuat artikel terkait dengan tombol download yang nanti akan Sobat pergunakan, Setelah selesai letakkan kode dibawah dimana Sobat ingin meletakkan, semisal dibawah artikel Blog ( seperti gambar diatas ).
Untuk menulis Artikel tetap pada menu compose ya…..Sob

2. Untuk meletakkan kode Download dibawah ini silahkan masuk ke HTML ( jangan Compose )

<div class="dgzwrap">
<div class="dgz-wrap1">
<div class="title-wrap">
<div class="size-wrap">
Whatsapps 3.1.200.1 Apk
</div>
<button onclick="generate()" id="btn">Download</button>
<a id="download" href="https://crepictdesign.blogspot.co.id/" style="display:none"> Try Again</a>
</div>
<div class="area-size">
<span class="uploader"></span> <span class="file-size">
 File Size 89 MB</span>
</div>
</div>
<div class="bottom-wrap">
Jika tidak terdownload otomatis silahkan klik Download Ulang. Dan jika link rusak silahkan lapor melalui halaman Contact Us.
</div>
</div>


Membuat Tombol Download dengan Countdown Timer Responsive


3. Copy dan pastekan kode diatas, dibagian paling bawah artikel Blog Sobat ( masih pada posisi HTML bukan Compose ), lalu tekan “Preview/Pratinjau”. Jika sudah sesuai silahkan tekan “Publikasikan/Publish”.

4. Selesai….

Selamat mencoba..

Mau Beli Domain Name di Google Domains ?

August 31, 2017 Add Comment
Mau Beli Domain Name di Google Domains

Kira kira akhir Agustus 2017 lalu Google meluncurkan Google Domainsnya di Indonesia.Google domain ini sebenernya diluncurkan pertengahan April 2016 namun hanya tersedia dibeberapa Negara saja, namun tidak untuk Indonesia pada waktu awal peluncurannya.

Kita akan mengetahui lauch Google Domain ini ketika membuka Akun Blogger Dashboard yang masih menggunakan custom domain ( masih blogspot ), maka akan muncul popup seperti dibawah ini.

Popup Google Domains

Disini pengguna custom domains atau Admin Blog yang masih menggunakan Custom Domains akan diberikan tawaran atau pilihan yang tertera pada popup ketika kita meng-klik tombol search. Berikut contoh nama domain anda dan extensinya

Daftar nama domain dan harga di Google Domains

Dalam popup sebelah kanan terlampir harga sekaligus jangka waktu dari expired domain tersebut. Jangan kaget harganya memang sedikit lebih mahal dibanding penyedia domain yang lain seperti namecheap,hostgator atau penyedia domain lokal.

Namun kita bisa mempertimbangkan hal yang lebih menguntungkan jika membeli domain name yang disediakan oleh Google sendiri Tentu kita tak lagi memikirkan problem jika dibanding membeli domain name diluar yang tentu akan berpengaruh jika terjadi masalah dengan server Si penyedia domain.

Nah Jika Google sendiri yang menyediakan domain name, mungkin lebih sedikit kekwawatiran kita tentang gangguan server.

Jika Anda tertarik untuk membelinya silahkan klik tombol BUY pada domain yang Anda pilih, kemudian Anda akan di arahkan pada halaman pendaftaran seperti pada gambar di bawah ini.

Formulir Pendaftaran di Google Domain

Kemudian Anda  tinggal isi formulir yang disediakan dan ikuti langkah-langkahnya.Harga yang ditampilkan adalah dalam bentuk Rupiah ( IDR ) yang pembayarannya bisa Anda lakukan via transfer Bank Lokal di Indonesia.

Mungkin akan menjadi kabar yang lebih baik lagi jika Kita membeli domain name dari Google ini tanpa harus men-setting custom domain ( langsung berubah extensi domainnya ke com,net,info ) tidak seperti ketika kita membeli domain TLD dari penyedia domain pada umumnya lalu masih mensetting lagi di dashboard Blogger yang mungkin  masih dianggap ribet oleh Blogger Newbie.

Saya kira Google sudah memikirkan apa yang terbaik bagi penggunanya…

POSHSER Fast and Responsive Blogger Template 2017

August 24, 2017 Add Comment
POSHSER Fast and Responsive Blogger Template 2017

POSHSER Fast and Responsive Blogger Template 2017 adalah template yang saya buat dan akan saya bagikan secara GRATIS !

Di dalam template tersedia tombol system komentar hanya DISQUS namun memungkinkan penggunjung dengan mudah memberikan komentarnya dari akun yang sedang mereka gunakan baik twitter,facebook,G+, jika Anda ingin mencobanya silahkan download versi gratis-nya...
Selamat Mencoba !!!!  

Berikut fitur yang ada di dalam template " POSHSER " ini :
Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
SEO Friendly True
Mobile Friendly True Cek
Dynamic Heading True -
Adsense Ready True -
Valid Schema.org True -
High CTR True -
Personal Blog True -
2 Column True -
Auto Read More with Thumbnail True -
Responsive Ad Slot True -
Breadcrumbs True -
Related Posts with Thumb True -
Search Box True -
Social Share Button True -
WA, BBM, LINE Share Button Premium Only -
Responsive Dropdown Menu True -
Smooth Back to Top True -
Custom Subscribe Box Widget True -
Shortcodes True -
Unlimited Page Numbered True -
Comments System DISQUS+Blogger True -

Semoga bermanfaat.. Jangan lupa share ya Sob !!! 

Cara Agar Blog BARU Lebih Cepat di INDEX Google

August 19, 2017 Add Comment
Cara Agar Blog BARU Lebih Cepat di INDEX Google

Sebelumnya, bagi Sobat Newbie mohon dibaca dan dicermati sampai selesai tutorial ini yaa…..InsaAllah lengkap. Dari cara Verifikasi blog,Submit Sitemap Blog, Submit Artikel,dan setting robot.txt.

Selamat Siang Sobat Blogger semuanya, Crepictdgz kali ini akan berbagi tips Cara Agar Blog Lebih Cepat di INDEX Google . Cara ini wajib dilakukan oleh Blog baru, jadi setiap Blog baru wajib melakukan hal hal seperti yang akan saya jelaskan nanti dibawah….

Pada umumnya Blogger newbie hanya sekedar membuat Blog, posting dan selesai. Maklum membangun wawasan butuh waktu,kesungguhan dan tekad. Kali ini saya akan memberikan cara bagaimana sih membuat Blog baru yang baik dan sesuai prosedur agar artikel yang kita posting lebih cepat ter-index oleh mesin pencari Google.

Prosedur atau cara membuat Blog baru cepat ter-index Google

Yang Sobat lakukan setelah membuat Blog baru adalah, melakukan verifikasi dan semua ketentuan ketentuan di Google Seach Console  :

1. Verifikasikan Blog Baru Sobat di Google Search Console
2. Submit Sitemap Blog
3. Submit artikel Blog
4. Setting robot.txt

Tanpa melakukan hal diatas akan memungkinkan Blog Sobat tidak akan dikenali/dirayapi oleh mesin pencari Google, Otomatis artikel Blog Sobat tidak akan pernah muncul pada halaman pencarian Google… Secara logika karena ke 4 ketentuan ketentuan belum pernah kita lakukan sebagai standarisasi peng-index an mesin pencari.

Sebelumnya silahkan masuk ke Google Search Console.

1. Cara Verifikasi Blog

1. Selajutnya cari menu Property dan masukkan URL blog anda, seperti gambar dibawah.

Cara Agar Blog BARU Lebih Cepat di INDEX Google


2. Berikutnya klik gambar icon gerigi (pengaturan yang ada di sebelah kanan atas) kemudian pilih  menu Verification Details.

Cara Agar Blog BARU Lebih Cepat di INDEX Google


3. Anda kemudian akan masuk ke halaman Verifikasi. Selanjutnya klik Verify Using different method.

Cara Agar Blog BARU Lebih Cepat di INDEX Google


4. Berikutnya ada beberapa opsi pilihan, untuk blog anda pilih opsi HTML tag.

Disini Sobat akan mendapatkan kode verifikasi yang nantinya Sobat copy pastekan di Blog

Jangan Keluar dari halaman ini ya Sob, karena nanti setelah sobat selesai melakukan pemasangan kode Verifikasi pada Template Blog ( langkah dibawah ini ). Sobat perlu mem-verifikasikannya pada halaman ini….

 5. Copy kode yang Sobat dapatkan diatas dan masukkan/pasang di dalam Template blog.

Caranya :

Masuk ke blog anda, arahkan ke template, Pilih edit HTML, cari kode google-site-verification. Cara masukkan kode lihat gambar dibawah ini.

Cara Agar Blog BARU Lebih Cepat di INDEX Google


6. Selanjutnya klik Simpan pada template anda.

7. Silahkan Sobat kembali pada Langkah nomer 4 tadi, lalu klik Verify

8. Selesai.. artinya kita sudah melakukan prosedur pertama peng-index an.


2. Submit Sitemap Blog

Tetap pada halaman Google Search Console ya Sob..!

1. Pada Dashboard >> Crawl  >> Sitemap

Cara Agar Blog BARU Lebih Cepat di INDEX Google


2. Kemudian lihat pada pojok kanan atas test/add sitemap lalu klik

Cara Agar Blog BARU Lebih Cepat di INDEX Google


Silahkan masukkan salah satu  kode-kode di bawah ini pada kolom yang di sediakan

• sitemap.xml

• feeds/posts/default?orderby=updated

• atom.xml

Kode di atas bisa anda submit satu persatu atau satu saja cukup, tapi untuk hasil lebih baik silakan submit semuanya

3. Klik Test terlebih dahulu untuk memastikan apakah peta situs yang ingin kita kirim (error) atau tidak.

Setelah peta situs yang kita ujicoba ( test ) berhasil dirayapi oleh robot google tidak error, langkah selanjutnya klik Submit

4. Maka anda akan melihat tampilan yang menyuruh anda untuk merefresh halaman, klik pada “refresh the page”.

Sampai disini Sobat sudah sukses mengirim peta situs (sitemap) blog. Google akan menunda sementara waktu pengindex-an. Waktunya kurang lebih 24 jam sejak disubmit (didaftarkan). Namun dari pengalaman penulis, jika jumlah posting (artikel) blog masih sedikit (kurang dari seratus), waktu yang dibutuhkan paling lama hanya beberapa  jam. Artinya Langkah ke 2 cara peng-index an sudah Sobat lalui.

3. Submit Artikel Blog

Silahkan Sobat masuk di Submit URL

Cara Agar Blog BARU Lebih Cepat di INDEX Google

Silahkan Sobat masukkan link URL artikel Sobat misalnya seperti ini 

“https://crepictdesign.blogspot.co.id/2017/08/mengatasi-artikel-tidak-terindex-oleh.html

Jangan terlalu sering malakukan Submit URL (PING) Blog kita,untuk  mengantisipasi anggapan spam oleh mesin pencari. Sebenarnya kita sudah melakukan 2 prosedur diatas sudah cukup dalam aturan peng-index an Blog.

Cara Setting robot.txt


The Robot Exclusion Standard, atau sering kita kenal sebagai Robots Exclusion Protocol atau robots.txt protokol, adalah sebuah konvensi untuk mencegah web crawler bekerja sama dengan robot web lain untuk mengakses semua atau bagian dari sebuah website yang jika dilihat secara terbuka.

Robot sering digunakan mesin pencari untuk mengkategorikan dan mengarsip situs web, atau web master untuk mengkoreksi Source code. Dari beberapa artikel yang saya baca, penggunanan robot.txt ini sangat berguna dalam mengoptimalkan SEO blog.

Jika ada halaman yang tidak ingin kita tampilkan kepada publik dan mesin pencari maka kita bisa memanfaatkan fungsi robot.txt ini untuk memblokir halaman tersebut. Blogger sudah mendukung fungsi ini dan ini menunjukkan bahwa blogger semakin memudahkan kita untuk optimasi SEO blog.

1. Silahkan masuk ke Akun Blogger Sobat

2. Dashboard >> Setting >> Search preferences

3. Pada tab perayap dan pengindeksan pilih robot.txt.

Cara Agar Blog BARU Lebih Cepat di INDEX Google

4. Kemudian copy dan pastekan kode dibawah ini ke dalm kotak yang disediakan kemudian tekan “ Simpan perubahan

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://gantinamablogmu.blogspot.com/feeds/posts/default?orderby=UPDATED

 

Silahkan ganti tulisan http://gantinamablogmu.blogspot.com dengan URL Blog Sobat

5. Selesai….

Akhirnya semua tahap peng-index an standart sudah kita lalui, semoga Blog Sobat bisa secepatnya ter-index oleh Google. Semoga bermanfaat…..