Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts
4 Cara Direkomendasikan Untuk Menghapus Dan Memblokir Link Aktif Diblog Permanen

4 Cara Direkomendasikan Untuk Menghapus Dan Memblokir Link Aktif Diblog Permanen

syugulnajeh - Link aktif sering kali kita jumpai di dalam kotak komentar blog kita masing-masing. Tujuan mereka meninggalkan jejak berupa link dalam komentar blog mungkin karena berharap adanya orang lain dari pengunjung blog kamu mengklik link tersebut. 
Menghapus Link Aktif di Komentar Blog secara otomatis

Tentu saja link tersebut akan mengakibatkan hal buruk pada blog kamu. Terlebih lagi jika link yang ditaruh menuju kepada tempat atau situs yang isinya berupa negatif, pasti akan menjadi masalah besar bagi blog kamu. Maka dari itu cegahlah komentar-komentar tidak berguna (sampah, promosi pruduk dan lain sebagainya) seperti link tadi agar dihapus secara langsung. 

Supaya blog kamu tetap sehat dan aman, kamu bisa coba cara yang akan saya berikan pada artikel ini. Cara ini adalah cara untuk menghapus semua link aktif yang ada di komentar blog kamu. Ada empat cara agar link tersebut menjauh dari blog kamu. Ikuti langkah-langkah yang berikut ini. 

Empat {4} Cara Menghapus atau Menyembunyikan Link Aktif Di dalam Kolom Komentar


0.1 ) Menyembunyikan Link Aktif Menggunakan Bantuan CSS


Cara yang pertama dan utama tentu menggunakan bantuan CSS yang ditempelkan ke dalam laman blog kamu. Hal ini sangat unggul sekali dalam hal kecepatan. Karena sedikitnya kode CSS yang akan digunakan nantinya. 

Dengan menggunakannya CSS ini, maka link aktif dalam komentar tidak akan bisa diklik karena link tersebut tidak ditampilkan. Contohnya seperti gambar berikut ini :


Untuk cara pemasangnya adalah sebagai berikut ini. 

Masuk ke Dashbord blogger kamu. 
Masuk ke menu Theme => Edit HTML.
Tambahkan kode CSS dibawah ini tepat berada diatas ]]></b:skin>.

#comments p a{ display: none !important;} 

Namun menyembunyikan link tersebut menggunakan CSS masih memiliki kelemahan. Link tersebut tetap akan muncul atau nampak apabila dilihat di Page Source. Walaupun para pengunjung sedikit dari mereka yang menyadari akan hal link itu, taoi Google masih tetap bisa mendeteksi akan hal tersebut. 

0.2 ) Menghilangkan Link Aktif Dengan Bantuan Javascript & jQuery


Menghilangkan link aktif dalam komentar menggunakan Javascript dan jQuery sangat saya rekomendasikan. Karena dengan memasang kode tersebut, link komentar akan benar-benar menghilang tanpa bekas apapun.

Dan memang cara ini sudah banyak sekali digunakan oleh para blogger lainnya dengn tujuan agar blog mereka terjauhkan dari link aktif dan spam. Untuk cara pemasangannya pun sangat mudah, kamu hanya perlu memasukan javascript dibawah ini ke dalam tag </body> pada HTML blog. 

0.3 ) Berikut adalah cara memasang anti link menggunakan Javascript :

Masuk ke Dashbord blogger kamu. 
Masuk ke menu Theme => Edit HTML.
Kemudian taruh kode berikut ini telat berada diatas tag </body>.
Jika sudah silahkan simpan.

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
var parent = document.getElementById(parentID),
content = parent.getElementsByTagName(children);
for (var i = 0; i < content.length; i++) {
if (content[i].innerHTML.indexOf('</a>') !== -1) {
var salinan = content[i].innerHTML;
content[i].innerHTML = "<div>Maaf, link aktif tidak diperkenankan di sini. Salinan komentar Anda :</div><div><textarea>" + salinan + "</textarea> <div>Terima kasih atas pengertiannya</div>";
content[i].className = "spammers";
}
}
}
// Jalankan fungsi!
blockLinks('comments', 'p');
//]]>
</script>

Kode tersebut berguna untuk memblokir semua link pada komentar blog kamu secara otomatis. Sehingga jika ada link, maka link tersebut tidak akan ditampilkan berupa link. Namun akan diperlihatkan seperti komentar pada awalnya. Contoh seperti ini :

