Cara Mengatasi Leverage Browser Caching Di Blogger

Kecepatan loading suatu web sangatlah penting. Bukan hanya kenyamanan bagi pengunjung namun juga bagi pendapatan serta SEO blog kita. Banyak cara untuk mempercepat loading blog kita, seperti dengan optimasi gambar dengan mengurangi ukuran/compres gambar, minimalisir javascript CSS serta laverage browser caching. Ketiga cara diatas harus anda lakukan supaya kecepatan situs bisa maksimal.

Biasanya kita mungkin melakukan tes kecepatan loading situs dengan menggunakan GTMetrix atau Google PageSpeed Insights . Dan akan muncul data dan masalah yang harus kita selesaikan ,agar situs bisa loading cepat salah satunya adalah laverage browser caching.

Leverage browser caching berfungsi untuk mengatur tanggal kedaluarsa atau usia maksimal header HTTP/HTTPS yang berkaitan langsung dengan kode sumber, seperti javascript, css, dan gambar yang bersifat statis. Sehingga menginstuksikan browser untuk memuat source code yang sudah didownload di penyimpanan internal.

Cara Mengatasi Leverage Browser Caching

Cara mengatasinya cukuplah mudah anda hanya perlu menambahkan beberapa kode pada template blog kalian. Pertama-tama silakan kalian buka Blogger, pilih Tema → Edit HTML. Lalu salin kode dibawah ini dan letakkan diatas kode </head>

<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>

Lalu simpan template. Membutuhkan kurang lebih satu minggu setelah pemasangan untuk merasakan perbedaan yang ada. Kalian bisa mengeceknya nanri di GTmetrix atau Google PageSpeed Insights. Cukup sekian artikel yang bisa saya bagikan semoga bermanfaat.

Cara Membuat Judul Blog Hanya 1 Kata Saja

Bagi kalian yang memiliki judul blog yang panjang dan ingin supaya terlihat lebih rapi maka kalian bisa mencoba cara berikut. Cara berikut ini akan membuat judul blog anda menjadi singkat ,yang pada awalnya panjang 2-3 kata bisa menjadi 1 kata saja. Contoh judul blog : Tips Tutorial Blogging ,maka dengan cara ini akan memotong/menampilkan judul hanya Tips saja.

Meskipun judul blognya panjang sehingga menyebabkan tampilan kurang menarik (padahal judul mengandung keyword) maka kalian bisa mengatasinya hanya dengan 1 kata saja untuk judul. Walaupun saat ini kita bisa mengganti judul/header yang panjang tersebut dengan logo namun tidak ada salahnya untuk mencoba trik ini.

Cara Mengubah Judul Blog Hanya 1 Kata

Untuk caranya sangatlah mudah kalian hanya perlu menambahkan beberapa kode pada template blog kalian. Pertama-tama silakan kalian buka Blogger → Tema → Edit HTML. Salin kode dibawah ini lalu pastekan diatas kode </head>

<script type='text/javascript'>
$(document).ready(function(){var e=$("body").find("#header .title a").eq(0).text().split(" ");$("body").find("#header .title a").eq(0).text(e[0])});
</script>

Sesuaikan kode ID atau Class pada template blog kalian, kode berwarna kuning adalah ID atau Class pada template umumnya.

Lalu silakan simpan template blog kalian dan lihat hasilnya. Oke cukup sekian artikel yang bisa saya bagikan semoga bisa membantu dan bermanfaat.

Cara Monetisasi Video Di Youtube Tanpa Adsense

Youtube sudah mulai ramai jika dibandingkan dengan tahun-tahun lalu. Kini media hiburan bukan hanya bisa didapatkan dengan menonton televisi saja melainkan bisa melalui youtube. Dengan banyaknya budaya vlog atau video blogging pada generasi baru membuat youtube ramai digunakan sebagai media berbagi video vlog dan untuk menonton vlog orang lain.

Menggunakan youtube untuk vlog,membuat channel saluran hiburan bukannya tanpa alasan. Selain untuk media berkreasi, youtube bisa digunakan untuk ladang mencari uang. Dengan banyaknya channel/saluran youtube yang sukses menghasilkan banyak dollar rupiah menyebabkan orang lain tertarik untuk ikut membuat saluran youtube juga.

