Featured Post

Pinned Post

Jenis Artikel yang Paling Banyak Dicari di Tahun 2022

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian Jenis Artikel yang Paling Banyak Dicari di Tahun 2022 Banyak pengunjung ada...

Cara Memasang Syntax Highlighter di Postingan Blog

Cara Memasang Syntax Highlighter di Postingan Blog

Pada kesempatan kali ini Bloggerin Id akan share kepada kalian Cara Memasang Syntax Highlighter di Postingan Blog


Syntax Highlighter merupakan fitur khusu pemindahan kode bahasa pemrograman tertentu dengan tulisan, seperti warna, dan juga posisi sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk dipindahkan maupun disalin ke dalam bentuk tulisan lain agar lebih mudah dibaca dan dipelajari.


Syntax Highlighter diperuntukkan bagi blog yang membahas tutorial pemrograman agar pengunjung dapat lebih memahami sebuah kode yang diajarkan step by stepnya dan juga pengunjung agar lebih nyaman saat memcara konten blog, dan bagi penulis atau admin blog akan membuatnya lebih menjadi lebih professional dalam menyajika artikel tutorialnya.


Syntax Highlighter untuk cara kerjanya hampir sama dengan blockquote yang menjadi perbedaannya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan kode aslinya harus dilakukan secara manual. Jadi sebagai intinya Syntax Highlighter akan lebiih memiliki efektif dalam proses pembuatan atau pemindahannya jika dibandingkan dengan blockquote.


Langsung saja jika sobat berminat inginmemasang Syntax Highlighterpada blog, simak tutorial dibawah ini dengan tepat.


Cara Memasang Syntax Highlighter Pada Template Blog

Pertama sobat masuk terlebih dahulu ke Blogger > Klik menu Tema > Klik Edit HTML Tambahkan kode CSS dibawah ini tepat diadat kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;


Perlu diperhatikan tutorial yang saya bagikan ini akan berfungsi dengan baik jika blog sobat sudah menggunakan jquery library contoh scripnya seperti 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 kode dibawah ini tepat diatas kode </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.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Jika sudah klik tombol Simpan Tema


Cara Memasang Syntax Highlighter pada postingan

Setelah memasang kode diatas sekarang saatnya menerapkannya di postingan, buat postingan baru, perlu diingat menulis dengan mode Tampilah HTML bukan Tampilan Menulis


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

Ganti yang saya tandai tersebut dengan kode HTML/CSS maupun JavaScript. Khusus untuk kode HTML dan Javascript sebelum memasang silahkan terlebih dahulu ngeparse kode tersebut di HTML Converter


Berikut adalah contoh penulisan kode HTML, yang bertanda tersebut kode yang akan ditambahkan.


<pre><code><html>
<head>
  <title>Bloggerin</title>
</head>
<body>
  <main>
    <h1>Bloggerin Indonesia</h1> 
    <h2>Gudangnya ilmu teknologi</h2>
    <p>Pusatnya tutorial blogger</p> 
    <img src="" alt=""> 
    <p></p>
  </main>
</body>
</html></code></pre>

Sama halnya dengan kode CSS maupun Javascript, cara penulisannya sama seperti contoh diatas.


Oke sekian yang bisa saya sampaikan tentang bagaimana caraCara Memasang Syntax Highlighter di Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.


Sumber : https://github.com/isagalaev/highlight.js


Apa itu docker dan Fungsinya? Ini Penjelasannya

Apa itu docker dan Fungsinya? Ini Penjelasannya

Pada kesempatan kali ini Bloggerin Id akan share kepada kalian Apa itu docker dan Fungsinya


Proses kerja yang lebih efektif dan efesien, begitulah yang sangat diharapkan khususnya bagi para pengembang perangkat lunak di berbagai negara. Seiring perkembangan teknologi yang begitu pesat, kebanyakan masyarakat lebih menyukai penggunaan sistem yang cenderung fleksibel.


Docker, istilah tersebut cukup asing untuk sobat? untuk membangun sebuah aplikasi, sangat lah banyak diperlukan banyak tahap dalam membuat konfigurasi hardware maupun menyiapkan sistem operasi tempat semua file. Docker adalah salah satu solusi untuk mempermudah proses tersebut.


Meskiput banyak yang belum tau istilah docker ternyata docker sudah banyak digunakan para developer untuk membantu pengembangan berbagai aplikasi.


Penasaran? simak artikel berikut dengan baik ya.


