Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan
Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan
8/07/2019

Cara Membuat Recent Post Keren Dengan Nomor di Blogger

View Article

Cara Membuat Recent Post Keren Dengan Nomor di Blogger - Memasang Recent Post di Blog merupakan salah satu cara para blogger untuk menampilkan artikel terbaru dan baru di perbarui di blog. Widget Recent Post ini juga digunakan oleh para blogger untuk membuat atau bahkan untuk mengisi tempat kosong di sidebar blog agar blog tampak lebih hidup.

Widget Recent Post atau Artikel terbaru ini dilengkapi dengan trik numbering atau istilah lainnya widget ini tampil dengan nomor di bagian kiri judul postingan dan tersusun secara berurutan.

Pemasangan widget ini cukup mudah, dengan hanya menyimpan kode css dan javascript di template blog kita sudah bisa menampilkan widget recent post ini dengan kode pemanggil saja.

Widget Recent Post dengan nomor ini saya bagikan dengan dua model atau style berbeda, jadi sobat bisa memilih tampilan mana yang ingin sobat pilih.

Selanjutnya untuk sobat yang tertarik ingin mencoba memasang widget recent post ini, bisa langsung ikuti tutorial simple berikut.

Memasang Recent Post dengan Nomor di Blog

Pertama, silahkan simpan kode CSS sebelum kode </style>.

Kedua, silahkan simpan javascript sebelum kode </body>

Terakhir, kemudian tambahkan kode pemanggil sesuai dengan style recent post yang sobat ingin gunakan dengan cara klik menu Layout - Add a Gadget - Pilih HTML/JavaScript - Simpan kode pemanggilnya dan Simpan.

Widget Recent Post Style 1

Untuk menggunakan recent post style 1, silahkan gunakan kode-kode berikut

CSS Style 1

/* Recent Posts */

#recent-articles .widget-content, #recent-articles ul {padding: 0;counter-reset:count;margin: 0 auto;display: block}

#recent-articles a:link, #recent-articles a:visited {font-weight: normal}

#recent-articles ul li {background-color:#f7f7f7;margin:0 auto;padding:8px 8px 8px 60px;list-style:none;position:relative;border-bottom:1px solid #fff;font-size:90%;text-align:left}

#recent-articles ul li:before{color: #fff!important;counter-increment: count;content: counter(count);position: absolute;left:0;top:0;bottom:0;text-align: center;z-index: 51;transition: all .4s;width:50px;font-size: 150%!important;background:#2b71a2;font-weight:500;text-align: center;padding:0;border-right:1px solid #fff;display:flex;flex-direction:column;justify-content:center;height:100%}

#recent-articles ul li:last-child{border:none}

#recent-articles ul li a {font-weight:400 ;display:block;color:#222 ;text-decoration:none ;line-height:1.4em ;}

#recent-articles ul li:hover{background-color:#f5f5f5;}

#recent-articles ul li:hover:before{background-color:#24699A;}

#recent-articles ul li a:hover,#recent-articles ul li:hover a {color: #2b71a2 !important;}

#recent-articles ul li:before, #recent-articles ul li .item-title a {font-weight: 400;font-size: 12px;color: inherit;text-decoration: none}
Script Style 1

<script type='text/javascript'>

//<![CDATA[

numPosts = 10;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");ct.async=true;for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.async=true;rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);

//]]>

</script>
Kode Pemanggil 1
<div id='recent-articles' class='recent-articles'><ul id="recent-posts"></ul></div>

Untuk melihat hasilnya silahkan cek di tombol demo berikut.

Dan untuk memasang recent post versi kedua, silahkan gunakan kode-kode berikut

CSS Style 2

/* Recent post */

ul#recent-post{list-style:none;margin:0 auto;padding:0;}

li.recent-post{counter-increment:num;display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;padding:7px 8px 7px 35px!important;margin:0;transition:all .3s;position:relative;line-height:1.4em}