Namun karena saking banyaknya saluran youtube ,youtube sekarang lebih ketat jika dibandingkan dengan tahun-tahun sebelumnya. Kini supaya video di channel youtube kalian bisa dimonetisasi maka ada syarat-syarat tertentu yang mungkin sulit untuk kita capai. Sampai saluran kalian memenuhi syarat-syarat monetisasi ada baiknya kalian menggunakan alternatif adsense.

Cara Monetisasi Saluran Youtube Tanpa Google Adsense

Akun adsense kena suspent atau bahkan banned? Monetisasi dinonaktifkan oleh youtube? Atau channel youtube kalian masih baru dan belum memenuhi syarat? Jangan cemas karena anda tetap bisa mendapatkan penghasilan dengan alternatif adsense yang tentunya tidak membutuhkan syarat yang muluk-muluk. Walaupun tidak seindah dengan menggunakan adsense namun tidak ada salahnya untuk dicoba. Berikut ini alternatif adsense yang bisa kalian coba gunakan :

1. Adrev

Adrev adalah salah satu jaringan periklan alternatif adsense yang cukup populer. Bagaimana cara kerjanya? Anda hanya perlu menguploud video di saluran youtube kalian yang tentunya kalian tampilkan untuk publik. Adrev akan membantu anda untuk menemukan jaringan periklanan yang akan membayar anda setiao bulan. Selain itu anda akan mendapatkan bimbingan dari mitra khusus terverifikasi youtube.

Baca juga : Video Tutorial Yang Paling Banyak Dicari dan Ditonton Di Youtube

Fitur dan syarat Adrev

• Membutuhkan 500 kunjungan per hari 
• 30%-70% revenue sharing 
• Cocok untuk semua saluran 
• Minimal pembayaran  10$ PayPal
• Tidak ada kontrak

Daftar Adrev disini https://talent.adrev.net

2. Fullscreenmedia

Dengan menggunakan fullscreenmedia anda akan mendapatkan kemudahan dalam mempublikasikan video anda karena fullscreenmedia memiliki tools untuk publish video. Dengan tools ini maka memudahkan kalian dalam menguploud di youtube bahkan di facebook juga. Anda juga bisa membuat gambar mini yang bisa meningkaykan posisi SEO video anda di youtube.

Fitur dan syarat Fullscreenmedia

• 20%-80% revenue sharing 
• Cocok untuk semua saluran 
• Minimal pembayaran 50$ via Paypal 
• Konten asli/tidak melanggar hak cipta 
• Tools & fitur lainnya 
• 2 tahun kontrak

Daftar fullscreenmedia disini https://apply.fullscreen.net

Itu dia 2 alternatif adsense yang layak untuk kalian coba. Apa kalian sudah mencoba salah satunya? Kalau begitu cukup sekian artikel yang bisa saya bagikan semoga bisa membantu dan bermanfaat.

Cara Memasang Tombol Pin It Pinterest DI Gambar Postingan

Ada yang suka main gambar di pinterest? Tertarik untuk memasang share buttonnya di blog kalian. Pinterest merupakan medis sosial yang berisi gambar-gambar. Pinterest ini juga biasa saya gunakan sebagai situs sosial bookmarking saya yang berguna untuk meningkat visitor dan rank/posisi di search engine. Kenapa bisa meningkatkan visitor? Karena saya meletakkan/menyimpang gambar di pinterest berserta keyword-keyword lalu saya melinkannya ke postingan saya. 

Selain situs sosial bookmarking layaknya facebook dan twitter ,pinterest ternyata juga ada share buttonnya yang tentunya dikhususkan untuk membagikan gambar dan foto. Share button ini akan muncul jika kursor pengunjung situs mengenai bagian dari gambar. Tertarik memasang share button pinterest? ikuti saja langkah-langkah dibawah ini.

Cara Menambahkan Share Button Pin It Pinterest

