Supervba: Blog
Showing posts with label Blog. Show all posts
Showing posts with label Blog. Show all posts

Tuesday, 18 June 2019

Membuat Daftar Isi Di Dalam Postingan Blog Seperti Wikipedia (Table Of Contents)

Membuat Daftar Isi Di Dalam Postingan Blog Seperti Wikipedia (Table Of Contents)

Banyak pemilik bog akhir-akhir ini memasang daftar isi di dalam postingannya (Table Of Contents). Daftar isi biasanya dibuat di bagian laman (static) kemudian dijadikan salah satu menu di widget blog.

Jika diingat, Wikipedia sudah lama menerapkan TOC (Table Of Contents). Pada setiap postingan di Wikipedia pasti ada daftar isi. Daftar isi memudahkan pembaca mengetahui apa saja materi yang dibahas dari jadul artikel tersebut. Jika sebuah judul pada daftar isi kita klik maka kita akan langsung dipandu ke isi dari judul tersebut.

Dari segi SEO, ternyata penulisan daftar isi di blog dapat meningkatkan hasil pencarian blog kita di mesin pencari Google. Selain itu, situs kita akan terlihat lebih profesional.

Daftar Isi berikut serupa dengan daftar isi yang ada di Wikipedia. Hanya berbeda tampilan saja sedikit. Masalah tampilan kan bisa kamu atur sendiri.

Daftar isi berikut memiliki fungsi (tombol) untuk menampilkan atau menyembunyikan judul-judul postingan yang ada di daftar isi. Admin siapkan 2 kode CSS daftar isi yang bisa kamu pilih yaitu dengan border dan tanpa border (garis tepi).

Kalau kamu berminat membuat daftar isi di dalam postingan blog, ikuti tahapan berikut ya.


1. Simpan kode berikut di atas /style.

Gaya Pertama : dengan Border

Kode Daftar Isi Dalam Postingan

/* Table of Contents by kompiajaib.com (modifikasi)*/
#btn_toc{font-weight:bold;cursor:pointer}
#btn_toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li,.back_toc{cursor:pointer}
#toc{display:grid}
#toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px}
:target::before{content:"";display:block;height:0px;margin-top:0px;visibility:hidden}


Gaya kedua : tanpa Border

Kode berikut admin peroleh dari situs kompiajaib.com ya. Link lengkapnya bisa lihat di akhir artikel ini.

Kode Daftar Isi Dalam Postingan

/* Table of Contents by kompiajaib.com (modifikasi)*/
#btn_toc{font-weight:bold;cursor:pointer}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li,.back_toc{cursor:pointer}
#toc{display:grid}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}


Kalau kamu menggunakan tag kondisional, kamu bisa menyimpannya di dalam tag berikut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Daftar isi ini hanya tampil di halaman artikel saja.

Untuk blog AMP simpan kode di atas di style amp-custom.

2. Pasang kode pemanggil daftar isi berikut saat menulis artikel.

Kode Pemanggil Daftar Isi Dalam Postingan

<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
DAFTAR ISI <svg height="18" viewbox="0 0 24 24" width="18"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" fill="#000000"></path></svg></div>
<div id="toc">
<ol>
<li><a href="#toc1" title="Judul Satu">Judul Satu</a></li>
<li><a href="#toc2" title="Judul Dua">Judul Dua</a></li>
<li><a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
</ol>
</div>

<h2 id="toc1">
Judul Satu</h2>
Isi Judul Satu

<h2 id="toc2">
Judul Dua</h2>
Isi Judul Dua

<h2 id="toc3">
Judul Tiga</h2>
Isi Judul Tiga


Kamu ganti kata DAFTAR ISI dengan kata-kata mu sendiri misalnya, TABLE OF CONTENTS, CONTENTS, dan sebagainya.

3. Jika sudah selesai membuat artikel, Klik Publish untuk melihat hasilnya.

Sebelum Publish, perhatikan bahwa alamat #toc1, #toc2, dan #toc3 tidak berubah alias tetap seperti ini. Kemudian publish artikel pada saat berada pda Mode HTML buka Compose. Peralihan mode pengetikan artikel bisa menyebabkan perubahan URL pada item di atas.

Demikian Cara Membuat Daftar Isi Di Dalam Postingan Blog Seperti Wikipedia. Semoga bermanfaat.


Referensi
1. https://www.kompiajaib.com/2018/01/membuat-table-of-contents-di-dalam.html

Monday, 17 June 2019

Membuat Widget Popular Posts Berbentuk Daftar (List) Dengan Gambar dan Nomor Urut Postingan di Sidebar Blog

Membuat Widget Popular Posts Berbentuk Daftar (List) Dengan Gambar dan Nomor Urut Postingan di Sidebar

