Tampilkan postingan dengan label HTML5. Tampilkan semua postingan
Tampilkan postingan dengan label HTML5. Tampilkan semua postingan
2/04/2019

Cara Memasang Artikel Terkait Otomatis di Dalam Postingan Blog

View Article

Cara Memasang Artikel Terkait Otomatis di Dalam Postingan Blog - Related Post atau Artikel terkait di dalam postingan atau artikel blog ini memiliki peranan yang cukup penting terhadap blog kita. Karena dengan memasang related post atau artikel terkait otomatis di dalam postingan blog kita akan mendapatkan manfaat yang akan sangat terasa bagi blog kita.

Manfaat yang akan di dapatkan ketika kita memasang atau membuat artikel terkait di dalam postingan blog yang kita tulis akan menarik dan memudahkan pengunjung blog untuk membaca artikel lainnya yang otomatis di tampilkan di dalam postingan blog berdasarkan label atau kategori artikel yang sedang dibacanya.

Dengan adanya related post yang otomatis di tampilkan di tengah artikel ini akan meningkatkan kualitas kualitas internal link blog kita. Dan hal ini akan cukup membantu untuk menurunkan bounce rate blog sobat. Karena tidak sedikit yang mengatakan bahwa salah satu tekhnik ataupun cara menurunkan bounce rate blog adalah dengan memasang internal link di dalam postingan atau artikel blog.

Cara Membuat atau Memasang Artikel Terkait Otomatis di tengah artikel blog ini saya dapatkan dari blog igniel.com dan naminakiky.com/ yang kemudian saya padukan agar tampilan dari related post (baca juga) atau artikel terkait ini lebih menarik untuk di lihat dan mudah untuk dipasang atau diterapkan di blog sobat.

Untuk melihat hasil dan tampilan dari related post di dalam postingan blog ini, silahkan cek melalui link demo berikut:

Demo

Memasang Related Post di Tengah Artikel Blog Non AMP

Untuk sobat yang menggunakan blog non amp dan ingin memasang artikel terkait di tengah postingan yang saya bagikan kali ini, silahkan ikuti tutorial singkatnya berikut ini :

Pertama, silahkan login Blogger - Template - Edit HTML

Kemudian letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>