Apa itu Docker?

Docker adalah platform yang menyediakan kemampuan untuk membungkus dan menjalankan sebuah aplikasi dalam lingkungan terisolali yang biasanya disebut Container. Dengan adanya container tersebut memudahkan untuk menjalankan banyak container di waktu yang bersamaan pada host tertentu.


Pada tahun 2013 docker diperkenalkan oleh Solomon Hykes pada acara PyCon. Beberapa bulan setelah diresmikan peluncurannya pada tepatnya tahun 2014 semenjak itu docker menjadi sangat populer di kalangan developer luar negeri, tetapi belum terlalu populer di indonesia


Fungsi Docker

Jika sudah mengetahui apa itu Docker, Apasih fungsi dan kegunaan docker yang ditawarkannya. Berikut beberapa fungsi docker untuk mempermudah pengembangan aplikasi:


1. Mempermudah pengembang aplikasi.

Docker sendiri menyediakan environment untuk mempermudah pengembangan aplikasi, stabil untuk dijalankan di perangkat manapun. Selain itu, docker sendiri sangat menghemat penggunaan resource yang dibutuhkan.


2. Mempermudah produktivitas adeveloper.

Dengan adanya kontainer docker ini para developer dapat menjalankan berbagai berbagai layanan sekaligus sehingga dapat lebih menunjang produktivitas dalam melakukan sebuah pengembangan sistem atau aplikasi dalam skala besar.


3. Bermanfaat untuk debugging.

Bagi seorang developer menginginkan debugging secara cepat, dengan memanfaatkan docker ini. Proses debugging pada sanbox hanya memerlukan waktu 1 menit saja.


4. Mengelola kode pipeline.

Docker ini juga bisa dimanfaatkan untuk tempat melakukan pengujuan pipeline code, sebagian developer banyak yang menggunakan docker untuk mengatasi masalah pengelolaan kode pipeline.


5. Menyederhanakan konfigurasi.

Docker sendiri memiliki konfigurasi yang cukup sederhana sehingga dapat disesuaikan dengan kebutuhan aplikasi yang saat ini kamu jalankan. Docker tidak memiliki overhead maka dari itudapat menjalankan aplikasi yang diuji tanpa konfigurasi tambahan.


6. Multi-tenance.

Khususnya pada developer sangat terbantu dengan kemampuan docker dalam mendukung pembuatan aplikasi berstruktur multi-tenance seperti SaaS. Misalkan saat pembuatan aplikasi IoT. Dengan docker kamu bisa membuat lebih dari 1 environment tanpa menulis ulang pada aplikasi yang utama. jika dilakukan secara manual, maka akan menyita waktu yang terlalu lama.


Penutup

Setelah membaca penjelasan diatas, apakah sudah paham mengenai docker ini? Jadi, Docker adalah sebuah platform yang tentunya open-source untuk mengemas berbagai jenis file perangkat lunak ke dalam unit yang disebut kontainer.


Oke sekian yang bisa saya sampaikan tentang Apa itu docker dan Fungsinya Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Jenis Artikel yang Paling Banyak Dicari di Tahun 2022

Jenis Artikel yang Paling Banyak Dicari di Tahun 2022

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian Jenis Artikel yang Paling Banyak Dicari di Tahun 2022


Banyak pengunjung adalah tujuan utama seorang blogger, apalagi saat artikel yang dibuat disukai oleh pembaca pasti pembaca tersebut akan kembali disaat kita update konten terbaru. Sebagai contoh saya seorang penulis blog rasanya sangat senang sekali alau artikel yang saya buat dapat feedback positif pada pengunjung blog.


Mendaptangkan pengunjung bukanlah perkara mudah, banyak hal yang harus diperhatikan tentunya adalah teknik dasar SEO (Search engine optimation) agar artikel yang dibuat dapat terindex oleh mesin pencarian. Tulisan yang dibuat dapat dibaca oleh semua orang.


Tidak hanya menulis artikel saja, bayangkan anda sudah membuat artikel dengan susah payah dan ternyata volume pencariannya sulit alias jarang yang mencari, jadi sebelum menulis sebuah artikel harus dipastikan and tau jenis artikel apa aja yang dibutuhkan para pembaca diinternet.


Perlu diingat juga membuat artikel haruslah bisa memberi jalan keluar maupun solusi untuk para pembacanya !


Jenis Artikel yang Paling Banyak Dicari