Membuat Popular Post Berbentuk Daftar (List) Dengan Gambar dan Nomor Urut Postingan di Blog Non AMP dan AMP - Widget popular posts biasanya ditampilkan di sidebar blog. Banyak variasi cara pemilik blog menampilkan widget popular postsnya. Ada yang pakai gambar ada juga yang tidak, ada yang pakai nomor urut ada juga yang tidak, dan design-design lainnya. Setiap orang memiliki rasa yang berbeda-beda dalam mengemas tampilan blognya supaya menarik pembaca bisa terus berada di halaman situsnya.

Sebelumnya admin sudah posting widget popular posts tanpa gambar. Bagi yang belum baca, linknya ada di bawah ya. Nah, widget popular posts berikut ini sangat menarik. Ini karena widget ini menampilkan thumbnail dan nomor urut postingan dalam tampilan yang cantik. Hasilnya bisa kamu lihat pada gambar ilustrasi di atas.


Jika kamu tertarik membuat Membuat Popular Post Berbentuk Daftar Dengan gambar dan nomor postingan di Blog, bisa ikuti tahapan berikut ini.

1. Salin kode CSS berikut di atas /style.

Tag H2 tanpa ID

/* Popular Post */
.PopularPosts ul{list-style:none;margin:0 auto;padding:0;}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0 auto!important;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul li {margin:0 0 10px!important;padding:0;position:relative;line-height:1.4em!important;list-style:none;text-align:left!important;font-size:15px !important;display:block;overflow:hidden}
.PopularPosts ul li a:hover {color:#f80538!important}
.PopularPosts li a{color:#000 !important;font-weight:500 !important;list-style:none}
.PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:72px;height:72px;margin:0 20px 0 0;overflow:hidden;float:left;border-radius:4px;}
.PopularPosts ul li img {width:auto;height:72px;transition:all .3s ease-in-out;border-radius:4px;overflow:hidden;display:block}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title {padding:0 0 5px}
.PopularPosts .widget-content ul li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left:57px;text-align: center;top:31px;z-index: 51;transition: all .4s;height:25px;min-width:25px;font-size: 14px;line-height:25px;background:#f80538;font-weight:600;border-radius:99em;border:2px solid #fff;text-align: center;padding:0;overflow:hidden;}
.PopularPosts ul{counter-reset:count;}


2. Simpan template.

Sebelum mengaplikasikan kode CSS Popular Posts di atas sebaiknya kamu menghapus kode sebelumnya atau kode awal popular posts yang ada di template kamu supaya tidak bentrok. Jika kamu menggunakan beberapa tag kondisional pada template, kamu bisa meletakkan kode widget di atas di dalam tag kondisional berikut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Letakkan kode widgetnya di atas /style tentunya.
Nah, sekarang kamu bisa pergi melihat hasilnya. Semoga berhasil.

Demikian cara membuat Popular Post Berbentuk Daftar Dengan gambar dan nomor postingan di Blog. Semoga bermanfaat.



Sunday, 16 June 2019

Memasang Widget Fanspage Facebook Melayang Mini, Ringan dan Responsive

Memasang Widget Fanspage Facebook Mini Melayang

Memasang widget fanspage facebook melayang ringan dan reponsive - Widget Fanspage Facebook biasanya dipasang di sidebar blog. Namun ada pula yang memasangnya dengan teknik popup di tengah halaman.

Widget fanpage facebook berikut sangat ringan terhadap loading blog. Sekalipun menggunakan kode Javascript. Widget ini akan tampil di pojok kanan bawah dengan animasi SlideUp.

Tinggi dan lebar widget dibuat otomatis. Hanya perlu menyesuaikan jarak widget dengan posisi bawah layar (margin-bottom). Kalau kamu memasang sticky ads denagn ukuran 728 x 90 maka margin-bottom diatur menjadi 130px. Tapi jika tidak ada iklan hamparan di halaman bawah maka margin-bottom di-sett 0px. Kalau kamu menggunakan tombol back to top maka atur margin-bottom nya supaya posisi widget di atas tombol back to top.

Wdiget ini sangat ringan. Setelah saya pasang, saya rasa ini lebih baik daripada memasangnya di sidebar. Jika widget fanspage facebook di pasang di sidebar, kadang tidak muncul. Jadi cukup memakan loading blog ya. Mengapa widget fanspage facebook ini ringan? Hal lainnya karena CSS widget di bawah ini hanya menampilkan nama halaman, foto profil fanspage dan tombol menyukai saja.

Selain itu, widget fanspage facebook berikut dilengkapi dengan tombol Close (x) yang responsive. Begitu klik, dah langsung hilang itu widget. Jelas widget ini tidak akan mengganggu kenyamanan pengguna

Wigdget fanspage facebook ini akan tampil di semua halaman situs baik di halaman beranda (homepage), halaman artikel (item), laman (statis), dan error. Kalau kamu ingin membatasi kamu bisa menambahkan tag kondisional sebelum kode CSS nya.

Nah, mulai saja yuk memasang widget fanspage facebooknya. Demonya bisa lihat langsung di situs tercinta ini (selama masih dipakai).

1. Salin kode CSS berikut di atas /head.

Kode CSS Widget Fanspage Facebook
<!-- start css-->
<style type='text/css'>
#fbLikeBox{background-color:#FFFFFF;border:4px solid rgb(210,210,210);bottom:0;border-bottom:210;float:left;height:auto;margin-bottom:130px;margin-right:5px;position:fixed;right:0;width:auto;z-index:10}
.fbLikeBox-close{color:#333!important;position:absolute;top:1px;right:1px;width:20px;height:20px;line-height:20px;text-align:center;font-size:11px}
.slideUpfbLikeBox{animation-name:slideUpfbLikeBox;-webkit-animation-name:slideUpfbLikeBox;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible!important}
@keyframes slideUpfbLikeBox{0%{transform:translateY(100%)}50%{transform:translateY(-8%)}65%{transform:translateY(4%)}80%{transform:translateY(-4%)}95%{transform:translateY(2%)}100%{transform:translateY(0%)}}
@-webkit-keyframes slideUpfbLikeBox{0%{-webkit-transform:translateY(100%)}50%{-webkit-transform:translateY(-8%)}65%{-webkit-transform:translateY(4%)}80%{-webkit-transform:translateY(-4%)}95%{-webkit-transform:translateY(2%)}100%{-webkit-transform:translateY(0%)}}
</style>
<!--- end css-->



Sesuaikan bagian yang diwarnai dengan posisi yang kamu mau. Kebetulan admin ada iklan sticky di bawah dengan tinggi 90px jadi posisinya admin naikkan lagi di atas iklan. Kamu bisa memberi nilai 0px jika tidak ada iklan atau widget melayang serupa di bawah.


2. Salin kode HTML dan Javascript berikut di atas /body.

Kode HTML dan JAVASCRIPT Widget Fanspage Facebook
<!-- start js widget-->
<div class='slideUpfbLikeBox' id='fbLikeBox'>
    <a class='fbLikeBox-close' href='#fbLikeBox-close-like-box' onclick='hide(&apos;fbLikeBox&apos;)' title='Close'><i class='fa fa-times'/></a>
    <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/supervba' data-show-faces='true' data-stream='false' data-width='230'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fsupervba&amp;width=230&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:230px; height:62px;'/>
</span></div>
</div>
<script type='text/javascript'>
function show(target) {
    document.getElementById(target).style.display = &#39;block&#39;;
}

function hide(target) {
    document.getElementById(target).style.display = &#39;none&#39;;
}
</script>
<!-- end js widget-->



Ganti supervba dengan nama fanspage kamu.

3. Simpan template.

Jika anda mengalami masalah seperti tombol Close tidak muncul coba tambahkan kode berikut di atas kode /body.

Kode HTML Widget Fanspage Facebook
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"></link>

Pemasangan widget fanspage facebook sudah selesai. Coba cek hasilnya di blog kamu guys.

Demikian cara memasang widget fanspage facebook melayang di blog. Semoga bermanfaat.

Update Artikel: Agustus 2019

Referensi:
1. https://putuguna.com/2017/08/membuat-widget-melayang-pojok-kanan-blog-dengan-tombol-close.html

Membuat Popular Post berbentuk List (Daftar) Keren tanpa Gambar di Blog

Membuat Popular Post berbentuk List Keren tanpa Gambar di Blog

Popular post adalah salah satu widget blog wajib buat saya termasuk buat nubie yang mau daftar adsense. Popular post menampilkan daftar artikel yang sering dikunjungi pembaca.

Admin mau berbagi cara buat popular post berbentuk daftar. Popular post ini tidak menampilkan jumlah postingan. Tapi kalau kamu mau menampilkan, silahkan saja.

Design popular post ini tanpa gambar dan counter. Jadi jangan khawatir akan membebani loading blog. Ringan banget.

Kita langsung cek cara membuat popular post berbentuk daftar tanpa gambar thumbnail.

1. Kode CSS ini taruh di atas /style.

Kode CSS POPULAR POSTS
/* Popular Post */
#PopularPosts1 ul{list-style-type:none;margin:0;padding:0}
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display:block;transition:all .3s ease-in-out}
#PopularPosts1 ul li{padding:8px 0 11px!important;margin:0;list-style:none;font-size:11px;line-height:normal}
#PopularPosts1 ul li:first-child{border-top:none}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13.5px;color:#444;display:block;font-weight:500;padding:0 5px 0 0;margin:0;line-height:1.4em;overflow:hidden;}
.popular-posts ul{padding-left:0;counter-reset:trackit}
.popular-posts ul li{border-bottom:none;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit}
.PopularPosts ul li:before{content:counters(trackit,&quot;.&quot;);padding:0 .1em 0 10px;font-size:18px;font-weight:500;color:#ff4c2e;float:left;margin-right:10px}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}


2. Simpan template.

Kalau di template kamu udah ada CSS untuk widget popular post maka sebainya dihapus supaya widget popular post ini bisa tampil semestinya.

Demikian cara membuat popular post tanpa gambar. Semoga bermanfaat.

Friday, 14 June 2019

Cara Ini Ampuh Untuk Mempercepat Loading Blog yang Lambat Karena Iklan Adsense

Cara Ampuh Mempercepat Loading Iklan Adsense

Cara Ampuh Mempercepat Loading Blog yang Lambat Karena Iklan Adsense - Dari beberapa algortima terbaru Google 2019, kecepatan loading blog tetap menjadi salah satu fokus utama yang diinginkan Google. Maka kita perlu mengecek kembali kecepatan loading blog kita, apakah sudah Hijau atau belum. Mungkin penyebab penghasilan blog menurun salah satunya karena loading blog masih lambat. Banyak pembaca yang beralih dari blog kita ke halaman situs yang lebih responsive. Jika loading blog ringan maka pengunjung bisa senang mengulik-ngulik isi blog kita. Tentu ini bisa mengurangi nilai Bounce Rate blog kita.

Beberapa minggu ini admin lagi fokus memperbaiki loading blog. Yah, susah payah memang karena ilmu admin di dunia blog juga tidak sekomplit yang lain. Kebetulan admin baru ganti template dari template blog gratis ke template blog premium. Sayangnya, template default yang admin dapat masih lambat loadingnya sehingga harus menyetel kembali supaya lebih responsive buat pembaca.

Berikut contoh hasil tes kecepatan loading blog sebelum admin mendapatkan cara ampuh mempercepat loading blog.

1. Kecepatan loading blog di seluler menggunakan Page Speed Insight


2. Kecepatan loading blog di Desktop menggunakan Page Speed Insight



Hasil di atas admin capai setelah melakukan beberapa teknik mempercepat loading blog seperti mengganti meta tag, mengurangi javascript, menghapus CSS atau stylesheet CSS yang tidak digunakan, mengurangi eksternal link, mengurangi widget, menonaktifkan featured post yang menggunakan Jquery, dan lainnya. Padahal sebelum pasang iklan adsense, nilai page speed sudah hijau bahkan skor versi desktop mencapai 100. Iklan adsense sungguh berat ya guys!!!

Admin sudah capek otak-atik template bahkan sampai harus begadang tiap malam karena masih belum selesai mengatasi masalah lambatnya loading blog karena iklan adsense.

Mungkin template kamu udah memiliki page speed sekitar 90 - 100 baik di seluler maupun di desktop jika di-tes menggunakan tools Page Speed Insight. Namun, kalau sudah pasang iklan adsense maka page speed blog akan langsung menurun. Apalagi kalau memasang banyak iklan dan posisi penempatan iklan yang dipasang kurang tepat.

Berdasarkan pengalaman, sebaiknya iklan adsense di taruh di paruh bawah. Ini biar loading blog di versi seluler lebih cepat. Misalnya pada halaman Homepage kita memasang beberapa iklan Infeed adsense. Jangan taruh iklan infeed adsense ini pada urutan pertama atau kedua dari daftar artikel kita. Tapi taruhlah mulai dari urutan ke-3 atau ke-4 tergantung template yang digunakan.

Untuk iklan adsense yang ada di bawah menu utama, gunakan iklan responsive dengan ukuran 320 x 50 atau 320 x 100 pada versi seluler. Iklan ini tidak terlalu memberatkan loading blog dibandingkan dengan iklan ukuran 320 x 250.

Tips di atas belum termasuk ke dalam tips cara ampuh mempercepat loading blog karena iklan adsense. Tips di atas sebagai pendahuluan saja ya. Namun tips di atas bisa dicoba untuk meningkatkan loading blog.

Admin masih terus mencari cara mempercepat loading blog yang lambat gara-gara iklan adsense. Admin sudah terapkan script lazy load adsense namun masih belum merasa puas. Hingga admin mendapatkan kode HTML lengkap dari lazy load adsense.

Sebelumnya, admin hanya menerapkan kode lazy load adsense sebelum kode /body. Namun setelah admin terapkan juga sebelum kode /head, hasilnya sangat memuaskan. Bagi kamu yang udah memasang kode lazy load adsense, mungkin bisa diperhatikan lagi apakah sudah sempurna atau belum. Kalau belum, mungkin bisa mengikuti tips memasang lazy load adsense ini.

Setelah tes kecepatan blog menggunakan page speed insight, admin terpukau karena nilai page speed langsung berubah drastis. Dari merah menjadi hijau, dari sekitar 25 - 35 menjadi 90 ke atas pada versi seluler. Kuncinya hanya menerapkan kode lazy load adsense dengan tepat. Jadi, Cara Ini Ampuh Untuk Mempercepat Loading Blog yang Lambat Karena Iklan Adsense adalah menerapkan kode lazy load adsense dengan tepat.

DAFTAR ISI

Hasil Tes Loading Blog

Untuk mengetahui kecepatan loading blog kita perlu mengukurnya. Ini bisa dilakukan menggunakan tools yang sudah lumrah digunakan. Beberapa tools untuk mengukur kecepatan loading blog adalah

  1. Page Speed Insight
  2. GTMetrix
  3. Thinkwithgoogle


Berikut ini hasil tes kecepatan loading blog menggunakan Pagespeedinsight dan GTMetrix setelah penerapan lazy load adsense.

1. Hasil Tes Kecepatan loading blog di seluler menggunakan Page Speed Insight


2. Hasil Tes Kecepatan loading blog di Desktop menggunakan Page Speed Insight



3. Hasil Tes Kecepatan loading blog menggunakan GTMetrix




Cara Ampuh Mempercepat Loading Iklan Adsense

1. Salin kode berikut sebelum /head. Gunakan Ctrl+ F supaya lebih cepat.

Kode HTML untuk Lazy Load Adsense

<script>
//<![CDATA[
var lazyadsense2 = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense2 === false) || (document.body.scrollTop != 0 && lazyadsense2 === false)) {
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
document.body.className+=" gapon";
lazyadsense2 = true;
}
}, true);
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-123456789",
enable_page_level_ads: true
});
//]]>
</script>