li.recent-post:before{content:counter(num);display:block;position:absolute;font-size:27px!important;top:7px;left:7px;font-weight:normal!important;font-style:italic;color:#24699A!important}

li.recent-post a{color:#444;font-size:14px}

li.recent-post a:hover{color:#FF8100}
Script Style 2

<script>

//<![CDATA[

numPosts = 9;

function recentPosts(a){if(document.getElementById("recent-post")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-post");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-post"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);

//]]>

</script>
Kode Pemanggil 2

<div class='recent-post'><ul id="recent-post"></ul></div>

Untuk melihat hasilnya silahkan cek di tombol demo berikut.

Dan itulah tutorial Cara Membuat dan Memasang Recent Post Keren Dengan Nomor di Blogger yang saya bagikan ini bisa membantu sobat yang ingin memasang widget artikel terbaru di blog. Jika ada pertanyaan seputar artikel yang saya buat kali ini silahkan tnggalkan komentar. Selamat Mencoba dan Salam Luar Biasa.

7/05/2019

Cara Lengkap Memasang Lazy Load Iklan Adsense

View Article

Cara Memasang lazy load pada iklan Adsense merupakan sebuah trik untuk membuat loading blog terasa lebih ringan dengan memanfaatkan JS Load on Scroll. Dalam artian jika kita menggunakan trik ini akan membuat penayangan iklan Adsense ditunda sementara sampai pengunjung blog menscroll halaman blog ataupun website kita.

Penggunaan Lazy Load JS ketika halaman di scroll ini sangat disarankan untuk di elaborasi dengan file JS External agar pemuatan file js external ini tidak dimuat secara langsung saat blog sedang di akses.

Trik memasang lazy load JS untuk iklan adsense ini memang banyak disarankan oleh para developer web guna membuat loading blog kita semakin ringan dan cepat. Dan tentu saja hal ini akan membuat pengunjung blog akan merasa nyaman ketika mengakses blog atau website kita.

Menurut kutipan yang disampaikan oleh bungfrangki.com, lazy load ini cukup ampuh untuk mencegah banned Adsense akibat pelanggaran trafik tidak valid. Dalam hal ini, trafik yang dimaksud adalah trafik yang disebabkan oleh bot atau jigling.

Dengan menggunakan Javascript Lazy Load untuk Adsense ini akan sangat berguna untuk membuat loading blog atau website kita semakin cepat dan membuat score kecepatan blog kita bertambah.

Secara default, js adsesnse adalah seperti berikut

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Dan hal pertama yang wajib sobat lakukan adalah menghapus semua JS Adsense tersebut agar lazy load adsense ini bekerja sempurna.

Bagi sobat yang tertarik ingin menggunakan trik lazyload untuk iklan adsense di blog atau website sobat, silahkan simak tutorial singkat dibawah ini.

Memasang Lazy Load pada Iklan Adsense

Jika sobat ingin mengaktifkan Lazy Load Iklan Adsense untuk semua perangkat, baik Laptop/PC, tablet dan smartphone (perangkat seluler), maka lakukan cara berikut ini:

Masuk ke Template - Edit HTML, dan letakkan kode berikut sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[

// Lazy Load AdSense

var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);

//]]>

</script>

Atau, bisa juga menggunakan kode berikut ini:

<script>

//<![CDATA[

var lazyadsense = false;

window.addEventListener("scroll", function(){

if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === 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); })();

    lazyadsense = true;

  }

}, true)

//]]>

</script>

Setelah itu Simpan Tema dan lihat hasilnya.

Untuk sobat yang ingin mengaktifkan fitur lazy load adsense ini hanya untuk tampilan Dekstop/PC saja ataupun hanya untuk tampilan smartphone saja, sobat bisa menggunakan Tag Conditional Blogger.

Sebagai contoh fitur lazy load adsense ini hanya ingin diaktifkan pada tampilan Dekstop/PC saja, maka penerapannya seperti berikut :


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

<script>

//<![CDATA[

var lazyadsense = false;

window.addEventListener("scroll", function(){

if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === 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); })();

    lazyadsense = true;

  }

}, true)

//]]>

</script>

</b:if>

Atau seperti ini


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

<script>

//<![CDATA[

var lazyadsense = false;

window.addEventListener("scroll", function(){

if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === 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); })();

    lazyadsense = true;

  }

}, true)

//]]>

</script>

</b:if>

Dan untuk mengaktifkan lazy load adsense ini hanya untuk tampilan Smartphone/Mobile saja, maka penerapannya seperti berikut :


<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

<script>

//<![CDATA[

var lazyadsense = false;

window.addEventListener("scroll", function(){

if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === 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); })();

    lazyadsense = true;

  }

}, true)

//]]>

</script>

</b:if>

Atau bisa menggunakan ini


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

<script>

//<![CDATA[

var lazyadsense = false;

window.addEventListener("scroll", function(){

if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === 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); })();

lazyadsense = true;

}

}, true)

//]]>

</script>

<b:else/>

<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

</b:if>

Jika ada yang bertanya apakah penggunaan lazy load adsense ini akan menurunkan penghasilan adsense kita? Sebenarnya sih iya, karena dengan menunda JS Adsense ini akan berdampak pada iklan Adsense dengan jenis Page Level Ads atau iklan yang biasa muncul di bagian atas halaman blog sering kali tidak tampil.

Akan tetapi sobat tidak usah hawatir dengan iklan adsense jenis Page Level Ads ini. Karena biasanya iklan jenis ini tidak terlalu banyak menambah penghasilan adsense kita karena unit yang ditampilkan juga dilengkapi dengan tombol minimize yang mudah di sembunyikan dan tidak mengundang pengunjung blog untuk mengklik iklan ini.

Demikian informasi tentang cara memasang lazy load iklan Google Adsense untuk Blogger atau Blogspot. Semoga bermanfaat. Jika ada komentar silahkan tuliskan, jika ada kesempatan silahkan bagikan. Terima kasih!