Lantas jenis artikel apa aja sih yang banyak dicari pada tahun ini berikut blog Blogger akan sedikit memberi referensi jenis artikel apa aja yang banyak dicari.


1. Artikel Tutorial

Jenis Artikel yang Paling Banyak Dicari

Banyak yang mengatakan bahwa artikel tutorial merupakan artikel abadi. Banyak diterapkan oleh blogger, tidak semua orang dapat memahami tutorial dalam bentuk video. Orang akan merasa paham melakukan praktik step demi step dijelskan secara urut dan ditulis melalui artikel.


Artikel tutorial selalu sama dari waktu ke waktu, paling hanya sedikit menyesuaikan perubahan, jika sudah tertinggal beberapa tahun. Berbeda dengan artikel musiman, yang hanya akan viral pada waktunya, jika sudah tidak tren atau viral lagi perlahan visitor akan turun secara perlahan.


Jika agan menginginkan visitor yang stabil dalam kurun waktu yang lama, artikel tutorial ini cocok banget. Namu persaingan keyword sangat tinggi, kemungkinan harus sabar terlebih dahulu dan terus selalu menulis dan bermanfaat bagi orang lain.


Artikel tutorial sangat lah luas cakupannya. Sebagai contoh, bisa membuat artikel tentang "cara membuat blog", "cara memperbaiki handphone", "cara root android terbaru" dan masih banyak lagi untuk dijadikan bahan membuat artikel untuk blog.


Baca Juga : Segera Beralih ke Icon SVG Sekarang Juga


2. Artikel Promo dan Diskon

Jenis Artikel yang Paling Banyak Dicari

Mendengar kata promo atau diskon, artikel yang sering dicari oleh orang indonesia yaitu info tentang prmo atau diskon. Dengan adanya diskon atau potongan harga sangat lah berpengaruh pada minat beli masyarakat.


Banyaknya marketplace atau toko online dengan metode pembayaran yang sangat beragam membuat perusahaan terkait mengeluarkan promo atau diskon untuk menarik konsumen dan bersaing dengan kompetitor. Info mengenai diskon maupun promo bisa juga kita jadikan tulisan, dijamin banyak banget pengunjungnya.


3. Artikel Kuliner

Jenis Artikel yang Paling Banyak Dicari

Menulis arikel tentang kuliner pasti ada kaitannya tentang traveling, untuk traveling sendiri akan saya bahas pada urutan nomor 4 diwabah ini, kembali ke topik artikel kuliner Biasanya saat orang berpergian ke suatu daerah akan sekalian mecari informasi tentang kuliner daerah tersebut. Selama dunia traveling masih digemari, artikel kuliner pun akan juga banyak digemari.


Selain mengulas tentang kuliner khas daerah, Mislkan menjelang hari spesial tertentu seperti bulan puasa, idul fitri, natal, artikel resep kue maupun makanan khas menjadi tinggi volume pencariannya.


4. Artikel Traveling

Jenis Artikel yang Paling Banyak Dicari

Traveling di era sekarang merupakan kebutuhan setiap orang untuk menghilangkan kepenatan dunia yang begitu sangat rumit hehe, dengan perkembangnya teknologi yang begitu pesat juga tentunya media sosial seperti facebook instagram dan juga tiktok sangat membantu menaikkan minatnya masyarakat dalam ber treveling. Banyaknya spot foto dan video yang sangat bagus mengundang penasaran untuk ikut mencobanya.


Pegunungan maupun pantai kita juga bisa memanfaatkan untuk menulis artikel konten blog mengenai traveling. Menulis tentang pengalaman saat perjalanan, biaya transportasi, dan akomodasi, hotel terdekat untuk pengetahuan calon traveler.


Tidak heran kalau artikel banyak sekali pengunjungnya, selamat traveling bagi sobat yang memilih jenis konten traveling.


Baca Juga : Cara Mengatasi Leverage Browser Caching Favicon


Penutup

Kemungkinan masih banyak lagi jenis artikel yang banyak pembaca di tahun 2022 ini, jenis artikel diatas hanya sebuah referensi saja buat sobat yang masih baru memulai untuk menulis, tentu saja sobat bebas memilih konten yang cocok untuk blog sobat. Perlu diingat juga ngblog itu harus enjoy dan bahagia :)


Oke sekian yang bisa saya sampaikan tentang Jenis Artikel yang Paling Banyak Dicari di Tahun 2022 Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Mengunci Isi Artikel Blog Dengan Password