Ganti 123456789 dengan kode penayang adsense kamu.

2. Salin Kode berikut sebelum kode /body.

Kode HTML untuk Lazy Load Adsense

<script>
//<![CDATA[
var lazyadsense=!1;window.addEventListener("scroll",function(){if((document.documentElement.scrollTop!=0&&lazyadsense===!1)||(document.body.scrollTop!=0&&lazyadsense===!1)){document.getElementById('sticky-ad').style.display="block";document.body.className+=" sticky";lazyadsense=!0}},!0);function removeClassBody(){var element=document.body;element.className=element.className.replace(/bstickyb/g,"")}
//]]>
</script>


3. Carilah kode iklan adsense berikut dan hapuslah.

Kode Iklan Adsense
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<script>
//<![CDATA[
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: 'ca-pub-1234567890',
          enable_page_level_ads: true
     });
//]]>
</script>



4. Simpan Template Blog.


Coba tes kembali kecepatan loading blog. Seharusnya kecepatan loading blog meningkat dari sebelumnya. Semoga sudah masuk kategori 'Hijau'.

Penerapan kode lazy load adsense mengakibatkan iklan di paruh atas akan blank (kosong) sementara. Namun setelah halaman mulai digulung (scroll), perlahan-lahan iklan adsense akan muncul kembali. 


