Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
8/13/2019

Cara Mengubah Warna Address Bar Blog di Browser Smartphone

View Article

Cara Mengubah Warna Address Bar Blog di Browser Smartphone Android - Pada artikel kali ini akan saya tuliskan sedikit tutorial menarik tentang bagaimana cara mengganti atau Mengubah warna adress bar blog saat di akses atau dibuka menggunakan ponsel seluar pintar atau smartphone. Baik ponsel berbasis android dan smartphone lainnya.

Untuk membuat address bar blog berwarna saat di akses melalui smartphone, kita cukup memasang tag meta blogger diantara kode <head> dan </head>

Tentunya sudah banyak blog atau web yang sudah menggunakan ini. Karena selain membuat blog kita semakin menarik saat diakses, penggunaan tag meta warna ini juga dijadikan identitas agar browser mengenali penggunaan warna dominan yang kita terapkan di blog.

Kenapa begitu? Karena Blog atau Web jaman now sudah harus dan mutlak memiliki kemampuan agar bisa "menyesuaikan diri" dengan perangkat mobile, atau kata familiarnya adalah mobile responsive.

Mengganti warna address bar pada blog akan membuat pengunjung serasa menggunakan native-app atau aplikasi yang memang khusus dibuat untuk blog atau web tertentu. Segelintir pengguna blogger mengatakan hal ini bisa meningkatkan user-experience dan meningkatkan jumlah visitor atau membuat visitor dapat berlama-lama di blog web kita.

Untuk sobat yang belum menggunakan cara ini dan ingin memasangnya di blog sobat, silahkan ikuti tutorial singkatnya berikut,

Cara Mengubah Warna Address Bar Blog

Pertama, silahkan buka Blogger - Template - Edit HTML

Kemudian silahkan simpan kode tag meta berikut tepat setelah kode <head>

<!-- Chrome & Opera -->

<meta name="theme-color" content="#1976d2">

<!-- Windows Phone -->

<meta name="msapplication-navbutton-color" content="#1976d2">

<!-- Safari iOS -->

<meta name="apple-mobile-web-app-status-bar-style" content="#1976d2">

Silahkan ganti kode warna yang sudah saya tandai diatas dengan warna dominan template blog yang sobat gunakan. Dan untuk mendapatkan nilai HEX dari suatu warna, sobat bisa kunjungi Web Color Picker yang sudah ada di blog ini.

Demikin tutorial singkat tentang bagaimana cara mengganti atau mengubah warna address blog saat diakses melalui smartphone yang dapat saya bagikan. Selamat mencoba dan salam luar biasa.

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/27/2019

Cara Mudah Membuat Spoiler Keren Di Blog Valid AMP

View Article

Jika sobat ingin membungkus bagian tertentu di dalam sebuah artikel baik berupa teks, gambar, video atau apa saja yang ingin sobat sembunyikan dengan fungsi tombol untuk menampilkannya, maka salah satu cara yang memang sangat efektif untuk digunakan adalah memasang Spoiler di blog sobat.

Tekhnik penggunaan spoiler sangat berguna apabila sobat menulis sebuah artikel yang panjang dengan di sisipi beberapa penjelasan penting, gambar maupun video. Karena postingan blog yang panjang dengan beberapa gambar maupun video akan menambah beban loading saat laman artikel di buka.

Keberadaan spoiler di sebuah artikel atau laman blog juga akan memberikan artikel kita lebih rapi dan memudahkan pengunjung blog untuk menyorot bagian-bagian penting yang sudah kita bungkus dan tandai dengan tombol spoiler.

Untuk memasang spoiler di blog Non Amp kita bisa mengkombinasikan css dan jquery untuk membuat tampilan spoiler keren dan pastinya sudah banyak kita temukan tutorial yang membahas tentang spoiler di blog Non Amp.

Jika sebelumnya sobat menggunakan template non amp pastinya pemasangan spoiler ini sangat mudah bukan? Beda halnya jika kita menggunakan template Amp. Karena jika kita menggunakan spoiler dengan mengkombinasikan css skaligus javascript, maka pastinya akan membuat laman blog kita tidak lagi valid amp.

Jika sobat ingin membuat dan memasang spoiler di blog amp dan valid amp, maka cara ampuh yang dapat sobat gunakan adalah dengan memanfaatkan js amp-accordion yang memang sudah disediakan untuk laman amp.

Cara Membuat Spoiler Di Blog Valid AMP

Langkah awal yang harus dilakukan adalah simpan js amp-accordion berikut setelah kode </head>

<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>

Selanjutnya silahkan simpan kode CSS Spoiler berikut di dalam tag <style amp-custom>

.spoiler-amp{margin:10px 0}

