Kumpulan Kode Script HTML, CSS, jQuery, JavaScript Untuk Blogspot

Kode Script Blogger

Postingan tentang kumpulan kode script HTML, CSS, jQuery, JavaScript Untuk Blogger ini dibuat hanya untuk mempermudah admin dalam pengetikan artikel secara langsung tanpa perlu repot browsing sana-sini lagi.

Kode CSS Video YouTube Responsive Pada Blogspot

/* Youtube Responsive */ .post-body iframe {width:100%!important;} @media screen and (max-width:960px){ .post-body iframe {max-height:90%} } @media screen and (max-width:768px){ .post-body iframe {max-height:75%} } @media screen and (max-width:600px){ .post-body iframe {max-height:60%} } @media screen and (max-width:480px){ .post-body iframe {height:auto!important;max-height:auto!important} }

Script jQuery Video YouTube Responsive Pada Blogspot

Simpan script jQuery berikut tepat di atas kode </body>

<script> //<![CDATA[ /* Youtube Responsive */ window.onload = function ignielYtube() { var youtube = $('iframe[src*="youtube.com"]'); youtube.each(function() { $(this).attr('aspectRatio', this.height / this.width).attr('style', 'width:100%'); }); $(window).resize(function() { youtube.each(function() { $(this).attr('height', $(this).width() * $(this).attr('aspectRatio')); }); }).resize(); }; //]]> </script>

Kode CSS Syntax Highlighter di Blogger

Syntax highlighter biasa juga disebut kotak script untuk membedakan mana tulisan biasa pada artikel dan mana yang mengandung kode script HTML, CSS, jQuery, JavaScript. Syntax highlighter sendiri banyak dipakai oleh blog dengan topik tutorial HTML, CSS, jQuery, JavaScript.

Untuk cara memasang syntax highlighter pada Blogger ini, jika sebelumnya telah ada kode CSS .post-body pre dan .post-body pre code silahkan hapus dulu agar tidak terjadi kesalahan. Lalu tambahkan deretan kode berikut SEBELUM / DI ATAS kode </style>.

.post-body pre { background-color: #292E34; /* warna background */ border-left: 5px solid #008c5f; /* variasi border kiri */ padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; 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 code { color: #BFBF90; /* warna huruf */ font-size: 12px; /* ukuran huruf */ max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text }

Untuk menggunakannya syntax highlighter di postingan blogspot tinggal dipanggil menggunakan <pre> dan <code> seperti contoh berikut ini:

<pre><code> <!-- Masukkan Semua Kode CSS, HTML atau JavaScript Yang Sudah Diparse Disini --> </pre></code>

Script Iframe Facebook

<iframe src=”https://www.blogkamu.com” title=”Visit Us” width=”100%” height=”510px” style=”display:block; border:1px solid #c7c4c0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;” frameborder=”0″></iframe>

Script Redirect 404 Untuk Blogspot

Letakkan script redirect 404 berikut tepat diatas kode </body>

<b:if cond='data:view.isError'> <script> window.location.href = &quot;https://URLblogkamu.com/&quot;; </script> </b:if>

Cara lain untuk mengatasi error 404 dengan masuk ke pengaturan blogger dan pilih menu error dan pengalihan lalu pilih 404 khusus. Silahkan simpan script redirect 404 berikut didalamnya.

  

<script> my_redirect = setTimeout(function() { window.location.href = 'https://URLblogkamu.com/'; }, 10); </script>

Settingan Custom Robot.txt Pada Blogger

User-agent: * 

Allow: / 

Disallow: /search 

Sitemap: https://alamatblogkamu/sitemap.xml