Kode-kode lazy load adsense ini admin dapatkan dari situs kompiajaib. Admin sangat tertarik dengan page speed situs kompiajaib yang benar-benar ajaib. Admin iseng-iseng tes sebagai contoh untuk perbaikan blog admin. Ternyata emang luar biasa, Hijau semua jika menggunakan Page Speed Insight. Bahkan nilai di situs thinkwithgoogle mendapat kategori Average (rata-rata) dengan skor 1,4 (masih dalam skala rata-rata antara 1 s.d 2,5). Akhirnya admin jadikan situs kompiajaib sebagai bahan rujukan perbaikan kecepatan loading blog dan berhasil.

Kesimpulan

Kamu sudah membaca tentang cara ampuh mempercepat loading blog yang lambat karena iklan adsense. Ternyata sangat gampang, dengan cara menerapkan kode lazy load adsense dengan tepat. Kode lazy load adsense akan membuat iklan menjadi lambat muncul. Iklan adsense akan muncul setelah halaman di-scroll.


Demikian Cara Ini Ampuh Untuk Mempercepat Loading Blog yang Lambat Karena Iklan Adsense. Semoga bermanfaat.

Referensi:
1. https://www.kompiajaib.com/2017/06/trik-lain-untuk-lazy-load-iklan-adsense.html