.spoiler-amp h4.spoiler-button{color:#444;font-size:14px;font-weight:bold;outline:none;margin:0;line-height:1.5em;border-radius:50px;padding:8px 30px;-moz-border-radius:50px}

.spoiler-amp h4.spoiler-button:before{content:"";position:absolute;left:15px;top:50%;margin-top:-7px;border:7px solid;border-color:transparent transparent transparent #444}

.spoiler-amp h4.spoiler-button:after{content:"\0002B";position:absolute;font-size:20px;line-height:20px;top:50%;margin-top:-10px;text-align:right;right:15px}

.spoiler-amp section[expanded] h4.spoiler-button:after{content:"\02013"}

amp-accordion section{margin:10px 0}

.spoiler-amp amp-accordion div.isi{height:auto;margin:20px 10px;padding:0 0 0 20px;border-left:3px dotted #f0f0f0}

Jika warna spoiler kurang sesuai dengan selera, sobat bisa mengaturnya pada bagian css diatas

Kemudian jika js amp-accordion dan CSS Spoiler sudah terpasang. Maka selanjutnya tinggal cara bagaimana menerapkannya saat kita menulis artikel baik di halaman postingan maupun halaman statis.

Untuk menggunakan spoiler di postingan silahkan gunakan kode berikut pada tab HTML:

<div class="spoiler-amp">

<amp-accordion animate>

<section>

<h4 class='spoiler-button'>Contoh Spoiler Teks</h4> /* Judul Spoiler */

<div class="isi">

Masukkan teks di sini.... /* Masukkan teks, gambar, atau video */

</div>

</section>

</amp-accordion>

</div>

HTML atau code diatas digunakan apabila sobat memasang satu spoiler saja.

Dan apabila sobat ingin menggunakan lebih dari satu spoiler bersusun, silahkan tambahkan expand-single-section pada bagian <amp-accordion animate>

Berikut contoh penerapannya

<div class="spoiler-amp">

<amp-accordion animate expand-single-section>

<section>

<h4 class='spoiler-button'>Contoh Spoiler Teks</h4>

<div class="isi">

Masukkan teks di sini....

</div>

</section>



<section>

<h4 class='spoiler-button'>Contoh Spoiler Teks</h4>

<div class="isi">

Masukkan teks di sini....

</div>

</section>



<section>

<h4 class='spoiler-button'>Contoh Spoiler Teks</h4>

<div class="isi">

Masukkan teks di sini....

</div>

</section>

</amp-accordion>

</div>
Note
Kode animate pada <amp-accordion> berfungsi untuk memperhalus transisi saat spoiler dibuka.
Kode expand-single-section berfungsi untuk menutup spoiler yang sedang terbuka saat membuka spoiler lainnya.
Silahkan Parse terlebih dahulu jika sobat ingin menyisipkan kode html dan lainnya di dalam spoiler.

Dan untuk melihat hasilnya bisa sobat cek dibawah ini.


Dan itulah tutorial singkat tentang bagaimana cara membuat dan memasang spoiler di blog valid amp menggunakan amp-accordion yang dapat saya bagikan kali ini.

Jika ada pertanyaan tentang spoiler di blog valid Amp ini, sobat bisa meninggalkan komentar di dibawah ini. Selamat Mencoba dan Semoga bermanfaat.


Referensi :
https://tipscodeshare.blogspot.com/2016/11/spoiler-blogger-accelerated-mobile-pages.html
https://www.idnxmus.com/2018/10/spoiler-di-blog-amp.html
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

5/03/2019

Cara Memperbaiki Background Putih Pada Icon Sharethis

View Article

Sharethis adalah salah satu plugin yang sangat berguna jika kita pasang di blog ataupun web yang kita kelola. Dengan bantuan widget yang satu ini kita akan mempermudah pengunjung blog untuk membagikan artikel yang sedang dibacanya.

Tidak sedikit blog ataupun web yang sudah memasang dan menggunakan widget sharehis. Seperti salah satunya Arlina design yang melengkapi blog bahkan berapa template premiumnya terpasang widget sharethis.

Namun ternyata widget sharethis ini memiliki sebuah kejanggalan yakni terdapat backgroud berwarna putih pada beberapa icon yang di tampilkan. Dan kejanggalan tersebut membuat tampilan widget sharethis ini kurang elok di pandang dan bukan hanya itu, karena otomatis icon dari widget ini akan tidak jelas statusnya.

Seperti salah satu kasus yang saya jumpai pada template viral go premium dan viral go redesign yang sudah saya bagikan tempo hari. Ikon dari widget sharethis yang ada di template tersebut ternyata mengalami kejanggalan seperti yang sudah saya utarakan diatas.


Dan mungkin sobat juga mengalami hal serupa jika sobat menggunakan plugin sharethis ini di blog yang sobat kelola.

Untuk mengatasi atau memperbaiki background putih pada icon sharethis ini cukuplah mudah, sobat hanya perlu menyisipkan kode CSS di blog sobat dan semua masalah yang ditemukan tadi akan teratasi. Dan untuk studinya bisa langsung sobat simak pada tutorial singkat cara mengatasi background putih pada plugin sharethis berikut.


Cara Menghilangkan Background Putih Pada widget ShareThis

Buka halaman Blogger > Klik menu Tema dan klik tombol Edit HTML > Kemudian cari dan hapus semua nilai background pada CSS .post-body img atau img seperti di bawah ini


.post-body img{background:#fff}

Dengan menghapus nilai background:#fff tersebut maka icon sharethis yang tadinya terdapat background putih akan kembali normal

Cukup hapus nilai background:#fff saja yang ada di dalam template dan icon ShareThis akan kembali seperti semula.

Demikian tutorial bagaimana cara mengatasi background putih pada icon plugin sharethis yang dapat saya tuliskan kali ini. Semoga bermanfaat dan selamat mencoba.

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.