6/20/2019

Cara Memasang Tombol Animasi Emoji Facebook di Blog

View Article

Pada tutorial terdahulu sudah saya bagikan tentang Cara memasang tombol reaksi sharethis di blogger dan pada postingan kali ini akan saya bagikan lanjutan dari postingan tersebut.

Kenapa saya mengatakan lanjutan? Karena pada tutorial kali ini kita akan memodifikasi tampilan tombol reaksi sharethis yang sudah kita buat berubah menjadi tombol reaksi dengan efek animasi layaknya tombol reaksi yang kita jumpai di facebook.

Seperti yang sudah kita ketahui, bahwa ShareThis merupakan salah satu layanan pihak ke-tiga yang bisa dipasang di Blogger. Secara umum, ShareThis berfungsi sebagai widget berbagi ke sosial media yang dapat Sobat modifikasi sesuai kebutuhan. Salah satu fitur dari ShareThis ini yaitu fitur Reaction Buttons, fitur ini berfungsi untuk memberikan feedback sebuah artikel dari pembaca dengan tombol reaksi berbentuk Emoji.

Cara Modifikasi Tombol Reaksi ShareThis dengan Animasi Emoji Facebook

Sebelum saya memberikan tips mengganti tombol reaksi, sebaiknya sobat membuat akun ShareThis terlebih dahulu di sini : Sign Up ShareThis. Setelah mendaftar, verifikasi alamat blog dengan menambahkan kode seperti ini sebelum kode </head> atau bisa juga sebelum </body> di Edit HTML halaman Blogger. Contohnya seperti ini :

<script async='async' src='//platform-api.sharethis.com/js/sharethis.js#property=5c9c2853fbd80b0011b664f6&amp;product=sop' type='text/javascript'/>

Perhatikan kode ini 5c9c2853fbd80b0011b664f6, tambahkan kode &amp; setelahnya. Contohnya seperti ini :

5c9c2853fbd80b0011b664f6&amp;

Agar nantinya setelah klik tombol Simpan tema tidak terdapat peringatan error

Setelah itu klik tombol Simpan tema dan klik tombol Verifikasi di halaman user situs ShareThis.

Jika sebelumnya sudah membuat akun di ShareThis, cukup skip langkah di atas. Untuk langkah selanjutnya aktifkan Reaction Buttons di halaman user ShareThis seperti gambar di bawah ini :


Baca Juga : Cara Memasang Tombol Reaksi Sharethis di Blog

Tambahkan kode Reaction Buttons yang disediakan dan salin ke Edit HTML Blogger setelah kode <data:post.body/> paling bawah atau yang dibungkus dengan tag kondisional halaman postingan.

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

<div class='sharethis-inline-reaction-buttons'/>

<div class='clear'/>

</b:if>

Jadi hasilnya seperti ini :

<data:post.body/>

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

<div class='sharethis-inline-reaction-buttons'/>

<div class='clear'/>

</b:if>

Nah, sekarang untuk mengganti tombol reaksi bawaan ShareThis dengan Animasi Emoji Facebook. Tambahkan kode di bawah ini sebelum kode </head>

<style type='text/css'>

/*<![CDATA[*/

/* ShareThis Custom Reaction */

#st-1 .st-btn .st-text{display:none!important}

#st-1 .st-btn:hover &gt; span.st-count{display:inline-block!important}

#st-1 .st-btn &gt; svg{opacity:0}[data-reaction]{background-size:80px;background-position:center}

#st-1 .st-btn &gt; span.st-count{font-size:10px!important;padding:4px 7px;color:#222;background:#f0f0f0;line-height:1!important;border-radius:5px;font-weight:bold!important;display:inline-block!important;bottom:5px;right:10px;position:absolute}