Saya akan menuliskan link dikomentar blog yang sudah terpasang script diatas. Contoh dibawah ini adalah contoh untuk link yang belum terblokir oleh javascript dan jQuery tadi. 

Kunjungi blog saya disini

Dan jika link komentar tadi sudah diblokir maka hasilnya akan seperti dibawah ini. 

Kunjungi blog saya <a href="https://syugulnajeh.blogspot.com/" rel="nofollow">disini</a>

Untuk yang jQuery itu ada berbagai macam ragam fungsinya. Ada yang berfungsi menghilangkan link tersebut dan mengembalikannya seperti teks biasa dan ada juga yang lainnya. Dan untuk cara mengembalikan ke teks biasa caranya adalah sebagai berikut :

Cara Membuat Kotak Script Scroll Keren Didalam Artikel Blog

Cara Membuat Kotak Script Scroll Keren Didalam Artikel Blog

syugulnajeh - Kotak script sangatlah penting untuk blog apabila blog tersebut banyak membahas tentang tips atau tutorial seputar blog atau yang lainnya. 

Kotak script ini berguna supaya para pembaca tidak kebingungan dalam membedakan antara konten artikel dan inti dari pembahasnya.


Bisa kamu bayangkan jika sebuah blog tutorial yang menyediakan script, namun dalam penulisan dan penyusunan katanya sangat kacau, antara script dan konten artikel tidak tersusun dengan rapi. Apa jadinya? Pengunjung akan merasa kebingungan dan bahkan cenderung akan menutup artikel tersebut. 

Walaupun isi artikel yang kamu berikan bagus dan akan sangat membantu mereka. Mereka justru akan kabur jika susunan artikelnya kacau. 

Maka solusi paling tepat dalam masalah ini adalah dengan membuat kotak script khusus. Dalam membuat kotak script sebenarnya sangatlah mudah. Dan ada banyak sekali desain atau tampilan kotak script tersebut. 

Dan disini saya akan memberikan contoh kotak script yang paling keren dan responsive pastinya. Berikut adalah penjelasan singkat dalam membuat kotak script HTML di dalam postingan blog.

Cara Membuat Kotak Script HTML, CSS Dan Javascript Di dalam Postingan Artikel Blog


1. Masuk terlebih dahulu ke Dashbor blogger kamu.
2. Masuk ke menu Theme --> Edit HTML.
3. Kemudian copy dan pastekan kode berikut ini tepat diatas ]]></b:skin>.

