Meningkatkan Trafik Blog Tanpa Pusing Riset Keyword - Hari ini saya akan membagikan sedikit pengalaman mengenai cara sederhana saya untuk mendatangkan trafik blog tanpa wajib riset keyword, sebenarnya riset keyword itu sangat penting, namun tidak jarang juga orang memakai tools ataupun tutorial lain dalam riset keyword yang akhirnya hasil yang didapat tetap jauh dari harapan.
Langsung saja, tutorial ini telah saya coba dengan memakai satu blog niche dengan topik mengenai Mesin Pompa Air, blog tersebut masih berusia belum genap 3 bulan, sekarang saya tidak menjelaskan lagi mengenai cara optimasi blog umur sebulan langsung page one SERP Google, jadi kita langsung saja ya.
Selanjutnya tinggal bagaimana cara kita untuk mempertahankan posisi blog dan memperluas jaring untuk menangkap trafik dengan cara menambah konten yang mempunyai kekuatan atau potensi akan banyak di cari oleh pengunjung dengan syarat, blog harus menyediakan kolom komentar yang bisa menampung berbagai opini atau permasalahan dari pengunjung blog / visitor.
Cara yang saya lakukan yaitu dengan membuat postingan baru yang lebih tepatnya meruapakan jawaban dari pengunjung blog pada kolom komentar, cara ini terbukti sangat jitu karena meskipun tanpa riset keyword, kita bisa mengetahui apa yang sebenarnya di butuhkan oleh visitor sehinggat mereka mencarinya pada SERP Google.
Kemudian hal yang dapat membuat posisi blog semakin kuat adalah memikirkannya saja dengan logika, visitor organik bisa sampai pada satu konten dalam blog sobat, dan meninggalkan komentar yang ingin mendapatkan sebuah solusi, maka bisa di artikan bahwa ini adalah sebuat kesempatan bagi anda untuk mencuri perhatian visitor yang haus informasi.
Kemudian jangan terlalu lama menunggu komentar tersebut, ada baiknya langsung menjawab pertanyaan pengunjung dengan membuat posting terlebih dahulu kemudian barulah merespon pertanyaan pengunjung pada kolom komentar bahwa anda telah membuat jawaban dari pertanyaan pengunjung tersebut dengan memberikan link yang mengarah pada postingan baru anda.
Setelah saya amati, ternyata bukan hanya pengunjung yang bertanya saja mengikuti link yang di berikan tadi, namun setiap pengunjung yang memiliki permasalahan yang sama dan tiba pada komentar sebelumnya, mereka juga akan mengikuti link yang ada pada kolom komentar, jika dia merasa itu adalah jawaban yang sedang mereka cari.
Dengan menggunkan cara ini, blog saya yang masih berumur 2 bulanan saat ini sudah memperoleh trafik yang cukup meskipiun pada awalnya hanya dengan beberapa artikel saja, selanjutnya pengunjunglah yang akan memberikan info, bahwa kita harus membuat sebuah konten baru yang mana konten tersebut berpeluang untuk mendatangkan trafik tanpa perlu riset keyword dan dengan mencari kata kunci yang rumit.
Sekali lagi saya jelaskan, tips ini hanya bisa sukses pada blog yang memiliki satu niche, inilah akhir tips Meningkatkan Trafik Blog Tanpa Pusing Riset Keyword, semoga bermanfaat.
Minggu, 17 Januari 2016
Senin, 11 Januari 2016
Script Sampah Responsive Blogger Template
Script Sampah Responsive Blogger Template - Template ini merupakan template gratis yang sudah di modifikasi dari template nubie banget Arlina design, Script Sampah Responsive Blogger template hehe, bisa jadi ini template clone, saya tidak menjual template ini, lagian juga buat apa di jual, template ini juga saya pakai untuk blog Script Sampah, sebelumnya template ini sudah pernah saya share, dan melihat komentar dari blogger lain yang rata-rata katanya keren, responsive dan cocok banget untuk main AdSense sebagai template High CTR, jadi buat sobat yang ingin main AdSense silahkan memakai template ini saja.
Untuk demo template silahkan lihat pada blog ini.
Untuk panduan setelan template dapat di lihat dalam file Panduan yang sudah saya sediakan.
Berikut ini adalah fitur-fitur yang tersedia dalam template Script Sampah Responsive Blogger Template ini.
Feature | Availability |
---|---|
Responsive | True |
SEO Friendly | True |
Mobile Friendly | True |
User Friendly | True |
AdSense Ready | True |
Disqus Comment System | True |
2 Column | True |
Responsive Ad Slot | True |
Back Top Top Button | True |
Shortcodes | True |
Prism Syntax Highlighter | True |
And More |
Untuk demo template silahkan lihat pada blog ini.
Untuk panduan setelan template dapat di lihat dalam file Panduan yang sudah saya sediakan.
Dilarang keras untuk menghapus / mengedit / memalsukan link kredit pembuat Template, hargailah karya orang lain.
Jumat, 08 Januari 2016
Cara Root Asus Zenfone 4 Lollipop
Cara Mudah Root Asus Zenfone 4 Lollipop - Sudah saatnya untuk masuk ke dunia android, sebelumnya saya hanya posting tutorial blogger hehe, jadi sekarang saya akan menshare bagaimana cara Root Asus Zenfone 4 Versi Lollipop, jadi bagi para pengguna Asus Zenfone 4 yang ingin melakukan Root pada Devicenya di haruskan untuk menggunakan versi OS Lollipop dengan versi Firmware WW/CHT 7.3.3 - 7.4.4 Jika Asus Zenfone 4 sobat tidak menggunakan firmware tersebut maka saya tidak menjamin kalau tutorial Root Asus Zenfone 4 ini working, maka dari itu saya sarankan untuk segera update firmware dengan versi yang saya sebutkan di atas, ohh iya di tutorial Root Asus Zenfone 4 Lollipop ini kita akan menggunakan PC, jadi untuk root Zenfone 4 Tanpa PC masih belum saya temukan caranya.
Setelah semua bahan di atas ter download, sekarang silahkan sobat mengikuti cara rootnya di bawah ini.
2. Kemudian install juga IntelAndroidDrvSetup 1.9.0.
3. Masukkan SuperSU-autoroot ke SDCard atau memori eksternal Asus Zenfone 4 sobat.
4. Aktifkan USB Debugging.
5. Matikan Asus Zenfone 4, masuk ke mode Droidboot (Tekan kemudian tahan tombol Volume Up + Power) sampai muncul logo Android menggunakan helm kuning.
6. Hubungkan kabel data Zenfone 4 ke PC.
7. Buka CMD, Ketik "fastboot flash update updateCWM_6.0.2.8_fix_wipe.zip" jangan sampai salah penulisannya, kemudian tekan enter.
8. Asus Zenfone 4 sobat akan restart otomatis masuk ke mode CWM.
9. Pada mode CWM silahkan pilih yang kedua dari atas.
10. Pilih Update SDCard > SuperSU-autoroot.zip.
11. Pilih Yes, setelah itu silahkan pilih Reboot.
12. Jika muncul pilihan baru, silahkan pilih No.
13. Selesai.
Berikut Tutorial Cara Mudah Root Asus Zenfone 4 Versi Lollipop.
Silahkan sobat siapkan dulu bahan-bahan untuk root Asus Zenfone 4.
Proses Root Asus Zenfone 4 Lollipop
1. Pertama, silahkan sobat extract adb-fastboot.win.rar.2. Kemudian install juga IntelAndroidDrvSetup 1.9.0.
3. Masukkan SuperSU-autoroot ke SDCard atau memori eksternal Asus Zenfone 4 sobat.
4. Aktifkan USB Debugging.
5. Matikan Asus Zenfone 4, masuk ke mode Droidboot (Tekan kemudian tahan tombol Volume Up + Power) sampai muncul logo Android menggunakan helm kuning.
6. Hubungkan kabel data Zenfone 4 ke PC.
7. Buka CMD, Ketik "fastboot flash update updateCWM_6.0.2.8_fix_wipe.zip" jangan sampai salah penulisannya, kemudian tekan enter.
8. Asus Zenfone 4 sobat akan restart otomatis masuk ke mode CWM.
9. Pada mode CWM silahkan pilih yang kedua dari atas.
10. Pilih Update SDCard > SuperSU-autoroot.zip.
11. Pilih Yes, setelah itu silahkan pilih Reboot.
12. Jika muncul pilihan baru, silahkan pilih No.
13. Selesai.
Selamat Asus Zenfone 4 sobat sudah dalam kondisi Root, sekarang sobat bisa memakai Custom Rom yang tersedia untuk Asus Zenfone 4, disini saya tidak menshare Custom Romnya, jadi untuk sobat yang ingin memakai Custom Rom, bisa langsung di Download melalui Grup Facebook Asus Zenfone 4 Indonesia.
Tutorial Cara Root Asus Zenfone 4 Lollipop ini sudah terbukti Work 100%, jadi sobat tidak usah takut HH nya Bootlop.
Demikian tutorial Cara Mudah Root Asus Zenfone 4 Lollipop, selamat mencoba.
Demikian tutorial Cara Mudah Root Asus Zenfone 4 Lollipop, selamat mencoba.
Kamis, 07 Januari 2016
Invision Responsive Blogger Template
Invision Responsive Blogger Template - Template ini merupakan template gratis pertama dari Arlina Design di awal tahun 2016 ini, template ini di adopsi dari premium blogger template New Line yang di bagikan oleh Arlina Design dengan harga IDR 70.000. Versi premium Invision Blogger Template ini sudah di gabung kan pada tempate New Line dengan tambahan 3 style yang berbeda-beda hampir sama seperti Invert Pro kemarin yang terdapat 4 style.
Untuk demo template silahkan klik tombol di bawah.
Untuk panduan setelan template silahkan di lihat pada postingan blog demo Invision Template Documentation.
Feature | Availability |
---|---|
Responsive | Cek |
Google Testing Tool Validator | Cek |
SEO Friendly | Cek |
Mobile Friendly | Cek |
Dynamic Heading | True |
User Friendly | True |
AdSense Ready | True |
Disqus Comment System | True |
2 Column | True |
Responsive Ad Slot | True |
Auto Read More with Thumbnail | True |
Breadcrumbs | True |
About Me Widget | True |
Responsive Dropdown Menu | True |
Back Top Top Button | True |
Shortcodes | True |
And More |
Untuk demo template silahkan klik tombol di bawah.
Dilarang keras untuk menghapus / mengedit / memalsukan link kredit pembuat Template (Arlina Design), hargailah karya orang lain.
Rabu, 06 Januari 2016
Cara Membuat Responsive Simple Sitemap di Blogger
Cara Membuat Responsive Simple Sitemap di Blogger - Sekarang saya akan share bagaimana cara membuat sitemap di blogger, dengan simple sitemap ini sobat tidak menampilkan semua link postingan blog dalam satu halaman, sehingga akses untuk membuka laman sitemap cukup ringan, jadi hanya akan muncul judul artikel dari tiap label yang di klik. Jumlah postingan yang muncul pada saat label di klik jumlahnya dapat di atur sehingga link postingan dari label tidak akan langsung di tampilkan semua, untuk lebih jelasnya silahkan lihat Disini.
Sitemap yang akan kita buat ini sudah responsive karena jika lebar device kecil maka link postingan yang ditampilkan akan ada di bawah labelnya, sehingga tampilannya lebih rapi.
Cara Membuat Responsive Simple Sitemap di Blogger
Pertama silahkan buka blogger > Buat Laman baru > Copy-Paste kode di bawah.
Ganti http://www.script-sampah.com/ dengan http://www.namablogsobat.com/
Sekarang buka Editor Template, Copy-Paste kode di bawah ini tepat di atas kode </style> atau ]]></b:skin>
Silahkan simpan dan lihat hasilnya pada laman Sitemap.
Kalau link postingannya terlalu ke kiri ketika di tampilkan (label di klik) silahkan kurangi margin kirinya pada kode margin-left:-40 pada kode CSS #show-post ul li misalnya menjadi margin-left:-20px intinya untuk ukuran lebih bagus harus disesuaikan dengan template blog sobat.
Demikian tutorial Cara Membuat Responsive Simple Sitemap di Blogger, selamat mencoba.
Sitemap yang akan kita buat ini sudah responsive karena jika lebar device kecil maka link postingan yang ditampilkan akan ada di bawah labelnya, sehingga tampilannya lebih rapi.
Cara Membuat Responsive Simple Sitemap di Blogger
Pertama silahkan buka blogger > Buat Laman baru > Copy-Paste kode di bawah.
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://www.script-sampah.com';cat_numb=12;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(''+cat_name+'',''+(cat_start-cat_numb)+'',''+cat_class+'');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(''+cat_name+'',''+(cat_start+cat_numb)+'',''+cat_class+'');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}</style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(''+cat[i].term+'','1',''+i+'');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"></script>');
</script>
</div>
<div style='clear:both'></div>
Ganti http://www.script-sampah.com/ dengan http://www.namablogsobat.com/
Sekarang buka Editor Template, Copy-Paste kode di bawah ini tepat di atas kode </style> atau ]]></b:skin>
#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}
#show-cat ul{margin:0;border-top:0px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc;}
#show-cat ul li:last-child a{border-bottom:none;}
#show-cat ul li a,#navi-cat a{background:#fff;color:#4d90f0;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:69%;line-height:1.6em}
#show-post ul li{list-style-type:none;margin-left:-40px}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
@media screen and (max-width:768px){
#show-cat{width:35%;}
#show-post{width:59%;}
}
@media screen and (max-width:480px){
#show-cat{width:100%;margin:20px 0}
#show-post{width:100%;}
}
Silahkan simpan dan lihat hasilnya pada laman Sitemap.
Demikian tutorial Cara Membuat Responsive Simple Sitemap di Blogger, selamat mencoba.
Cara Membuat Widget Recent Post dengan Tanggal dan Komentar
Cara Membuat Widget Recent Post dengan Tanggal dan Komentar - Widget Recent Post ini merupakan widget yang memiliki fungsi untuk menampilkan daftar postingan atau artikel yang terbaru pada blog sobat dengan thumbnail gambar serta dengan tambahan keterangan jumlah komentar dan gambar, contohnya seperti gambar di bawah ini, bisa di lihat kalau widget Recent Post terletak di bagian sidebar.
Silahkan sobat terapkan cara di bawah ini untuk membuat widget Recent Post dengan tanggal dan komentar.
Membuat Widget Recent Post dengan Keterangan Tanggal dan Komentar
Silahkan buka Blogger > Tata Letak > Buat Widget baru HTML/Javascript, kemudian Copy-Paste kode di bawah ini.
Sekarang silahkan Simpan dan lihat hasilnya pada blog sobat.
Sesuaikan kembali CSS atau tampilan widget agar sesuai dengan tema blog sobat.
Demikian Tutorial Cara Membuat Widget Recent Post dengan Tanggal dan Komentar, Selamat Mencoba.
Silahkan sobat terapkan cara di bawah ini untuk membuat widget Recent Post dengan tanggal dan komentar.
Membuat Widget Recent Post dengan Keterangan Tanggal dan Komentar
Silahkan buka Blogger > Tata Letak > Buat Widget baru HTML/Javascript, kemudian Copy-Paste kode di bawah ini.
<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXoDXbw7pw079AWfiKyKGCnDReez3Vd5b9O-hKlP8WO04eTwZD2OeJ0GLzS1kgWNjJmirlPC_BlQ18Rm7tVa_thPu8VpoE1361NdeaXU_QeRElLy69yPaR3pxAEeZJVPlDQtcTVXVYCv_D/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts"></script>');
</script>
</div>
rcp_numposts=5; = Ganti angka 5 dengan jumlah postingan yang akan ditampilkan.
var rcp_snippet_length=150; = Jumlah karakter isi artikel yang akan ditampilkan saat hover link judul postingan.
rcp_info='yes'; = Ketik no untuk menyembunyikan keterangan tanggal dan jumlah komentar.
rcp_comment='Comments'; = Nama judul tulisan dari jumlah komentar.
Sekarang silahkan Simpan dan lihat hasilnya pada blog sobat.
Sesuaikan kembali CSS atau tampilan widget agar sesuai dengan tema blog sobat.
Demikian Tutorial Cara Membuat Widget Recent Post dengan Tanggal dan Komentar, Selamat Mencoba.
Minggu, 03 Januari 2016
Cara Membuat Widget Email Subscribe Di Blogger
Cara Membuat Widget Email Subscribe Flat UI Di Blogger - Dengan membuat variasi untuk menata tampilan blog, salah satunya adalah membuat kotak email subscribe di bawah artikel atau postingan maupun dengan Flat UI, Banyaknya tersedia CSS di blog lain untuk membuat widget email subscribe ini.
Sekarang saya akan share cara membuat email subscribe yang keren dan responsive, contohnya silahkan lihat pada gambar di bawah ini, cukup menarik kan, memasang Subscribe ini atau lebih sering kita kenal dengan layanan email yang bisa digunakan oleh pengunjung blog setia yang mengikuti blog yang telah mengupdate artikel terbaru dapat di cek dengan melihat emailnya, sebelum memasang widget ini silahkan daftarkan terlebih dahulu blog anda ke feedburner.
Cara Membuat Widget Email Subscribe Dengan Flat UI Di Blogger
Silahkan buka blogger > Tata Letak > Tambahkan Gadget > Html/Javascript > Copy kode di bawah ini.
Silahkan Simpan, dan lihat hasilnya pada blog anda.
Seperti itulah tutorial Cara Membuat Widget Email Subscribe Flat UI Di Blogger, selamat mencoba.
Sekarang saya akan share cara membuat email subscribe yang keren dan responsive, contohnya silahkan lihat pada gambar di bawah ini, cukup menarik kan, memasang Subscribe ini atau lebih sering kita kenal dengan layanan email yang bisa digunakan oleh pengunjung blog setia yang mengikuti blog yang telah mengupdate artikel terbaru dapat di cek dengan melihat emailnya, sebelum memasang widget ini silahkan daftarkan terlebih dahulu blog anda ke feedburner.
Cara Membuat Widget Email Subscribe Dengan Flat UI Di Blogger
Silahkan buka blogger > Tata Letak > Tambahkan Gadget > Html/Javascript > Copy kode di bawah ini.
Subscribe Here
Sign up here with your email address to receive updates from this blog in your inbox.
Silahkan Simpan, dan lihat hasilnya pada blog anda.
Seperti itulah tutorial Cara Membuat Widget Email Subscribe Flat UI Di Blogger, selamat mencoba.
Jumat, 01 Januari 2016
Cara Membuat Komentar Disqus Menjadi Show Hide
Cara Membuat Komentar Disqus Menjadi Show Hide - Membuat komentar Disqus menjadi Show and Hide pastinya akan membuat kecepatan blog anda menjadi lebih cepat, sebelum menerapkan komentar Disqus menjadi Show Hide, loading blog pasti akan menjadi lambat hal itu terjadi karena script load komentar Disqus yang berat, alternatif lainnya untuk mengatasi loading blog yang lambat karena komentar Disqus silahkan baca Cara Men-Defer Komentar Disqus Di Blogger.
Cara membuat komentar Disqus menjadi Show Hide maksudnya adalah memuat komentar Disqus dengan Onclick Event, jelasnya kita akan membuat sebuah tombol yang apabila di klik akan memuat kolom komentar Disqus, contoh nya ada pada blog ini silahkan cek di bawah artikel ini terdapat tombol Load Comment.
Pertama login ke blogger > Template Editor > Cari kode di bawah ini.
Tambahkan kode di bawah ini tepat di bawah kode di atas.
Selanjutnya tambahkan kode di bawah ini tepat sebelum tag </body>.
Sekarang tambahkan CSS di bawah ini sebelum tag </style> atau ]]></b:skin>.
Selanjutnya cari kode di bawah.
Tambahkan kode di bawah ini tepat di atas kode yang di cari.
Dan yang terakhir adalah untuk menampilkan jumlah komentar Disqus di halaman Home dan Postingan, caranya adalah dengan menambah kode di bawah ini pada post meta atau post info sesuai dengan yang digunakan pada template.
Demikian Tutorial Cara Membuat Komentar Disqus Menjadi Show Hide, Selamat mencoba
Cara membuat komentar Disqus menjadi Show Hide maksudnya adalah memuat komentar Disqus dengan Onclick Event, jelasnya kita akan membuat sebuah tombol yang apabila di klik akan memuat kolom komentar Disqus, contoh nya ada pada blog ini silahkan cek di bawah artikel ini terdapat tombol Load Comment.
Cara Membuat Komentar Disqus Menjadi Show Hide
Jika blog sudah terpasang Widget Disqus dan script yang berkaitan dengan Disqus (CSS juga termasuk) silahkan di hapus dulu, agar tidak ada kesalahan setelah menerapkan tutorial ini, kemudian pastikan di dalam template blog sudah ada link fontawesome.
Pertama login ke blogger > Template Editor > Cari kode di bawah ini.
<b:includable id='comments' var='post'>
.......
.......
.......
</b:includable>
Tambahkan kode di bawah ini tepat di bawah kode di atas.
<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";
}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
</script>
</b:includable>
Selanjutnya tambahkan kode di bawah ini tepat sebelum tag </body>.
Ganti SCRIPTSAMPAH dengan username Disqus anda
Sekarang tambahkan CSS di bawah ini sebelum tag </style> atau ]]></b:skin>.
/* Disqus Comments */
#comments{display:none;}
.post-comment-link {visibility:hidden;}
#disqus_thread {background:#fff;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;}
#disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px solid #999;transition:all .3s}
#disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute}
#disqusshow:hover,#disqusshow:active{color:#f8695f}
Selanjutnya cari kode di bawah.
<div class='comments' id='comments'>
Tambahkan kode di bawah ini tepat di atas kode yang di cari.
<div id='disqusshow' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>
Dan yang terakhir adalah untuk menampilkan jumlah komentar Disqus di halaman Home dan Postingan, caranya adalah dengan menambah kode di bawah ini pada post meta atau post info sesuai dengan yang digunakan pada template.
<a expr:href='data:post.url + "#disqus_thread"' title='Comments Count'> Comments</a>
Simpan Template, silahkan cek hasilnya, Demo membuat komentar Disqus Show Hide bisa langsung dilihat di bawah artikel ini.
Cara Men-Defer Komentar Disqus Untuk Blogger
Cara Men-Defer Komentar Disqus Untuk Blogger - Men-defer komentar Disqus pastinya akan mengoptimalkan blog dan meringankan loading blog anda. Men-Defer bisa disebut meringankan script, script yang digunakan Disqus membuat kecepatan blog anda menjadi lambat, jadi dengan men-defer komentar Disqus ini akan membuat blog anda menjadi lebih ringan, Sebelum men-defer komentar Disqus pastinya harus sudah memasang komentar Disqus pada blog anda, jika sudah sekarang saya akan menjelaskan bagaimana cara men-defer atau meringankan komentar Disqus yang akan mengoptimalkan blog anda.
Silahkan anda ganti "Username Disqus Anda" dengan username Disqus yang digunakan untuk blog.
Kode diatas sudah di Hosting, sekarang ganti kode Javascript Disqus anda yang biasanya terletak di atas kode </body> dengan kode dibawah ini.
Silahkan ganti "URL HOSTING KODE DISQUS" dengan URL hosting yang di atas tadi.
Selesai, silahkan anda rasakan kecepatan blog anda yang terpasang komentar Disqus yang sebelumnya lambat sekarang menjadi cepat karena telah menerapkan script diatas, menerapkan script ini juga dapat meningkatkan nilai SEO blog anda, Demikian Tutorial Cara Men-Defer Komentar Disqus untuk Blogger, selamat mencoba dan semoga bermanfaat.
Cara Men-Defer Komentar Disqus di Blogger
Pertama anda harus men-Hostingkan kode dibawah ini.var disqus_shortname="USERNAME Disqus Anda";
var disqus_url = disqus_blogger_current_url;
(function () {
"use strict";
var get_comment_block = function () {
var block = document.getElementById('comments');
if (!block) {
block = document.getElementById('disqus-blogger-comment-block');
}
return block;
};
var comment_block = get_comment_block();
if (!!comment_block) {
var disqus_div = document.createElement('div');
disqus_div.id = 'disqus_thread';
comment_block.innerHTML = '';
comment_block.appendChild(disqus_div);
comment_block.style.display = 'block';
var dsq = document.createElement('script');
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);
}
})();
Silahkan anda ganti "Username Disqus Anda" dengan username Disqus yang digunakan untuk blog.
Kode diatas sudah di Hosting, sekarang ganti kode Javascript Disqus anda yang biasanya terletak di atas kode </body> dengan kode dibawah ini.
Silahkan ganti "URL HOSTING KODE DISQUS" dengan URL hosting yang di atas tadi.
Selesai, silahkan anda rasakan kecepatan blog anda yang terpasang komentar Disqus yang sebelumnya lambat sekarang menjadi cepat karena telah menerapkan script diatas, menerapkan script ini juga dapat meningkatkan nilai SEO blog anda, Demikian Tutorial Cara Men-Defer Komentar Disqus untuk Blogger, selamat mencoba dan semoga bermanfaat.
Langganan:
Postingan (Atom)