Cara Mengganti Next Previous Halaman Navigasi Dengan Judul Postingan

May 10, 2017 Add Comment
Cara Mengganti Next Previous Halaman Navigasi Dengan Judul Postingan

Next Previous navigasi halaman bawaan atau defaut-nya Blogger pada umumnya memiliki tampilan kurang menarik, dengan format standart Previous – Home – Next. Namun Anda bisa mengganti next previous tersebut dengan judul artikel. Tidak hanya sekedar terlihat menarik namun bisa menjadi salah satu cara untuk meningkatkan pageview blog karena pengunjung bisa langsung mengetahui artikel halaman sebelum atau sesudahnya dari halaman yang sedang dibacanya. Jika tertarik tentu pengunjung akan menuju halaman selanjutnya atau sebelumnya.

Template default Blogger memiliki custom pager yang sebelumnya harus kita hapus terlebih dahulu sebelum menggantinya dengan judul posting.

Jika Anda tertarik untuk mencoba mengganti next previous navigasi halaman dengan judul postingan, silahkan ikuti langkah-langkahnya di bawah ini.

1. Silahkan BACKUP template Anda terlebih dahulu sebelum melakukan perubahan pada kode template Blog.

2. Silahkan Anda cari kode bawaan custom pager pada template Anda, biasanya seperti ini atau mirip :

 #blog-pager-newer-link{float:left;font-size:100%;border-right:1px solid #eee;}
#blog-pager-older-link{float:right;font-size:100%;border-left:1px solid #eee;}
.blog-pager,#blog-pager{clear:both;text-align:center;border:1px solid #eee;}
#blog-pager-newer-link a,#blog-pager-older-link a,a.home-link{color:#666;transition:all .3s ease-in-out}
#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover{color:#1F5CA8}
a.blog-pager-older-link,a.blog-pager-newer-link,a.home-link{display:block;padding:8px 20px;transition:all .3s ease-in-out;}
a.home-link{font-size:140%;}
#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover,a.home-box:hover,.mobile-desktop-link a.home-link:hover{color:#1F5CA8;}
.mobile-desktop-link a.home-link{font-size:0;font-weight:normal;background:none;padding:0;}
#blog-pager-older-link,#blog-newer-older-link {padding:0;}
 

Silahkan Anda hapus, kemudian tekan Save. Langkah diatas adalah menghapus kode Custom Pager bawaan Template.

Cara Mengganti Next Previous Halaman Navigasi Dengan Judul Postingan


1. Langkah Pertama