Saturday, 8 June 2019

Membuat Tombol Subscribe Blog Melayang Dengan CSS Tanpa Javascript

Setiap blog tentu senang kalo banyak yang baca apalagi jika pembacanya adalah para pelanggan atau subscribernya. Untuk itu, pada blog dapat dipasang tombol Subscribe Blog Melayang. Dengan harapan semakin banyak pengunjung yang mengikuti berita terbaru dari blog kita.

Buat kawan blogger yang lagi nyari Tutorial Membuat Tombol Subscribe Blog Melayang Dengan CSS Tanpa Javascript, berikut admin jelaskan caranya ya.

1. Taruh kode di bawah ini di atas /style.
Kode CSS
/* CSS popup*/
#popup-wrap .popup-button { background: #f80538 url(&quot;http://2.bp.blogspot.com/-5BeaRyWo6FQ/Vc9zn8NV2oI/AAAAAAAADU0/tGTO9XGumUs/s1600/envelop.png&quot;) no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 70px; left: 25px; position: fixed; width: 70px; z-index: 99999; }/* background bisa diganti dengan warna lain*/
#popup-wrap .popup-button:hover { background-color: #5555CC; }/* background-color bisa diganti dengan warna lain*/

#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(45deg, #f80538, #623740); transition: opacity .25s ease; z-index: 999999; }/* background bisa diganti putih (#fff) supaya transparan atau warna lain yang disukai*/
#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#popup-wrap .popup-trigger { display: none; }
#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }
#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }

#popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 280px; background: #cc6055; text-align: center; }
#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: &quot;Century Gothic&quot;, sans-serif; font-weight: bold; line-height: normal; }
#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox,
#popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: &quot;Century Gothic&quot;,sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }
#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }
#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }
#popup-wrap #subbutton:hover { background: #70261D; }

#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: &#39;&#39;; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #70261D; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }
@media screen and (max-width:480px){
#popup-wrap .popup-button { bottom: 25px; height: 65px; width: 65px; }
}

Kodebackground: linear-gradient(45deg, #f80538, #623740)
akan memberi efek latar belakang warna merah (dengan gradasi). Kamu bisa sesuaikan lagi sesuai keperluan.

2. Taruh kode ini di atas/body.
Kode HTML
<div id='popup-wrap'>
  <!-- Subscribe Trigger -->
       <label class='popup-button' for='popup-trigger' title='Subscribe via email'/>

  <!-- Subscribe Content -->
  <input class='popup-trigger' id='popup-trigger' type='checkbox'/>
  <div class='popup-bg'>
            <label class='popup-bg-close' for='popup-trigger' id='popup-close'/>
            <div class='popup-form'>
                <label class='popup-form-close' for='popup-trigger' id='popup-close'/>
                <div class='popup-inner'>
                    <!-- Opt-In Subscribe -->
                    <span class='popup-title'>Subscribe Via Email</span>
                    <span class='popup-content'>Subscribe to our newsletter to get the latest updates to your inbox. ;-)</span>
                    <br/><br/>
                    <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID_FEEDBURNER_MU&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                        <input name='uri' type='hidden' value='ID_FEEDBURNER_MU'/>
                        <input name='loc' type='hidden' value='en_US'/>
                        <input id='mailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' required='' type='text' value='Enter your email...'/>
                        <input id='subbutton' title='' type='submit' value='Sign up'/>
                    </form>
                    <br/>
                    <span class='popup-footer'>Your email address is safe with us!</span>
                </div>
            </div><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->

3. Kalau sudah selesai, klik Simpan.

Saatnya kamu periksa dan tes hasil pemasangan tombol subscribe blog di atas. Semoga berhasil.

Demikian cara Membuat Tombol Subscribe Blog Melayang Dengan CSS Tanpa Javascript. Semoga bermanfaat.

Monday, 27 May 2019

Cara Mengganti Domain Blogspot Ke Domain Sendiri (TLD) di Google Domains

Menghubungkan Blogspot dengan Google Domains
Mulai beberapa tahun lalu, Google menghadirkan layanan jasa pembelian domain. Setiap kali buat blog baru melalui Blogger, maka kita akan ditawari jasa ini. Kalau belum berminat maka kita bisa melewatinya.

Ada kelebihan dan kekurangan dari penggunaan domain dari Google ini. Dari harga, kalau kita beli langsung dari situsnya maka sebagian kita akan bilang harganya cukup mahal. Harga domain untuk dotcom saja Rp. 165.930 per tahun. Sedangkan di penyedia jasa yang lain bisa dapat harga lebih rendah.

Sekalipun begitu, kita patut memperhitungkan kelebihannya. Kelebihannya yang dapat dirasakan signifikan adalah pada proses migrasi situs yang jauh lebih mudah. Jika menggunakan penyedia jasa yang lain kita harus menyetel sendiri servernya. Kita perlu menambahkan beberapa pengaturan DNS sehingga situs bisa berjalan dengan benar.

Dengan Domain Google, kita hanya membutuhkan login ke akun Gmail. Dengan sedikit pengaturan, maka blogspot sudah terhubung ke Google Domains.

Sebelum menghubungkan blogpsot ke domain Goole, pastikan bahwa kita sudah menerima email dari Google Domains lewat Gmail kita. Email ini berisi izin pengelolaan domain untuk mengelola, memperbarui dan melakukan perubahan apapun pada domain tersebut.


Pada tutorial ini saya akan memigrasikan sebuah blogspot saya dari https://moddic.blogspot.com ke https://www.moddic.com. Nah, berikut cara menghubungkan blogspot ke Google domains.




1. Login ke akun Gmail.
2. Login ke Google Domains.
3. Pilih nama domain.
4. Di bilah navigasi kiri, klik Situs.
5. Pada bagian Opsi konfigurasi situs, pilih Buat situs.



6. Pada bagian Membuat Situs Baru, Pilih Blog.