.relatedPhw {display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #2B0C93;border-radius:30px;}

.relatedPhw .judul {background:#2B0C93;padding:4px 15px;position:absolute;margin:0;font-size:15px;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17);border-radius:30px;}

.relatedPhw ul {margin:0;padding:0}

.relatedPhw ul li {position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}

.relatedPhw a{display:block;color:#2B0C93;font-size:15px;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}

.relatedPhw ul li:first-child {padding-top:0px;}

.relatedPhw ul li:last-child {padding-bottom:0px ; border:0px }

.relatedPhw ul li:first-child a{margin:15px auto 0 auto;}

.relatedPhw ul li:first-child a:hover,.relatedPhw a:hover{color:#000;padding-left:18px}

Sobat juga bisa mengotak-atik tampilan related post ini dengan mengedit kode css diatas

Terakhir silahkan simpan kode berikut setelah kode <data:post.body/>. Jika di template yang sobat gunakan terdapat beberapa kode <data:post.body/>, silahkan sobat coba satu persatu setelah kode <data:post.body/>.

<b:if cond='data:view.isPost'>

<script> //<![CDATA[

// Related Posts Middle by Pehawe.Me

var jumlah = 4;

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('c b=["G","H","I","$t","y","J","K","L","z","M","N","<A>","O",\'<B><a z="\',\'" y="\',\'">\',"</a></B>","</A>"];c d=n o;c p=0;c e=n o;q P(v){c r=0;h(;r<v[b[2]][b[1]][b[0]];r++){c k=v[b[2]][b[1]][r];d[p]=k[b[4]][b[3]];c l=0;h(;l<k[b[5]][b[0]];l++){s(k[b[5]][l][b[6]]==b[7]){e[p]=k[b[5]][l][b[8]];p++;Q}}}}q R(){c g=n o(0);c m=n o(0);c i=0;h(;i<e[b[0]];i++){s(!C(g,e[i])){g[b[0]]+=1;g[g[b[0]]-1]=e[i];m[b[0]]+=1;m[m[b[0]]-1]=d[i]}}d=m;e=g}q C(w,D){c j=0;h(;j<w[b[0]];j++){s(w[j]==D){E S}}E T}q U(){c f=F[b[10]]((d[b[0]]-1)*F[b[9]]());c u=0;x[b[12]](b[11]);h(;u<d[b[0]]&&u<V;){x[b[12]](b[13]+e[f]+b[14]+d[f]+b[W]+d[f]+b[X]);s(f<d[b[0]]-1){f++}Y{f=0}u++}x[b[12]](b[Z])}',62,67,'|||||||||||_0x22c4|var|relatedTitles|relatedUrls|indexLookupKey|value|for|||payload|id|errorsCopy|new|Array|relatedTitlesNum|function|signedTransactionsCounter|if||_0x6c56x6|canCreateDiscussions|lookIn|document|title|href|ul|li|contains|forWhat|return|Math|length|entry|feed|link|rel|alternate|random|floor|write|related_results_labels|break|removeRelatedDuplicates|true|false|ignielBacaJuga|jumlah|15|16|else|17|||||'.split('|'),0,{}))

//]]></script>

<div class='relatedPhw'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:view.isPost'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&
amp;callback=related_results_labels&amp;max-results=100&quot;'/>

</b:if>

</b:loop>

</b:if>

<span class='judul'><span>Baca Juga</span></span>

<script> //<![CDATA[

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('Z(z(p,a,c,k,e,r){e=z(c){A c.K(a)};B(!\'\'.E(/^/,N)){D(c--)r[e(c)]=k[c]||e(c);k=[z(e){A r[e]}];e=z(){A\'\\\\w+\'};c=1};D(c--)B(k[c])p=p.E(M L(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);A p}(\'j a=["k","l",".f-g m, .f-g p","n","o","q","r","s","t","u"];v();(w(){e d=h[a[1]](a[0])[0];i(d){e b=h[a[3]](a[2]);e c=x(b[a[4]]/2);i(b[c][a[5]]==a[6]){b[c][a[8]][a[7]](d,b[c])}y{b[c][a[8]][a[7]](d,b[c][a[9]])}}})();\',C,C,\'||||||||||O|Q|R|J|F|I|H|G|B|Y|14|11|13|16|15||12|P|U|T|S|V|z|W|10\'.X(\'|\'),0,{}))',62,69,'|||||||||||||||||||||||||||||||||||function|return|if|35|while|replace|let|document|body|post|artistTrack|toString|RegExp|new|String|_0x9301||nextIdLookup|indexLookupKey|nextSibling|parentNode|insertBefore|ignielBacaJuga|parseInt|split|var|eval|else|getElementsByClassName|nodeName|br|relatedPhw|length|querySelectorAll'.split('|'),0,{}))

//]]> </script>

</div>

</b:if>

Baca Juga: Cara Mempercepat Loading Gambar Blog

Memasang Related Post di Tengah Artikel Blog AMP

Untuk yang sudah menggunakan template AMP pada tampilan mobile, sobat juga bisa memasang related post ini khusus tampilan dekstop saja agar supaya template kita tetap valid AMP pada tampilan seluler

Untuk yang ingin mencoba memasang artikel terkait ini silahkan simpan css berikut di dalam style amp-custom template blog AMP sobat.

.relatedPhw {display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #2B0C93;border-radius:30px;}

.relatedPhw .judul {background:#2B0C93;padding:4px 15px;position:absolute;margin:0;font-size:15px;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17);border-radius:30px;}

.relatedPhw ul {margin:0;padding:0}

.relatedPhw ul li {position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}

.relatedPhw a{display:block;color:#2B0C93;font-size:15px;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}

.relatedPhw ul li:first-child {padding-top:0px;}

.relatedPhw ul li:last-child {padding-bottom:0px ; border:0px }

.relatedPhw ul li:first-child a{margin:15px auto 0 auto;}

.relatedPhw ul li:first-child a:hover,.relatedPhw a:hover{color:#000;padding-left:18px}

Sobat juga bisa mengotak-atik tampilan related post ini dengan mengedit kode css diatas

Kemudian simpan kode berikut setelah kode <data:post.body/>

<b:if cond='data:view.isPost and data:blog.isMobileRequest == &quot;false&quot;'>

<script> //<![CDATA[

// Related Posts Middle by Pehawe.info

var jumlah = 4;

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('c b=["G","H","I","$t","y","J","K","L","z","M","N","<A>","O",\'<B><a z="\',\'" y="\',\'">\',"</a></B>","</A>"];c d=n o;c p=0;c e=n o;q P(v){c r=0;h(;r<v[b[2]][b[1]][b[0]];r++){c k=v[b[2]][b[1]][r];d[p]=k[b[4]][b[3]];c l=0;h(;l<k[b[5]][b[0]];l++){s(k[b[5]][l][b[6]]==b[7]){e[p]=k[b[5]][l][b[8]];p++;Q}}}}q R(){c g=n o(0);c m=n o(0);c i=0;h(;i<e[b[0]];i++){s(!C(g,e[i])){g[b[0]]+=1;g[g[b[0]]-1]=e[i];m[b[0]]+=1;m[m[b[0]]-1]=d[i]}}d=m;e=g}q C(w,D){c j=0;h(;j<w[b[0]];j++){s(w[j]==D){E S}}E T}q U(){c f=F[b[10]]((d[b[0]]-1)*F[b[9]]());c u=0;x[b[12]](b[11]);h(;u<d[b[0]]&&u<V;){x[b[12]](b[13]+e[f]+b[14]+d[f]+b[W]+d[f]+b[X]);s(f<d[b[0]]-1){f++}Y{f=0}u++}x[b[12]](b[Z])}',62,67,'|||||||||||_0x22c4|var|relatedTitles|relatedUrls|indexLookupKey|value|for|||payload|id|errorsCopy|new|Array|relatedTitlesNum|function|signedTransactionsCounter|if||_0x6c56x6|canCreateDiscussions|lookIn|document|title|href|ul|li|contains|forWhat|return|Math|length|entry|feed|link|rel|alternate|random|floor|write|related_results_labels|break|removeRelatedDuplicates|true|false|ignielBacaJuga|jumlah|15|16|else|17|||||'.split('|'),0,{}))

//]]></script>

<div class='relatedPhw'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:view.isPost'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>

</b:if>

</b:loop>

</b:if>

<span class='judul'><span>Baca Juga</span></span>

<script> //<![CDATA[

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('Z(z(p,a,c,k,e,r){e=z(c){A c.K(a)};B(!\'\'.E(/^/,N)){D(c--)r[e(c)]=k[c]||e(c);k=[z(e){A r[e]}];e=z(){A\'\\\\w+\'};c=1};D(c--)B(k[c])p=p.E(M L(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);A p}(\'j a=["k","l",".f-g m, .f-g p","n","o","q","r","s","t","u"];v();(w(){e d=h[a[1]](a[0])[0];i(d){e b=h[a[3]](a[2]);e c=x(b[a[4]]/2);i(b[c][a[5]]==a[6]){b[c][a[8]][a[7]](d,b[c])}y{b[c][a[8]][a[7]](d,b[c][a[9]])}}})();\',C,C,\'||||||||||O|Q|R|J|F|I|H|G|B|Y|14|11|13|16|15||12|P|U|T|S|V|z|W|10\'.X(\'|\'),0,{}))',62,69,'|||||||||||||||||||||||||||||||||||function|return|if|35|while|replace|let|document|body|post|artistTrack|toString|RegExp|new|String|_0x9301||nextIdLookup|indexLookupKey|nextSibling|parentNode|insertBefore|ignielBacaJuga|parseInt|split|var|eval|else|getElementsByClassName|nodeName|br|relatedPhw|length|querySelectorAll'.split('|'),0,{}))

//]]> </script>

</div>

</b:if>

Tag kondisional yang ditandai diatas berfungsi untuk menampikan related post ini pada postingan blog tampilan dekstop saja. Agar supaya ketika blog di akses melalui seluler (AMP) tidak error.

Baca Juga: Cara Membuat Sitemap (Daftar ISI) Seo Responsive di Blog

Akhir kata dari saya semoga tutorial Cara Mmbuat atau Memasang Artikel Terkait atau Related yang Otomatis muncul di Dalam Postingan atau artikel Blog ini bermanfaat. Selamat mencoba

1/22/2019

Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG

View Article

Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG - Tombol direct chat whatsapp ini biasanya digunakan oleh pengguna blog/website yang berkeinginan untuk mempermudah pengunjung berkomunikasi via chatting whatsapp.

Beraneka ragam cara dari mereka untuk meletakkan tombol chat whatsapp, ada yang berbentuk tombol yang di sematkan setelah artikel yang mereka tulis dan ada juga yang meletakkannya di bagian bawah halaman blog dengan posisi melayang.

Memang benar adanya, jika ada yang mengatakan dengan menyediakan tombol direct chat whatsapp di halaman blog akan cukup bermanfaat. Karena dengan link atau tombol direct chat whatsapp ini, pengunjung blog kita akan dengan sangat mudahnya untuk menghubungi kita via whatsapp.

Tombol Direct Chat Whatsapp yang akan digunakan kali ini menggunakan icon svg dengan tambahan css untuk mengatur posisi dari ikon whatsapp nantinya.

Tombol Direct Chat Whatsapp Dengan icon SVG ini dapat di terapkan di blog AMP dan Non AMP, dan juga tersedia dua versi pilihan yang dapat kalian pilih sesuai dengan keinginan kalian

Bagi kalian yang tertarik untuk memasang Tombol Direct Chat Whatsapp Di Blog Dengan SVG ini di halaman blog kalian, silahkan ikuti tutorial singkatnya berikut :

Cara Memasang Tombol Direct Chat Whatsapp Di Blog

Login Bogger - Klik Template - Edit HTML

Silahkan pilih variasi tombol chat whatsapp berikut sesuai selera

1. Full CSS

Dengan menggunakan Full Css, maka kode HTML akan menjadi lebih simple karena tidak menggunakan kode HTML icon SVG

Simpan kode HTML berikut sebelum kode </body>

<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp' />

Ganti kode 628xxxxxxxxxx dengan nomor whatsapp kalian.

Kemudian tambahkan CSS berikut sebelum </style>.

.fixed-whatsapp {

  position: fixed;

  bottom: 20px;

  right: 20px;

  width: 50px;

  height: 50px;

  z-index: 9999;

}



.fixed-whatsapp:before {

  content: "";

  background-repeat: no-repeat;

  background-size: 34px 34px;

  background-position: center center;

  width: 50px;

  height: 50px;

  background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");

  background-color: #00C853;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 100%;

  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);

}

2. Ikon dengan HTML

Dengan hanya menggunakan HTML, maka ukuran CSS nya lebih kecil.

Simpan kode HTML berikut di atas kode </body>


<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp'>

<svg viewBox='0 0 24 24' width='34' height='34'>

<path fill='#ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/>

</svg>

</a>

Ganti kode 628xxxxxxxxxx dengan nomor WA Anda.

Tambahkan CSS berikut sebelum kode </style>.


.fixed-whatsapp {

  position: fixed;

  bottom: 20px;

  right: 20px;

  width: 50px;

  height: 50px;

  line-height: 50px;

  z-index: 9999;

  text-align: center;

}



.fixed-whatsapp:before {

  content: "";

  width: 50px;

  height: 50px;

  background-color: #00C853;

  position: absolute;

  border-radius: 100%;

  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);

  z-index: 1;

  top: 0;

  left: 0;

}



.fixed-whatsapp svg {

  vertical-align: middle;

  z-index: 2;

  position: relative;

}

Jika ingin menambahkan pesan atau kata-kata di atasnya, silahkan tambahkan CSS berikut :


.fixed-whatsapp:after {

  content: "Hai...Sob, chat mimin di sini yah!";

  width: 100px;

  padding: 5px 10px;

  position: absolute;

  bottom: 100%;

  margin-bottom: 10px;

  right: -150px;

  text-align: right;

  color: #555;

  border: 1px solid #dedede;

  background: rgba(255,255,255,.5);

  border-radius: 4px;

  opacity: 0;

  transition:all .4s ease-in-out;

  font-size: 90%;

  line-height: 1.1;

}



.fixed-whatsapp:hover:after {

  opacity: 1;

  right: 0;

}

Yang ditandai silahkan sesuaikan dengan kata-kata yang ingin ditampilkan. Silahkan coba demonya dan hover ikonnya.

Jika ada yang ingin di tanyakan seputar tulisan kali ini, silahkan tinggalkan komentar.

Demikian artikel tentang bagaimana Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG ini semoga bermanfaat dan selamat mencoba.

1/03/2019

Menampilkan/Menyembunyikan Widget Di Halaman Tertentu Blogger Terbaru

View Article

Menampilkan/Menyembunyikan Widget Di Halaman Tertentu Blogger Terbaru sangat di anjurkan kepada semua blogger terutama bagi mereka yang sudah menggunakan/memasang iklan dari Google Adsense. Kenapa begitu? Kang Andy (Kompi Ajaib) pernah menulis sebuah artikel di blognya yang menyatakan bahwa para blogger yang sudah menjadi publiser Adsense perlu menyembunyikan widget Adsense di halaman hasil pencarian sebuah blog guna memperkecil invalid klik dan lainnya yang disebabkan oleh para visitor jail yang dengan sengaja menggunakan fitur search di blog kita dengan mengetikkan konten yang dilarang oleh Adsense (kurang lebihnya sih begitu).

Terlepas dari paparan diatas, teknik menampilkan dan menyembunyikan sebuah widget pada laman tertentu blogger ini juga berguna bagi kita yang tidak ingin menampilkan iklan google Adsense ketika kita sedang melakukan priview postingan baru yang kita buat.

Dan perlu diketahui bahwa Blogger/Blogspot juga sudah memperbarui tag kondisional, namun sobat tidak perlu hawatir jika masih menggunakan tag kondisional lawas, karena tag kondisional lawas tersebut masih berlaku. Akan tetapi, banyak yang mengatakan kita perlu mengikuti arus yang dalam artian kita juga disarankan untuk menggunakan tag kondisional terbaru untuk blogger/blogspot.

Selanjutnya, jika sobat ingin menampilkan/menyembunyikan widget dihalaman tertentu blogger/blogspot silahkan ikuti tutorial singkat berikut :


Menampilkan/Menyembunyikan Widget Di Halaman Tertentu Blogger

Pertama, Silahkan login ke Blogger - Kemudian pilih Theme/Template - Klik Edit HTML - Klik Jump to Widget dan klik Widget yang ingin kita tampilkan/sembunyikan seperti gambar berikut:


Misalnya, widget/gadget yang ingin disembunyikan adalah Widget Popular Post, maka kodenya seperti berikut ini:

<b:widget id='PopularPosts1' locked='false' title='Populer' type='PopularPosts' version='1'>...</b:widget>

Dan widget/gadget Popular Post tersebut ingin disembunyikan pada halaman Pencarian Blog, maka tinggal menambahkan tag kondisional khusus seperti yang saya tandai dibawah ini:

<b:widget cond='!data:view.isSearch' id='PopularPosts1' locked='false' title='Populer' type='PopularPosts' version='1'>...</b:widget>

Atau, jika sobat ingin menampilkan Widget tersebut hanya di halaman pencarian blog, sobat hanya perlu menghapus tanda ! pada tag kondisional tadi hingga akan nampak seperti berikut :

<b:widget cond='data:view.isSearch' id='PopularPosts1' locked='false' title='Populer' type='PopularPosts' version='1'>...</b:widget>

Dan berikut beberapa tag kondisional blogger terbaru yang dapat sobat gunakan untuk menampilkan atau menyembunyikan widget dihalaman tertentu blogger/blogspot :

1. Hanya ingin menampilkan widget di halaman depan (homepage)

<b:widget cond='data:view.isHomepage' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

2. Ingin menyembunyikan widget di halaman depan (homepage)
<b:widget cond='!data:view.isHomepage' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

3. Hanya ingin menampilkan widget di halaman item (post page dan static page)
<b:widget cond='data:view.isSingleItem' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

4. Ingin menyembunyikan widget di halaman item (post page dan static page)
<b:widget cond='!data:view.isSingleItem' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

5. Hanya ingin menampilkan widget di halaman Post
<b:widget cond='data:view.isPost' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

6. Ingin menyembunyikan widget di halaman Post
<b:widget cond='!data:view.isPost' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

7. Hanya ingin menampilkan widget di halaman Static
<b:widget cond='data:view.isPage' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

8. Ingin menyembunyikan widget di halaman Static
<b:widget cond='!data:view.isPage' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

9. Ingin menyembunyikan widget di semua halaman Pencarian
<b:widget cond='!data:view.isSearch' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

10. Ingin menyembunyikan widget hanya di halaman Pencarian Label
<b:widget cond='!data:view.isLabelSearch' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

11. Ingin menyembunyikan widget hanya di halaman Item dan Error
<b:widget cond='!data:view.isSingleItem or !data:view.isError' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

12. Ingin menyembunyikan widget di Menu Layout Blogger
<b:widget cond='!data:view.isLayoutMode' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

13. Ingin Menampilkan Widget di halaman Postingan Tertentu (URL tertentu)
<b:widget cond='data:view.url == "URL_ANDA_DISINI"' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

Contoh:
<b:widget cond='data:view.url == "https://www.pehawe.info/2016/06/menampilkan-widget-tertentu-di.halaman.tertentu-blog.html"' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

Jika 2 URL:
<b:widget cond='data:view.url == "URL_1" or data:view.url == "URL_2"' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

14. Ingin Menyembunyikan Widget di halaman Postingan Tertentu (URL tertentu)
<b:widget cond='data:view.url != "URL_ANDA_DISINI"' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

15. Ingin Menampilkan Widget hanya di halaman Nama Label Tertentu
<b:widget cond='data:view.search.label == "NAMA_LABEL"' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

Jika 2 label:
<b:widget cond='data:view.search.label == "NAMA_LABEL_1" or data:view.search.label == "NAMA_LABEL_2"' id='PopularPosts1' locked='false' title='mgid' type='HTML'>

16. Ingin Menyembunyikan Widget hanya di halaman Nama Label Tertentu
<b:widget cond='data:view.search.label != "NAMA_LABEL"' id='PopularPosts1' locked='false' title='Populer' type='HTML'>...</b:widget>

Jika 3 label:
<b:widget cond='data:view.search.label != "NAMA_LABEL_1" and data:view.search.label != "NAMA_LABEL_2" and data:view.search.label != "NAMA_LABEL_3"' id='PopularPosts1' locked='false' title='mgid' type='HTML'>


Tag Kondisional terbaru Blogger/Blogspot diatas dapat diterapkan pada blog Amp dan Non Amp, jadi silahkan atur kembali widget yang terpasang di blog sobat. Dan yang paling penting silahkan nonaktifkan iklan adsense di laman hasil pencarian blog sobat seperti yang sudah di bincangkan diatas.

Demikian tutorial Cara Menampilkan atau Menyembunyikan Widget Di Halaman Tertentu Blogger Terbaru 2019 yang dapat sobat gunakan di blog yang sobat kelola. Semoga bermanfaat dan Selamat mencoba.

9/19/2018

Cara Membuat Slide Menu Untuk Blog Non AMP Ala Kompiajaib

View Article
Pada tutorial blogger kali ini kita akan belajar bagaimana Cara Membuat Slide Menu Untuk Blog Non AMP Ala Kompiajaib yang dapat sobat pasang di blog yang sobat kelola.

Tampilan slide menu di sidebar ini cukup simple dengan efek show hide yang akan muncul dari samping blog. Tidak hanya tampilannya yang simple, akan tetapi slide menu ini mendukung untuk digunakan pada versi desktop maupun mobile.

Pada awalnya slide menu ini digunakan pada template blog Amp yang di publikasikan oleh Kang Andy pemilik kompiajaib, namun kemudian beliau melakukan modifikasi agar slide menu Slide Menu ala AMP Sidebar tersebut dapat digunakan di template non Amp.

Untuk sobat yang ingin mencoba Slide Menu Untuk Blog Non AMP Ala Amp Sidebar ini, sobat bisa mengikuti tutorial singkat dibawah ini :

Cara Membuat Slide Menu Untuk Blog Non AMP

Pertama, silahkan letakkan CSS berikut ini tepat sebelum kode </head>

<style>

@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')}

.fontroboto{font-family:Roboto,sans-serif}

.fontweight500{font-weight:500;}

.btn-sidebaramp{background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-repeat:no-repeat;background-size:34px 34px;background-position:center center;background-color:transparent;width:48px;height:70px;line-height:70px;border:none;position:fixed;top:0;right:10px;z-index:1001;cursor:pointer}

.ampsidebar{width:300px;background:#00626B}

svg.amp-close-image{position:absolute;top:15px;left:16px;cursor:pointer}

.ampsidebar nav ul{margin-top:30px}

.ampsidebar nav li:first-child{padding-top:0}

.ampsidebar nav li a{font-size:16px;padding:10px 20px;color:#efefef}

.ampsidebar nav li a:hover,.ampsidebar nav li a:visited{color:#fff}

.ampsidebar button{margin-left:20px}

.social-follow,.follow_sidebar,.logo_sidebar{text-align:center}

.logo_sidebar{height:auto;margin:40px auto 0;font-size:24px;color:#fff;letter-spacing:-1px;word-spacing:-5px;line-height:1}

.follow_sidebar{line-height:normal;letter-spacing:normal;text-transform:uppercase;color:#fff;font-size:.94rem;padding-top:1.5rem}

.social-follow{margin:.5rem 0 1rem;-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:initial;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;padding-left:0}

.social-follow li{display:inline-block;margin-right:0;}

.social-follow li .gp svg{vertical-align:4px}

svg:not(:root){overflow:hidden}

.ampstart-icon,.ampstart-sidebar .ampstart-icon{fill:#fff}

.liststyle0{list-style:none}

.p0{padding:0}

.m0{margin:0}

.p1{padding:.5rem}

.inline-block{display:inline-block}

.displayblock,.sidebar-mask.open{display:block}

:active,:focus{outline:0}

a{text-decoration:none}

.ampsidebar.p0.mystyle{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 233ms cubic-bezier(0,0,.21,1);transition:-webkit-transform 233ms cubic-bezier(0,0,.21,1);transition:transform 233ms cubic-bezier(0,0,.21,1);transition:transform 233ms cubic-bezier(0,0,.21,1),-webkit-transform 233ms cubic-bezier(0,0,.21,1)}
.ampsidebar.p0{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}

.ampsidebar{position:fixed;top:0;max-height:100vh;height:100vh;max-width:80vw;min-width:45px;outline:0;overflow-y:auto;z-index:2147483647;-webkit-overflow-scrolling:touch;will-change:transform}

.sidebar-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;opacity:.2;background-image:none;background-color:#000;z-index:2147483646}
.flow{overflow:hidden;position:relative}

</style>

Selanjutnya, silahkan sobat letakkan kode berikut diatas kode </body>

<div class='ampsidebar fontroboto p0' id='side-bar'>

<svg aria-label='Close Sidebar' class='amp-close-image' height='20' onclick="myFunction1()" role='button' tabindex='0' viewBox='0 0 24 24' width='20'>

<path d='M19,3H16.3H7.7H5A2,2 0 0,0 3,5V7.7V16.4V19A2,2 0 0,0 5,21H7.7H16.4H19A2,2 0 0,0 21,19V16.3V7.7V5A2,2 0 0,0 19,3M15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4L13.4,12L17,15.6L15.6,17Z' fill='#fff'></path>

</svg>

<div class='logo_sidebar fontweight500 displayblock'>

PEHAWE

</div>

<nav>

<ul class='p0 liststyle0'>

<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='About'>About</a></li>

<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' rel='nofollow noopener' title='Contact'>Contact</a></li>

<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='Privacy'>Privacy</a></li>

<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' rel='nofollow noopener' target='_blank' title='Sitemap'>Sitemap</a></li>

<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='Iklan'>Iklan</a></li>

<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='Jasa Review'>Jasa Review</a></li>

</ul>

</nav>

<h3 class='follow_sidebar fontroboto fontweight500 displayblock'>follow us</h3>

<ul class='social-follow m0 displayblock'>

<li class='p0'>

<a aria-label='Link to Facebook' class='inline-block p1' href='https://www.facebook.com/#' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 56 55' width='30' xmlns='http://www.w3.org/2000/svg'><title>Facebook</title><path class='ampstart-icon ampstart-icon-fb' d='M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43'></path></svg></a>

</li>

<li class='p0'>

<a aria-label='Link to Instagram' class='inline-block p1' href='https://www.instagram.com/#' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 54 54' width='30' xmlns='http://www.w3.org/2000/svg'><title>instagram</title><path class='ampstart-icon ampstart-icon-instagram' d='M27.2 6.1c-5.1 0-5.8 0-7.8.1s-3.4.4-4.6.9c-1.2.5-2.3 1.1-3.3 2.2-1.1 1-1.7 2.1-2.2 3.3-.5 1.2-.8 2.6-.9 4.6-.1 2-.1 2.7-.1 7.8s0 5.8.1 7.8.4 3.4.9 4.6c.5 1.2 1.1 2.3 2.2 3.3 1 1.1 2.1 1.7 3.3 2.2 1.2.5 2.6.8 4.6.9 2 .1 2.7.1 7.8.1s5.8 0 7.8-.1 3.4-.4 4.6-.9c1.2-.5 2.3-1.1 3.3-2.2 1.1-1 1.7-2.1 2.2-3.3.5-1.2.8-2.6.9-4.6.1-2 .1-2.7.1-7.8s0-5.8-.1-7.8-.4-3.4-.9-4.6c-.5-1.2-1.1-2.3-2.2-3.3-1-1.1-2.1-1.7-3.3-2.2-1.2-.5-2.6-.8-4.6-.9-2-.1-2.7-.1-7.8-.1zm0 3.4c5 0 5.6 0 7.6.1 1.9.1 2.9.4 3.5.7.9.3 1.6.7 2.2 1.4.7.6 1.1 1.3 1.4 2.2.3.6.6 1.6.7 3.5.1 2 .1 2.6.1 7.6s0 5.6-.1 7.6c-.1 1.9-.4 2.9-.7 3.5-.3.9-.7 1.6-1.4 2.2-.7.7-1.3 1.1-2.2 1.4-.6.3-1.7.6-3.5.7-2 .1-2.6.1-7.6.1-5.1 0-5.7 0-7.7-.1-1.8-.1-2.9-.4-3.5-.7-.9-.3-1.5-.7-2.2-1.4-.7-.7-1.1-1.3-1.4-2.2-.3-.6-.6-1.7-.7-3.5 0-2-.1-2.6-.1-7.6 0-5.1.1-5.7.1-7.7.1-1.8.4-2.8.7-3.5.3-.9.7-1.5 1.4-2.2.7-.6 1.3-1.1 2.2-1.4.6-.3 1.6-.6 3.5-.7h7.7zm0 5.8c-5.4 0-9.7 4.3-9.7 9.7 0 5.4 4.3 9.7 9.7 9.7 5.4 0 9.7-4.3 9.7-9.7 0-5.4-4.3-9.7-9.7-9.7zm0 16c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3zm12.4-16.4c0 1.3-1.1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3 0-1.2 1-2.3 2.3-2.3 1.2 0 2.3 1.1 2.3 2.3z'></path></svg></a>

</li>

<li class='p0'>

<a aria-label='Link to Twitter' class='inline-block p1' href='https://twitter.com/#' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 53 49' width='30' xmlns='http://www.w3.org/2000/svg'><title>Twitter</title><path class='ampstart-icon ampstart-icon-twitter' d='M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6'></path></svg></a>

</li>

<li class='p0'>

<a aria-label='Link to Google+' class='inline-block p1 gp' href='https://www.google.com/#' rel='nofollow noopener' target='_blank'><svg height='24' viewbox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><title>Google+</title><path class='ampstart-icon ampstart-icon-google' d='M20,2A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V4C2,2.89 2.9,2 4,2H20M20,12H18V10H17V12H15V13H17V15H18V13H20V12M9,11.29V13H11.86C11.71,13.71 11,15.14 9,15.14C7.29,15.14 5.93,13.71 5.93,12C5.93,10.29 7.29,8.86 9,8.86C10,8.86 10.64,9.29 11,9.64L12.36,8.36C11.5,7.5 10.36,7 9,7C6.21,7 4,9.21 4,12C4,14.79 6.21,17 9,17C11.86,17 13.79,15 13.79,12.14C13.79,11.79 13.79,11.57 13.71,11.29H9Z'></path></svg></a>

</li>

</ul>

</div>



<div aria-label='Open' class='btn-sidebaramp p0' onclick="myFunction1()" role='button' tabindex='0'></div>



<div class="sidebar-mask" onclick="myFunction1()" hidden='' id='sidebar-mask'></div>

<script>

function myFunction1() {

var element = document.getElementById("side-bar");

element.classList.toggle("mystyle");

var element = document.getElementById("sidebar-mask");

element.classList.toggle("open");

var body = document.body;

body.classList.toggle("flow");

}

</script>

Silahkan edit dan ganti link-link yang ingin di pasang dan link sosial media yang ingin sobat gunakan.

Result

Selamat Mencoba dan Salam Luar Biasa
5/21/2018

Cara Memasang Ucapan Marhaban Yaa Ramadhan di Blog

View Article
Cara Memasang Ucapan Marhaban Yaa Ramadhan di Blog - Pada tutorial kali ini saya akan membagikan sebuah cara membuat ucapan selamat menunaikan ibadah puasa di blog atau ucapan marhaban yaa ramadhan dengan efek animasi dengan tombol close seperti yang sudah di gunakan Arlina Design.

Untuk memasang ucapan selamat menunaikan ibadah puasa di blog ini, kalian hanya perlu memasang beberapa kode di dalam settingan edit html blog kalian. Dan tentu saja untuk kode htmlnya sudah saya sediakan pula.  Dan untuk kalian yang ingin melihat seperti apa tampilan jelasnya bisa langsung kunjungi blog arlina design atau bisa juga klik tombol demo dibawah ini.

Demo

Nah untuk kalian yang tertarik ingin memasang Ucapan Marhaban Yaa Ramadhan ataupun ucapan Selamat Menunaikan ibadah puasa di blog kalian, silahkan ikuti tutorial berikut :

Cara Memasang Ucapan Marhaban Yaa Ramadhan di Blog

Silahkan Login ke Blogger > Template > Edit HTML

Silahkan tambakan css font awesome sebelum kode </head>, jika sebelumnya kalian sudah memasang css font awesome ini, silahkan lewati langkah ini.

<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>

Selanjutnya silahkan letakkan css berikut tepat sebelum kode </style> atau ]]></b:skin

/* Pop Up Animation Ramadan */
@keyframes flipInX{from{transform:perspective(400px) rotate3d(1,0,0,90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{transform:perspective(400px)}}@keyframes change_color{0%{background:#5ac7da}33.33%{background:#3173bd}66.66%{background:#0d4a8d}100%{background:#5ac7da}}@keyframes run_hari18{0%{transform:translate(0%,0);opacity:0}50%{transform:translate(100%,0);opacity:1}100%{transform:translate(100%,0);opacity:0}}@keyframes sun_movement{0%{top:50px}100%{top:50px}}@keyframes run_malam18{0%{transform:translate(-20%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(20%,0);opacity:0}100%{transform:translate(-20%,0);opacity:1}}@keyframes moon_movement{0%{transform:translate(-200%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(200%,0);opacity:0}100%{transform:translate(-200%,0);opacity:1}}
/* Pop Up Ramadan */
#ucapanramadhan2018{display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:660px;box-shadow:0 19px 38px rgba(0,0,0,0.1),0 15px 12px rgba(0,0,0,0.12);z-index:99;min-height:350px;padding:20px;overflow:hidden;border-radius:10px;animation:change_color 7s infinite linear,flipInX 1s linear}#ucapanramadhan2018 .puasa18{position:absolute;color:#fff;font-size:2rem;font-weight:400;padding:30px;z-index:99999;text-align:center;margin:auto;left:0;right:0;top:20%}#ucapanramadhan2018 .puasa18 p{margin:20px auto;text-shadow:2px 2px 5px rgba(0,0,0,0.2)}#ucapanramadhan2018 .puasa18 .ramadan2018{font-size:3rem;font-weight:700}#ucapanramadhan2018 a.close-popup{position:absolute;bottom:15px;right:20px;color:#fff;text-align:center;border-radius:100%;cursor:pointer;z-index:99;transition:all .3s}#ucapanramadhan2018 a.close-popup:hover{color:#fff}#ucapanramadhan2018 a.close-popup:active{opacity:0}#ucapanramadhan2018 a.close-popup i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}#ucapanramadhan2018 a.close-popup:hover i{transform:rotate(360deg)}.gunung18{width:400px;height:300px;display:block;background:#4aad52;position:absolute;bottom:-150px;transform:rotate(45deg);border-radius:50px;z-index:2}.gunung18.behind{background:#42a54a;right:-120px;bottom:-180px;z-index:1}.hari18{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_hari18 7s infinite linear}.hari18 .awan18{margin:30px auto;width:150px;height:70px;display:block;background:#e7e7e7;border-radius:35px;border:10px solid #ffffff;box-shadow:inset 0 -7px 0 0 #d7d7d7;position:absolute;top:90px;left:50px}.hari18 .awan18:before{content:'';width:65px;height:35px;display:block;background:#e7e7e7;border-radius:35px 35px 0 0;border:10px solid #ffffff;border-bottom:0;position:absolute;top:-35px;left:20px}.hari18 .awan18.invert{top:60px;left:250px}.hari18 .awan18.invert:before{left:50px}.hari18 .sun{width:75px;height:75px;display:block;background:#fff297;border-radius:50%;box-shadow:inset -5px -5px 0 0 #ddc991;position:absolute;top:50px;left:0;animation:sun_movement 7s infinite linear}.malam18{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_malam18 7s infinite linear}.malam18 .bintang18 .star{width:5px;height:5px;display:block;background:#f7f7f7;border-radius:50%;position:absolute}.malam18 .bintang18 .star:nth-child(1){top:50px;left:50px}.malam18 .bintang18 .star:nth-child(2){top:200px;left:70px}.malam18 .bintang18 .star:nth-child(3){top:100px;left:300px}.malam18 .bintang18 .star:nth-child(4){top:50px;left:220px}.malam18 .bintang18 .star:nth-child(5){top:160px;left:320px}.malam18 .bintang18 .star:nth-child(6){top:150px;left:230px}.malam18 .bintang18 .star:nth-child(7){top:180px;left:400px}.malam18 .bintang18 .star:nth-child(8){top:50px;left:360px}.malam18 .moon{width:75px;height:75px;display:block;background:#d7d7d7;border-radius:50%;box-shadow:inset -5px -5px 0 0 #c7c7c7;position:absolute;top:50px;left:100px;animation:moon_movement 7s infinite linear}
@media (max-width:800px){#ucapanramadhan2018{top:10px!important;left:10px;right:10px;min-height:250px}#ucapanramadhan2018 .puasa18{font-size:1.1rem;top:0}#ucapanramadhan2018 .puasa18 .ramadan2018{font-size:2.2rem}.gunung18,.hari18,.bintang18,.malam18 .moon{display:none}}

Kemudian silahkan letakkan javascript berikut sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#ucapanramadhan2018").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>

Terakhir silahkan salin kode dibawah ini dan letakkan antara <body> dan </body>

<div id='ucapanramadhan2018'>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>
<div class='puasa18'>
<p>Selamat Menunaikan Ibadah Puasa</p>
<p><span class='ramadan2018'>Ramadan 1439 H</span></p>
</div>
<div class='gunung18'></div>
<div class='gunung18 behind'></div>
<div class='hari18'>
<div class='awan18'></div>
<div class='awan18 invert'></div>
<div class='sun'></div>
</div>
<div class='malam18'>
<div class='bintang18'>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
</div>
<div class='moon'></div>
</div>
</div>

Silahkan simpan setelan template kalian.

Semoga tutorial Cara Memasang Ucapan Marhaban Yaa Ramadhan di Blog kali ini bermanfaat bagi kalian or lebih tepatnya kita semua. Salam luar biasa.
5/05/2018

Cara Membuat Sitemap SEO Responsive di Blog Ala Kompi Ajaib

View Article
Cara Membuat Sitemap SEO Responsive di Blog Ala Kompi Ajaib - Sitemap merupakan daftar isi blog yang menampilkan keseluruhan daftar post di blog yang tentunya akan mempermudah pengunjung blog kalian untuk memilih dan mencari post tertentu yang di inginkan.

Sitemap blog juga sangat penting digunakan untuk kalian khususnya yang sedang proses pendaftaran Google Adsense.

Nah untuk kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat sitemap otomatis dan responsive seperti yang digunakan oleh kompi ajaib baik untuk kalian pengguna template amp blogger ataupun pengguna template non amp.

Sitemap SEO Responsive di Blogger ini sangat cocok untuk kalian gunakan, karena selain tampilannya yang responsive, sitemap ini juga memiliki fitur yang dapat menfilter post terbaru dan juga filter post berdasarkan label atau kategori serta di lengkapi juga fitur pencarian yang akan mempermudah pengunjung blog untuk mencari artikel yang dibutuhkan.


Selanjutnya untuk kalian yang ingin menggunakan Sitemap SEO Responsive di Blogger, silahkan ikuti tutorial singkat berikut :

Cara Membuat Sitemap SEO Responsive di Blog Non AMP

Silahkan Login ke Blogger terlebih dahulu

Selanjutnya silahkan klik Halaman/Page

Kemudian salin semua kode berikut dan tempelkan di halaman/page yang akan di buat sitemap blog.


<div id="sitemap-blog">

<table>

<tbody>

<tr>

<td>

<label for="feed-order">Urutkan artikel berdasarkan:</label>

</td>

<td>

<select id="feed-order">

<option selected="" value="published">Artikel terbaru</option>

<option value="updated">Artikel yang terakhir di update</option>

</select>

</td>

</tr>

<tr>

<td>

<label for="label-sorter">Filter artikel berdasarkan kategori:</label>

</td>

<td>

<select disabled="" id="label-sorter">

<option selected="">Loading....</option>

</select>

</td>

</tr>

<tr>

<td>

<label for="feed-q">Cari artikel dengan kata kunci:</label>

</td>

<td>

<form id="post-searcher">

<input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />

</form>

</td>

</tr>

</tbody>

</table>

</div>

<br />

<header id="result-desc"></header>

<br />

<ul id="daftar-isi-blog"></ul>

<div id="feed-nav">

</div>



<script type="text/javascript">

var head = document.head || document.getElementsByTagName('head')[0];

var style = document.createElement('style');

style.type = 'text/css';

var css = '#sitemap-blog{padding:7px 10px;margin:0 auto}#sitemap-blog table{width:auto;margin:0 auto;border:none!important}#sitemap-blog table td{border:none!important;padding:0!important}#sitemap-blog form{font:inherit}#sitemap-blog label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#sitemap-blog select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#sitemap-blog input,#sitemap-blog select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#sitemap-blog select option{min-height:1.4em!important}#sitemap-blog input#feed-q{padding:5px 10px!important}#daftar-isi-blog{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}#daftar-isi-blog li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftar-isi-blog li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#daftar-isi-blog li a{text-decoration:none;color:#2C2C2C;font-weight:500}#daftar-isi-blog li a:hover{text-decoration:none;color:#E94141}#daftar-isi-blog li .news-text{margin-top:5px;line-height:1.3em!important}#daftar-isi-blog li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#sitemap-blog table{margin:0 auto;width:100%}#daftar-isi-blog,#sitemap-blog{margin:0 auto}#daftar-isi-blog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftar-isi-blog li .news-text,#feedContainer:after,#daftar-isi-blog li img{display:none!important}}.post-body{min-height:300px;background:url(https://lh6.googleusercontent.com/-UKClHRpzskg/VfOm1eLfT7I/AAAAAAAAiQw/1pwwhEsT49I/w220-h19-no/ajax-loader%2B%25281%2529.gif)50% 50% no-repeat!important}';

style.appendChild(document.createTextNode(css));

head.appendChild(style);

</script>



<script type='text/javaScript'>

document.write;

var loadToc, loadCategories, _toc = {

init: function() {

var cfg = {

homePage: window.location.origin,

maxResults: 10,

numChars: 270,

thumbWidth: 140,

thumbHeight: 95,

navText: "Tampilkan artikel selanjutnya &#9660;",

resetToc: "Kembali ke Awal",

noImage: "//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1100/no-thumbnail.png",

loading: "<span>Memuat...</span>",

counting: "<div>Memuat artikel...</div>",

searching: "<span>Mencari...</span>"

},

w = window,

d = document,

el = function(id) {

return d.getElementById(id);

},

o = {

a: el('feed-order'),

b: el('label-sorter').parentNode,

c: el('post-searcher'),

d: el('feed-q'),

e: el('result-desc'),

f: el('daftar-isi-blog'),

g: el('feed-nav'),

h: d.getElementsByTagName('head')[0],

i: 0,

j: null,

k: 'published',

l: 0,

m: ""

},

fn = {

a: function() {

old = el('temporer-script');

old.parentNode.removeChild(old);

},

b: function(param) {

var script = d.createElement('script');

script.type = "text/javascript";

script.id = "temporer-script";

script.src = param;

if (el('temporer-script')) fn.a();

o.h.appendChild(script);

},

c: function(mode, tag, order) {

o.i++;

o.e.innerHTML = cfg.counting;

o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"];

if (mode === 0) {

fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');

} else if (mode == 1) {

fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc');

}

o.j = (tag !== null) ? tag : null;

o.l = mode;

o.a.disabled = true;

o.b.children[0].disabled = true;

},

d: function(json) {

var _h;

o.g.innerHTML = "";

o.e.innerHTML = o.l == 1 ? '<span>Hasil penelusuran untuk kata kunci <b>&#8220;' + o.m + '&#8221;</b> (' + json.feed.openSearch$totalResults.$t + ' Hasil)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Artikel</div>';

if ("entry" in json.feed) {

var a = json.feed.entry,

b, c, _d, e = "0 Komentar",

f = "",

g;

for (var i = 0; i < cfg.maxResults; i++) {

if (i == a.length) break;

b = a[i].title.$t;

_d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<
(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : "";

g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "");

for (var j = 0, jen = a[i].link.length; j < jen; j++) {

c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#";

}

for (var k = 0, ken = a[i].link.length; k < ken; k++) {

if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {

e = a[i].link[k].title;

break;

}

}

_h = d.createElement('li');

_h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" target="_blank" title="' + b + '">' + b + '</a><div class="news-text">' + _d + '&hellip;<br style="clear:both;"></div></div>';

o.f.appendChild(_h);

}

_h = d.createElement('a');

_h.href = '#load-more';

_h.innerHTML = cfg.navText;

_h.onclick = function() {

fn.c(o.l, o.j, o.k);

return false;

};

} else {

_h = d.createElement('a');

_h.href = '#reset-content';

_h.innerHTML = cfg.resetToc;

_h.onclick = function() {

o.i = -1;

o.e.innerHTML = cfg.counting;

o.f.innerHTML = "";

fn.c(0, null, 'published');

o.a.innerHTML = o.a.innerHTML;

o.b.children[0].innerHTML = o.b.children[0].innerHTML;

return false;

};

}

o.g.appendChild(_h);

o.a.disabled = false;

o.b.children[0].disabled = false;

},

e: function(json) {

var a = json.feed.category,

b = '<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';

for (var i = 0, len = a.length; i < len; i++) {

b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>';

}

b += '</select>';

o.b.innerHTML = b;

o.b.children[0].onchange = function() {

o.i = -1;

o.f.innerHTML = "";

o.g.innerHTML = cfg.loading;

fn.c(0, this.value, o.k);

};

}

};

loadToc = fn.d;

loadCategories = fn.e;

fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max-results=' + cfg.maxResults + '&orderby=published&callback=loadToc');

fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');

o.a.onchange = function() {

o.i = -1;

o.f.innerHTML = "";

o.g.innerHTML = cfg.counting;

o.b.children[0].innerHTML = o.b.children[0].innerHTML;

fn.c(0, null, this.value);

o.k = this.value;

};

o.c.onsubmit = function() {

o.i = -1;

o.f.innerHTML = "";

o.m = o.d.value;

fn.c(1, o.d.value, o.k);

return false;

};

}

};

_toc.init();

</script>


maxResults: 10. Berapa Artikel Yang ingin ditampilkan Ketika Sitemap Pertama Kali Di Load
numChars: 270. Jumlah Deskripsi Pada Setiap Postingan
thumbWidth: 140. Lebar Gambar
thumbHeight: 95. Tinggi Gambar

Simpan dan lihat hasilnya.

Selanjutnya untuk kalian pengguna template amp, silahkan ikuti tutorial berikut :

Cara Membuat Sitemap SEO Responsive di Blog AMP


Nah jika kalian tidak sabar ingin mencoba membuat Sitemap blog pada halaman static Blogger AMP HTML, silahkan gunakan kode berikut ini dan paste pada mode HTML halaman static untuk Sitemap blog kalian.

<amp-iframe title="Sitemap"

src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/sitemaps-amp.html?url=https://www.pehawe.me/"

height="750"

layout="fixed-height"

frameborder="0"

sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">

<amp-img src="https://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png"
layout="fixed-height"

height="360"

width="auto"

placeholder>

</amp-img>

</amp-iframe>

Silahkan ganti URL https://www.pehawe.me/ dengan URL blog Anda dan pastikan blog kalian sudah menggunakan HTTPS.

Demikian tutorial Cara Membuat Sitemap SEO Responsive di Blog Ala Kompi Ajaib yang dapat saya bagikan kali ini semoga bermanfaat teruntuk kalian para blogger. Salam luar biasa.
3/09/2018

Cara Membuat Gradasi Teks Dengan CSS Ala Kompi Ajaib

View Article
Cara Membuat Gradasi Teks Dengan CSS Ala Kompi Ajaib - Membuat gradasi teks atau gradient text merupakan sebuah tips yang nantinya akan mengubah warna sebuah teks seperti heading (h1, h2, h3, h4, h5 dan h6) ataupun teks lainnya dengan tiga warna sekaligus yang tentunya akan membuat tampilan heading blog atau teks lain di blog kita menjadi lebih keren hanya dengan menggunakan css saja.

Tekhnik mengganti warna teks dengan gradasi teks ini tentunya tidak akan memberatkan loading blog kita, dikarenakan gradient text ini hanya menggunakan sedikit css saja. Dan tentunya patut kalian coba untuk mempercantik tampilan blog yang sedang kalian gunakan. Dan berikut contoh Gradasi Teks yang nantinya dapat kalian ganti sendiri warnanya sesuai selera kalian.

Selanjutnya jika kalian ingin Membuat Gradasi Teks Dengan CSS Ala Kompi Ajaib ini, silahkan simak tutorial singkat berikut :

Cara Membuat Gradasi Teks Dengan CSS

Pertma, silahkan login ke Blogger >> Theme >> Edit HTML
Selanjutnya, salin kode CSS berikut kemudian letakkan tepat di atas atau sebelum kode ]]></b:skin

.gradient-text{

background:#00626b;

background:-moz-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);

background:-webkit-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);

background:linear-gradient(to right,#00626b 0,#61c419 50%,#00f7ca 100%);

filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 );

background-clip:text;

-webkit-background-clip:text;

text-fill-color:transparent;

-webkit-text-fill-color:transparent;

}

Silahkan modifikasi warna yang sudah saya tandai dengan warna yang kalian kehendaki. Untuk kode warnanya, kalian bisa buat dulu di https://goo.gl/NC36GL .

Untuk menerapkan Gradasi warna ini ke sebuah teks, kalian tinggal menambahkan class gradient-text pada teks yang ingin di buat gradasi. Seperti contoh :

Berikut contoh penerapan gradasi teks pada teks normal

<div class="gradient-text">Contoh Gradasi Teks Menggunakan CSS</div>

Untuk mengganti warna tulisan tertentu seperti Header blog, wana judul postingan dan lainnya, caranya sama saja. Kalian tinggal menambahkan pada tag headingnya, berikut contoh penerapan gradasi teks pada title blog dan heading lainnya :

<div id='header-inner'><div class='titlewrapper gradient-text'>

<h1 class="gradient-text">Teks Heading 1</h1>

<h2 class="gradient-text">Teks Heading 2</h2>


Semoga Tutorial Cara Membuat Gradasi Teks Dengan CSS Ala Kompi Ajaib kali ini bermanfaat tentunya bagi kalian yang sedang hobi-hobinya ngblog. Salam luar biasa
1/21/2018

Membuat Notifikasi (Pesan) Adblocker Adsense Ala Arlina Design

View Article
Adblocker merupakan sebuah Add-Ons atau Extensi sebuah browser yang berfungsi untuk memblokir iklan yang di tampilkan di blog kita tak terkecuali iklan Adsense yang sebenarnya tidak mengganggu pengunjung ketika mengakses blog kita. Akan tetapi tidak sedikit orang memasang Adblocker ini dikarenakan sudah banyak blog ataupun website yang menggunakan iklan Popup dan lainnya yang sering mengganggu aktifitas pengunjung. Adblocker ini mempunyai banyak macam seperti Adblock, Adblock Plus, uBlock Origin dan masih banyak yang lainnya yang fungsi utamanya adalah sama-sama memblokir iklan yang di tampilkan di sebuah blog.

Dengan adanya Adblocker ini pastinya akan cukup merugikan para Publisher Adsense, dikarenakan dengan adanya add ons yang satu ini otomatis iklan Adsense yang di pasang di blog tidak akan tampil. Dan untuk mengatasi hal tersebut, diperlukan sebuah cara halus agar pengunjung blog kita tidak mengaktifkan adblocker ketika berkunjung di blog kita.

Dan pada kesempatan kali ini akan saya bagikan sebuah Cara Membuat Pesan atau Notikasi Adblocker Adsense Ala Arlina Design dan Kompi Ajaib. Jika mendengar nama kedua mastah blogger ini pasti sudah asing bagi para blogger jaman old dan jaman now. Selain dari tips trik yang bermanfaat, kedua mastah blogger ini juga sudah banyak mendesain template keren yang sudah banyak digunakan oleh para blogger lokal bahkan nonlokal. Biar tidak panjang lebar, silahkan simak Cara Membuat Pesan atau Notifikasi Adblocker Adsense Arlina Design dan Kompi Ajaib berikut :


Membuat Notifikasi Pesan Adblocker Adsense Ala Arlina Design

Notikasi Adblocker Adsense disini ada 2 Style yang dapat agan pilih mana yang cocok untuk agan pasang di blog agan.

Style 1 (Standart)



Style 2 (Full Display)



Pertama, login blogger > Template > Edit HTML > Kemudian tambahkan kode CSS berikut tepat di atas kode ]]></b:skin> atau </style>

CSS Style 1

/* Notifikasi Adblocker Adsense */
#keep-ads{padding:0;position:fixed;bottom:0;opacity:0;height:auto;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;}
.keep-adsme{background:#1398ec;color:#fff;position:absolute;text-align:center;padding:0;margin:auto;top:30%;left:0;right:0;font-size:1.2rem;line-height:1.5;max-width:930px;box-shadow:0 0 50px rgba(0,0,0,0.25);transition:all .6s cubic-bezier(.25,.8,.25,1);overflow:hidden}
.keep-adsme:hover{box-shadow:0 0 20px rgba(0,0,0,0.15);}
.keep-adsme h4{background:#0079c4;color:#fff;padding:15px 25px;font-size:2.2rem;margin:0 auto;border-bottom:1px solid rgba(0,0,0,0.1);}
.keep-me{border-top:1px solid rgba(255,255,255,0.1);padding:10px 30px 50px 30px}
#keep-ads p{margin:0}
#keep-ads a{color:#ffe88b;}#keep-ads a:hover{color:#ffe88b;text-decoration:underline}
#keep-ads.show{left:0;top:0;right:0;z-index:1000;pointer-events:auto;opacity:1;visibility:visible;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);animation:wobble .7s;opacity:1;}
.close-keep-ads{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;right:10px;font-size:32px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all .6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);}
.close-keep-ads:hover{color:#fff;transform:scale(1.0);}
.keep-adsme:hover .close-keep-ads{visibility:visible;opacity:1;color:#ffe88b;transform:translate(0,0);}
#keep-ads p span {font-family:fontawesome;font-size:5rem;}
@keyframes wobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}


CSS Style 2

/* Notifikasi Adblocker Adsense */
#keep-ads{background:rgba(255,255,255,.95);padding:0;position:fixed;bottom:0;opacity:0;height:auto;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;}
.keep-adsme{background:#e74c3c;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;line-height:1.5;max-width:930px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);transition:all .6s cubic-bezier(.25,.8,.25,1);border:15px solid rgba(0,0,0,.07);overflow:hidden;}
.keep-adsme:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);}
.keep-adsme h4{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;margin:0 auto}
#keep-ads p{margin:0}
#keep-ads a{color:#ffe88b;}#keep-ads a:hover{color:#ffe88b;text-decoration:underline}
#keep-ads.show{left:0;top:0;right:0;z-index:1000;pointer-events:auto;opacity:1;visibility:visible;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);animation:wobble .7s;opacity:1;}
.close-keep-ads{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;right:10px;font-size:42px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all .6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);}
.close-keep-ads:hover{color:#fff;transform:scale(1.0);}
.keep-adsme:hover .close-keep-ads{visibility:visible;opacity:1;color:#ffe88b;transform:translate(0,0);}
#keep-ads p span {font-family:fontawesome;font-size:5rem;}
@keyframes wobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}


CSS Tambahan khusus tampilan mobile (smartphone, iphone dll) agar tampilan notifikasi adblocker ini responsive (full display)

<b:if cond='data:blog.isMobileRequest == "true"'>
<style type='text/css'>
.keep-adsme{top:0;padding:15px;border:0;font-size:1.1rem;opacity:.99;bottom:0;font-family:arial;}
.keep-adsme h4{background:transparent;font-size:1.5rem;margin:40px auto 0 auto;}
.close-keep-ads{text-align:center;visibility:visible;opacity:1;color:#fff;bottom:20px;right:20px;padding:0;font-size:32px;width:38px;height:38px;line-height:32px;border-radius:100%;border:2px solid #fff;transform:translate(0,0);}
.close-keep-ads:hover,.keep-adsme:hover .close-keep-ads{background:#fff;color:#e74c3c;}
</style>
</b:if>

Selanjutnya tambahkan Javascript berikut tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Notifikasi Adblocker Adsense
function hidekeep(){document.getElementById("keep-ads").style.display="none"}setTimeout(function(){var e=document.getElementById("keep-ads"),t=document.querySelectorAll("ins.adsbygoogle");0===$(t).height()&&(e.className="show")},2e3);
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<div id='keep-ads'>
<div class='keep-adsme'>
<p><h4>Adblock Detected</h4></p>
<div class='keep-me'>
<p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>
<p>Like this blog? Keep us running by whitelisting this blog in your ad blocker</p>
<p>This is <i><b><a href='https://www.pehawe.me/p/pehawe-whitelisting.html' target='_blank' title='Show me how'>how to whitelisting</a></b></i> this blog in your ad blocker</p>
<p>Thank you</p>
</div>
<div class='close-keep-ads' onclick='hidekeep()'>&#215;</div>
</div>
</div>
</b:if>

Di sini saya menambahkan ikon fontawesome dan pastikan di blog agan sudah menambahkan library css fontawesome. Jika tidak, agan bisa hapus pada kode yang ditandai warna merah jambu. Untuk menghilangkan tombol close pada notifikasi adblocker silahkan hapus kode yang ditandai warna kuning

Edit url yang di tandai dengan url halam whitelisting blog agan.
Selanjutnya Simpan Template

Notifikasi adblocker akan tampil disemua halaman, kecuali di halaman statis blog.
Source : https://www.arlinadzgn.com/2017/02/notifikasi-adblocker-adsense-ala-kompi-ajaib.html

Itulah Tutorial bagaimana Membuat Notifikasi (Pesan) Adblocker Adsense Ala Arlina Design yang dapat saya bagikan kali ini. Semoga bermanfaat teruntuk kalian para publisher adsense di indonesia dan Salam luar biasa.