Cara memasang share button ini sangatlah mudah, namun dalam template blog kalian harus sudah terpasang kode jquery library. Jika belum anda bisa memasang kode jquery library berikut diatas kode </body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

Jika sudah silakan salin kodekode share button berikut ini dan pastekan/letakkan diatas kode </head> atau </body>

<script async='' data-pin-color='white' data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js'/>

Kemudian simpan template dan lihat hasilnya. Gimana keren gak? Oke jika sudah sukses maka cukup sekian artikel yang bisa saya bagikan semoga bisa membantu dan bermanfaat.

Cara Mengaktifkan HTTPS Di Blogger Untuk Custom Domain | Gratis

Blogger memberikan fitur baru yang menarik untuk kita bahas dan pakai. Ya fitur itu adalah HTTPS. HTTPS di blogger ini sebenarnya sudah ada sejak lama namun fitur tersebut hanya untuk pengguna domain blogspot dan belum support untuk custom domain. Namun sekarang kita yang sudah melakukan custom domain di blogger bisa merasakan rasanya menggunakan HTTPS/SSL yang tentunya secara gratis.

Namun katanya fitur ini masihlah BETA namun setelah saya menggunakan selama beberapa minggu saya rasa cukup bagus karena gratis itu tadi. Bagi yang tidak berminat menggunakan fitur ini kalian bisa membeli SSL yang berbayar namun sepertinya belum bisa jika digabungkan di blogger atau bisa menggunakan SSL gratis dari cloudflare.

Apakah itu HTTPS? HTTPS (Hypertext Transfer Protocol Secure) merupakan protokol yang menggunakan HTTP pada koneksi terenkripsi dengan keamanan transport-layer. Bisa dikatakan HTTPS adalah versi aman dan bagusnya HTTP. HTTPS berfungsi untuk melindungi data yang dikirim supaya tidak terjadi penyalahan/penyadapan. Lalu apa keunggulan dari menggunakan SSL/HTTPS? Baca juga : Manfaat dan Keunggulan Menggunakan SSL/HTTPS

Cara Mengaktifkan SSL Di Blogger Gratis