7. Kalau sudah memiliki blogspot yang akan dimutasikan maka Klik Login ke akun yang ada. Sebaliknya, klik Mulai dengan Blogger. Oleh karena saya sudah ada, maka saya pilih Login ke akun yang ada.


8. Pada tanda panah biru ke bawah, pilih title blogspot yang akan dihubungkan. Kemudian pilih Hubungkan Blog jika sudah benar.


Pengaturan pun Selesai. Kita akan dibawa kembali ke halaman utaman Google Domains.
Nah tunggu beberapa menit untuk proses prapagasi domain. Hanya butuh waktu kurang dari 5 menit saja kok ya.





Jika sesaat begitu proses di atas dilakukan kita coba membuka blogspot kita maka kita akan melihat pesan berikut.


Apakah perlu memilih Ya?. Tidak perlu kawan karena cukup menunggu sebentar terus refresh halaman blogspot tersebut maka domain baru dari Google Domains pun sudah aktif. Namun jika ingin klik "Ya" saya rasa juga tidak ada salahnya, silahkan dicoba saja

Demikian Cara Mengganti Domain Blogspot Ke Domain Sendiri (TLD) di Google Domains. Semoga bisa membantu kawan-kawan Blogger yang masih pemula. Jangan lupa tinggalkan jejak di komentar ya gaess!

Wednesday, 2 May 2018

Mengaktifkan dan mengubah http ke https untuk Custom Domain Blogger

Apa itu https?. Istilah https ini dapat ditemukan pada alamat URL situs/web yang sedang kita kunjungi. Saat ini situs Supervba sudah menerapkan setelan https. Contoh alamat situs yang sudah menerapkan setelan https adalah https://www.supervba.com/. Suatu situs/web dapat menggunakan alamat URL berupa http atau https. Apa beda http dengan https?.

Istilah http merupakan singkatan dari Hypertext Transfer Protocol. Sedangkan https singkatan dari Hypertext Transfer Protocol Secure. Https merupakan versi yang lebih aman dari http.

Apakah perlu mengaktifkan setelan https untuk situs/web?. Selain melihat fungsi https untuk keamanan data situs/web, saat ini mesin pencari Google lebih memperhatikan blog/situs/web yang menggunakan protocol https. Tentu ini akan mempengaruhi peringkat blog/situs/web kita di mata Google. Selain itu, bagi para pengguna Adsense, Google Adsense juga akan mengingatkan kita untuk beralih ke https karena dipercaya dapat meningkatkan penghasilan. Dengan menggunakan setelan https, tingkat kepercayaan pengunjung/pembaca akan meningkat.


Baca juga11 keyword rahasia Google yang belum ditahu banyak orang


Aktifkan setelan HTTPS blog untuk domain kustom

Setelan https untuk domain kustom tidak tersedia otomatis. Berbeda dengan blog yang masih menggunakan domain gratis seperti blogspot. Domain blogspot misalnya sudah otomatis menggunakan setelah https pada alamat situsnya. Untuk itu jika kita menggunakan domain kustom (.com, .net, .id, dan sebagainya), kita perlu mengkonfigurasi secara manual dengan melakukan pengalihan alamat situs dari http ke https.

Nah berikut cara mengalihkan setelah http menjadi https di situs dengan flatform Blogger.

Pemeriksaan ketersediaan HTTPS

Buka setelan dasar di dashboard blogger. Pada menu ketersediaan HTTPS, klik ikon panah ke bawah, ganti pilihan dari Tidak menjadi Ya.

Kita perlu menunggu beberapa menit karena sistem sedang melakukan pemeriksaan ketersediaan setelan https untuk alamat situs. Kita akan melihat beberapa pesan terkait ketersediaan https dan pengalihan https. Pengalihan https tidak bisa dilakukan jika https tidak tersedia untuk situs kita. Setlah opsi Ketersediaan HTTPS menjadi Ya maka semua pesan tadi akan hilang secara otomatis.


Baca jugaCara tepat memasang Artikel Terkait dalam postingan blog untuk meningkatkan pengunjung blog

Pengalihan HTTPS

Setelah menunggu sekitar 20-30 menit, cek kembali halaman setelan dasar blog. Kalau opsi ketersediaan https telah menjadi Ya, selanjutnya melakukan pengalihan https.

Pada opsi Pengalihan Https, ubah pilihan dari Tidak menjadi Ya. Setelah tahap ini dilakukan, blog/situs kita sudah berhasil menggunakan setelan https.



Untuk memastikan tahapan di atas berhasil, kita coba lihat alamat baru URL blog/situs/web kita. Jika berhasil, alamat URL sudah berubah dengan format https://namadomain.

https blog supervba
Begitulah informasi tentang mengamankan data situs dengan mengaktifkan setelan https pada blog/situs. Bila ada kekurangan, mohon simpan di kolom komentar. Semoga informasi ini bermanfaat. Ikuti informasi/artikel terbaru melalui fanspage facebook kami di Supervba.