Cara Mengunci Isi Artikel Blog Dengan Password


Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Mengunci Isi Artikel Blog Dengan Password


Mengapa mengunci artikel? mengunci isi artikel ini bagus digunakan untuk para guru maupun yang mempunyai les privat, jadi apa yang ditulis hanya dapat diakses yang mengetahui passwordnya saja. Contohnya seperti dibawah ini:


Masukkan Password Untuk Membuka Artikel ini!
password: bloggerin

Ini isi artikel yang dikunci

Nah itu contoh dari artikel yang diberi password, untuk yang berminat memasangnya silahkan simak tutorial dibawah ini:


Pertama agan masuk terlebih dahulu ke Blogger > Buat postingan baru pada mode HTML kemudian copy kode dibawah ini dan pastekan pada kolom HTML postingan


<script>
function verify() {
  if (document.getElementById('password').value === 'bloggerin') {
    document.getElementById('HIDDENDIV').classList.remove("kurahidden");
    document.getElementById('credentials').classList.add("kurahidden");
  } else {
    alert('Password Salah!');
    password.setSelectionRange(0, password.value.length);
  }
  return false;
}
</script>

<style>
.kurahidden {display: none;}
.kurapassword{padding:20px;background:#007bfd;border-radius:5px;width:300px;}
.kuratombol{padding:4px 20px 4px; 20px;background:#222;color:#fff;width:80%;border-radius:5px;}
.kurainput{padding:4px;background:#fff;color:#000;width:80%;text-align:center;border-radius:5px;margin-bottom:3px;}
.kuraket{text-align:center;margin-bottom:5px;}
</style>

<center>
<div id="credentials">
<div class="kurapassword">
<div class="kuraket">
Masukkan Password Untuk Membuka Artikel ini!
</div>
<input class="kurainput" type="text" id="password" onkeydown="if (event.keyCode == 13) verify()" />
<br/>
<input class="kuratombol" id="button" type="button" value="Buka Artikel" onclick="verify()" />
</div> 
</div>
</center>

<div id="HIDDENDIV" class="kurahidden">
LETAKKAN ISI ARTIKEL YANG INGIN DIPASSWORD DISINI YA GAES!
</div>

Noted: Isi yang saya tandai sesuai keinginan agan ya

Jika merasa sudah semua lalu klik publikasikan dan lihat hasilnya.


Sumber: kurazone.net


Oke sekian yang bisa saya sampaikan tentang Cara Mengunci Isi Artikel Blog Dengan Password Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Menambahkan Rating Bintang di Setiap Postingan Blog

Cara Menambahkan Rating Bintang di Setiap Postingan Blog


Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Menambahkan Rating Bintang di Setiap Postingan Blog


Menggunakan rating bintang pada postingan blog sangat berdampak pada artikel yang kita buat di search engine google dan juga itu adalah teknik SEO untuk meningkatkan pengunjung, dikarenakan pengunjung melihat rating bintang tersebut. Jika rating bintang tersebut tinggi itu point plus untuk postingan agan.


Pihak blogger sendiri tidak memberikan fitur rating bintang ini pada platformnya, oke jika agan berminat untuk memasang rating bintang pada postingan artikel agan silahkan simak tutorial dibawah ini.


Cara Menambahkan Rating Bintang di Setiap Postingan Blog


Pada tutorial berikut ini saya menggunakan platform Rating Widget. Rating Widget adalah platform penyedia rating bintang yang dapat digunakan secara gratis, minimalis dan tentunya keren.


pertama agan akses terlebih dahulu ke Rating Bintang, jika agan belum mempunyai akun silahkan mendaftar terlebih dahulu.


Cara Menambahkan Rating Bintang di Setiap Postingan Blog

Klik menu Show Source Code, dan copy kode tersebut dan pastekan tepat diats kode </body> pada tema agan. Kodenya seperti dibawah ini:


<script type="text/javascript">(function(d, t, e, m){
    window._rws = window._rws || [{
        huid: "417497",
        uid: "04a91b109758a3bbabb0c2306a1de5b0",
        source: "blogger",
        options: {
            "advanced": {
                "layout": {},
                "font": {}
            },
            "size": "",
            "style": "oxygen",
            "isDummy": false
        } 
    }];

        
    // Append Rating-Widget JavaScript library.
    var rw, s = d.getElementsByTagName(e)[0], id = "rw-blogger-js",
        p = d.location.protocol, a = ("https:" == p ? "secure." + 
        m + "js/platform/" : "js." + m + "platform/"), 
        ck = "Y" + t.getFullYear() + "M" + t.getMonth() + "D" + t.getDate();
    if (d.getElementById(id)) return;              
    rw = d.createElement(e);
    rw.id = id; rw.async = true; rw.type = "text/javascript";
    rw.src = p + "//" + a + "blogger.js?ck=" + ck;
    s.parentNode.insertBefore(rw, s);
}(document, new Date(), "script", "rating-widget.com/"));</script>

Agar lebih rapi bisa copy kode dibawah ini:


<script type='text/javascript'>
//<![CDATA[
!function(e,t,n,i){window.RW_Async_Init=function(){RW.init({huid:"417497",uid:"04a91b109758a3bbabb0c2306a1de5b0",source:"website",options:{style:"oxygen",isDummy:!1}}),RW.render()};var s,a=e.getElementsByTagName(n)[0],c="rw-js",r=e.location,o="Y"+t.getFullYear()+"M"+t.getMonth()+"D"+t.getDate(),d=r.protocol,g=r.search.indexOf("DBG=")>-1?"":".min",l="https:"==d?"secure."+i+"js/":"js."+i;e.getElementById(c)||((s=e.createElement(n)).id=c,s.async=!0,s.type="text/javascript",s.src=d+"//"+l+"external"+g+".js?ck="+o,a.parentNode.insertBefore(s,a))}(document,new Date,"script","rating-widget.com/");
//]]>
</script>

Ganti yang bertanda dengan ID agan sendiri ya.


Cara Penerapkan disetiap postingan blog

Untuk penerapan di postingan blog masih sama di edit HTML, copy kode dibawah ini dan pastekan tepat diatas kode <data:post.body/> untuk diatas postingan.


Note: Kode tersebut ada banyak di dalam template kirasan 3 kode yang sama

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="rw-ui-wrap">
<div class="rw-ui-container"></div>
</div>
</b:if>

Agar tampilan lebih rapi tambahkan css dibawah ini:


.rw-ui-wrap {margin:0 auto 20px auto}

Jika serasa sudah semua lalu klik Simpan Tema.


Oke sekian yang bisa saya sampaikan tentang Cara Menambahkan Rating Bintang di Setiap Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Mudah Membuat Iklan Parallax Adsense di Blog

Cara Mudah Membuat Iklan Parallax Adsense di Blog

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Mudah Membuat Iklan Parallax Adsense di Blog


Apakah agan sudah tau apa itu parallax? Parallax adalah desain blog yang di mana objek latar belakang gerakannya akan lebih lambat. Parallax ini juga bisa diterapkan pada iklan adsense, pada saat agan scroll kebawah atau keatas terlihat iklan tersebut akan diam pada tempatnya.


Pemasangan iklan adsense parallax ini sangat membantu bagi blog agan yang kekurangan widget untuk memasang iklan.


Cara Mudah Membuat Iklan Parallax Adsense di Blog


Pertama sobat masuk terlebih dahulu ke Blogger > Klik menu Tema > Klik Edit HTML kemudian copy dan paste kode dibawah ini tepat diatas kode </head>.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  display: inline-block;
  float: left;
  z-index: 99;
}
.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0 auto;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.paralax_div > div > div > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  border: none;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;
  width: 300px;
}
.clear {
  clear: both;
  display: block
}

@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 250px;
    margin: 0 auto;
    float: none;
  }
  .paralax_div > div > div > div {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .paralax_div > div > div {
    width: 100%;
    left:0;
    text-align: center;
  }
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:auto;
  }
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%;
    height:600px;
  }
}
/*]]>*/
</style>
</b:if>

