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

Perbaikan Thumbnail Gambar Buram Di Blogger

Perbaikan Thumbnail Gambar Buram Di Blogger

Javascript Tips Blogger

Baiklah, kali akan membuatkan sedikit tips perihal cara memperbaiki gambar yang buram di blog. Masalah ini terjadi dikala tadi pagi aku cek demo template blog yang akan aku bagikan nanti tiba-tiba gambar di halaman postingan menjadi blur atau script auto readmore tidak berjalan menyerupai sebelumnya.

UPDATE : Blogger telah mengganti kembali format link dari s72-c-k-no ke s72-c, jadi teman tidak perlu lagi memakai tips ini dan kalau ada yang sudah memakai silakan kembalikan format link ke semula (s72-c)

Ketika aku browsing dan melihat blog lain juga ada yang mengalamil hal yang sama, lalu sehabis diteliti ternyata markup untuk gambar blogger berubah dari s72-c menjadi s72-c-k-no. Kenapa menjadi menyerupai itu? Saya sendiri kurang tahu kalau soal itu, kemungkinan di blogger sedang ada perbaikan sistem atau apa yang niscaya telah berganti.

Berikut teladan gambar blur atau buram dari template yang belum aku publikasikan

Lantas, bagaimana cara memperbaikinya?

Cara memperbaikinya sangat mudah. silakan teman buka tema > Klik Edit HTML > Di sini Sobat tinggal cari arahan ini (Temukan arahan serupa kalau terjadi pada thumbnail lain)

s72-c

Ganti menjadi

s72-c-k-no

Setelah itu simpan template. Maka gambar postingan akan kembali menyerupai semula

Kebetulan belum semua template aku perbaiki dengan problem ini, jadi teman dapat ikuti cara di atas.


Sumber http://arlinadesign.blogspot.com

Cara Otomatis Menambahkan Link Sumber

Cara Otomatis Menambahkan Link Sumber

Javascript Tips Blogger

Cara Otomatis Menambahkan Link Sumber - Di Internet sangat gampang untuk menyalin teks dari satu situs dan menempelkannya ke situs lain. Secara teknis, kalau pengunjung blog menyalin teks dari situs tertentu seharusnya beliau harus memperlihatkan link ke sumber dari situs yang ia salin teksnya. Namun ada juga orang yang mengabaikan hal penting ini.

Untuk menghindari hal itu, di sini aku akan memperlihatkan sebuah isyarat yang secara otomatis kalau seseorang menyalin bab teks dari artikel kita maka akan otomatis memunculkan link sumber dari teks yang ia salin.

Walaupun cara ini berdasarkan aku masih kurang efektif alasannya ialah link sumber sanggup dihapus dengan gampang dan tips ini merupakan cara lama yang masih sanggup dimanfaatkan 😊, namun setidaknya akan memperlihatkan sedikit peringatan bagi yang menyalin teks artikel blog kita. Berikut Cara Otomatis Menambahkan Link Sumber.

Cara Otomatis Menambahkan Link Sumber

Kode ini bekerja di beberapa browser favorit (termasuk Microsoft Edge). Buka halaman Blogger > Klik Tema > Klik tombol Edit HTML dan tambahkan isyarat di bawah ini > Setelah itu klik Simpan tema.

Versi 1

<script type='text/javascript'> //<![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>

Sobat sanggup mengedit bab dari isyarat yang aku tandai.

Versi 2

<script type='text/javascript'> //<![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>

Untuk tips kali ini aku cukupkan sekian, terima kasih sudah berkunjung.
Sumber http://arlinadesign.blogspot.com

Cara Gampang Menambahkan Tombol Pin It Di Gambar

Cara Gampang Menambahkan Tombol Pin It Di Gambar

Javascript Tips Blogger

Pernahkah teman bertanya-tanya bagaimana cara menambahkan tombol Pin It Pinterest di postingan blog? Nah, di sini akan membuatkan Cara Praktis Menambahkan Tombol Pin It di Gambar.

Fungsi dari tombol ini untuk memnagikan secara eksklusif gambar yang ada di blog teman ke akun Pinterest sobat. Cara kerja dari Tombol share Pin It ini yaitu tombol akan muncul ketika teman memfokuskan kursor pada setiap gambar di dalam blog.