[data-reaction=slight_smile]{background-image:url(https://3.bp.blogspot.com/-hNfE5e1Qo3c/XMLiPrFuOFI/AAAAAAAAOm8/pl6tOHh_y2AmumaMK6dQOQ36fP6BjC7_QCLcBGAs/s1600/like.gif)}

[data-reaction=heart_eyes]{background-image:url(https://1.bp.blogspot.com/-HgD0g2IiNLk/XMLiQOHSAxI/AAAAAAAAOnI/tC61Ug_I9zIpIeCVBrcg8QtoGQH7cOoNACLcBGAs/s1600/love.gif)}

[data-reaction=laughing]{background-image:url(https://1.bp.blogspot.com/-liSaUgXsZXo/XMLiP-Z3NkI/AAAAAAAAOnA/idWXMbOdLMIzaz7P_lYvH25NSu6UrPkuQCLcBGAs/s1600/haha.gif)}

[data-reaction=astonished]{background-image:url(https://2.bp.blogspot.com/-fEsfdOAj6m4/XJKUodnOstI/AAAAAAAAGuM/7HkgAaOkelo68pfgJUeQUqgK5If23LvkQCLcBGAs/s1600/wow.gif)}

[data-reaction=sob]{background-image:url(https://2.bp.blogspot.com/-8UjP6O6ZBus/XMLiQgaU5BI/AAAAAAAAOnM/mc0GAQW4kZg4BjtdiHFpBStGzMB6LYW6wCLcBGAs/s1600/sad.gif)}

[data-reaction=rage]{background-image:url(https://2.bp.blogspot.com/-aCtZlJ68tps/XMLiP-pNq7I/AAAAAAAAOnE/UTFuQzM58k4SnUvFGBXbh5bTnZsQYTvGACLcBGAs/s1600/angry.gif)}

/*]]>*/

</style>

Jika sudah, klik tombol Simpan tema dan lihat hasilnya di blog sobat!

Oke, sekian dari Namina untuk Cara Mengganti Tombol Reaksi ShareThis dengan Animasi Emoji Facebook. Semoga bermanfaat.

5/05/2019

Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog

View Article

Marhaban Ya Ramadhan, tidak terasa kini sudah memasuki bulan suci ramadhan 2019, bulan suci penuh berkah bagi kita semua. Bulan suci ramadhan merupakan salah satu momen penting yang ditunggu-tunggu oleh seluruh Umat Islam diseluruh Dunia. Momen dimana kita bisa melipat gandakan pahala ibadah kita kepada-Nya dan juga bulan yang penuh ampunan.

Dan berhubung sudah memasuki bulan suci ramadhan, maka pada kesempatan saya membagikan sebuah tutorial bagaimana Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog yang dapat sobat pasang di blog sobat.

Konsep dan cara kerja dari pop up ucapan selamat ramadhan ini sangat sederhana, pesan pop up ini akan ditampilkan ktika pengunjung membuka sebuah halaman di blog kita dan sobat menentukan dihalaman mana saja pop up ini akan di munculkan, seperti contoh di tutorial kali ini saya menggunakan tag kondisional khusus agar pop up ini dimunculkan di halaman beranda/home blog saja.

Tutorial Cara Memasang Pop Up Ucapan Selamat Berpuasa di Blog ini saya kutip dari blogger ternama (Arlina) dan saya pribadi sudah menggunakan tutorial ini di blog saya yang lain.

Untuk tutorial bisa langsung cek dibawah ini :

Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog

Login ke Blogger > Template > Edit HTML > dan simpan kode berikut sebelum kode </head>

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

<style type='text/css'>

/* Pop Up Ramadhan */

@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}

#arlinapuasa2019ku{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:99;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 2s}#arlinapuasa2019ku .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#arlinapuasa2019ku a.close-popup{background:#428bca;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;border:1px solid #3885c7;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#arlinapuasa2019ku a.close-popup:active{opacity:.9}

.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}

@media screen and (max-width:768px){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}}

</style>

</b:if>

Secara default, css diatas di apit dengan tag kondisional khusus halaman utama. Jadi jika ingin pop up ini muncul di semua halaman, silakan hapus tag kondisional tersebut. Atau untuk mengatur di halaman mana sobat akan menampilkannya bisa langsung sobat cek di Tag Kondisional Blogger Terbaru

Kemudian tambahkan kode di bawah ini sebelum </body>

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

<div id='arlinapuasa2019ku'>

<div class='ketupat'/>

<a class='close-popup' href='#' title='close'>Close</a>

<div class='puasa19'>

<p>Selamat Menunaikan Ibadah Puasa</p>

<p><span class='ramadhan2019'>Ramadhan 1440 H</span></p>

<p>Mohon Maaf Lahir Batin</p>

</div>

<div class='ketupat duaa'/>

</div>

<script type='text/javascript'>

//<![CDATA[

$(window).bind("load",function(){$("#arlinapuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});

//]]>

</script>

</b:if>

Jika sudah, klik tombol Simpan tema dan lihat hasilnya di blog sobat.

Itulah Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog kali ini semoga bermanfaat dan selamat mencoba

Source : https://www.arlinadzgn.com/2019/05/cara-memasang-pop-up-ucapan-selamat-berpuasa.html

3/12/2019

Cara Membuat Link Sumber Otomatis Saat Artikel di Copas

View Article

Cara termudah yang dapat dilakukan untuk mengantisipasi artikel atau postingan blog sobat tidak mudah untuk di copy paste (copas) oleh para content writer adalah dengan memasang, membuat dan menambahkan sumber link artikel secara otomatis pada template blog menggunakan custom Javascrpt.

Tidak sedikit para blogger yang ingin membuat artikel secara instan dengan cara mengcopas habis sebuah artikel atau tulisan orang lain tanpa ijin terlebih dahulu.

Sebagai penulis artikel pastinya akan merasa jengkel bahkan kesal ketika melihat hasil tulisan/artikel yang dibuat secara susah payah kemudian di publikasikan di blog di copas tanpa ampun dan tanpa seijin kita

Tekhnik pencurian artikel ini banyak digunakan oleh para content stoler di dunia blogging. Dan tidak sedikit juga dari para pencuri artikel ini menggunakan script AGC (Auto Generate Content) untuk mengcopas habis seluruh artikel dari sebuah situs tanpa menunggu lama

Dan untuk sobat yang mungkin pernah mengalami artikel/tulisan di blog sobat di copas tanpa seijin sobat ada baiknya jika sobat memasang Link Sumber Otomatis saat artikel blog kita di copas orang lain

Dengan membuat dan memasang link sumber saat artikel di copas di blog, kita bisa meminimalisir agar para copaser jerah untuk mengcopas keseluruhan artikel blog kita.

Untuk sobat yang ingin memasang script auto link sumber saat artikel di copas diblog sobat, silahkan ikuti tutorial singkatnya berikut ini:

Cara Memasang Link Sumber Otomatis Saat Artikel Terkena Copas

Login Blogger - Edit HTML - Letakkan salah satu script berikut sebelum kode </body> atau bisa juga sebelum kode </head>

<script>

//<![CDATA[

// Copy Text

function nocopas(){var e=window.getSelection();pagelink=" Read more : "+document.location.href,copytext=e+pagelink,newdiv=document.createElement("div"),newdiv.style.position="absolute",newdiv.style.left="-99999px",document.body.appendChild(newdiv),newdiv.innerHTML=copytext,e.selectAllChildren(newdiv),window.setTimeout(function(){document.body.removeChild(newdiv)},100)}document.addEventListener("copy",nocopas);

//]]>

</script>

Silahkan ganti teks yang di tandai dengan teks lain yang sobat kehendaki.

Atau bisa juga langsung menggunakan script berikut

<script>

//<![CDATA[

!function(e,t){var n="getSelection",o="removeAllRanges",i="addRange",l="parentNode",a="firstChild",d="appendChild",r="removeChild",s="test",c="innerHTML";if(e[n]){var p,g,f,h,u,y;t.addEventListener("copy",function(C){for(g=C.target;3===g.nodeType;)g=g[l];if(h=t.createElement("div"),(p=e[n]())&&p.rangeCount&&(p=p.getRangeAt(0))&&(f=p.cloneRange(),p=p.cloneContents())){for(;u=p[a];)h[d](u);if(!/^(pre|code)$/i[s](g.nodeName||"")&&!/(^|\s)no-attribution(\s|$)/i[s](g.className||"")){var v=e.location.href;h[c]+="<br><br>&copy; "+t.title+'<br>Source: <a href="'+v+'">'+v+"</a>"}y=t.createRange(),t.body[d](h),y.selectNodeContents(h),p=e[n](),p[o](),p[i](y),setTimeout(function(){h[l][r](h),p[o](),p[i](f)})}},!1)}}(window,document);

//]]>

</script>

Perlu diingat bahwa dengan menggunakan trik ini bukan berarti blog sobat akan terbebas dari pencurian artikel. Karena masih banyak cara untuk menyalin tulisan/artikel blog kita.

Akan tetapi dengan menggunakan trik ini setidaknya kita bisa membuat dan menambah pekerjaan para tukang jiplak untuk mengedit kembali artikel yang di copas di blog kita.

Baca Juga : Cara Menonaktifkan Seleksi Teks di Blog Menggunakan CSS

Dengan kata lain, fungsi dari pemasangan script link sumber otomatis di blog ini hanya sekedar untuk memberi tahu para copaser bahwa blog kita memang tidak boleh di copas tanpa ijin kita. Dan jika masih bersikeras untuk mengcopas seluruh artikel yang ada di blog kta, setidaknya menyertakan link sumber sesuai link artikel yang ada di blog kita.

1/22/2019

Cara Membuat Progress Scrollbar Warna Gradien di Blog

View Article

Cara Membuat Progress Scrollbar Warna Gradien di Blog - Pada tutorial blogger kali ini saya akan membagikan sebuah tutorial bagaimana Cara Membuat Progress Scrollbar pada halaman bagian atas blog dengan motif warna gradasi/gradient color atau perpaduan warna yang bisa kalian terapkan di blogger/blogspot.

Page scroll progress indicator ini akan tampil berbentuk garis horizontal di bagian atas halaman blog atau bisa juga kalian pindah posisinya ke bagian bawah halaman blog dengan fungsi utama dari progress scrollbar ini adalah untuk menunjukan sampai dimana kita berada pada halaman blog.

Mungkin kalian pernah berkunjung ke sebuah blog/website dan menemukan sebuah progress indicator pada halaman blog tersebut, namun biasanya kebanyakan dari mereka menampilkan angka dan %. Beda halnya dengan yang satu ini, karena Page scroll progress indicator yang satu ini menggunakan warna gradasi/perpaduan warna yang menurut saya lebih enak di pandang.

Progress Scrollbar Warna Gradien di Blog cukup berguna jika Sebuah blog atau website tersebut memiliki konten atau postingan yang bisa di bilang cukup panjang. Karena dengan menggunakan progress indcator ini, pengunjung akan dengan mudah mengetahui sampai sejauh mana mereka membaca dan menscroll halaman blog tersebut.

Progress Scrollbar dengan warna gradasi ini menggunakan pure javascscript yang kemudian di padukan dengan css untuk megatur warna-warna yang bisa kalian atur sesuai selera kalian. Untuk mempermudah memilih warna yang ingin digunakan, silahkan gunakan Web Color Picker. Dan untuk mengetahui seperi apa hasilnya, silahkan cek demonya dibawah ini.

Demo

Selanjutnya jika kalian tertarik ingin mencoba memasang Progress Scrollbar Warna Gradien di Blog ini, kalian bisa langsung ikuti tutorial singkat berikut :

Membuat Animasi Scrollbar dengan Warna Gradasi di Halaman Blog

Login ke Blogger
Klik Template - Edit HTML
Letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>

#top-scrollbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 0%;

    height: 4px;

    overflow: hidden;

    z-index: 99999;

}



#top-scrollbar-bg {

    width: 100%;

    height: 100%;

    position: absolute;

    background:-webkit-linear-gradient(left,#2B0C93 0,#ff2c02 56%,#FFB300 100%);

}

Kemudian letakkan javascript dibawah ini sebelum kode </body>

<script>

//<![CDATA[

var bar_bg = document.getElementById("top-scrollbar-bg"),

body = document.body,

html = document.documentElement;



bar_bg.style.minWidth = document.width + "px";


document.getElementsByTagName("body")[0].onresize = function() {

// Update the gradient width

bar_bg.style.minWidth = document.width + "px";

}



window.onscroll = function() {

// Change the width of the progress bar

var bar = document.getElementById("top-scrollbar"),

dw = document.documentElement.clientWidth,

dh = Math.max( body.scrollHeight, body.offsetHeight,

html.clientHeight, html.scrollHeight, html.offsetHeight ),

wh = window.innerHeight,

pos = pageYOffset || (document.documentElement.clientHeight ?

document.documentElement.scrollTop : document.body.scrollTop),

bw = ((pos / (dh - wh)) * 100);


bar.style.width = bw + "%";

}

//]]>

</script>

Silahkan tambakan div pemanggil berikut setelah <body>

<div id="top-scrollbar">

<div id="top-scrollbar-bg">

</div>

</div>

Terakhir silahkan simpan setelan template


Note :
  • Jika ingin mengganti warna silahkan ganti pada bagian -webkit-linear-gradient(left,#2B0C93 0,#ff2c02 56%,#FFB300 100%). Gunakan tool color picker untuk mempermudah kalian menentukan warna yang ingin kalian gunakan.
  • Jika ingin menggunakan satu warna saja silahkan hapus kode -webkit-linear-gradient(left,#2B0C93 0,#ff2c02 56%,#FFB300 100%); kemudian ganti menjadi #2B0C93 atau warna apa saja yang kalian kehendaki.
  • Solusi bagi yang menggunakan sticky menu navigasi, untuk mengatur letak progress scrollbar silahkan atur letak tingginya pada kode top: 0; menjadi top: 45px;
  • Untuk yang ingin mengubah posisi progress scrollbar menjadi di bawah silahkan ganti kode top: 0; menjadi bottom: 0;


Jika ada pertanyaan seputar membuat Page scroll progress indicator dengan warna gradasi/gradien di blog ini, kalian bisa tinggalkan jejak komentar.

Demikian tutorial Cara Membuat Progress Scrollbar Warna Gradien di Blog ini semoga berguna dan selamat mencoba.

10/07/2018

Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly

View Article
Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly - Gambar atau thumbnail yang dibuat untuk sebuah post pasti tidak akan ketinggalan untuk digunakan oleh para pembuat konten sebuah blog/web, baik sebagai thumbnail atau gambar utama dari sebuah post ataupun gambar sebagai penjelas dari artikel yang dibuat.

Akan tetapi gambar ini bisa memberikan kendala bagi sebuah blog/website jika tidak kita atur dengan baik. Dalam artian gambar yang akan kita masukkan ke artikel harus di optimasi terlebih dahulu sebelum kita tambahkan agar supaya pemuatan dari gambar tersebut tidak membutuhkan waktu lama.

Hal tersebut akan menghasilkan performa kurang baik terhadap blog kita dalam masalah pemuatan/loading blog, dan skor kecepatan blog juga tidak terlalu baik.

Pada artikel sebelumnya sudah saya tuliskan tentang sebuah cdn alternatif dari staticaly yang dapat memuat file statis dan gratis untuk digunakan. Dan tidak hanya itu, cdn staticaly ini juga bisa kita manfaatkan untuk mempercepat loading gambar sebuah blog/website.

Sebagai pengguna blogger kita akan memanfaatkan hosting yang memang sudah disediakan secara gratis oleh blogger untuk menampung gambar, dan kita bebas mengupload gambar apa saja yang ingin digunakan di dalam sebuah artikel yang kita tulis.

Gambar yang kita upload ke dalam artikel blog dengan memanfaatkan hosting blogger memang memiliki kecepatan akses cukup baik, akan tetapi dengan bantuan cdn staticaly akan membuat loading/kecepatan akses gambar tersebut semakin sempurna. Dan berikut perbandingan dari gambar yang secara default di upload ke blogger dan gambar yang menggunakan bantuan cdn staticaly.


Hasil GOOD untuk gambar Bogger biasa tanpa CDN Staticaly.



Hasilnya EXCELLENT untuk gambar blogger yang menggunakan CDN Staticaly.

Kedua perbandingan diatas merupakan reseource dari gambar yang sama dengan kecepatan akses dari blogger dan bantuan cdn staticaly.

Secara default url gambar yang dihasilkan pada gambar yang di upload ke blog adalah sebagai berikut

<img border="0" data-original-height="625" data-original-width="1245" height="160" src="https://1.bp.blogspot.com/-ADE_dEIwftk/W7qRsRMXzPI/AAAAAAAAETs/luCyNE1MjVErIjt_Qeyv9w7VGj9ThC-OACLcBGAs/s320/contoh.png" width="320" />

Dan untuk menggunakan cdn staticaly pada gambar blog/website sobat hanya perlu mengganti https:// dengan https://cdn.staticaly.com/img/ sehingga menjadi seperti berikut ini

<img border="0" data-original-height="625" data-original-width="1245" height="160" src="https://cdn.staticaly.com/img/1.bp.blogspot.com/-ADE_dEIwftk/W7qRsRMXzPI/AAAAAAAAETs/luCyNE1MjVErIjt_Qeyv9w7VGj9ThC-OACLcBGAs/s320/contoh.png" width="320" />

Cara diatas berlaku untuk blog Non Amp saja, sedangkan untuk gambar blog Amp adalah sebaga berikut

<amp-img alt="gambar blogger" height="160" width="1245" src="https://cdn.staticaly.com/img/1.bp.blogspot.com/-ADE_dEIwftk/W7qRsRMXzPI/AAAAAAAAETs/luCyNE1MjVErIjt_Qeyv9w7VGj9ThC-OACLcBGAs/s320/contoh.png" title="gambar blogger" layout="responsive"><amp-img fallback alt="gambar blogger" height="160" width="1245" src="https://1.bp.blogspot.com/-ADE_dEIwftk/W7qRsRMXzPI/AAAAAAAAETs/luCyNE1MjVErIjt_Qeyv9w7VGj9ThC-OACLcBGAs/s320/contoh.png" title="gambar blogger" layout="responsive"></amp-img></amp-img>

Sangat mudah bukan?

Tambahan :
Untuk pengguna blogger Non Amp dan tidak ingin repot-repot mengganti url gambar satu persatu, sobat bisa gunakan bantuan script berikut dan letakkan sebelum kode </body>

<script>

//<![CDATA[

var images = document.getElementsByTagName('img');

for (var i = 0; i < images.length; i++) {

images[i].src = images[i].src.replace(/.*?:\/\//g , "https://cdn.staticaly.com/img/");

};

//]]>

</script>


Untuk mengetahui script diatas berfungsi atau tdak, silahkan inspect element gambar blog sobat.

Script datas tidak berlaku untuk gambar yang menggunakan javascript lain seperti salah satu contohnya gambar related post DTE. Untuk mengatasinya sobat perlu menggantinya secara manual pada javascript DTE, dan juga script diatas tidak berlaku unuk blog AMP

Demikian tutorial Cara Mempercepat Loading Gambar Blog dengan CDN Staticaly yang dapat saya bagikan kali ini semoga bermnafaat. Selamat mencoba dan Salam luar Biasa.

Source : kompiajaib
9/25/2018

Cara Memasang Tombol Reaksi di Blogger Dengan ShareThis

View Article

Cara Memasang Tombol Reaksi di Postingan Blogger Dengan ShareThis - Jika berbicara tentang tombol reaksi di postingan blog pastinya sudah tidak asing bagi sobat blogger. Tombol reaksi yang di gambarkan dengan emoji senang hingga kesal ini bisa sobat pasang di blog yang sobat kelola yang tujuannya tentu saja untuk mengetehui umpan balik pengunjung ketika selesai membaca postinggan blog kita.

Dan sebenarnya blogger sendiri juga sudah menyediakan tombol reaksi yang bisa kita aktifkan di blog kita, akan tetapi tampilan tombol reaksi bawaan blogger ini tidak begitu menarik dan bisa di bilang hanya kotak kecil yang kurang menawan, maka dari itu jika sobat ingin menggunakan tombol reaksi yang bisa dikatakan cukup cute, sobat perlu menggantinya dengan tombol reaksi dari ShareThis ini.

Tombol Reaksi untuk blogger yang disediakan oleh ShareThis ini sudah tidak sedikit digunakan oleh para blogger, baik mereka yang ingin mengetahui reaksi visitor mereka ataupun sebagian kecil dari mereka memasang tombol reaksi dari vicomi ini hanya untuk hiasan blog saja, dan pula sebagian dari para blogger yang menggunakan tombol reaksi dari vicomi.

Selain Tombol reaksi yang bisa sobat pasang di blog ataupun web yang sobat kelola, ShareThis ini juga menyediakan widget tombol berbagi yang juga bisa sobat pasang di blog sobat. Dan bisa dikatakan sharethis ini merupakan salah satu platform yang sangat popular di kalangan kancah blogger dengan fitur-fitur yang sangat menakjubkan.

Untuk sobat yang tertarik ingin mencoba bagaimana cara membuat dan memasang tombol reaksi di postingan blogger dengan sharethis ini, sobat hanya perlu menambahkan sedikit script dari sharethis yang nantinya wajib sobat pasang di template blog yang sobat gunakan. Sombat juga bisa memilih dan menentukan emoji apa saja yang akan sobat gunakan di blog sobat.


Memasang Tombol Reaksi di Blogger Dengan ShareThis

Pertama, Jika sobat belum memiliki akun sharethis, silahkan sobat buat akun terlebih dahulu melalui https://platform.sharethis.com/sign-up.

Pada tahap ini, silahkan sobat isi form yang dibutuhkan seperti : email (untuk verifikasi), kata sandi dan url blog sobat seperti gambar dibawah ini, kemudian klik Get Started - It's Free

Setelah berhasil masuk ke dashboar sharethis, silahkan klik Get Code untuk melakukan verifikasi blog sobat.


Selanjutnya, silahkan silahkan copy kode yang diberikan oleh sharethis dan simpan sebelum kode </body> atau sebelum code &lt;!--</body>--&gt;

Jika waktu menyimpan setelan template terdapat error, silahkan tambahkan amp; setelah kode property. Brikut contoh sebelum di edit :


<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=5aee32b17782d000113e1528&product=sticky-share-buttons"></script>

Setelah di edit :

<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5aee32b17782d000113e1528&amp;product=social-ab' async='async'></script>

Silahkan coba Simpan kembali setelan template sobat.

Jika sudah, kembali ke dashbor ShareThis dan silahkan sobat klik tombol Verify. Setelah itu akan muncul pesan All systems go! We've verified sharethis.js in installed dan dengan ini Widget atau tombol reaksi ShareThis siap digunakan. Biar lebih afdol, silahkan sobat klik menu Property Settings. Kemudian klik tombol Resend Verification Email dan silahkan sobat cek email untuk verifikasi email dari ShareThis.

Setelah sobat memasang script sharethis dan menverifikasi akun sharethis, selanjutnya sobat tinggal mengaktifkan tombol mana yang ingin dimunculkan di blog, karena kita akan menggunakan tombol reaksi saja maka silahkan sobat klik klik menu Reaction Button dan pilih Inline Reaction Button, dan aktifkan tombol dari off ke on seperti gambar dibawah ini


Jika sudah melakukan step-step diatas, maka langkah terakhir sobat tambahkan kode HTML Reaction Buttons ini ke dalam template setelah kode <data:post.body/>. Jika dalam template sobat gunakan terdapat beberapa kode <data:post.body/>, silahkan sobat letakkan kode Reaction Buttons ini setelah kode <data:post.body/> yang terakhir atau sobat juga bisa mencobanya satu persatu.


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

<div class='sharethis-inline-reaction-buttons'/>

<div class='clear'/>

</b:if>

Langkah terakhir silahkan sobat Simpan setelan template sobat. Dan untuk melihat hasilnya silahkan cek postingan blog sobat, jika tombol reaksi tidak muncul maka silahkan pindahkan kode diatas setelah kode <data:post.body/> yang lainnya.

Sobat bisa juga hanya menggunakan kode ini <div class='sharethis-inline-reaction-buttons'/> dan letakkan diatas widget postingan. Dan pastinya penempatannya masih setelah kode <data:post.body/>, sebagai contoh di template Infinite Arlina saya meletakkan kodeReaction Button ini diatas pemanggil widget sharethis, untuk lebih jelasnya mungkin sobat bisa perhatikan gambar dibawah ini.


Demikian tutorial Cara Membuat dan Memasang Tombol Reaksi di Blogger Dengan ShareThis yang dapat saya bagikan kali ini semoga bermanfaat. Jika ada pertanyaan mengenai artikel ini, silahkan sobat tinggalkan komentar. Selamat mencoba dan salam luar biasa.