Selanjutnya cari kode <div class='post-body entry-content' pada template gan, kode tersebut terdapat banyak di template, copy kode dibawah ini dan pastekan tepat diatas kode <div class='post-body entry-content'


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="KODE ADSENSE DISINI" alt="banner" title="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

Rubah yang sudah saya tandai dengan kode adsense agan

Jika serasa sudah semua lalu klik Simpan Tema dan lihat hasilnya.


Oke sekian yang bisa saya sampaikan tentang Cara Mudah Membuat Iklan Parallax Adsense di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.


Cara menghilangkan Tahun dan Bulan Pada Link Blogger

Cara menghilangkan Tahun dan Bulan Pada Link Blogger

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara menghilangkan Tahun dan Bulan Pada Link Blogger


Pada dasarnya permalink postingan blogger yaitu nama_domain.com/tahun/bulan/judul_postingan. jika tahun dan bulan dihilangkan akan tampak seperti platform wordpress. Bagaimana cara menghilangkan tahun dan bulan pada permailink postingan blogger? sebelum ke tutorialnya saya beritahu terlebih dahulu apa sih pengaruhnya terhadap SEO blogger.


Dengan menghapus tahun dan bulan tentu saja melanggar kebijakan blogger, pastinya blogger menambahkan tahun dan bulan itu merupakan cara terbaik untuk mengoptimalkan blog agan pada search engine seperti Google. Apalagi kalau blog agan sudah memiliki Adsense awas hati-hati saja jika kena banned dari pihak google.