Cara Praktis Menambahkan Tombol Pin It di Gambar

Caranya memang sangatlah mudah, di sini teman hanya perlu menambahkan arahan di bawah ini sebelum arahan epilog body </body> atau sebelum arahan epilog head pada template </head>

Sebelum menambahkan arahan ini pastikan di template blog teman sudah menambahkan link jquery library

<script async='' data-pin-color='white' data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js'/>

Berikut ini ialah demo tampilan dari tombol Pin It ini

Demo

Demikian Cara Praktis Menambahkan Tombol Pin It di Gambar, terima kasih sudah berkunjung.
Sumber http://arlinadesign.blogspot.com

Cara Memasang Syntax Highlighter Di Postingan Blog

Cara Memasang Syntax Highlighter Di Postingan Blog

CSS HTML Javascript jQuery Tips Blogger

Selain mempercantik tampilan barisan instruksi di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca semoga sanggup dengan gampang mengenali jenis instruksi yang diberikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya yaitu pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi penulis atau admin blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorial mereka.

Syntax Highlighter merupakan fitur khusus sebuah proses pemindahan instruksi bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada sebuah instruksi bahasa pemrograman untuk dipindahkan maupun disalin ke dalam bentuk goresan pena lain semoga lebih gampang dalam membaca atau mempelajarinya.

Syntax Highlighter cara kerjanya hampir sama dengan blockquote tetapi bedanya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan instruksi aslinya harus dilakukan secara manual. Kaprikornus pada dasarnya Syntax highlighter akan efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote.

Nah, di sini akan memperlihatkan tutorial Cara Memasang Syntax Highlighter di Postingan ibarat pada blog ini, mari kita lanjutkan ke cara penambahannya.

Cara Memasang Syntax Highlighter di Dalam Tema

Pertama, login ke Blogger > Pilih Blog > Klik sajian Tema dan klik tombol Edit HTML > Tambahkan instruksi CSS di bawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

Perhatikan, instruksi yang akan saya bagikan ini akan berfungsi dengan baik kalau di blognya sudah menambahkan jquery library. Contoh jquery library ibarat ini <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

<style type='text/css'> /* Highlighter */ pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem} .post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0} </style>

Kemudian tambahkan instruksi berikut ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'> //<![CDATA[ // Highlighter $('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1); function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script>

Setelah itu klik tombol Simpan tema.

Cara Penulisan Syntax Highlighter di Postingan Blog

Setelah memasang instruksi yang dibutuhkan, selanjutnya ke cara penulisannya di dalam postingan. Buat postingan gres di blog sobat, lalu untuk penulisannya tambahkan instruksi ini di tab HTML (bukan compose)

<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Ganti instruksi yang ditandai pada instruksi di atas dengan instruksi CSS/HTML/JAVASCRIPT. Khusus untuk instruksi HTML/JAVASCRIPT silakan parse terlebih dahulu dengan HTML Converter.

Berikut pola penulisan instruksi HTML, instruksi HTML yang ditandai yaitu instruksi yang akan sahabat tambahkan.

<pre><code><h1>   <span>a</span>   <span>r</span>   <span>l</span>   <span>i</span>   <span>n</span>   <span>a</span> </br>   <span>d</span>   <span>e</span>   <span>s</span>   <span>i</span>   <span>g</span>   <span>n</span> </h1></code></pre>

Sama halnya dengan instruksi CSS dan Javascript, cara penulisannya sama ibarat pola di atas.

Baiklah, demikian untuk tips kali ini perihal Cara Memasang Syntax Highlighter di Postingan Blog. Semoga bermanfaat dan wassalam.

Sumber : https://github.com/isagalaev/highlight.js
Sumber http://arlinadesign.blogspot.com

Cara Menonaktifkan Inspect Element Di Blog

Cara Menonaktifkan Inspect Element Di Blog

HTML Javascript Tips Blogger

Kemarin ada teman blogger yang bertanya wacana bagaimana sih Cara Menonaktifkan Inspect Element di Blog ibarat di blog ini?

Penjelasan singkatnya, Inspect Element ialah salah satu fitur bermanfaat bawaan browser versi desktop yang bisa memperlihatkan, mengedit, bahkan mengubah instruksi HTML yang diambil dari sumber situs. Inspect Element sering dipakai oleh designer blog untuk mengetahui instruksi ibarat instruksi CSS, HTML, javascript di blog.