Silahkan simpan kode CSS di bawah ini di atas  kode </head> atau dibawah kode <style type='text/css'>. Jika sebelumnya Anda pernah memodifikasi tombol next previous halaman postingan, silahkan hapus kode CSS untuk memodifikasi next previous tersebut.

 
/* CSS Halaman Navigasi */
.halaman {background:#ecf0f1;padding:10px 0;margin:20px 0 auto;}
.halaman-kiri{width:50%;float:left;margin:0;text-align:left;color:#bbb;transition:all .3s ease-out;}
.halaman-kanan{width:50%;float:right;margin:0;text-align:right;color:#bbb;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#ddd!important;}
.halaman-kiri a,.halaman-kanan a{color:#999;}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#666!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family: 'Roboto Condensed',Helvetica,Arial,sans-serif;font-weight:400;background:none;text-decoration:none}
.current-pageleft{padding:0 0 0 15px;}
.current-pageright{padding:0 15px 0 0;}
.pager-title-left{font-family: 'Poppins',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;transition:all .3s ease-out}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:5px 10px 10px}
#blog-pager-newer-link{float:left;padding:0 0 0 15px;}
#blog-pager-older-link{float:right;padding:0 15px 0 0;}
.blog-pager,#blog-pager{clear:both;text-align:center}
 

2. Langkah Kedua
Silahkan cari kode seperti di bawah ini

 <b:includable id='nextprev'>
..............................
..............................
..............................
</b:includable> 

Jika ketemu, silahkan ganti sehingga tampak  seperti di bawah ini.

 <b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><i class='fa fa-arrow-circle-o-left'/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><i class='fa fa-arrow-circle-o-right'/></a>
      </span>
    </b:if>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><i class='fa fa-home'/></a>
    </div>
    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><i class='fa fa-home'/></a>
    </div>
  </div>
  </b:if>
</b:if>
  <div class='clear'/>
</b:includable> 

3. Langkah Ketiga
Kemudian silahkan cari kode seperti di bawah ini

 <b:includable id='post' var='post'>
..............................
..............................
..............................
</b:includable> 


Silahkan simpan kode di bawah ini tepat di atas penutup kode di atas </b:includable>. Ini untuk memunculkan post navigasi di atas komentar atau di bawah postingan.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
        <span class='pager-title-left'>Next</span><br/>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; Prev Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><span class='pager-title-left'>Latest</span></span>
    </b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <span class='pager-title-left'>Previous</span><br/>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>First</span></span>
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>
</b:if>
</b:includable> 


4. Langkah Keempat
Silahkan cari kode di bawah ini

 <b:include name='nextprev'/> 


Jika sudah ketemu, coba perhatikan kode  yang sama seperti ini <!-- navigation -->
Kemudian gantikan dengan kode di bawah ini mulai dari <!-- navigation -->. Ini untuk navigasi halaman di bawah komentar.

 <!-- navigation -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
        <b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
    </b:if>
    </b:if> 


5. Langkah Kelima ( terakhir )
Silahkan simpan kode javascript di bawah ini di atas kode </body>

 <b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//Pager by crepictdesign.blogspot.co.id
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>
</b:if> 



Simpan template Anda, Selesai dan Selamat mencoba..
Jangan lupa share ya Sob….!!!!

Cara Memasang Prism Syntax Highlighter Pada Posting Blog

May 02, 2017 Add Comment
Cara  Memasang Prism Syntax Highlighter Pada Posting Blog

Asslamualaikum Wr,Wb, Kali ini CREPICTDGZ akan berbagi tips Cara  Memasang Prism Syntax Highlighter Pada Posting Blog yang tak hanya tampak menarik namun juga profesional , Prism Syntax Highlighter ini adalah sebuah fitur yang memang dibuat bagi sobat yang ingin berbagi script atau kode terkait pebuatan widget atau hanya ingin berbagi kode saja.

Prism Syntax Highlighter berupa border teks kode (Pre Code) yang umumnya digunakan sebagai sarana berbagi kode script seperti HTML, CSS, JavaScript, JQuery.Fitur ini memberikan kesan yang menarik,simple,clean( bersih ) .

Untuk DEMO Sobat bisa langsung lihat Prism Syntax Highlighter yang juga saya gunakan seperti dibawah ini,jadi DEMO-nya adalah yang saya gunakan seperti dibawah ini.


Memasang Prism Syntax Highlighter Pada Posting Blog


1. Pertama buka Blogger Sobat.
2. Kemudian klik "Theme/Tema" dan masuk ke "Edit HTML".
3. Jika sudah, masukan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau dibawah </style> atau dibawah model kode seperti ini <style type='text/css'> :

/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}

4. Lalu Sobat masukan kembali kode di bawah ini tepat diatas kode </body>.

 <script src='https://rawgit.com/usman-kurniawan/crepict/master/crepictprism.js' type='text/javascript'/>
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
<script type="text/javascript">
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>


5. Terkahir Sobat "Simpan Template".

6. Tahapan penerpan script atau kode Prism Syntax Highlighter sudah selesai, saatnya menerapkannya pada posting blog atau artikel, Yang Sobat perlu perhatikan pertama buka "Entri Baru" dan pilih menu " HTML" dan bukan “ Compose “, dan masukan script di bawah ini sesuai keinginan.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

7. Jika sudah Sobat bisa pilih menu "Compose" untuk melihatnya atau Sobat bisa langsung klik Pritinjau.

8. Selesai dan lihat hasilnya.

Demikian tips " Cara  Memasang Prism Syntax Highlighter Pada Posting Blog " semoga dapat bermanfaat bagi Sobat semuanya. Jika ada pertanyaan seputar tutorial diatas Sobat bisa isi pada kolom komentar yang tersedia atau Contact Admin..

Terimah Kasih sudah mengunjungi…

Denada Fast and Responsive Blogger Template

March 31, 2017 Add Comment
Denada Fast and Responsive Blogger Template

Denada Fast and Responsive Blogger Template – Template ini adalah template yang pertama kali saya bagikan dan sebenarnya bukan design template yang pertama, beberapa design yang saya buat penggunaan hanya sebatas teman rekan dan kenalan dan tidak saya publikasikan atau share. Saya masih memiliki banyak material design yang belum tersentuh 100%. Namun untuk yang satu ini DENADA Fast and Responsive Template sengaja saya bagikan gratis ( belum ada versi premiumnya ) namun tidak mengkesampingkan secara kwalitas.  

Berikut fitur yang ada di dalam template Denada ini :
Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
SEO Friendly True Cek
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 -
Responsive Dropdown Menu True -
Smooth Back to Top True -
Custom Subscribe Box Widget True -
Shortcodes True -
Unlimited Page Numbered True -
Comments System True Blogger
Semoga bermanfaat.. Jangan lupa share ya Sob !!! 

Memahami Kelebihan dan Kekurangan Menggunakan SSL/HTTPS

March 30, 2017 Add Comment
Memahami Kelebihan dan Kekurangan Menggunakan SSL/HTTPS


Mengapa Google menyarankan setiap developer menggunakan SSL/HTTPS ? Sebagai developer, Kita mendengar banyak pertanyaan,seperti “ Mengapa harus menggunakan SSL/HTTPS ? dan Apa ada nilai lebih yang akan kita peroleh ?”. 

Pertanyaan ini sudah umum kita dengar bagi siapapun yang terlibat dalam dunia web/blog. Untuk dimengerti. saja, SSL merupakan shiled ( tameng dari web/blog ) dari keamanan di Internet dan juga melindungi setiap informasi sensitif sepanjang trafik data di Internet. Hal Ini akan menjaga internet dari serangan hacker dan memberi banyak manfaat langsung kepada kita dan yang paling penting adalah pelanggan atau pengunjung Web/Blog.

Manfaat Menggunakan SSL/HTTPS

Yang menjadi alasan utama menggunakan SSL adalah menjaga informasi sensitif selama dalam proses pengiriman data melalui Internet  dengan cara dienkripsi, sehingga hanya penerima pesan data yang dipahami dari hasil enkripsi. Artinya informasi yang kita kirimkan di Internet membutuhkan proses perjalanan dari komputer ke komputer sebelum sampai ke server tujuan. Komputer lain yang ada diantara lalu lintas kita dan server dapat melihat semua data yang bersifat privacy ataupun rahasia seperti Kartu Kredit, username dan passwords, dan informasi sensitive lainnya jika hal ini tidak dienkripsi melalui  SSL/HTTPS. Ketika SSL digunakan, informasi menjadi tidak terbaca oleh siapapun kecuali server yang dituju saat mengirim informasi. Keuntungannya menjadi lebih jelas bahwasannya penggunaan SSL ini melindungi pencurian informasi data penting oleh hacker.

(Authentication) Ontentikasi informasi yang dikirim ke server

Selain karena proses enkripsi data yang dikirim, SSL/HTTPS juga meng- authentication. Maksudnya informasi dapat lebih pasti dalam proses pengirimannya ke server yang benar-benar valid dan tidak nyasar ke servernya hacker . Ini amat sangat penting ? Pengunjung Blog atau pengguna akan lebih sering dalam mengirimkan informasi yang melewati beberapa komputer dan tidak menutup kemungkinan ada dari developer lain yang berpura-pura menjadi Web/Blog Anda dan ini adalah hal umum sebagai cara mengelabui pengguna untuk mengirimkan informasi penting ke server kriminal. Hal inilah yang harus kita hindari dengan menggunakan SSL/HTTPS yang disediakan gratis oleh Google.

Jika itu gratis dari Google kenapa ga’ kita manfaatin ?

Untuk saat ini memang SSL/HTTPS diberikan gratis oleh Google hanya untuk domain gratisnya saja atau hanya pada platform blogspot.com. Dan untuk domain berbayar Anda harus merogoh kocek sendiri untuk membeli sertifikat dari penyedia SLL.

Mengapa menggunakan SSL ?

Google sudah menjelaskan bahwa hal ini untuk meningkatkan kepercayaan pelanggan atau pengguna kepada Web/Blog yang Anda kelola. Browser akan memberikan isyarat secara visual, biasanya tampilan berbentuk ikon kunci pada address bar yang berwarna hijau sebagai idetintas untuk memastikan kepada pengunjung Web/Blog bahwa pengguna/pengunjung berada pada koneksi yang aman. Hal ini berarti pengunjung akan lebih mempercayai Web/Blog yang Anda kelola ketika pengguna melihat tanda kunc berwarna hijau, jika Web/Blog Anda adalah Blog dengan basic bisnis online, penggunaan SSL/HTTPS ini menjadi mutlak Anda digunakan !!!.

Anda sudah membangun sebuah  kepercayaan kepada pengguna yang bertujuan untuk menanamkan rasa lebih percaya kepada Web/Blog yang sedang Anda kelola.

PCI Compliance

Hal ini juga sangat penting untuk mengetahui bahwa Anda mengambil informasi kartu kredit pengguna/pengunjung dari Web/Blog yang Anda kelola kecuali Anda lulus audit tertentu seperti PCI Compliance yang memerlukan sertifikat SSL yang tepat.

Cuma yang satu ini umumnya digunakan pada domain berbayar dengan membeli SSL/HTTPS kepada penyedia yang terpercaya seperti SIMANTEC dan lain sebagainya. Untuk platform blogspot Admin belum ada informasi tentang hal ini jika domain blogspot digunakan sebagai Web/Blog ber-basic bisnis online untuk mengambil informasi yang berkaitan dengan kartu kredit pengguna/pengunjung.

SSL/HTTPS melindungi dari bentuk pencurian data dalam bentuk penipuan (phising) ?

Email penipuan yang dikirim oleh hacker yang mencoba menduplikasi Web/Blog yang Anda kelola. Email biasanya memuat link yang men-direct ( mengarah langsung ) kepada Web Si Hacker lalu melakukan serangan ditengah jalan dengan menggunakan nama domain Anda. Sertifikasi SSL/HTTPS yang pas sangatlah sulit diperoleh para hacker ini membuat hacker tidak akan  bisa sempurna melakukan (phising) meniru Web/Blog Anda. Indikatornya akan membedakan jelas bagi pengguna atau pengunjung Web adalah ikon kunci berwarna hijau.

Contoh yang lebih nyata ketika kita membuka situs bank BCA atau bank lain. Jika tanpa ikon kunci berwarna hijau di pojok kiri atas address bar, jangan coba coba mengakses situs tersebut. ya ! sebelum Anda gigit jari dengan hilangnya uang direkening Anda disebabkan pencurian informasi oleh hacker seperti PIN atau informasi Kartu Kredit dan lain sebagainya.

Jika Web/Blog Anda menggunakan SSL/HTTPS berarti pengguna akan jauh lebih kecil kemungkinannya untuk terperangkap kedalam serangan phising, karena pengguna/pengunjung Web/Blog Anda akan mencari indikator kepercayaan (trust indicators) di browsernya.

SSL/HTTPS dan Kekurangannya

Untuk sisi kekurangan ini sengaja saya membahasnya bukan dari sisi finansial dengan membeli sertifikasi SSL/HTTPS bagi pengguna domain berbayar.

Saya akan membahasnya dari sisi performa yang yang umum dianggap sebagai kelemahan untuk SSL/HTTP ( Jika Web Anda sebelumnya tergolong Fast loading ). Karena informasi yang Anda kirim harus melewati proses enkripsi lebih dahulu pada server, ini membutuhkan sumber daya tambahan pada server dimana informasi yang Anda kirim mesti di-encrypt oleh server.Performa ini banyak disebabkan oleh campur aduknya link direct yang ada didalam template,campur aduk antara http dan https, umumnya link gambar atau link pihak ke tiga.

Memahami Kelebihan dan Kekurangan Menggunakan SSL/HTTPS


Dengan Anda melihat gambar dan peringatan diatas saya kira Anda sudah mengerti bagaimana cara mengatasi performa blog ketika menggunakan SSL/HTTPS namun secara keseluruhan, kelemahan menggunakan SSL/HTTPS jauh lebih sedikit dibanding dengan keuntungan yang diraih. Sangat penting agar Anda mengirimkan segala informasi sensitif ke semua website dengan menggunakan SSL/HTTPS. Penggunaan SSL/HTTPS akan membantu melindungi pelanggan/pengunjung dan Anda, dan membantu meningkatkan kepercayaan pelanggan terhadap Web yang Anda kelola sehingga Anda dapat lebih banyak trafik.

Cara Lengkap Daftar dan Submit Blog Ke Bing Webmaster

March 26, 2017 Add Comment
Cara Lengkap Daftar dan Submit Blog Ke Bing Webmaster
Cara Lengkap Daftar dan Submit Blog Ke Bing Webmaster - Bing adalah (search engine) sama seperti google namun Bing berdiri dibawah bendera microsoft, Bing atau dulu yang populer sebagai (search engine) YAHOO merupakan kompetitor utama Google sebagai mesin pencari terbesar setelah Google dan Yandex.

Mesin Pencari ini juga terus berkembang meski beberapa kali mengubah nama dari nama sebelumnya Live Search, Windows Live Search, dan MSN Search lalu terakhir menjadi Bing dan mengalami penyempurnaan dengan design search engine yang elegan mulai dari navigasi sampai pencariannya menyerupai tata letak windows 10.

Jika Anda ingin mendaftarkan Blog ke Search engine Bing, Silahkan ikuti tutorial dibawah ini lengkap dengan panduan gambar :

Cara Submit Blog Anda Ke Bing Webmaster

1. Syarat utamanya adalah Anda harus memiliki akun Microsoft atau yang populer disebut hotmail,outlook, jika Anda belum memiliki silahkan Anda mendaftar/regsiter terlebih dahulu, silahkan simak : Cara Daftar Akun Microsoft

2. Setelah Anda mendaftar silahkan masuk ke situs BING WEBMASTER. Lalu klik Sign In dan memasukkan USERNAME akun hotmail Anda.

3. Setelah itu Anda akan dibawah pada halaman My Site, Silahkan masukkan URL Anda.

Cara Lengkap Daftar dan Submit Blog Ke Bing Webmaster

4. Kemudian Anda akan masuk pada halaman Add A Site, ini penting silahkan Anda isikan lengkap semua kolom yang di sediakan. Lalu tekan save

Cara Lengkap Daftar dan Submit Blog Ke Bing Webmaster

Info tambahan :

Untuk URL Sitemap, anda bisa menuliskan seperti dibawah ini,  pilih salah satunya dan sama saja kok fungsinya :

1. http://namabloganda.blogspot.co.id/feeds/posts/default

2. http://namabloganda.blogspot.co.id/atom.xml?redirect=false&start-index=1&max-result=500


5. Kemudian Anda akan dibawah lagi pada halaman script kode verifikasi untuk Blog Anda. Seperti pada gamabar dibawah ini:

Cara Lengkap Daftar dan Submit Blog Ke Bing Webmaster


Jangan keluar dulu dari halaman Bing Webmaster ya…Tahapan ini belum selesai.

Kode di atas yang nantinya akan kita pasang pada Template Blog Anda, bagaimana caranya ? Jangan keluar dari halaman BING Webmaster ( biarkan terbuka saja ). Ok…lanjut

1. Silahkan masuk ke Blogger >> Edit HTML. Lalu simpan kode diatas dibawah kode <head> lalu tekan Save ( Simpan )

Cara Lengkap Daftar dan Submit Blog Ke Bing Webmaster

2. Silahkan Anda masuk ke Situs Bing Webmaster ( lihat gambar no 5 ) lagi lalu tekan Verify. Setelah itu Anda akan dibawah pada halaman seperti pada gambar dibawah ini. 

Namun blog Anda masih dalam status PENDING, jangan kuatir !!! tunggu 2 atau 3 hari dan lihat Blog Anda akan berubah status dari PENDING dan terindex di Bing Search Engine Yahoo.. Selamat

Cara Lengkap Daftar dan Submit Blog Ke Bing Webmaster

Selesai. Proses Daftar dan Submit Blog Ke Bing Webmaster sudah selesai, Semoga bermanfaat..Jangan lupa share artikel ya Sobat.

Cara Terbaru Membuat Akun Email di Hotmail Gratis

March 07, 2017 Add Comment
Cara Terbaru Membuat Akun Email di Hotmail Gratis

Windows Live Hotmail adalah layanan email gratis yang dulu dikenal dengan MSN Hotmail dan dimiliki oleh Microsoft serta merupakan saingan dari Yahoo Mail dan Gmail karena juga memiliki banyak pengguna di internet.

Namun sekarang Microsoft telah menggantinya menjadi outlook.com dengan fitur dan tampilan yang pastinya lebih baik dan juga tidak usah khawatir karena kita masih bisa menggunakan ekstensi @Hotmail.com pada saat mendaftar. Outlook juga terhubung dengan SkyDrive layanan penyimpanan file dan Skype aplikasi webcam yang populer serta bagi pengguna Blog seperti blogger / blogspot, wordpress maupun website yang ingin mendaftarkan / submit ke search engine yahoo / bing webmaster diharuskan mempunyai email ini.

Kali ini CrepictDGZ akan berbagi turorial Cara Terbaru Membuat Akun Email di Hotmail Gratis, Silahkan ikuti tutorial serta langkah langkahnya berikut dibawah ini :

Cara Terbaru Membuat Akun Email di Hotmail Gratis

1. Buka alamat situs https://outlook.live.com lalu klik Sign up seperti pada gambar di atas.

2. Kemudian Sobat akan dibawa pada halaman berikut dibawah ini, lalu isikan lengkap identitas diri.

Cara Terbaru Membuat Akun Email di Hotmail Gratis


3. Setelah di idi lengkap silahkan klik “ Buat Akun / Create Acount “ pada bagian paling bawah. Kemudian Sobat akan di bawah ke halaman seperti dibawah ini, lalu klik ikon panah seperti pada gambar dibawah ini.

Cara Terbaru Membuat Akun Email di Hotmail Gratis


4. Setelah itu Sobat Klik Let’s Go..

Cara Terbaru Membuat Akun Email di Hotmail Gratis

Cara Terbaru Membuat Akun Email di Hotmail Gratis


5. Setelah muncul halaman Email Sobat artinya Akun Hotmail berhasil dibuat. Selamat sekarang Sobat sudah memiliki Akun Windows Live

Catatan :

Akun Windows Live ini bisa Sobat gunakan sebagai alat untuk Daftar dan Verifikasi Website atau Blog Sobat di BING dan Yahoo Webmaster Tools

Demikian tutorial Cara Terbaru Membuat Akun Email di Hotmail Gratis. Semoga bermanfaat, jangan lupa share artikel ya Sob..!!!

Cara Terbaru Daftar dan Memasang Google Analytics di Blog

March 06, 2017 Add Comment
Cara Terbaru Daftar dan Memasang Google Analytics di Blog

Google Analytics adalah Tools atau alat pelacakan Blog/Web yang disediakan oleh Google sebagai parameter serta alat pelacakan lalu lintas pengunjung yang sangat akurat disertai dengan detail laporan.

Pada artikel kali ini saya akan membagikan tutorial Cara Terbaru Daftar dan Memasang Google Analytics di Blog serta alasan-alasan kenapa harus menggunakan Google Analytics pada website atau blog Sobat.

Keuntungan Menggunakan Google Analytics

Seseorang yang memiliki Blog pribadi atau Website berbasis bisnis online hendaknya menggunakan Google Analytics. Berikut adalah beberapa hal yang bisa Anda dapatkan saat menggunakan Google Analytics untuk website/ Blog:

• Untuk mengetahui trafik pengunjung Blog/Website.
• Mendapatkan informasi asal lokasi pengunjung Blog/Web.
• Untuk mengetahui jumlah halaman yang paling banyak dikunjungi.
• Untuk Mengetahui external Link ( situs ) yang mengirimkan lalu lintas ke Blog Sobat
• Mengetahui strategi pemasaran agar mengarah pada lalu lintas ke Web Sobat
• Melihat Artikel paling banyak memiliki kunjungan ( paling populer )
• Sobat dapat memantau laporan lengkap dalam skala Harian, Mingguan, Bulanan bahkan Tahunan

Diatas adalah beberapa keuntungan menggunakan Google Analytics namun masih banyak keuntungan lain yang tidak bisa saya sebutkan satu per satu. Sekarang mari kita lanjutkan dengan tutorial Cara Terbaru Daftar dan Memasang Google Analytics di Blog.


Cara Terbaru Daftar dan Memasang Google Analytics di Blog


1. Silahkan masuk ke Google Analytics

Cara Terbaru Daftar dan Memasang Google Analytics di Blog


2. Kemudian klik SignUp, Setelah itu Sobat akan di arahkan pada halaman seperti dibawah ini :

Cara Terbaru Daftar dan Memasang Google Analytics di Blog

Satu ID Google Analytics ( di bawah satu akun Google ) dapat memiliki hingga 100 account Google Analytics dan dapat menaungi hingga 50 situs serta dapat memiliki hingga 25 views dibawah satu properti situs.

Berikut adalah beberapa penjelasan tentang pemanfaatan ID Google Analytics.

1. Jika memiliki satu Blog, Sobat hanya perlu satu akun Google Analytics dengan satu properti situs.

2. Jika Sobat memiliki dua Blog, misalnya Blog Bisnis dan satunya Blog pribadi. Sobat harus membuat dua penamaan account berbeda “Bisnis” dan satu lagi “Pribadi”. Maksudnya adalah penamaan account website bisnis Sobat di bawah akun Bisnis dan situs Pribadi Sobat di bawah akun Pribadi.

3. Jika Sobat memiliki beberapa Website Bisnis namun kurang dari 50 Sobat dapat menempatkan semua Website Bisnis Sobat di bawah satu akun Bisnis.

4. Jika Sobat memiliki lebih dari 50 Website Bisnis, lebih efisien dengan akurasi data untuk membuat akun di masing masing Web Bisnis.


3. Setelah Sobat mengisi semua informasi yang diminta oleh Google Analytics seperti pada langkah no.2 diatas, Anda akan melihat tampilan seperti dibawah ini.

Cara Terbaru Daftar dan Memasang Google Analytics di Blog

Kemudian Klik “Get Tracking ID” untuk mendapatkan kode ID yang nantinya untuk sinkronisasi di Blog Sobat.

4. Cara Memasang Tracking ID di Blog 

Cara Terbaru Daftar dan Memasang Google Analytics di Blog
Setelah Sobat klik tombol “Get Tracking ID”. Sobat akan dibawah pada halaman popup Term and Condition Google Analytics, lalu klik “ Setuju ( IAccept) “. Kemudian Sobat akan mendapatkan kode Google Analytics-nya.

Cara Terbaru Daftar dan Memasang Google Analytics di Blog


Cara Memasang ID ( lihat gambar pada langkah 4 ) di Blog

1. Masuk akun Blogger Sobat

Cara Terbaru Daftar dan Memasang Google Analytics di Blog


2. Kemudian Klik Setting >> Other

3. Pada kotak no.3 isi dengan kode Tracking ID milik Sobat, lalu Save.


Cara Memasang Script ( lihat gambar pada langkah 4 ) di Blog

1. Masuk akun Blogger Sobat

2. Kemudian Klik Setting >> Theme >> Edit HTML

3. Cari kode </body>, lalu letakkan script tepat diatas kode </body> lalu Save.

Cara Terbaru Daftar dan Memasang Google Analytics di Blog

Demikian tutorial Cara Terbaru Daftar dan Memasang Google Analytics di Blog, Jika ada permasalahan terkait tutorial diatas silahkan tinggalkan komentar pada kotak komentar dibawah posting Blog ini. Jangan lupa share ya Sob….thanks kunjungannya.