Saturday, 4 November 2017

Cek Harga Domain Murah Rumahweb

www.supervba.com
Apakah yang dimaksud dengan Domain TLD?. Bagi kalian yang masih pemula bisa jadi muncul pertanyaan seperti itu. Domain TLD artinya domain teratas (Top Level Domain) seperti .com, .id, .net, .org, dan sebagainya. Lalu apa itu Domain?. Domain tidak sama dengan URL. Domain merupakan nama unik yang digunakan untuk mengetahui alamat server komputer seperti web server atau email server di internet. Ini didentifikasi dari IP addressnya.

Untuk membedakan istilah domain dan URL kita ambil contoh menggunakan URL blog kami adalah http://www.supervba.com/. Sedangkan nama domain kami adalah supervba.com. Ekstensi .com ini merupakan salah satu contoh penggunaan domain teratas / TLD.

Bagian belakang dari domain disebut ekstensi domain. Ada banyak sekali ekstensi domain yang tersedia bahkan ekstensi tersebut bisa sesuai dengan bidang yang kita bahas di blog. Beberapa contoh ekstensi domain TLD dan penggunaannya adalah:
  • .com (comercial) digunakan untuk web komersial.
  • .edu (education) digunakan untuk dunia pendidikan.
  • .gov (government) digunakan untuk lembaga pemerintahan.
  • .mil (military) digunakan untuk kepentingan militer.
  • .org (organization) digunakan unutk organisasi atau lembaga non profit.
  • .biz digunakan untuk kepentingan bisnis.
  • .net (network) digunakan untuk organisasi jaringan.
  • .info (information) digunakan untuk berbagai macam informasi baik personal maupun lembaga.
  • .name : digunakan untuk perorangan atau pribadi.
  • .shop : digunakan untuk toko.


Cara cek Domain TLD untuk blog dan web

Nah kali ini kami ingin mengajak kalian yang ingin beralih ke domain TLD untuk melakukan pengecekan ketersediaan nama dan harga domain idaman kalian. Di sini kita akan berkunjung ke halaman Rumahweb. Rumahweb merupakan salah satu penyedia jasa pengelolaan Website. Kami sudah menggunakan jasa dari Rumahweb kurang lebih selama 2 tahun ini.

Sekarang kita akan melakukan pengecekan domain baru. Adapun langkah-langkahnya sebagai berikut.

1. Buka halaman order Rumahweb. Kalian akan menuju salah satu halaman Rumahweb. Di halaman ini kalian bisa melakukan pengecekan domain TLD yang belum dipakai orang lain.

Pada halaman order Rumahweb ini ada 3 (tiga) tab : Daftarkan Domain Baru, Transfer Domain, dan Hosting Saja. Pastikan kalian sedang membuka tab Daftarkan Domain Baru.

Pada kotak isian, ketikkan nama domain yang kalian inginkan. Misalnya behappy. Klik tombol Search untuk memulai pengecekan domain baru.



2. Kalian perhatikan hasil pengecekan ketersediaan domain "behappy". Pada sisi kanan kalian bisa melihat ketersediaan dan harga masing-masing domain TLD. Jika statusnya Not Available maka nama domain tidak tersedia. Sebaliknya, nama domain tersedia jika ditampilkan harga domain dalam setahun.


Berikut contoh hasil pencarian untuk domain lebahkurir supaya kalian semakin jelas.


Harga domain pada Rumahweb sangat bervariasi. Ada harga mulai dari Rp 11.000 sampai di atas Rp 200.000 dalam setahun. Sebagai bahan pertimbangan pula dalam memilih domain TLD kalian terkait harga bahwa harga domain pada tahun berikutnya setelah kalian beli biasanya akan naik. Namun jangan khawatir, kenaikan harga yang pernah saya alami masih kisaran Rp. 15.000 saja per tahun. Jadi jika sekarang kalian beli harga Rp.  maka tahun berikutnya bisa jadi naik menjadi Rp.

Bagaimana, apakah kalian sudah memutuskan memilih nama domain yang mana. Temukan nama domain kalian yang paling cocok sesuai konten blog maupun jenis blog kalian (misal pribadi, organisasi, pendidikan, perusahaan, dan lain sebagainya). Untuk melakukan pemesanan domain, kalian harus menuju halaman lainnya karena pada halaman ini khusus untuk pengecekan ketersediaan domain baru saja.

Nah jika kalian membutuhkan bantuan untuk memperoleh domain TLD idaman kalian, kami siap membantu. Begitupula jika kalian membutuhkan bantuan untuk pembuatan blog dengan domain tersebut. Silahkan tinggalkan pesan pada kolom komentar.

Begitulah informasi cara mengecek ketersediaan nama domain TLD. Semoga informasi di atas bermanfaat. Bila ada kekurangan mohon sarannya untuk perbaikan. Ikuti informasi/artikel terbaru melalui fanspage facebook kami di Supervba.

Printer

3R

Teknologi