Jika tidak ingin instruksi tema teman pada Inspect Element diketahui oleh orang lain, teman bisa mencegah hal itu terjadi dengan memasang script debugger yang nantinya blog teman akan menjadi lebih kondusif dari copy paste instruksi tertentu secara eksklusif melalui Inspect Element.

Cara Menonaktifkan Inspect Element di Blog

Berikut Cara Menonaktifkan Inspect Element di Blog, silakan ikuti langkah gampang berikut ini.

Buka Blogger > Klik sajian Tema > Klik tombol Edit HTML dan tambahkan instruksi berikut ini sempurna sebelum instruksi epilog body </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'> //<![CDATA[ // Inspect !function t(){try{!function t(n){1===(""+n/n).length&&0!==n||function(){}.constructor("debugger")(),t(++n)}(0)}catch(n){setTimeout(t,5e3)}}(); //]]> </script>

Kemudian klik Tombol Simpan tema dan selesai.

Untuk alhasil bisa cek di blog teman dengan membuka sajian Inspect (klik kanan pada halaman blog).

Tentu saja ini bukan merupakan cara yang efektif untuk melindungi instruksi tema blog sobat. Banyak jalan menuju Roma, jadi masih banyak cara untuk mengetahui instruksi tema blog salah satunya ialah dengan menonaktifkan Javascript pada blog teman di browsernya ibarat yang pernah aku bagikan di postingan ini Menambahkan Notifikasi Adblocker Adsense di dalam blog

Untuk mencegahnya, teman bisa tambahkan instruksi di bawah ini.

Tambahkan instruksi berikut sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

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

Klik tombol Simpan tema.

Agar lebih terlindungi teman juga bisa memasang instruksi Anti klik kanan dan menonaktifkan fungsi CTRL+U di blog ibarat ini.

Ganti <body> dengan instruksi di bawah ini

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;' ondragstart='return false' onselectstart='return false' style='user-select:none;cursor:default'>

Atau bisa juga dengan instruksi Javascript di bawah ini, tambahkan sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'> //<![CDATA[ // Anti Klik Kanan var message="Function Disabled!";function clickIE4(){if(2==event.button)return alert(message),!1}function clickNS4(e){if((document.layers||document.getElementById&&!document.all)&&(2==e.which||3==e.which))return alert(message),!1}document.layers?(document.captureEvents(Event.MOUSEDOWN),document.onmousedown=clickNS4):document.all&&!document.getElementById&&(document.onmousedown=clickIE4),document.oncontextmenu=new Function("alert(message);return false"); //]]> </script>

Klik tombol Simpan tema.

Namun dengan memasang instruksi Anti klik kanan dan menonaktifkan fungsi CTRL+U di blog ini tidak aku sarankan. Karena berdasarkan aku pribadi kalau menemukan situs yang dipasang instruksi tersebut akan menciptakan aku tidak nyaman dalam mengekplorasi setiap postingan didalamnya, jadi alhasil aku selalu menutup situs tersebut dengan segera. Tapi kalau berdasarkan teman berkhasiat ya silakan dipasang, diubahsuaikan kembali dengan kebutuhan.

Baiklah, sekian untuk postingan dari wacana Cara Menonaktifkan Inspect Element di Blog. Semoga bermanfaat dan wassalam.
Sumber http://arlinadesign.blogspot.com

Mengganti Format Permalink Menjadi Menyerupai Wordpress

Mengganti Format Permalink Menjadi Menyerupai Wordpress

Javascript Tips Blogger

Seperti yang kita ketahui, penulisan permalink di Blogger secara default yaitu dengan format menyerupai ini : https://www.nama_domain.com/bulan/tahun/judul_artikel.html. Namun bisakah kita mengubah atau mengganti format permalink default Blogger menjadi menyerupai permalink CMS WordPress? Jawabannya adalah, bisa.

Pengertian Permalink

Namun sebelum aku menyebarkan ada baiknya teman mengetahui pengertian dari permalink. Permalink ialah singkatan dari Permanent Link, istilah ini dipakai untuk menyebut URL dari suatu halaman situs menyerupai halaman statis dan juga halaman postingan.