/* KOTAK SCRIPT By hartomy*/
.post-body pre{border-left:5px solid var(--color-main); padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#292E34;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
.post-body pre.html:before, .post-body pre.css:before, .post-body pre.javascript:before, .post-body pre.jquery:before {display: block; background-color:#bde0b9; padding:5px 35px; font-weight:500; font-size:16px; font-family:Google Sans, -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif; background-repeat:no-repeat; background-size:20px 20px; background-position-x:7px; background-position-y:center;}
.post-body pre.html:before {content:'HTML'; background-image:url("data:image/svg+xml,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z" fill="%231d2129"></path></svg>");}
.post-body pre.css:before {content:'CSS'; background-image:url("data:image/svg+xml,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z" fill="%231d2129"></path></svg>");}
.post-body pre.javascript:before {content:'Javascript'; background-image:url("data:image/svg+xml,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z" fill="%231d2129"></path></svg>");}
.post-body pre.jquery:before {content:'jQuery'; background-image:url("data:image/svg+xml,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.88,10.41C20.77,12.18 17.61,11.9 15.84,9.79C14.06,7.67 14.34,4.5 16.45,2.75L16.96,2.37C15.27,4.19 15.16,7.03 16.8,9C18.43,10.94 21.25,11.32 23.34,9.97L22.88,10.41M21.1,14.5C17.93,17.17 13.2,16.76 10.54,13.58C7.87,10.41 8.29,5.68 11.46,3L12.38,2.36C9.96,5.09 9.84,9.26 12.26,12.14C14.68,15 18.8,15.63 21.91,13.72L21.1,14.5M19.97,19.38C15.53,23.11 8.9,22.53 5.17,18.08C1.45,13.64 2.03,7 6.47,3.29L7.58,2.5C4.07,6.3 3.85,12.23 7.28,16.32C10.71,20.4 16.59,21.22 20.96,18.43L19.97,19.38Z" fill="%231d2129"></path></svg>");}
.post-body pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar{display:none} .post-body pre code{line-height:1.5em;display:block;background:none;border:none;color:#BFBF90;padding:10px 15px; font-size:12px;white-space:pre;overflow:auto;max-height:250px; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;} pre mark,code mark,pre code mark{background-color:#95b2f6 !important;color:#292E34 !important;padding:0px;margin:0px} .post-body code {user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;} .post-body code.tutor {color:#f44336; letter-spacing:-0.3px} post-body quote{border-left:5px solid var(--color-main); user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#292E34;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2; tab-size:2; word-break:normal; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none}

4. Klik simpan dan kembali ke Postingan kamu untuk membuat kotaknya.

Untuk cara penggunaan atau memanggil kode tersebut supaya bisa muncul di artikel blog, copy kode berikut ini ke dalam postingan kamu dalam mode HTML!

 

--> Kode dibawah ini untuk menampilkan HTML 

<pre class="html"><code> KODE PASTE DI SINI SCRIPT </code></pre> 

--> Kode untuk menampilkan CSS :

<pre class="css"><code> KODE PASTE DI SINI SCRIPT </span></code></pre> 

--> Kode untuk menampilkan Javascript :

<pre class="javascript"><code> KODE PASTE DI SINI SCRIPT </span></code></pre> 

--> Kode untuk Menampilkam jQuery :

<pre class="jquery"><code> KODE PASTE DI SINI SCRIPT </span></code></pre> 

! Apabila dibagian atas terpotong atau kotak scriptnya gak nongol, coba kamu kasih Enter dibagian atas dan bawah kode.

 

<pre class="html"><code>
.....berikan enter
masukkan kode HTMLyang telah di PARSE di sini
.....berikan enter
</code></pre>

Satu hal lagi, kalau kamu tidak ingin menggunakan logo disetiap kotak script, hilangkan saja elemen class-nya.

Dan sesuaikan kotak script dengan kode yang ingin ditampilkan. Jika kode berupa HTML, gunakan script khusus HTML dan begitu pula yang lainnya.

Itulah tutorial singkat cara membuat kotak script keren dan responsive di dalam postingan blog. 
√ Cara Membuat Halaman Error 404 Diblogger Jadi Keren

√ Cara Membuat Halaman Error 404 Diblogger Jadi Keren

syugulnajeh - Error 404 Page Not Found adalah halaman web atau blog yang telah dihapus oleh pemilik blog atau url yang tidak valid. Sehingga kalau kamu mencari halaman pada suatu web, dan halaman tersebut ternyata sudah dihapus, maka error 404 ini akan muncul.

Secara default, piha Blogger sudah support atau mendukung adanya Custom Error 404 Page Not Found ini (sebagai halaman yang tidak ditemukan). Pada umumnya, halaman eror ini memiliki tampilan yang kurang menarik.

Halaman eror 404 ini pun masih bisa kita edit dengan berbagai rupa. Agar para pengunjung merasa terkesan dengan desain blog kamu.

Maka dari itu saya ingin berbagi sedikit tips menganai cara mempercantik halaman ini. Cara ini sebenarnya sudah menjadi ciri khas bagi sebuah blog atau web. 

Tapi kalau blog kamu memiliki tampilan yang kurang menarik, kamu bisa coba cara yang satu ini. Cara ini menggunaka beberapa baris kode HTML yang akan di taruh ke dalam laman blog kamu. Untuk caranya kamu bisa ikutin langkah-langkah dibawah ini.

Cara Mempercantik Tampilan Halaman Error 404 Page Not Found Diblog



1. Masuk ke Daskbord blogger kamu.
2. Masuk ke menu Theme --> Edit HTML.
3. Kemudian cari kode dengan tag </head> (gunakan Ctrl + F untuk memudahkan dalam pencarian).

<b:if cond="data:view.isError"><style> /*Error Page ===============================*/ .cloud{width:350px;height:120px;background:#fff;background:linear-gradient(top,#fff 100%);background:-webkit-linear-gradient(top,#fff 100%);background:-moz-linear-gradient(top,#fff 100%);background:-ms-linear-gradient(top,#fff 100%);background:-o-linear-gradient(top,#fff 100%);border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px;position:absolute;margin:120px auto 20px;z-index:-1;transition:ease 1s} .cloud:after,.cloud:before{content:'';position:absolute;background:#fff;z-index:-1} .cloud:after{width:100px;height:100px;top:-50px;left:50px;border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px} .cloud:before{width:180px;height:180px;top:-90px;right:50px;border-radius:200px;-webkit-border-radius:200px;-moz-border-radius:200px} .x1{top:-50px;left:100px;-webkit-transform:scale(.3);-moz-transform:scale(.3);transform:scale(.3);opacity:.9;-webkit-animation:moveclouds 15s linear infinite;-moz-animation:moveclouds 15s linear infinite;-o-animation:moveclouds 15s linear infinite} .x1_5{top:-80px;left:250px;-webkit-transform:scale(.3);-moz-transform:scale(.3);transform:scale(.3);-webkit-animation:moveclouds 17s linear infinite;-moz-animation:moveclouds 17s linear infinite;-o-animation:moveclouds 17s linear infinite} .x2{left:250px;top:30px;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);opacity:.6;-webkit-animation:moveclouds 25s linear infinite;-moz-animation:moveclouds 25s linear infinite;-o-animation:moveclouds 25s linear infinite} .x3{left:250px;bottom:-70px;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);opacity:.8;-webkit-animation:moveclouds 25s linear infinite;-moz-animation:moveclouds 25s linear infinite;-o-animation:moveclouds 25s linear infinite} .x4{left:470px;botttom:20px;-webkit-transform:scale(.75);-moz-transform:scale(.75);transform:scale(.75);opacity:.75;-webkit-animation:moveclouds 18s linear infinite;-moz-animation:moveclouds 18s linear infinite;-o-animation:moveclouds 18s linear infinite} .x5{left:200px;top:300px;-webkit-transform:scale(.5);-moz-transform:scale(.5);transform:scale(.5);opacity:.8;-webkit-animation:moveclouds 20s linear infinite;-moz-animation:moveclouds 20s linear infinite;-o-animation:moveclouds 20s linear infinite} @-webkit-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}} @-moz-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}} @-o-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}} @import url('https://fonts.googleapis.com/css?family=Ruda:400,700'); #header, #outer-wrapper, #post-wrapper, #sidebar-wrapper, #content-wrapper, #footer-wrapper, #wrapper, .ignielToTop {display:none} body,html {overflow:hidden; margin:0; padding:0; width:100%; min-height:100vh} body {background:#fff; color:#1d2129} #igniel404 {background:#eceeee; text-align:center; margin:auto; font-weight:700; font-size:45px; font-family:'Ruda',sans-serif; position:fixed; width:100%; height:100%; line-height:1.25em; z-index:9999;} #igniel404 #error-text {position:relative; font-size:40px; color:#666; top:50%; right:50%; transform:translate(50%,-50%);} #igniel404 #error-text a {color:#888; text-decoration:none} #igniel404 #error-text p {margin:
0!important; letter-spacing:.5px;} #igniel404 #error-text span { color: rgba(0,0,0,.9); font-size: 100px; } #igniel404 #error-text a.back { background: #212529; color: #fff; padding: 10px 20px; font-size: 20px; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); transition: all 0.5s ease-out; } #igniel404 #error-text a.back:hover { background: #424242; color: #fff; } #igniel404 #error-text a.back:active {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);background:#333;color:#fff;border:double #eceeee;} #igniel404 #error-text #copyright {font-size:16px} #igniel404 #error-text #copyright a { color: #000000; } @media only screen and (max-width:640px){ #igniel404 #error-text {font-size:20px;} #igniel404 #error-text span {font-size:60px;} #igniel404 #error-text a.back {padding:5px 10px;font-size:15px;} } </style></b:if>

4. Lalu tempelkan juga kode dibawah ini tepat setelah tag <body>

<b:if cond="data:view.isError">
<div id="igniel404">
<div id="clouds">
<div class="cloud x1">
<div class="cloud x1_5">
<div class="cloud x2">
<div class="cloud x3">
<div class="cloud x4">
<div class="cloud x5">
</div>
<div id="error-text">
<span>404</span>
<p>HALAMAN TIDAK DITEMUKAN!</p>
<p><a class="back" expr:title="data:blog.title" href="/">Kembali Ke Halaman Awal</a></p>
<div id="copyright">
<a expr:title="data:blog.title" href="/"><data:blog .title=""></data:blog></a> © 2017 - <script>document.write(new Date().getFullYear())</script>. All Rights Reserved
</div>
</div>
</div>
</div></div></div></div></div></div></b:if>

Kamu bisa ganti tulisan ditandai tebal dan bergaris sesuai dengan teks yang ingin kamu tampilkan!


5. Terakhir klik simpan dan lihat hasilnya.

Untuk hasil atau demonya, kamu bisa klik tombol dibawah ini. Atau jika ingin lihat diblog kamu sendiri, coba tempel link ini pada blog kamu.


Ganti tulisan bergaris dengan url blog kamu sendiri!