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

Cara Memasang Download Box Seperti Situs Anime

Cara Memasang Download Box Seperti Situs Anime

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Memasang Download Box Seperti Situs Anime di blogger


Mempunyai situs download anime? download boxnnya masih berantakan dan tidak teratur? kini Bloggerin ID mempunyai solusinya, banyak yang beranggapan tutorial seperti ini hanyalah simple dan mudah tinggal IE dan ambil kodenya.


Tapi kini saya membuat tutorial ini untuk kamu yang masih awan dengan kode html dan ingin memasang download box seperti situs anime pada situs kamu sendiri.


Cara Memasang Download Box Seperti Situs Anime


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


<style type='text/css'>
.download-eps{font-size:9px;font-weight:bold;background:none repeat scroll 0% 0% #F5F5F5;padding:10px;margin:10px 0}
.download-eps ul{margin:0;padding:0;list-style:outside none none}
.download-eps ul li{background:none repeat scroll 0% 0% #E4E4E4;margin-bottom:2px;line-height:26px;padding:0 5px;font-size:15px}
.download-eps ul li strong{background:#00b894;border-right:2px solid #F5F5F5;width:150px;display:block;float:left;margin-left:-5px;margin-right:2px;color:#FFF;padding:0 5px;text-align:left}
</style>

Jika sudah klik Simpan Tema. Kemudian pastekan kode dibawah ini tepat pada postingan dalam mode Tampilan HTML bukan Tampilan Menulis.


<div class="download-eps">
   <ul>
      <li style="text-align: center;">
         <strong>360p</strong>
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Solidfiles</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Tusfiles</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Acefile</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>480p</strong>
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Solidfiles</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Tusfiles</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Acefile</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>720p</strong>
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Solidfiles</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Tusfiles</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Acefile</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>1080p</strong>
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Solidfiles</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Tusfiles</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Acefile</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>4k</strong>
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Solidfiles</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Tusfiles</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Acefile</a> |
         <a href="URLANDA" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
   </ul>
</div>

Silahkan klik Publikasikan dan lihat hasilnya.


Oke sekian yang bisa saya sampaikan tentang Cara Memasang Download Box Seperti Situs Anime Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Terbaru Membuat Efek Salju Pure CSS di Blogger

Cara Terbaru Membuat Efek Salju Pure CSS di Blogger

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Terbaru Membuat Efek Salju Pure CSS di Blogger


Memasang efek salju adalah salah satu cara untuk mempercantik tampilan, widget yang satu ini tetap ringan dan tidak membuat error maupun lag pada blog. Warnanya yang putih mendominasi akan terasa semakin menarik lagi.


Jika agan berminat memasang efek tersebut, ikuti langkah-langkah dibawah ini:


Cara Terbaru Membuat Efek Salju Pure CSS di Blogger


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


<style type='text/css'>
/* Efek Salju */
.flake{background-color:#fff;border-radius:100%;position:absolute;top:-10vh;padding:1vw}.flake:nth-child(1){animation:snow 19s linear 40s infinite normal backwards;left:79%;opacity:0.71;padding:0.11vw}.flake:nth-child(2){animation:snow 19s linear 10s infinite normal backwards;left:57%;opacity:1.1;padding:0.34vw}.flake:nth-child(3){animation:snow 14s linear 15s infinite normal backwards;left:5%;opacity:0.82;padding:0.12vw}.flake:nth-child(4){animation:snow 14s linear 30s infinite normal backwards;left:95%;opacity:0.32;padding:0.28vw}.flake:nth-child(5){animation:snow 12s linear 8s infinite normal backwards;left:54%;opacity:0.48;padding:0.41vw}.flake:nth-child(6){animation:snow 16s linear 30s infinite normal backwards;left:20%;opacity:0.64;padding:0.28vw}.flake:nth-child(7){animation:snow 12s linear 36s infinite normal backwards;left:20%;opacity:0.28;padding:0.34vw}.flake:nth-child(8){animation:snow 13s linear 3s infinite normal backwards;left:62%;opacity:0.55;padding:0.14vw}.flake:nth-child(9){animation:snow 18s linear 44s infinite normal backwards;left:65%;opacity:0.6;padding:0.32vw}.flake:nth-child(10){animation:snow 16s linear 32s infinite normal backwards;left:90%;opacity:0.55;padding:0.18vw}.flake:nth-child(11){animation:snow 14s linear 50s infinite normal backwards;left:6%;opacity:0.98;padding:0.39vw}.flake:nth-child(12){animation:snow 11s linear 22s infinite normal backwards;left:93%;opacity:0.51;padding:0.2vw}.flake:nth-child(13){animation:snow 13s linear 8s infinite normal backwards;left:61%;opacity:0.21;padding:0.47vw}.flake:nth-child(14){animation:snow 15s linear 43s infinite normal backwards;left:19%;opacity:0.46;padding:0.25vw}.flake:nth-child(15){animation:snow 11s linear 13s infinite normal backwards;left:94%;opacity:0.83;padding:0.29vw}.flake:nth-child(16){animation:snow 19s linear 15s infinite normal backwards;left:92%;opacity:0.83;padding:0.28vw}.flake:nth-child(17){animation:snow 19s linear 30s infinite normal backwards;left:14%;opacity:0.3;padding:0.36vw}.flake:nth-child(18){animation:snow 20s linear 41s infinite normal backwards;left:46%;opacity:1.07;padding:0.16vw}.flake:nth-child(19){animation:snow 15s linear 7s infinite normal backwards;left:46%;opacity:1.03;padding:0.29vw}.flake:nth-child(20){animation:snow 14s linear 7s infinite normal backwards;left:40%;opacity:1.08;padding:0.13vw}.flake:nth-child(21){animation:snow 16s linear 18s infinite normal backwards;left:1%;opacity:0.29;padding:0.46vw}.flake:nth-child(22){animation:snow 16s linear 3s infinite normal backwards;left:35%;opacity:0.64;padding:0.25vw}.flake:nth-child(23){animation:snow 19s linear 45s infinite normal backwards;left:9%;opacity:0.39;padding:0.3vw}.flake:nth-child(24){animation:snow 17s linear 40s infinite normal backwards;left:73%;opacity:0.4;padding:0.2vw}.flake:nth-child(25){animation:snow 13s linear 10s infinite normal backwards;left:78%;opacity:0.4;padding:0.28vw}.flake:nth-child(26){animation:snow 20s linear 6s infinite normal backwards;left:23%;opacity:0.77;padding:0.44vw}.flake:nth-child(27){animation:snow 14s linear 17s infinite normal backwards;left:46%;opacity:0.36;padding:0.11vw}.flake:nth-child(28){animation:snow 15s linear 14s infinite normal backwards;left:35%;opacity:0.85;padding:0.31vw}.flake:nth-child(29){animation:snow 16s linear 47s infinite normal backwards;left:59%;opacity:0.85;padding:0.29vw}.flake:nth-child(30){animation:snow 11s linear 48s infinite normal backwards;left:98%;opacity:0.51;padding:0.26vw}.flake:nth-child(31){animation:snow 20s linear 7s infinite normal backwards;left:98%;opacity:0.15;padding:0.39vw}.flake:nth-child(32){animation:snow 19s linear 44s infinite normal backwards;left:34%;opacity:0.54;padding:0.37vw}.flake:nth-child(33){animation:snow 11s linear 8s infinite normal backwards;left:14%;opacity:1.1;padding:0.37vw}.flake:nth-child(34){animation:snow 14s linear 28s infinite normal backwards;left:34%;opacity:0.36;padding:0.5vw}.flake:nth-child(35){animation:snow 16s linear 21s infinite normal backwards;left:87%;opacity:0.72;padding:0.19vw}.flake:nth-child(36){animation:snow 17s linear 18s infinite normal backwards;left:58%;opacity:0.48;padding:0.34vw}.flake:nth-child(37){animation:snow 11s linear 49s infinite normal backwards;left:35%;opacity:0.42;padding:0.48vw}.flake:nth-child(38){animation:snow 13s linear 29s infinite normal backwards;left:8%;opacity:0.96;padding:0.5vw}.flake:nth-child(39){animation:snow 15s linear 43s infinite normal backwards;left:36%;opacity:0.41;padding:0.24vw}.flake:nth-child(40){animation:snow 13s linear 46s infinite normal backwards;left:18%;opacity:0.13;padding:0.15vw}.flake:nth-child(41){animation:snow 14s linear 22s infinite normal backwards;left:34%;opacity:0.86;padding:0.46vw}.flake:nth-child(42){animation:snow 19s linear 3s infinite normal backwards;left:66%;opacity:0.82;padding:0.11vw}.flake:nth-child(43){animation:snow 15s linear 46s infinite normal backwards;left:75%;opacity:0.69;padding:0.26vw}.flake:nth-child(44){animation:snow 14s linear 12s infinite normal backwards;left:55%;opacity:0.33;padding:0.39vw}.flake:nth-child(45){animation:snow 16s linear 33s infinite normal backwards;left:95%;opacity:0.19;padding:0.47vw}.flake:nth-child(46){animation:snow 16s linear 15s infinite normal backwards;left:72%;opacity:0.2;padding:0.48vw}.flake:nth-child(47){animation:snow 16s linear 8s infinite normal backwards;left:61%;opacity:0.39;padding:0.49vw}.flake:nth-child(48){animation:snow 12s linear 21s infinite normal backwards;left:15%;opacity:0.29;padding:0.42vw}.flake:nth-child(49){animation:snow 17s linear 26s infinite normal backwards;left:16%;opacity:0.52;padding:0.45vw}.flake:nth-child(50){animation:snow 11s linear 42s infinite normal backwards;left:67%;opacity:1.01;padding:0.16vw}.flake:nth-child(51){animation:snow 11s linear 29s infinite normal backwards;left:58%;opacity:0.16;padding:0.3vw}.flake:nth-child(52){animation:snow 14s linear 33s infinite normal backwards;left:85%;opacity:1.04;padding:0.2vw}.flake:nth-child(53){animation:snow 14s linear 10s infinite normal backwards;left:15%;opacity:0.92;padding:0.35vw}.flake:nth-child(54){animation:snow 17s linear 44s infinite normal backwards;left:88%;opacity:0.29;padding:0.25vw}.flake:nth-child(55){animation:snow 17s linear 20s infinite normal backwards;left:55%;opacity:0.27;padding:0.26vw}.flake:nth-child(56){animation:snow 15s linear 27s infinite normal backwards;left:97%;opacity:0.99;padding:0.33vw}.flake:nth-child(57){animation:snow 13s linear 31s infinite normal backwards;left:72%;opacity:1.1;padding:0.13vw}.flake:nth-child(58){animation:snow 11s linear 6s infinite normal backwards;left:69%;opacity:0.99;padding:0.15vw}.flake:nth-child(59){animation:snow 11s linear 23s infinite normal backwards;left:46%;opacity:0.9;padding:0.19vw}.flake:nth-child(60){animation:snow 19s linear 16s infinite normal backwards;left:34%;opacity:1.08;padding:0.15vw}.flake:nth-child(61){animation:snow 17s linear 21s infinite normal backwards;left:4%;opacity:1.04;padding:0.43vw}.flake:nth-child(62){animation:snow 18s linear 3s infinite normal backwards;left:80%;opacity:0.26;padding:0.16vw}.flake:nth-child(63){animation:snow 12s linear 34s infinite normal backwards;left:19%;opacity:0.9;padding:0.36vw}.flake:nth-child(64){animation:snow 17s linear 7s infinite normal backwards;left:69%;opacity:0.63;padding:0.29vw}.flake:nth-child(65){animation:snow 15s linear 36s infinite normal backwards;left:20%;opacity:0.16;padding:0.49vw}.flake:nth-child(66){animation:snow 12s linear 6s infinite normal backwards;left:29%;opacity:0.81;padding:0.45vw}.flake:nth-child(67){animation:snow 14s linear 22s infinite normal backwards;left:2%;opacity:0.69;padding:0.47vw}.flake:nth-child(68){animation:snow 16s linear 41s infinite normal backwards;left:8%;opacity:0.44;padding:0.2vw}.flake:nth-child(69){animation:snow 18s linear 5s infinite normal backwards;left:14%;opacity:0.79;padding:0.22vw}.flake:nth-child(70){animation:snow 20s linear 12s infinite normal backwards;left:25%;opacity:0.23;padding:0.49vw}.flake:nth-child(71){animation:snow 20s linear 32s infinite normal backwards;left:43%;opacity:0.65;padding:0.23vw}.flake:nth-child(72){animation:snow 15s linear 3s infinite normal backwards;left:25%;opacity:0.42;padding:0.29vw}.flake:nth-child(73){animation:snow 16s linear 20s infinite normal backwards;left:9%;opacity:1.01;padding:0.24vw}.flake:nth-child(74){animation:snow 12s linear 26s infinite normal backwards;left:64%;opacity:0.55;padding:0.43vw}.flake:nth-child(75){animation:snow 19s linear 17s infinite normal backwards;left:85%;opacity:1.08;padding:0.27vw}.flake:nth-child(76){animation:snow 18s linear 3s infinite normal backwards;left:100%;opacity:0.63;padding:0.18vw}.flake:nth-child(77){animation:snow 14s linear 19s infinite normal backwards;left:98%;opacity:0.35;padding:0.14vw}.flake:nth-child(78){animation:snow 13s linear 3s infinite normal backwards;left:79%;opacity:0.25;padding:0.14vw}.flake:nth-child(79){animation:snow 18s linear 28s infinite normal backwards;left:72%;opacity:0.49;padding:0.48vw}.flake:nth-child(80){animation:snow 19s linear 3s infinite normal backwards;left:79%;opacity:0.19;padding:0.35vw}.flake:nth-child(81){animation:snow 13s linear 48s infinite normal backwards;left:14%;opacity:0.66;padding:0.48vw}.flake:nth-child(82){animation:snow 15s linear 1s infinite normal backwards;left:3%;opacity:0.72;padding:0.34vw}.flake:nth-child(83){animation:snow 15s linear 36s infinite normal backwards;left:42%;opacity:1.08;padding:0.26vw}.flake:nth-child(84){animation:snow 14s linear 15s infinite normal backwards;left:98%;opacity:0.41;padding:0.17vw}.flake:nth-child(85){animation:snow 18s linear 20s infinite normal backwards;left:99%;opacity:0.86;padding:0.32vw}.flake:nth-child(86){animation:snow 20s linear 14s infinite normal backwards;left:43%;opacity:0.27;padding:0.3vw}.flake:nth-child(87){animation:snow 14s linear 44s infinite normal backwards;left:64%;opacity:0.83;padding:0.19vw}.flake:nth-child(88){animation:snow 16s linear 24s infinite normal backwards;left:11%;opacity:0.83;padding:0.48vw}.flake:nth-child(89){animation:snow 13s linear 24s infinite normal backwards;left:62%;opacity:0.26;padding:0.11vw}.flake:nth-child(90){animation:snow 18s linear 44s infinite normal backwards;left:72%;opacity:0.92;padding:0.13vw}.flake:nth-child(91){animation:snow 13s linear 20s infinite normal backwards;left:72%;opacity:0.71;padding:0.31vw}.flake:nth-child(92){animation:snow 20s linear 14s infinite normal backwards;left:80%;opacity:0.69;padding:0.38vw}.flake:nth-child(93){animation:snow 11s linear 21s infinite normal backwards;left:47%;opacity:1.01;padding:0.48vw}.flake:nth-child(94){animation:snow 15s linear 35s infinite normal backwards;left:51%;opacity:0.85;padding:0.32vw}.flake:nth-child(95){animation:snow 11s linear 47s infinite normal backwards;left:85%;opacity:0.97;padding:0.29vw}.flake:nth-child(96){animation:snow 18s linear 37s infinite normal backwards;left:54%;opacity:0.25;padding:0.45vw}.flake:nth-child(97){animation:snow 17s linear 39s infinite normal backwards;left:15%;opacity:0.35;padding:0.26vw}.flake:nth-child(98){animation:snow 15s linear 5s infinite normal backwards;left:61%;opacity:0.37;padding:0.21vw}.flake:nth-child(99){animation:snow 11s linear 2s infinite normal backwards;left:8%;opacity:0.32;padding:0.42vw}.flake:nth-child(100){animation:snow 15s linear 19s infinite normal backwards;left:31%;opacity:0.85;padding:0.5vw}.flake:nth-child(101){animation:snow 13s linear 14s infinite normal backwards;left:19%;opacity:0.62;padding:0.32vw}.flake:nth-child(102){animation:snow 20s linear 42s infinite normal backwards;left:76%;opacity:0.87;padding:0.31vw}.flake:nth-child(103){animation:snow 15s linear 41s infinite normal backwards;left:49%;opacity:0.37;padding:0.25vw}.flake:nth-child(104){animation:snow 14s linear 42s infinite normal backwards;left:80%;opacity:0.91;padding:0.11vw}.flake:nth-child(105){animation:snow 19s linear 48s infinite normal backwards;left:78%;opacity:0.99;padding:0.49vw}.flake:nth-child(106){animation:snow 14s linear 11s infinite normal backwards;left:40%;opacity:1.09;padding:0.22vw}.flake:nth-child(107){animation:snow 15s linear 42s infinite normal backwards;left:67%;opacity:1.07;padding:0.47vw}.flake:nth-child(108){animation:snow 12s linear 28s infinite normal backwards;left:36%;opacity:0.58;padding:0.37vw}.flake:nth-child(109){animation:snow 15s linear 33s infinite normal backwards;left:92%;opacity:0.68;padding:0.49vw}.flake:nth-child(110){animation:snow 16s linear 5s infinite normal backwards;left:42%;opacity:0.47;padding:0.46vw}.flake:nth-child(111){animation:snow 20s linear 24s infinite normal backwards;left:17%;opacity:0.62;padding:0.43vw}.flake:nth-child(112){animation:snow 13s linear 1s infinite normal backwards;left:9%;opacity:0.55;padding:0.21vw}.flake:nth-child(113){animation:snow 12s linear 22s infinite normal backwards;left:20%;opacity:0.33;padding:0.27vw}.flake:nth-child(114){animation:snow 20s linear 36s infinite normal backwards;left:16%;opacity:0.28;padding:0.12vw}.flake:nth-child(115){animation:snow 15s linear 6s infinite normal backwards;left:39%;opacity:0.13;padding:0.31vw}.flake:nth-child(116){animation:snow 20s linear 35s infinite normal backwards;left:62%;opacity:0.21;padding:0.46vw}.flake:nth-child(117){animation:snow 12s linear 14s infinite normal backwards;left:63%;opacity:0.14;padding:0.34vw}.flake:nth-child(118){animation:snow 18s linear 14s infinite normal backwards;left:49%;opacity:0.85;padding:0.11vw}.flake:nth-child(119){animation:snow 16s linear 27s infinite normal backwards;left:85%;opacity:0.78;padding:0.4vw}.flake:nth-child(120){animation:snow 13s linear 27s infinite normal backwards;left:64%;opacity:0.18;padding:0.19vw}.flake:nth-child(121){animation:snow 19s linear 4s infinite normal backwards;left:35%;opacity:0.32;padding:0.14vw}.flake:nth-child(122){animation:snow 18s linear 50s infinite normal backwards;left:35%;opacity:1.02;padding:0.38vw}.flake:nth-child(123){animation:snow 12s linear 7s infinite normal backwards;left:16%;opacity:1.1;padding:0.42vw}.flake:nth-child(124){animation:snow 16s linear 15s infinite normal backwards;left:10%;opacity:0.25;padding:0.19vw}.flake:nth-child(125){animation:snow 20s linear 12s infinite normal backwards;left:71%;opacity:0.64;padding:0.37vw}.flake:nth-child(126){animation:snow 15s linear 14s infinite normal backwards;left:33%;opacity:0.39;padding:0.25vw}.flake:nth-child(127){animation:snow 18s linear 36s infinite normal backwards;left:44%;opacity:0.38;padding:0.5vw}.flake:nth-child(128){animation:snow 16s linear 4s infinite normal backwards;left:40%;opacity:0.61;padding:0.4vw}.flake:nth-child(129){animation:snow 11s linear 5s infinite normal backwards;left:81%;opacity:0.53;padding:0.2vw}.flake:nth-child(130){animation:snow 15s linear 14s infinite normal backwards;left:44%;opacity:0.9;padding:0.37vw}.flake:nth-child(131){animation:snow 16s linear 7s infinite normal backwards;left:68%;opacity:0.47;padding:0.38vw}.flake:nth-child(132){animation:snow 15s linear 36s infinite normal backwards;left:99%;opacity:0.46;padding:0.36vw}.flake:nth-child(133){animation:snow 13s linear 25s infinite normal backwards;left:8%;opacity:0.64;padding:0.43vw}.flake:nth-child(134){animation:snow 19s linear 38s infinite normal backwards;left:71%;opacity:0.97;padding:0.35vw}.flake:nth-child(135){animation:snow 20s linear 48s infinite normal backwards;left:96%;opacity:1;padding:0.29vw}.flake:nth-child(136){animation:snow 13s linear 42s infinite normal backwards;left:17%;opacity:0.91;padding:0.42vw}.flake:nth-child(137){animation:snow 16s linear 41s infinite normal backwards;left:34%;opacity:0.94;padding:0.28vw}.flake:nth-child(138){animation:snow 18s linear 22s infinite normal backwards;left:82%;opacity:0.27;padding:0.38vw}.flake:nth-child(139){animation:snow 13s linear 22s infinite normal backwards;left:51%;opacity:0.43;padding:0.5vw}.flake:nth-child(140){animation:snow 19s linear 22s infinite normal backwards;left:54%;opacity:0.89;padding:0.41vw}.flake:nth-child(141){animation:snow 16s linear 31s infinite normal backwards;left:54%;opacity:0.46;padding:0.12vw}.flake:nth-child(142){animation:snow 11s linear 49s infinite normal backwards;left:2%;opacity:0.75;padding:0.29vw}.flake:nth-child(143){animation:snow 15s linear 1s infinite normal backwards;left:63%;opacity:0.3;padding:0.29vw}.flake:nth-child(144){animation:snow 18s linear 26s infinite normal backwards;left:46%;opacity:0.98;padding:0.43vw}.flake:nth-child(145){animation:snow 12s linear 29s infinite normal backwards;left:87%;opacity:0.31;padding:0.33vw}.flake:nth-child(146){animation:snow 16s linear 1s infinite normal backwards;left:37%;opacity:0.42;padding:0.13vw}.flake:nth-child(147){animation:snow 17s linear 45s infinite normal backwards;left:38%;opacity:0.3;padding:0.44vw}.flake:nth-child(148){animation:snow 19s linear 35s infinite normal backwards;left:65%;opacity:0.77;padding:0.21vw}.flake:nth-child(149){animation:snow 16s linear 18s infinite normal backwards;left:43%;opacity:0.14;padding:0.37vw}.flake:nth-child(150){animation:snow 14s linear 26s infinite normal backwards;left:46%;opacity:0.5;padding:0.5vw}
@keyframes snow{4%{transform:translate(.4vw,4vh)}8%{transform:translate(-.2vw,8vh)}12%{transform:translate(.4vw,12vh)}16%{transform:translate(.4vw,16vh)}20%{transform:translate(-.4vw,20vh)}24%{transform:translate(.4vw,24vh)}28%{transform:translate(-.2vw,28vh)}32%{transform:translate(.4vw,32vh)}36%{transform:translate(.4vw,36vh)}40%{transform:translate(-.4vw,40vh)}44%{transform:translate(.4vw,44vh)}48%{transform:translate(-.2vw,48vh)}52%{transform:translate(.4vw,52vh)}56%{transform:translate(.4vw,56vh)}60%{transform:translate(-.4vw,60vh)}64%{transform:translate(.4vw,64vh)}68%{transform:translate(-.2vw,68vh)}72%{transform:translate(.4vw,72vh)}76%{transform:translate(.4vw,76vh)}80%{transform:translate(-.4vw,80vh)}84%{transform:translate(.4vw,84vh)}88%{transform:translate(-.2vw,88vh)}92%{transform:translate(.4vw,92vh)}96%{transform:translate(.4vw,96vh)}100%{transform:translate(-.4vw,100vh)}100%{opacity:0}}
</style>

Selanjutnya tambahakan kode HTML dibawah ini dan pastekan tepat diatas kode <body> atau sebelum </body>


<div class='snow-flakes'> <div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div><div class='flake'></div></div>

Jika sudah menerapkan langkah-langkah diatas klik Simpan Tema dan lihat Hasilnya.



Bonus efek bintang berjatuhan

Efek bintang berjatuhan ini akan mengikuti gerak mouse saat diarahkan. Tambahkan kode dibawah ini dan pastekan tepat diatas kode </body>


<script type='text/javascript'>
//<![CDATA[
var colour="#fff",sparkles=65,x=ox=400,y=oy=300,swide=800,shigh=600,sleft=sdown=0,tiny=new Array,star=new Array,starv=new Array,starx=new Array,stary=new Array,tinyx=new Array,tinyy=new Array,tinyv=new Array;function sparkle(){var t;if(x!=ox||y!=oy)for(ox=x,oy=y,t=0;t<sparkles;t++)if(!starv[t]){star[t].style.left=(starx[t]=x)+"px",star[t].style.top=(stary[t]=y)+"px",star[t].style.clip="rect(0px, 5px, 5px, 0px)",star[t].style.visibility="visible",starv[t]=50;break}for(t=0;t<sparkles;t++)starv[t]&&update_star(t),tinyv[t]&&update_tiny(t);setTimeout("sparkle()",40)}function update_star(t){if(25==--starv[t]&&(star[t].style.clip="rect(1px, 4px, 4px, 1px)"),starv[t]){if(stary[t]+=1+3*Math.random(),!(stary[t]<shigh+sdown))return star[t].style.visibility="hidden",void(starv[t]=0);star[t].style.top=stary[t]+"px",starx[t]+=(t%5-2)/5,star[t].style.left=starx[t]+"px"}else tinyv[t]=50,tiny[t].style.top=(tinyy[t]=stary[t])+"px",tiny[t].style.left=(tinyx[t]=starx[t])+"px",tiny[t].style.width="2px",tiny[t].style.height="2px",star[t].style.visibility="hidden",tiny[t].style.visibility="visible"}function update_tiny(t){if(25==--tinyv[t]&&(tiny[t].style.width="1px",tiny[t].style.height="1px"),tinyv[t]){if(tinyy[t]+=1+3*Math.random(),!(tinyy[t]<shigh+sdown))return tiny[t].style.visibility="hidden",void(tinyv[t]=0);tiny[t].style.top=tinyy[t]+"px",tinyx[t]+=(t%5-2)/5,tiny[t].style.left=tinyx[t]+"px"}else tiny[t].style.visibility="hidden"}function mouse(t){set_scroll(),y=t?t.pageY:event.y+sdown,x=t?t.pageX:event.x+sleft}function set_scroll(){"number"==typeof self.pageYOffset?(sdown=self.pageYOffset,sleft=self.pageXOffset):document.body.scrollTop||document.body.scrollLeft?(sdown=document.body.scrollTop,sleft=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollTop||document.documentElement.scrollLeft)?(sleft=document.documentElement.scrollLeft,sdown=document.documentElement.scrollTop):(sdown=0,sleft=0)}function set_width(){"number"==typeof self.innerWidth?(swide=self.innerWidth,shigh=self.innerHeight):document.documentElement&&document.documentElement.clientWidth?(swide=document.documentElement.clientWidth,shigh=document.documentElement.clientHeight):document.body.clientWidth&&(swide=document.body.clientWidth,shigh=document.body.clientHeight)}function createDiv(t,e){var n=document.createElement("div");return n.style.position="absolute",n.style.height=t+"px",n.style.width=e+"px",n.style.overflow="hidden",n.style.backgroundColor=colour,n}window.onload=function(){if(document.getElementById){for(var t=0;t<sparkles;t++){var e;(e=createDiv(3,3)).style.visibility="hidden",document.body.appendChild(tiny[t]=e),starv[t]=0,tinyv[t]=0,(e=createDiv(5,5)).style.backgroundColor="transparent",e.style.visibility="hidden";var n=createDiv(1,5),i=createDiv(5,1);e.appendChild(n),e.appendChild(i),n.style.top="2px",n.style.left="0px",i.style.top="0px",i.style.left="2px",document.body.appendChild(star[t]=e)}set_width(),sparkle()}},document.onmousemove=mouse,window.onresize=set_width;
//]]>
</script>

Catatan: edit yang ditandani dengan warna sesuai keinginnan agan bisa cek di Color Picker untuk memilih warna-warna.

Oke sekian yang bisa saya sampaikan tentang Cara Terbaru Membuat Efek Salju Pure CSS di Blogger Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Membuat Tabel Harga Responsive pada Blog

Cara Membuat Tabel Harga Responsive pada Blog


Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Membuat Tabel Harga Responsive pada Blog


Tabel harga ini sangat cocok untuk blog yang menjual produk seperti hosting maupun berjualan domain dll. Tabel ini juga cocok untuk blog yang tidak memiliki sidebar dikarenakan tabel ini memiliki ukuran yang besar.


Jika agan mengerti tentang CSS, agan bisa mengatur sendiri dan disesuaikan dengan blog agan.


Cara Membuat Tabel Harga Responsive pada Blog


Pertama agan masuk terlebih dahulu ke Blogger > Klik menu Tema > Klik Edit HTML kemudian copy kode CSS dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau </style>


/* CSS Tabel Harga */
.tabel-paket{font-family:'Source Sans Pro',Arial,sans-serif;color:#ffffff;text-align:left;font-size:16px;width:100%;max-width:1000px;margin:30px 10px}
.tabel-paket img{position:absolute;left:0;top:0;height:100%;z-index:-1}
.tabel-paket .daftar-paket{margin:0 0.5%;width:24%;padding-top:10px;position:relative;float:left;overflow:hidden;background-color:#222f3d;border-radius:8px}
.tabel-paket .daftar-paket:hover i,.tabel-paket .daftar-paket.hover i{-webkit-transform:scale(1.2);transform:scale(1.2)}
.tabel-paket *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.25s ease-out;transition:all 0.25s ease-out}
.tabel-paket header{color:#ffffff}
.tabel-paket .nama-paket{line-height:60px;position:relative;margin:0;padding:0 20px;font-size:1.6em;letter-spacing:2px;font-weight:700}
.tabel-paket .nama-paket:after{position:absolute;content:'';top:100%;left:20px;width:30px;height:3px;background-color:#fff}
.tabel-paket .harga-paket{padding:0 20px;margin:0}
.tabel-paket .biaya-paket{font-weight:400;font-size:2.8em;margin:10px 0;display:inline-block}
.tabel-paket .tipe-paket{opacity:0.8;font-size:0.7em;text-transform:uppercase}
.tabel-paket .fitur-paket{padding:0 0 20px;margin:0;list-style:outside none none;font-size:0.9em}
.tabel-paket .fitur-paket li{padding:8px 20px}
.tabel-paket .fitur-paket i{margin-right:8px;color:rgba(255,255,255,0.5)}
.tabel-paket .pilih-paket{border-top:1px solid rgba(0,0,0,0.2);padding:20px;text-align:center}
.tabel-paket .pilih-paket a{background-color:#156dab;color:#ffffff;text-decoration:none;padding:12px 20px;font-size:0.75em;font-weight:600;border-radius:8px;text-transform:uppercase;letter-spacing:4px;display:inline-block}
.tabel-paket .pilih-paket a:hover{background-color:#1b8ad8!important}
.tabel-paket .featured{margin-top:-10px;z-index:1;border-radius:8px;border:2px solid #156dab;background-color:#156dab}
.tabel-paket .featured .pilih-paket{padding:30px 20px}
.tabel-paket .featured .pilih-paket a{background-color:#10507e}
@media only screen and (max-width:767px){.tabel-paket .daftar-paket{width:49%;margin:0.5%}.tabel-paket .nama-paket,.tabel-paket .pilih-paket a{-webkit-transform:translateY(0);transform:translateY(0)}.tabel-paket .pilih-paket,.tabel-paket .featured .pilih-paket{padding:20px}.tabel-paket .featured{margin-top:0}.tabel-paket .featured header{line-height:70px}}
@media only screen and (max-width:440px){.tabel-paket .daftar-paket{margin:0.5% 0;width:100%}}

Jika sudah klik Simpan Tema.


Mau mengganti warna? Klik menu ini Color Picker


Cara Memasang Tabel Harga di Halaman Statis


Pergi ke menu Halaman > Buat Halaman Baru > Copy kode dibawah ini dan pastekan pada mode Tampil HTML bukan Tampil Menulis.


<div class="tabel-paket">
   <div class="daftar-paket">
      <header>
         <h4 class="nama-paket">
            Starter
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$9</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>5GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>5 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>250Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-paket">
      <header>
         <h4 class="nama-paket">
            Basic
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$29</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>10GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>10 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>500Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-paket featured">
      <header>
         <h4 class="nama-paket">
            Professional
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$49</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>25GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>25 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>2000Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-paket">
      <header>
         <h4 class="nama-paket">
            Ultra
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$99</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>100GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>Unlimited MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>10000Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
</div>

Catatan: kode <div class="daftar-paket featured"> untuk plan yang akan diunggulkan


Jika icon ceklis tidak muncul maka tambahkan kode dibawah ini tepat diatas kode </body>


<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Kemudian Simpan dan Publikasikan dan lihat hasilnya.


Oke sekian yang bisa saya sampaikan tentang Cara Membuat Tabel Harga Responsive pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Membuat Schema QAPage Manual pada Blog

Cara Membuat Schema QAPage Manual pada Blog

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Membuat Schema QAPage Manual pada Blog


Sudah pada tau kah schema QAPage? Schema QAPage adalah schema yang sering dipakai untuk tanya jawab kepada audients, pada kesempatan kali ini Bloggerin ID akan share kepada kalian schema QAPage secara manual yang tentunya bisa diterapkan pada blogger.


Tidak hanya Markup Schema QAPage saja, masih banyak lagi silahkan agan cek sendiri di https://developers.google.com/search/docs/advanced/structured-data/, jika mengalami kesulitan nanti saya akan membuat tutorial satu per satu tentang markup schema tersebut.


Oke langsung saja ke caranya, ikuti langkah-langkah dibawah ini:


Cara Membuat Schema QAPage Manual pada Blog


Pertama agan masuk terlebih dahulu ke Blogger > kemudian cari Postingan mana yang akan diberikan Schema QAPage, lalu pastekan kode dibawah ini diakhir paling bawah sendiri dalam mode Tampilan HTML bukan Tampilan Menulis.


<script type='application/ld+json'>
  {
    "@context": "http://schema.org",
    "@type": "QAPage",
    "mainEntity": {
      "@type": "Question",
      "name": "Judul Artikel",
      "text": "Deskripsi artikel",
      "answerCount": 10,
      "upvoteCount": 50,
      "dateCreated": "10/02/2022",
      "author": {
        "@type": "Person",
        "name": "Namamu"
      },
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Teks Jawaban Pertama",
        "dateCreated": "10/02/2022",
        "upvoteCount": 2500,
        "url": "https://www.bloggerin.id",
        "author": {
          "@type": "Person",
          "name": "Namamu"
        }},
      "suggestedAnswer": [
        {
          "@type": "Answer",
          "text": "Teks Jawaban Kedua",
          "dateCreated": "10/02/2022",
          "upvoteCount": 1250,
          "url": "https://www.bloggerin.id",
          "author": {
            "@type": "Person",
            "name": "Namamu"
          }}

PASTE KODE TAMBAHAN DISINI
 
      ]
    }
  }
</script>

Jika agan ingin menambah jawaban silahkan pastekan kode dibahan ini pada kode yang sudah ditandai PASTE KODE TAMBAHAN DISINI


,
{
          "@type": "Answer",
          "text": "Teks Jawaban Ketiga",
          "dateCreated": "10/02/2022",
          "upvoteCount": 75,
          "url": "https://www.bloggerin.id",
          "author": {
            "@type": "Person",
            "name": "Namamu"
          }}

Sebelum mempublikasikan postingan agan cek terlebih dahulu schema qapage tersebut terdapat error atau tidak silahkan cek di Uji data terstruktur Anda


Jika sudah tidak terdapat error kemudian pastekan kode tersebut didalam postingan dan Publikasikan. Tunggu beberapa hari google akan mengindex QAPage tersebut.


Oke sekian yang bisa saya sampaikan tentang Cara Membuat Schema QAPage Manual pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Memasang Script Auto Refresh pada Halaman Blogger

Cara Memasang Script Auto Refresh pada Halaman Blogger

Pada kesempatan kali ini Bloggerin Id akan share kepada kalian bagaimana Cara Memasang Script Auto Refresh pada Halaman Blogger


Banyak orang beranggapan memasang script auto refresh pada blog dapat meningkatkan trafik pengunjung blog. Bagaimana caranya? caranya simple sekali ikuti langkah-langkah dibawh ini:


Cara Memasang Script Auto Refresh pada Halaman Blogger


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


<meta content='60' http-equiv='refresh'/>

Keterangan: Angka 60 adalah waktu yang diperlukan untuk melakukan auto refresh, ganti dengan sesuai keinginan.

Jika serasa sudah selesai kemudian klik simpan Tema


Catatan: Perlu diingat juga menyetting waktu jika terlalu cepat maka mesin pencarian seperti Google akan menangganya sebagai manipulasi trafik, serta juga kenyamanan pengunjung. Diusahakan pengaturan waktu tidak terlalu cepat maupun berlebihan.

Oke sekian yang bisa saya sampaikan tentang Cara Memasang Script Auto Refresh pada Halaman Blogger Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Menambahkan Custom Halaman Error 404 Pada Blog

Cara Menambahkan Custom Halaman Error 404 Pada Blog

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Menambahkan Custom Halaman Error 404 Pada Blog


Halaman error 404 "Not Found" adalah halaman yang menginformasikan bahwa link yang dicari tidak ditemukan. Bisa jadi dikarenakan link tersebut sudah dihapus, tanggal publikasi atau salah menuliskan alamat URL.


Contoh Tampilan halaman 404 Not Found default blogger seperti gambar dibawah ini


Yuk simak tutorial dibawah ini jika ingin mengcustom halaman 404 Not Found tersebut menjadi lebih menarik jika pengunjung melihatnya.


Cara Menambahkan Custom Halaman Error 404 Pada Blog


Pertama agan masuk terlebih dahulu ke blogger.com > Klik menu Tema > Klik Edit HTML dan tambahkan kode dibawah ini tepat diatas kode </head>


<b:if cond='data:view.isError'>
<style>
/* Error 404 */
body{background:#28254C;line-height:1.4em;overflow:hidden}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}#error-page{margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box}
.ghbox{position:relative;width:100%;max-width:550px;height:100%;max-height:600px;min-height:450px;background:#332F63;border-radius:20px;margin:12% auto 0 auto;text-align:center;padding:20px 40px}.ghbox .ghboxghosty{padding:15px 25px 25px;position:absolute;left:50%;top:30%;transform:translate(-50%,-30%)}.ghbox .ghboxghosty .symbol:nth-child(1){opacity:.2;animation:shinee 4s ease-in-out 3s infinite}.ghbox .ghboxghosty .symbol:nth-child(1):before,.ghbox .ghboxghosty .symbol:nth-child(1):after{content:&#39;&#39;;width:12px;height:4px;background:#fff;position:absolute;border-radius:5px;bottom:65px;left:0}.ghbox .ghboxghosty .symbol:nth-child(1):before{transform:rotate(45deg)}.ghbox .ghboxghosty .symbol:nth-child(1):after{transform:rotate(-45deg)}.ghbox .ghboxghosty .symbol:nth-child(2){position:absolute;left:-5px;top:30px;height:18px;width:18px;border:4px solid;border-radius:50%;border-color:#fff;opacity:.2;animation:shinee 4s ease-in-out 1.3s infinite}.ghbox .ghboxghosty .symbol:nth-child(3){opacity:.2;animation:shinee 3s ease-in-out .5s infinite}.ghbox .ghboxghosty .symbol:nth-child(3):before,.ghbox .ghboxghosty .symbol:nth-child(3):after{content:&#39;&#39;;width:12px;height:4px;background:#fff;position:absolute;border-radius:5px;top:5px;left:40px}.ghbox .ghboxghosty .symbol:nth-child(3):before{transform:rotate(90deg)}.ghbox .ghboxghosty .symbol:nth-child(3):after{transform:rotate(180deg)}.ghbox .ghboxghosty .symbol:nth-child(4){opacity:.2;animation:shinee 6s ease-in-out 1.6s infinite}.ghbox .ghboxghosty .symbol:nth-child(4):before,.ghbox .ghboxghosty .symbol:nth-child(4):after{content:&#39;&#39;;width:15px;height:4px;background:#fff;position:absolute;border-radius:5px;top:10px;right:30px}.ghbox .ghboxghosty .symbol:nth-child(4):before{transform:rotate(45deg)}.ghbox .ghboxghosty .symbol:nth-child(4):after{transform:rotate(-45deg)}.ghbox .ghboxghosty .symbol:nth-child(5){position:absolute;right:5px;top:40px;height:12px;width:12px;border:3px solid;border-radius:50%;border-color:#fff;opacity:.2;animation:shinee 1.7s ease-in-out 7s infinite}.ghbox .ghboxghosty .symbol:nth-child(6){opacity:.2;animation:shinee 2s ease-in-out 6s infinite}.ghbox .ghboxghosty .symbol:nth-child(6):before,.ghbox .ghboxghosty .symbol:nth-child(6):after{content:&#39;&#39;;width:15px;height:4px;background:#fff;position:absolute;border-radius:5px;bottom:65px;right:-5px}.ghbox .ghboxghosty .symbol:nth-child(6):before{transform:rotate(90deg)}.ghbox .ghboxghosty .symbol:nth-child(6):after{transform:rotate(180deg)}.ghbox .ghboxghosty .ghboxghost-container{background:#fff;width:100px;height:100px;border-radius:100px 100px 0 0;position:relative;margin:0 auto;animation:upndown 3s ease-in-out infinite}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-eyes{position:absolute;left:50%;top:45%;height:12px;width:70px}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-eyes .ghboxeye-left{width:12px;height:12px;background:#332F63;border-radius:50%;margin:0 10px;position:absolute;left:0}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-eyes .ghboxeye-right{width:12px;height:12px;background:#332F63;border-radius:50%;margin:0 10px;position:absolute;right:0}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-bottom{display:flex;position:absolute;top:100%;left:0;right:0}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-bottom div{flex-grow:1;position:relative;top:-10px;height:20px;border-radius:100%;background-color:#fff}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-bottom div:nth-child(2n){top:-12px;margin:0 -0px;border-top:15px solid #332F63;background:transparent}.ghbox .ghboxghosty .ghboxghosty-shadow{height:20px;ghbox-shadow:0 50px 15px 5px #3B3769;border-radius:50%;margin:0 auto;animation:smallnbig 3s ease-in-out infinite}.ghbox .ghboxdescription{position:absolute;bottom:30px;left:50%;transform:translateX(-50%)}.ghbox .ghboxdescription .ghboxdescription-container{color:#fff;text-align:center;max-width:450px;font-size:16px;margin:0 auto}.ghbox .ghboxdescription .ghboxdescription-container .ghboxdescription-title{font-size:24px;letter-spacing:.5px}.ghbox .ghboxdescription .ghboxdescription-container .ghboxdescription-text{color:rgba(255,255,255,.5);margin-top:20px}.ghbox .ghboxdescription .ghboxbutton{display:block;position:relative;background:#FF5E65;border:2px solid transparent;border-radius:99em;height:45px;text-align:center;text-decoration:none;color:#fff;line-height:41px;font-size:16px;padding:0 70px;white-space:nowrap;margin:25px auto 0 auto;transition:background .5s ease;overflow:hidden}.ghbox .ghboxdescription .ghboxbutton:hover{background:transparent;border-color:#fff}@keyframes upndown{0%{transform:translateY(5px)}50%{transform:translateY(15px)}100%{transform:translateY(5px)}}@keyframes smallnbig{0%{width:90px}50%{width:100px}100%{width:90px}}@keyframes shinee{0%{opacity:.2}25%{opacity:.1}50%{opacity:.2}100%{opacity:.2}}
@media screen and (max-width:640px) {.ghbox{width:auto}}
</style>
</b:if>

Jika sudah melukan langkah diatas, langkah selanjutnya adalah menambahkan kode HTML dibawah ini tepat diatas kode </body>


</b:if>
<b:if cond='data:view.isError'>
<div id='error-page'>
<div class='ghbox'>
   <div class='ghboxghosty'>
      <div class='symbol'/>
      <div class='symbol'/>
      <div class='symbol'/>
      <div class='symbol'/>
      <div class='symbol'/>
      <div class='symbol'/>
      <div class='ghboxghost-container'>
         <div class='ghboxghosty-eyes'>
            <div class='ghboxeye-left'/>
            <div class='ghboxeye-right'/>
         </div>
         <div class='ghboxghosty-bottom'>
            <div/>
            <div/>
            <div/>
            <div/>
            <div/>
         </div>
      </div>
      <div class='ghboxghosty-shadow'/>
   </div>
   <div class='ghboxdescription'>
      <div class='ghboxdescription-container'>
         <div class='ghboxdescription-title'>Page Not Found</div>
         <div class='ghboxdescription-text'>The page you were trying to visit has disappeared or moved to another dimension.</div>
      </div>
      <a class='ghboxbutton' expr:href='data:blog.homepageUrl'>Homepage</a>
   </div>
</div>
</div>
<script>
//<![CDATA[
// Moving Eyes
var pageX=$(document).width(),pageY=$(document).height(),mouseY=0,mouseX=0;$(document).mousemove(function(e){mouseY=e.pageY,yAxis=(pageY/2-mouseY)/pageY*300,mouseX=e.pageX/-pageX,xAxis=100*-mouseX-100,$(".ghboxghosty-eyes").css({transform:"translate("+xAxis+"%,-"+yAxis+"%)"})});
//]]>
</script>
</b:if>

Jika sudah kemudian klik Simpan Tema dan lihat hasilnya.



Oke sekian yang bisa saya sampaikan tentang Cara Menambahkan Custom Halaman Error 404 Pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.