Permalink sendiri muncul secara otomatis ketika kita sedang menciptakan postingan gres di blog kita, bentuk dari permalink berupa ID unik yang akan muncul dikala kita menciptakan postingan. Contoh ID unik itu menyerupai ini postID=NOMOR-UNIK-ID-POST yang bila postingan tersebut kita publikasikan arahan unik itu akan bermetamorfosis judul postingan blog kita. Untuk lebih jelasnya dapat cek gambar di bawah ini.

Tulisan dengan warna putih merupakan URL dari nama domain blog dan untuk goresan pena yang berwarna kuning itulah yang disebut Permalink.

Mengganti Format Permalink Menjadi Seperti WordPress

Di sini aku akan memanfaatkan arahan Javascript khusus buatan V3rluchie di Github untuk Mengganti Format Permalink Menjadi Seperti WordPress. Caranya buka Blogger > Klik sajian Tema > Klik tombol Edit HTML > Kemudan tambahkan arahan di bawah ini sebelum arahan epilog body </body> atau &lt;!--</body>--&gt;&lt;/body&gt; atau dapat juga ditambahkan sempurna di bawah arahan <head> atau &lt;head&gt;

Do With Your Own Risk

<script type='text/javascript'> //<![CDATA[ // BloggerJS v0.3.1 // Copyright (c) 2017-2018 Kenny Cruz // Licensed under the MIT License var urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&amp;"[0];function urlVal(){var e=window.location.pathname,t=e.length;return".html"===e.substring(t-5)?0:t>1?1:2}function urlMod(){var e=window.location.pathname;"p"===e.substring(1,2)?(e=(e=e.substring(e.indexOf("/",1)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../"+e)):(e=(e=postsDatePrefix?e.substring(1):e.substring(e.indexOf("/",7)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../../"+e))}function urlSearch(e,t){var n=e+".html";t.forEach(function(e){-1!==e.search(n)&&(window.location=e)})}function urlManager(){var e=urlVal();0===e?accessOnly||urlMod():1===e?getJSON(postsOrPages[feedPriority],1):2===e&&(accessOnly||history.replaceState(null,null,"/"))}function getJSON(e,t){var n=document.createElement("script");if(useApiV3){var o="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+e+"?key="+apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=bloggerJSON";nextPageToken&&(o+="#pageToken="+nextPageToken),nextPageToken=void 0}else o=window.location.protocol+"//"+window.location.hostname+"/feeds/"+e+"/default?start-index="+t+"#max-results=150#orderby=published#alt=json-in-script#callback=bloggerJSON";o=o.replace(/#/g,amp),n.type="text/javascript",n.src=o,document.getElementsByTagName("head")[0].appendChild(n)}function bloggerJSON(e){var t=[];if(useApiV3||void 0===urlTotal&&(urlTotal=parseInt(e.feed.openSearch$totalResults.$t)),useApiV3){try{e.items.forEach(function(e,n){t.push(e.url)})}catch(e){}nextPageToken=e.nextPageToken}else try{e.feed.entry.forEach(function(n,o){var r=e.feed.entry[o];r.link.forEach(function(e,n){"alternate"===r.link[n].rel&&t.push(r.link[n].href)})})}catch(e){}urlSearch(window.location.pathname,t),urlTotal>150?(jsonIndex+=150,urlTotal-=150,getJSON(postsOrPages[feedPriority],jsonIndex)):nextPageToken?getJSON(postsOrPages[feedPriority]):secondRequest&&(nextPageToken=void 0,urlTotal=void 0,jsonIndex=1,secondRequest=!1,0===feedPriority?(feedPriority=1,getJSON("posts",1)):1===feedPriority&&(feedPriority=0,getJSON("pages",1)))}function bloggerJS(e){e&&(feedPriority=e),urlManager()}bloggerJS(); //]]> </script>

Setelah itu klik tombol Simpan tema dan selesai. Sobat dapat cek perubahan permalink di postingan blog sobat.

• Result

Pada link result di atas permalink bahwasanya adalah

http://kileakskiteaks.blogspot.com/search?q=mengganti.permalink.menjadi.seperti.wordpress

Setelah menambahkan arahan di atas link otomatis berganti menjadi

https://elvirabt.blogspot.com/shoes-and-accessories

Apakah Kode Tersebut akan Berpengaruh Terhadap SEO Blog Kita?