Tutorial ini kembali kepada agan, jika agan tidak begitu memperdulikan tentang SEO silahkan ikuti langkah-langkah dibawah ini:


Catatan: Resiko ditanggung sendiri!

Cara menghilangkan Tahun dan Bulan Pada Link Blogger


Pertama sobat masuk terlebih dahulu ke Blogger > Klik menu Tema > Klik Edit HTML kemudian copy kode JS dibawah ini dan pastekan tepat diatas kode </body>


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

Jika sudah klik Simpan Tema, dan lihat hasilnya.


Ilustrasi dari kode diatas :


Permalink postingan blogger asli :
http://bossmajid.blogspot.com/2018/06/faktorial-test.html


Permalink postingan blogger yang sudah memasang kode diatas :
http://bossmajid.blogspot.com/faktorial-test


Oke sekian yang bisa saya sampaikan tentang Cara menghilangkan Tahun dan Bulan Pada Link Blogger Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Mudah Membuat Multi Tab Server Video Streaming

Cara Mudah Membuat Multi Tab Server Video Streaming

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Mudah Membuat Multi Tab Server Video Streaming


Fitur multi tab video streaming ini harus wajib dipasang di blog film, dengan adanya fitur ini penonton web film kamu akan terasa akan lebih nyaman dengan kualitas video yang akan dilihat maupun juga server yang akan ditonton nanti.



Jika berminat memasangnya, silahkan ikuti langkah-langkah dibawah ini:


Cara Mudah Membuat Multi Tab Server Video Streaming


Pertama agan masuk terlebih dahulu ke Blogger > Klik menu Tema > Klik Edit HTML kemudian copy kode CSS dibawah ini dan pastekan tepat diatas kode </head>


<style type="text/css">
/*CSS Multi Tab Video*/
#multitab-video{position:relative;box-sizing:border-box;margin:0 auto;line-height:2em;font-size:15px!important;width:100%}
#multitab-video #movie-player{position:relative;padding-bottom:56.25%;padding-top:1.66666666666667em;height:0}
#multitab-video #movie-player iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#multitab-video #server-list{position:relative;background:#fafafa;display:block}
#multitab-video #server-list .server-item:before{content:attr(title);width:9.93333333333333em;display:inline-block;padding-left:0.933333333333333em}
.server-item{border-bottom:1px solid #c8c8cb}
#multitab-video #server-list a{color:#334;text-decoration:none;border:1px solid #443;padding:0.333333333333333em 0.666666666666667em;display:inline-block;margin:0.333333333333333em;box-sizing:border-box}
a:active{background-color:yellow}
</style>

Klik Simpan Tema. Selanjutnya copy kode dibawah ini dan pastekan pada postingan dalam mode Tampilan HTML bukan Tampilan Menulis.


<div id='multitab-video'>
    <div id="movie-player">
        <iframe src="EMBED URL VIDEO" frameborder="0" webkitAllowFullScreen="" mozallowfullscreen="" allowFullScreen="" name="search_iframe"></iframe>
    </div>
    <div id="server-list">
        <div class="server-item" title="NAMA SERVER">
            <a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
        </div>
        <div class="server-item" title="NAMA SERVER">
            <a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
        </div>
    </div>
</div>

Catatan: Ganti semua yang sudah ditandai dengan link embed dan nama server agan sendiri.

Pastinya yang membaca postingan ini mempunyai web movie atau film kan? Jika berminat template movie blogger seperti layarkaca21 bisa menghubungi saya, untuk demo dibawah ini



Oke sekian yang bisa saya sampaikan tentang Cara Mudah Membuat Multi Tab Server Video Streaming Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.