Sebelum mengaktifkan HTTPS di blogger pastikan blog anda sudah dilakukan custom domain. Jika blog kalian masih menggunakan domain dari blogger (http://blablabla.blogspot.com) maka anda bisa coba cara berikut untuk mengaktifkan https Cara Mengaktifkan HTTPS di Sub Domain Blogspot

1. Buka Blogger, pilih Setelan → Dasar (Scroll kebawah sampai pada bagian HTTPS)

2. Silakan ubah kata Tidak menjadi Ya pada Ketersediaan HTTPS (Setelah itu akan di refresh dan akan muncul peringatan/tanda seperti gambar dibawah)

Tunggu beberapa jam sampai HTTPS bisa aktif di domain anda (tak perlu cemas karena HTTPS pasti akan tersedia)

3. Supaya pengguna HTTP bisa dialihkan ke HTTPS silakan kalian ubah kata Tidak menjadi Ya pada Pengalihan HTTPS

Selesai HTTPS sudah aktif di blog kalian. Kalian bisa pamerkan HTTPS tersebut pada teman-teman blogger kalian untuk gaya-gayaan wkwk. Cukup sekian tutorial yang bisa saya bagikan semoga bermanfaat.

Cara Mengaktifkan Ads.txt Di Blogger Agar Iklan Bisa Tayang

Siapa yang akhir-akhir ini iklan adsense di situsnya tidak tayang alias blank? Padahal tidak merasa melakukan pelanggaran apapun dan mendapatkan email banned. Tenang saja karena blogger lain juga merasakan apa yang anda rasakan. Takut kalau akun adsense kita di banned google. Santai saja hal itu bisa kita selesaikan.

Pada beberapa hari yang lalu blog ini juga mendapatkan iklan kosong padahal tidak mendapatkan email banned dari google tapi bisa blank. Ternyata adsense sedang melakukan pengembangan melalui ads.txt. Apa itu ads.txt? Ads.txt adalah sebuah inisiasi dari Interactive Advertising Bureau Tech Lab (IAB). Ini adalah cara untuk memudahkan para publisher untuk memberikan akses kepada advertiser/pembeli iklan pada blog kita.

Intinya ads.txt ini gunakan untuk memberikan akses kepada advertiser agar bisa memasang iklan di blog kita dengan lancar jaya. Sebelum-sebelumnya kita publisher memang belum diribetkan ads.txt namun kini kita bisa dengan memudah mengatur/mengedit ads.txt melalui blogger. Bagi kalian yang mendapatkan pesan seperti berikut :

Penghasilan Anda berisiko - Satu atau beberapa file ads.txt Anda tidak berisi ID penayang AdSense. Perbaiki masalah ini sekarang juga untuk menghindari dampak yang serius pada pendapatan Anda.

Anda tidak perlu cemas, mari kita selesaikan dengan segera supaya iklan bisa langsung tayang dan pendapatan anda tidak berkutang. Ikuti saja langkah-langkah dibawah ini ya.

Cara Mengatur Ads.txt Di Blogger

1. Pertama (Mencari id adsense)
Sebelumnya silakan anda catat dulu id publisher adsense anda. Id adsense bisa anda temukan melalui url akun adsense kalian.

Atau juga bisa dengan membuka akun adsense anda, Pilih Setelan → Akun → Informasi akun 

2. Kedua

Jika sudah dapatkan id adsensenya ,silakan kalian Blogger → Setelan → Preferensi Penelusuran → Monetisasi → Ads.txt Kustom 

3. Ketiga

Lalu pilih Ya ,dan masukkan kode berikut ini didalam kolom ads.txt

google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0

Ganti kode berwarna kuning dengan id yang sudah kita cari tadi

Terakhir silakan kalian simpan...selesai.

Tunggu sampai iklan anda tayang kembali, biasanya butuh waktu 12 jam setelah memasang ads.txt. Oke cukup sekian sudah artikel yang bisa saya bagikan semoga bisa membantu dan bermanfaat.

Cara Membuat Tombol Back To Top & Down Di Blogger

Tombol back to top dan back to top ini sebenarnya sama seperti tombol back to top yang biasanya kita jumpai, namun yang berbeda adalah kali ini adanya tombol back to down/back to top button. Tombol ini memiliki peranan penting bagi blog. Terutama bagi kalian yang memiliki artikel yang panjang lebar yang tidak memungkinan menggunalan scroll button. Tombol back to top dan back to top ini juga dinamakan tombol go up dan go down. 

Tombol ini akan membantu pengunjung menelusuri seluruh blog kalian sampai halaman paling bawah yang tidak memungkinkan menggunakan mouse dan scroll button. Namun jika dalam kalian mengandung banyak informasi penting maka pengunjung akan melewatkannya karena akan langsung menuju ke laman paling bawah. Gimana tertarik tombol ini, yuk ikuti langkah-langkah dibawah ini.

Cara Memasang Tombol Go UP & Go DOWN

Tombol back to top dan back to down ini menggunakan font awesome supaya lebih keren dan menarik. Jadi jika kalian belum memasang script font awesome di blog kalian, kalian bisa menyalin kode font awesome dibawah ini dan letakkan ditemplate blog, tepatnya diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

1. Buka Blogger, pilih Tema → Edit HTML

2. Silakan salin kode CSS dibawah ini dan pastekan/letakkan diatas kode </head>

<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#347ec9;color:#fff;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#347ec9;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>

3. Salin kode dibawah ini dan pastekan diatas kode </body>

<ul id='scrollToTop'>
  <li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
  <li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
//]]>
</script>

Terakhir simpan template dan lihat hasilnya

Bagaimana keren bukan? Jika anda ingin mengganti warna dari tombol back to top dan back to top anda bisa mengubah kode yang sudah ditandai dengan warna kuning. Cukup sekian artikel yang bisa saya bagikan semoga bisa membantu dan bermanfaat.

Manfaat dan Keuntungan Memiliki Website Untuk Bisnis

Banyak sekali manfaat memiliki website, bukan hanya untuk bisnis saja tetapi juga hal-hal lain. Karena di zaman ini orang-orang sudah banyak mengenal internet maka tidak heran jika website bahkan bisa memiliki banyak keuntungan jika dibandingkan memiliki cabang-cabang offline. Selain itu memiliki website juga membuat usaha/bisnis kita terlihat profesional.

Namun terkadang orang-orang takut untuk memulai sebuah website, biasanya ketakutan yang timbul akibat dari biaya pembuatan website yang menurut mereka membutuhkan modal yang tinggi. Namun anggapan tersebut pastilah belum dipertimbangkan dengan membandingkan keuntungan-keuntungan yang akan kita peroleh.

Bahkan ada juga website yang membutuhkan biaya minim atau bahkan gratis. Jika kalian masih ragu kalian silakan simak beberapa keuntungan yang bisa kita dapatkan dari memiliki website untuk bisnis.

Keuntungan Website Untuk Bisnis

1. Jangkauan Yang Luas

Dengan website kita bisa menjangkau banyak kawasan, bukan hanya seluruh Indonesia melainkan seluruh belahan bumi asalkan sudah terhubung dengan internet. Namun di zaman sekarang ini negara mana yang tidak mengenal internet.  Barang/jasa yang anda tawarkan dan perkenalkan di website bisa diakses oleh seluruh orang tanpa ada batasan-batasan. Sehingga potensi untuk terjualnya barang kalian lebih tinggi.

2. Memiliki Toko Di Dunia Maya

Jika dibandingkan dengan membangun toko di dunia nyata yang memerlukan biaya yang besar maka lebih unggul bukan hanya dari segi biaya tapi dari segala hal. Terlebih lagi toko offline hanya bisa diakses oleh orang-orang sekitar toko saja berbeda dengan toko online yang bisa diakses oleh orang-orang didaerah lain. Bahkan bisa memiliki banyak customer dari negara lain.

3. Pasar Yang Terjamin

Dengan website kita bisa memiliki pasar yang terjamin bahkan terus-menerus karena bukan lingkung daerah saja website kita dikenal namun bisa lingkup nasional dan internasional sehingga apa yang kita tawarkan/perkenalkan melalui website bisa terus dikenal orang secara luas sehingga terjadi keterjaminan pasar. Namun sayangnya kita harus pandai-pandai dalam mempromosikan barang diwebsite kita karena saingan yang banyak pula.

4. Bekerja Yang Santai

Karena website milik kita sendiri kita bisa mengatur kapan kita mulai buka dan tutup. Selain itu dengan adanya website bisa dikatakan tidak ada batasan waktu, karena website kita bisa diakses 24 jam non stop. Kita bisa melayani customer kita sesuai jam yang kita inginkan sehingga tidak terlalu memberatkan kita.

Nah itu dia 4 manfaat dan keuntungan yang bisa kita dapatkan dari website bisnis. Gimana tertarik membuat website untuk bisnis kalian? Buruan buat sebelum ketinggalan jaman hehe.

Cara Memasang Recent Comments Disqus Terbaru Di Blogger

Recent comments disqus ini merupakan widget yang menampilkan komentar yang terbaru di blog kalian. Namun kalian harus memasang sistem komentar disqus terlebih dahulu sebelum menggunakan widget ini. Karena jika belum maka widget ini tidak akan menampilkan komentar apa-apa termasuk komentar dari default blogger.

Dengan memasang widget ini akan memudahkan pengunjung untuk mengetahui komentar terbaru di blog kalian. Selain itu juga bisa meningkatkan page views blog kita. Karena selain bisa melihat komentar terbaru maka pengunjung juga bisa mengetahui artikel yang dikomentari tersebut sehingga ia mungkin ingin ikut berkomentar juga hehe.

Bagaimana banyak manfaatnya bukan? Langsung saja yuk pasang widget recent comment disqusnya. Tapi karena widget ini memakai font awesome untuk mempercantik tampilan maka kita perlu memasang script font awesome terlebih dahulu. Dibawah ini adalah script font awesomenya, salin dan pastekan diatas kode </head> di template blog.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Cara Memasang Recent Comments Disqus

1. Pertama

Silakan buka Blogger, pilih Tema → Edit HTML

2. Kedua

Salin kode CSS dibawah ini lalu pastekan diatas kode </head>

<style type='text/css'>
/* Animation */
@keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}
/* Recent Comments Disqus */
.header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}
.header-1 h4{font-size:18px;float:left;color:#fff}
.header-1 img{float:right}
.notif-show{position:fixed;top:10px;right:10px;z-index:997;color:#fff!important;background:rgba(0,0,0,0.2);font-size:16px;font-weight:normal;width:auto;padding:6px 8px;cursor:pointer;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:2px;transition:all .6s}
.notif-show:hover{background:#2e9eff;animation:rubberBand 1s}
#disqus-notif{position:fixed;background:#fff;z-index:999;width:25%;top:0;right:-769px;bottom:0;transition:all .5s}
#disqus-notif.active{right:0}
#overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0}
#disqus-notif .close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:15px;top:-7px;visibility:hidden;opacity:0;transition:all .5s}
#disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:6px;font-size:35px;font-weight:700;color:#fff}
#disqus-notif .close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}
#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden}
#RecentComments img.dsq-widget-avatar{margin:0 10px 0 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ced6e0;font-size:12px}
#RecentComments p.dsq-widget-meta a:hover{color:#a4b0be}
#RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:1px solid rgba(0,0,0,0.08)}
#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:700;font-size:14px;margin:7px 0 0 0}
#RecentComments a.dsq-widget-user:hover{color:#2e87e7}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f8cf82;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}
#RecentComments .dsq-widget-item pre code{color:#000}
#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}
@media screen and (max-width:1366px){#disqus-notif{width:35%}}
@media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:700;color:#fff}#disqus-notif .close-text{display:none}}
</style>

3. Ketiga
Salin lagi kode dibawah ini lalu pastekan diatas kode </body>

<a class='notif-show' href='javascript:;'><i class='fa fa-bell'/></a>
<div id='overlay-1'/>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='Close'>&#215;<span class='close-text'>Close</span></a>
<div class='header-1'><h4>Notifications</h4><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip3JDCRnHpS8bgncCwkA61Fe2V3QM4oZiXVFZz1dSQ60hL324QQx6GeG_E_-xewcfGtfvkw2jHf0M7S4cFU0xPqR0Abq8Je1rLq5uo-wh05utZDooXjnc6ohk87rEb-GQasMNMqTajFUmO/s1600/Disqusq.png' title='Disqus'/></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://anggasaveblog.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>

<script defer='defer' type='text/javascript'>
//<![CDATA[
// Recent Comments Disqus
$(function(){$(".notif-show").on("click",function(){$("#disqus-notif").addClass("active").focus()});$(".close-1").on("click",function(){$("#disqus-notif").removeClass("active")})});
$(function(){$(".notif-show").on("click",function(){$("#overlay-1").addClass("active").focus()});$(".close-1").on("click",function(){$("#overlay-1").removeClass("active")})});
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank');
//]]>
</script>

Ganti kode yang berwarna kuning dengan username disqus blog sobat

Terakhir simpan template dan lihat hasilnya.

Bagaimana keren bukan? Cukup sekian artikel yang bisa saya bagikan semoga bisa membantu dan bermanfaat. Jika ada pertanyaan tanyakan saja di kolom komentar ya.

Cara Mengubah Sistem Urutan Komentar Di Blogger (Terbaru-Terlama)

Seperti yang kita tahu bahwa sistem urutan komentar di blogger berdasarkan dari komentar terlama lalu diikuti dengan komentar yang terbaru. Jadi bagi yang baru saja berkomentar maka komentarnya tersebut akan berada dibawah. Namun bagaimana jika kita balik, sehingga komentar yang lama menjadi dibawah sedangkan komentar yang baru berada diatas.

Terkadang komentar itu sangat penting, berkaitan dengan updatenya suatu hal. Komentar yang terbaru pasti memiliki isi yang baru, bisa berupa pertanya yang baru atau pernyataan yang baru dibandingkan dengan komentar sebelumnya. Namun karena di blogger ini urutan komentar dari lama ke baru mungkin jarang sekali pengunjung yang membaca komentar sampai bawah. Padahal mungkin informasi yang mereka butuhkan berada di komentar baru yang berada dibawah.

Maka dari itu maka kita perlu mengubah urutannya menjadi terbalik. Bagi kalian yang menyukai urutan yang default blogger tidak ada salahnya bagi anda mencoba cara dibawah barang kali jodoh untuk blog kalian. Kali ini kita hanya perlu mengganti kode yang ada di template dengan kode yang akan saya berikan. 

Cara Menyortir Komentar Blogger Dari Yang Terbaru

1. Pertama

Silakan buka Blogger ,pilih Template → Edit HTML

2. Kedua

Cari kode dibawah ini (Gunakan perintah CTRL+F untuk memudahkan pencarian)

<b:loop values='data:post.comments' var='comment'>

3. Ketiga
Lalu ganti kode yang sudah dicari tadi dengan kode dibawah ini

<b:loop reverse='1' values='data:post.comments' var='comment'>

Terakhir simpan template dan lihat hasilnya.

Bagaimana apakah cocok untuk blog kalian? Cukup sekian artikel ini semoga bisa membantu dan bermanfaat.

Cara Memasang Adblock Killer/Anti Adblock Versi Terbaru 2018

Adblock merupakan sebuah ekstensi yang ada di browser. Ekstensi ini berfungsi untuk mencegah/memblok iklan supaya tidak tayang atau muncul disebuah blog. Blog akan jadi bersih dari iklan dan tidak ada pemasukan pendapatan bagi kita para publisher. Mau gimana lagi kadang-kadang adblock secara otomatis aktif sendiri disebuah browser, seperti di UC Browser.

Namun ada polemik dalam ekstensi ini, karena memiliki dampak positif dan negatif. Dampak positif ini mungkin dirasakan oleh para pengguna yang mengaktifkan adblock di browsernya. Mereka bisa mengunjungi blog/situs tanpa terganggung iklan. Namun dampak negatifnya akan menimpa para pemilik blog/penayang iklan.

Eitsss tapi tenang saja, dimana ada penyakit pasti ada obatnya. Nah tentu saja kita tidak mau diam jika pundi-pundi receh kita hilang begitu saja, maka dari itu kita perlu memasang anti adblock/adblock killer. Sebelumnya saya pernah membagikan artikel yang sama (Cara Memasang Script Anti Adblock Untuk Blogger ) namun dengan versi adblock yang lama pula, tapi sekarang saya akan membagikan versi yang terbarunya.

Cara Memasang Adblock Killer Versi Terbaru

Adblock killer versi terbaru ini akan memiliki tampilan yang keren dan pastinya tidak memiliki tombol close sehingga popup adblock killer ini hanya akan hilang jika pengunjung sudah benar-benar menonaktifkan adblock browser mereka. Berikut ini langkah-langkahnya :

1. Buka Blogger pilih Tema → Edit HTML

2. Salin kode dibawah ini dan letakkan/pastekan diatas kode </head>  atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* Animation */
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scale3d(1,1,1)}}
/* Say Hi to Adblock */
#anggasaveblock{background:rgba(0,0,0,0.65);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s}
#anggasaveblock .header{margin:0 0 15px 0}
#anggasaveblock .inner{background:#2f75bd;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:600px;padding:40px;border-radius:5px;margin:7% auto 2% auto;animation:rubberBand 1s}
#anggasaveblock button{padding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s}
#anggasaveblock button:hover{background:rgba(0,0,0,0.35);color:#fff;outline:none}
#anggasaveblock button.active,#anggasaveblock button:hover.active{background:#fff;color:#222;outline:none}
#anggasaveblock .fixblock{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}
#anggasaveblock .fixblock div{display:none}
#anggasaveblock .fixblock div.active{display:block}
#anggasaveblock ol{margin-left:20px}
@media(max-width:768px){#anggasaveblock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}
</style>

4. Tambahkan juga kode dibawah ini diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[
// Say Hi to Adblock
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/anggagilangpratama/anggasave.html/a7a13e91/anggasave%20block.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Terakhir simpan template.

Lalu silakan lihat hasilnya dengan mencoba membuka blog anda sendiri dengan browser adblock aktif. Untuk adblock killer ini saya test tidak muncul di UC Browser, jika kalian ingin supaya adblock killer bisa muncul di UC Browser anda bisa mencoba cara yang ini Cara Memasang Script Anti Adblock Untuk Blogger . Sekian artikel yang bisa saya bagikan semoga bermanfaat.

Cara Membuat Recent Post By Label di Halaman Statis Terbaru

Kali saya akan membagikan tutorial cara membuat recent post berdasarkan label. Recent post ini akan muncul berdasarkan label yang anda inginkan. Bukan hanya muncul berdasarkan label tertentu saja tetapi juga bisa memunculkan semua artikel yang ada diblog anda tanpa terkecuali, bahkan artikel yang tidak anda beri label.

Recent post by label ini juga bisa anda gunakan sebagai pengganti sitemap. Terlebih lagi katanya bagus untuk kita ketika sedang mendaftar adsense. Hal ini berkaitan dengan navigasi blog anda, pada menu navigasi dianjurkan untuk membuat pengunjung langsung membuka artikel tanpa dibawa ke daftar artikel berdasarkan label. Contohnya seperti ini :

Link pada menu navigasi sebaiknya jangan berupa https://www.anggasave.com/search/label/Youtube ,melainkan menuju laman/postingan seperti ini https://www.anggasave.com/p/youtube .Kenapa? Supaya anda lebih mudah diterima adsense, jika sudah diterima anda bisa pakai lagi link warna kuning.

Cara Memasang Recent Post By Label

Karena recent post ini menggunakan font awesome untuk mempercantik tampilannya, maka diblog anda sudah harus terpasang script font awesome terlebih dahulu. Jika silakan tambahkan kode dibawah ini diatas kode

pada template blog anda.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Jika sudah, silakan ikuti langkah-langkah dibawah ini untuk membuat recent post di laman :

1. Buka Blogger

2. Pilih Halaman → Halaman Baru (Ubah mode penulis menjadi HTML)

3. Salin kode dibawah ini dan pastekan dihalaman baru yang dibuat

<div id="recentpostsae">
</div>
<div id="recentpostnavfeed">
</div>
<style scoped="" type="text/css">
*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box}
a,a:link,a:visited{text-decoration:none;transition:all .3s}
button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
#recentpostsae .recentpostel{width:48.9%;background:#fff;display:inline-block;margin:0 20px 10px 0;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0}
#recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px}
#recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
#recentpostsae .recentpostel:hover{background-color:#fefefe}
#recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi_Ig4Pkhwpk6_HMBKackGNDVrP3v0_ySEsq-gIZUQdgZMESEPIK06_U3GjJx-tjuBY_2r9bMwPRUWYZAOg_CveD3BLBDvDFydYA0AlXlQb3xQB0XfMXchCKvBvaPIyIDo7G6Mt7qadmnr/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
#recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s}
#recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed .next{float:right;margin:0 0 0 10px}
#recentpostnavfeed .previous{float:left;margin:0 10px 0 0}
#recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc}
#recentpostnavfeed i{font-family:fontawesome;font-style:normal}
#recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
@media screen and (max-width:993px){#recentpostsae .recentpostel{width:100%;margin:0 0 10px 0}}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 18;
var startfeed = 0;
var urlblog = "https://www.teknomatch.com";
var charac = 0;
var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjdC-Kn-exDlYcJdxwZ-31Oeg1sCTHEpEyrezfvfDq626njcz597XgY7iQlxW35qujKj0nCV60KlxQpgVJg4E3NAECxVQVtVsmpuu0MtVhIzFKTlBwppuJok3tgSXsmNM40neYfG1tEd3o/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default/-/Smartphone"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>

Selesai tinggal beri judul lalu publish.

Sekian artikel cara membuat recent post by label yang bisa saya bagikan semoga bisa membantu dan bermanfaat.