Home / Archived For January 2016

Tuesday, January 19, 2016

Cara Mengganti Favicion Blog Dengan Benar

Cara Mengganti Favicion Blogger Dengan Benar - Kali Ini saya akan memberikan info tentang cara mengganti favicion blog dengan benar. yang pertama kamu harus ketahui adalah :

Apa Itu Favicion ?

Favicon adalah singkatan dari Favorite Icon yaitu sebuah gambar icon berukuran 16x16(persegi) yang muncul pada address bar suatu website. Favicon bisa disebut juga sebagai shortcut icon, website icon, URL icon, atau bookmark icon.

Karena Favicion saya masih favicion default atau favicion dari blogger jadi akan berbentuk "B" Dan favicion B ini akan berlaku untuk para blogger yang baru bikin blog.

Supaya agar blog anda kelihatan unik/menarik sobat bisa mengganti atau mengubah favicion sobat dengan favicion milik kalian sendiri.

Berikut adalah cara mengganti favicon blogger :


★1. Pertama sobat harus menyiapkan terlebih dahulu sebuah gambar persegi dengan ukuran tidak lebih dari 100KB. Format gambar bisa apa saja, .JPG, .PNG, atau .ICO.

Sobat bisa membuat gambar tersebut secara manual menggunakan software seperti photoshop atau GIMP. Selain itu bisa juga menggunakan Favicon Generator.

★2. Jika gambarnya sudah siap, sekarang login ke blogger.com > Masuk ke menu “Tata Letak” > Klik “Edit” pada bagian Favicon:
Cara Mengganti Favicon di Blogger dengan Benar

★3. Klik “Choose File” dan pilih gambar favicon yang sudah sobat buat.

Cara Mengganti Favicon di Blogger dengan Benar

★4. Setelah itu tinggal klik tombol “Simpan”

Setelah berhasil memasang favicon di blog, kemungkinan saat sobat cek blog sobat, faviconnya masih tetap berupa logo blogger. Hal tersebut wajar karena pengaruh Cache browser sendiri.

Silakan sobat bisa hapus cache browser untuk melihat perubahan favicon.

Sekian Info dari Nuran-info Semoga Bermanfaat.

Sunday, January 17, 2016

Meningkatkan Trafik Blog Tanpa Pusing Riset Keyword

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.
Meningkatkan Trafik Blog Tanpa Pusing Riset Keyword

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.

Monday, January 11, 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.

Script Sampah Responsive Blogger Template

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 ReadyTrue
Disqus Comment System True
2 Column True
Responsive Ad SlotTrue
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.

Friday, January 8, 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.

Cara Root Asus Zenfone 4 Lolipop

Berikut Tutorial Cara Mudah Root Asus Zenfone 4 Versi Lollipop.

Silahkan sobat siapkan dulu bahan-bahan untuk root Asus Zenfone 4.

Setelah semua bahan di atas ter download, sekarang silahkan sobat mengikuti cara rootnya di bawah ini.

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.

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.

Invision Responsive Blogger Template

Berikut ini adalah fitur-fitur yang tersedia dalam template Invision ini.

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.


Untuk panduan setelan template silahkan di lihat pada postingan blog demo Invision Template Documentation.
Dilarang keras untuk menghapus / mengedit / memalsukan link kredit pembuat Template (Arlina Design), hargailah karya orang lain.

Thursday, January 7, 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

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+=' &ndash; '+(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.

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.

Wednesday, January 6, 2016

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.

Cara Membuat Widget Recent Post dengan Tanggal dan Komentar
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)+"&#133;";};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/AVvXsEgjgS4AgY61RwXHMO-J1R59uZAgyZBs6XPQYPRgN489168iqxIn9Z_1pbTQIDlqpYaJozRwRgyouAWl0KDhvti3DzC7smTAuzYwplhBX5gKu4YS2hwGhRSHzM_wx9tr_Y7HQWRESPd6FbYn/"};}};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.

Monday, January 4, 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 Di Blogger

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.

Saturday, January 2, 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

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 = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</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 + &quot;#disqus_thread&quot;' title='Comments Count'> Comments</a>

Simpan Template, silahkan cek hasilnya, Demo membuat komentar Disqus Show Hide bisa langsung dilihat di bawah artikel ini.

Cara Membuat Komentar Disqus Menjadi Show Hide
Demikian Tutorial Cara Membuat Komentar Disqus Menjadi Show Hide, Selamat mencoba

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.

Cara Men-defer Komentar Disqus Untuk Blogger

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.

Friday, January 1, 2016

Cara Mendeteksi AdBlock dengan Javascript

Cara Mendeteksi AdBlock dengan Javascript - Sobat memasang iklan AdSense di blog kesayagan, namun sobat ingin mengetahui apakah para pengunjung blog sobat menggunakan Plugin AdBlock untuk memblokir iklan Google AdSense maupun iklan lain atau tidak, sobat bisa melakukan caranya untuk mengetahui hal tersebut dengan cara menambahkan kode Javascript pada blog sobat. Adapun cara kerja dari kode Javascript ini adalah mendeteksi Plugin AdBlock secara otomatis apabila si pengunjung atau visitor mengaktifkan plugin atau ekstensi AdBlock di Browser yang mereka gunakan untuk memblockir iklan di blog maupun situs sobat dengan memunculkan sebuah pesan khusus.

Cara Mendeteksi AdBlock dengan Javascript

Script Javascript ini telah mendukung iklan Responsive Google AdSense dengan memanfaatkan selector ins.adsbygoogle kemudian akan otomatis terganti dengan sebuah pesan yang disiapkan apabila AdBlock di Browser pengunjunng blog maupun situs sobat aktif. Script yang akan kita terapkan di blog ini sangat ringan dengan script yang ringan ini pastinya kecepatan loading blog anda tidak akan terpengaruh atau kecepatan loading blog sobat tidak akan lambat karena javascript yang akan kita gunakan ini. Bagi sobat yang ingin menerapkan script anti AdBlock atau pendeteksi AdBlock ini silahkan ikuti caranya sesuai dengan langkah-langkah di bawah ini agar tidak terjadi error nantinya.

Cara Menambahkan Pesan Pendeteksi AdBlock atau Anti AdBlock dengan Javascript

Pertama silahkan buka template editor > Copy script di bawah ini  sebelum kode </body>


Sobat bisa mengganti kata-kata maupun CSS pada script diatas sesuai dengan selera.
Contoh tampilan pesan yang kita terapkan dengan Script diatas.
Cara Mendeteksi AdBlock dengan Javascript
Jika script sudah ditambakan, silahkan sobat simpan template, untuk mengetesnya silahkan install Plugin atau ekstensi AdBlock kemudian aktifkan untuk memastikan apakah script yang kita terapkan di atas sudah berjalan atau tidak. Demikian tutorial tentang Cara Mendeteksi AdBlock dengan Javascript, semoga dengan artikel ini dapat membantu sobat dalam bermain AdSense.
Subscribe to: Posts (Atom)