G-FRENZY Fast and Responsive Blogger Template 2017

June 23, 2017 Add Comment

G-FRENZY Fast and Responsive Blogger Template 2017

G-FRENZY Fast and Responsive Blogger Template 2017 adalah template yang saya buat dengan model GRID dan akan saya bagikan secara GRATIS !

Di dalam template tersedia tombol Whatsapp share yang memungkinkan penggunjung Anda dapat dengan mudah membagikan posting artikel yang langsung terhubung ke aplikasi Whatsapp. Untuk kolom komentar hanya tersedia Blogger ( versi premium tersedian sistem komentar 3 in 1 , DISQUS,BLOGGER,Facebook ), jika Anda ingin mencobanya silahkan download versi gratis-nya, atau anda juga dapat membeli dengan ketentuan yaitu tanpa ada link credit yang menyertai ( encriypt link designer-nya ).  

Berikut fitur yang ada di dalam template " G-FRENZY " 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 -
Whatsapp 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 DISQUS+Blogger True -

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

Syahnia Fast and Responsive Blogger Template 2017

June 22, 2017 2 Comments
Syahnia Fast and Responsive Blogger Template 2017


Syahnia Fast and Responsive Blogger Template 2017 adalah template yang saya bagikan secara GRATIS dan juga tersedia juga dalam versi PREMIUM

Di dalam template tersedia tombol Whatsapp share yang memungkinkan penggunjung Anda dapat dengan mudah membagikan posting artikel yang langsung terhubung ke aplikasi Whatsapp. Untuk kolom komentar tersedia juga pilihan system komentar diantaranya Facebook, DISQUS dan Blogger, jika Anda ingin mencobanya silahkan download versi gratisnya, atau anda juga dapat membeli dengan ketentuan yaitu tanpa ada link credit yang menyertai ( encriypt link designer-nya ).  

Berikut fitur yang ada di dalam template " Syahnia " 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 -
Whatsapp 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 DISQUS+Blogger True -

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

DHEMI Fast Responsive Blogger Template 2017

June 12, 2017 Add Comment

DHEMI Fast Responsive Blogger Template 2017

DHEMI Fast and Responsive Blogger Template 2017– kira kira beberapa bulan yang lalu saya juga share Denada Fast and Responsive Blogger Template . Dan DHEMI Fast and Responsive Blogger Template adalah template yang saya bagikan secara GRATIS dan juga ada versi PREMIUM-nya dengan design yang sederhana namun tidak mengurangi kesan elegan pada template tersebut.

Di dalam template ini juga saya sertakan tombol Whatsapp share yang memungkinkan penggunjung Anda dapat dengan mudah membagikan posting artikel yang langsung terhubung ke aplikasi Whatsapp. Untuk kolom komentar tersedia juga pilihan system komentar diantaranya DISQUS dan Blogger, jika Anda ingin mencobanya silahkan download versi gratisnya, atau anda juga dapat membeli dengan ketentuan yaitu tanpa ada link credit yang menyertai ( encriypt link designer-nya ).  

Berikut fitur yang ada di dalam template DHEMI 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 -
Whatsapp 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 DISQUS+Blogger True -

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

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.