Iya, mungkin sehabis menambahkan arahan di atas akan berdampak jelek pada blog kita yang mengakibatkan turunnya pengunjung dan kualitas blog di mata mesin pencarian. Kode di atas tidak aku sarankan alasannya ialah intinya permalink default dikala ini ialah yang terbaik untuk blogger, jadi sebaiknya kita harus tetap mengacu pada kebijakan yang diberikan Google supaya blog kita tetap kondusif apalagi bila blognya memakai AdSense.

Namun bila teman yang tidak mementingkan SEO dan ingin blognya terlihat berbeda dari Blogspot pada umumnya tidak ada salahnya untuk dicoba, anggap saja sebagai materi pembelajaran untuk hal yang baru.

Oke, cukup sekian wacana cara Mengganti Format Permalink Menjadi Seperti WordPress. Terima kasih sudah berkunjung dan wassalam.
Sumber http://arlinadesign.blogspot.com

Cara Menciptakan Table Of Contents Di Postingan Blogger

Cara Menciptakan Table Of Contents Di Postingan Blogger

CSS HTML Javascript jQuery Tips Blogger

Table of Contents ialah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel. Table of Contents sanggup kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk menentukan warta bab pokok bahasan apa yang akan dibacanya. Table of Contents ini sering kita temui pada situs Wikipedia, Ensiklopedia, dan juga file PDF dari E-Book yang biasanya diletakkan sesudah goresan pena kata pengantar atau wangsit pokok dari sebuah artikel.

Baiklah, di sini akan menunjukkan tips perihal bagaimana Cara Membuat Table of Contents di Postingan Blogger dengan mudah.

Cara Membuat Table of Contents di Postingan Blogger

Untuk membuatnya silakan teman ikuti langkah-langkah berikut ini.

Buka Blogger > Klik sajian Tema > Klik tombol Edit HTML > Kemudian tambahkan arahan CSS ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'> /* CSS Table of Contents */ #light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px} #toc_list{font-weight:700;cursor:pointer;margin:10px 0} #toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none} #toc_list svg{vertical-align:middle} #toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em} #toc ol li:before{left:-2em} #toc li a{color:#222} #toc li a:hover{color:#1e90ff} #toc{display:grid} .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s} .back_tocontent:hover{background:#2d3436;color:#fff} :target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden} </style>

Langkah selanjutnya, tambahkan arahan di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>           //<![CDATA[           $(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})}); //]]>           </script>

Klik tombol Simpan tema.

Selanjutnya ke bab postingan, buat postingan di editor post blogger. Tambahkan arahan di bawah ini pada tab HTML (bukan Compose)

<div id="light-toc"> <div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0"> Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div> <div id="toc"> <ol> <li><a href="#toc_1" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 1</a></li> <li><a href="#toc_2" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 2</a></li> <li><a href="#toc_3" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 3</a></li> <li><a href="#toc_4" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 4</a></li> <li><a href="#toc_5" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 5</a></li> </ol> </div> </div>

Edit goresan pena yang ditandai dengan goresan pena sendiri. Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada arahan di atas. Misalnya menyerupai ini

<h4> Cara Membuat Table of Contents di Postingan Blogger</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tambahkan ID pada heading menjadi menyerupai ini

<h4 id="toc_1"> Cara Membuat Table of Contents di Postingan Blogger</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Perhatikan arahan yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang teman buat. Contohnya

<h4 id="toc_1"> Heading Bagian 1</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  <h4 id="toc_2"> Heading Bagian 2</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  <h4 id="toc_3"> Heading Bagian 3</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  <h4 id="toc_4"> Heading Bagian 4</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  <h4 id="toc_5"> Heading Bagian 5</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Kemudian tambahkan arahan ini di setiap final paragraf tiap bagian

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Back to Content</div>

Maka akhirnya menjadi menyerupai ini

<h4 id="toc_1"> Heading Bagian 1</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  <div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Back to Content</div>

Setelah selesai, silakan klik tombol Publikasikan post dan lihat akhirnya di blog sobat.

• Result

Dan ini referensi Table of Contents yang sudah aku tambahkan pada template blog

• Result

Demikian tips Cara Membuat Table of Contents di Postingan Blogger, biar bermanfaat dan wassalam.
Sumber http://arlinadesign.blogspot.com