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 Redirect Custom Domain 301 di Blogger

Cara Redirect Custom Domain 301 di Blogger

Pada kesempatan kali ini Bloggerin Id akan share kepada kalian Cara Redirect Custom Domain 301 di Blogger


Redirect 301 merupakan cara mengalihkan URL atau permalink blog lama ke permalink blog baru yang secara otomatis. Pengalihan ini tidak hanya pada halaman homepage saja tapi melainkan juga berlaku pada halaman post dan halaman static/page.


Berikut ini adalah beberapa alasan kenapa mau redirect domain, diantaranya:


  1. Domain dibanned oleh Google Adsense, Jika domain telah dibanned oleh google adsense kemungkinan diterima lagi oleh mitra google adsense hanya mimpi yang tidak akan pernah terwujud, maka dari itu solusinya adalah semua artikel dipindahkan ke domain baru lalu redirect 301 dari domain lama.
  2. Memiliki banyak blog yang dimana kontennya ingin digabungkan menjadi satu domain.
  3. Serasa ingin mengganti nama domain, jika rasa kurang suka dengan nama domain, ataupun ingin mengganti dengan nama domain baru, agar pengunjung kita tetap menyimpan alamat premalink situs kita maka tidak akan kehilangan apa yang mereka cari sewaktu pengunjung kembali.

Dari beberapa alasan diatas, oleh sebab itu untuk mengatasi masalah ini agan bisa melakukan Redirect 301 di blogger


Apa itu Redirect 301?


Redirect permanen yang kerap digunakan untuk memberitahu mesin pencarian bahwa halaman yang ada telah dipindahkan ke halaman baru. Sehingga Premalink lama akan merubah ke premalink baru, sehingga tidak mengalami kerugian pada peringkat SERP (Search Engine Result Pages).


Cara Redirect Custom Domain 301 di Blogger


Pertama sobat backup terlebih dahulu konten dari blog. Klik menu Setelan > Kelola Blog > Klik tombol Cadangkan Konten


Selanjutnya Klik menu Tema > Klik tombol Edit HTML > Kemudian tambahkan kode dibawah ini tepat diatas kode </head>


<script>
//<![CDATA[
var d='<data:blog.url/>';
d=d.replace(/.*\/\/[^\/]*/, '');
location.href = 'https://www.domain_baru_agan.com' + window.location.pathname;
//]]>
</script>

Catatan: Ganti kode yang ditandai dengan nama domain baru agan

Serasa sudah semua lalu klik Simpan Tema.


Jika sudah melakukan hal yang diatas, maka URL yang diketikkan dengan permalink custom domain lama pasti otomatis akan dialihkan ke custom domain baru agan, maka proses redirect telah berhasil dengan baik.


Oke sekian yang bisa saya sampaikan tentang Cara Redirect Custom Domain 301 di Blogger Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Meta Tag Seo Friendly dan Valid HTML5

Meta Tag Seo Friendly dan Valid HTML5

Pada kesempatan kali ini Bloggerin Id akan share kepada kalian Meta Tag Seo Friendly dan Valid HTML5 yang tentunya bisa diterapkan di blogger.


Meta tag merupakan salh satu cara optimasi blog agar artikel dan blog yang kita posting memilikiidentitas yang jelas. Sehingga blog lebih mudah ditelusuri oleh robot seperti pada browser Google, Bing atau alat penelususran lainnnya dan akan lebih mudah diurutkan oleh SERP.


Fungsi elemen penting dasar dari Meta Tag dantaranya:


Meta Tag Description

Meta tag description ini digunakan untuk mendeskripsikan gambaran umum mengenai isi blog, disarakan text tidak melebihi dari 200 kata. Sebagai contoh:


<meta content='Tulis deskripsi di sini'  name='description'/>

Meta Tag Keyword

Meta tag keyword ini sangat lah penting, dikarenakan menunjukan kata kunci apa yang bisa menemukan halaman blog pada search engine.


<meta content="kata kunci 1, kata kunci 2, kata kunci 3" name="keywords"/>

Meta Tag Robots

Meta tag robot ini berfungsi untuk menentukan halaman mana yang akan terindex oleh penelusuran dan halaman mana yang akan tidak terindex oleh penelusuran.


<meta content="index follow" name="robots"/>

Meta Tag Seo Friendly dan Valid HTML5


Dibawah ini merupakan contoh dari meta tag seo yang juga saya terapkan pada blog ini Bloggerin ID. Kode tersebut diterapkan tepat dibawah kode <head>


<!-- [ Meta Tag SEO ] -->
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;https://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESKRIPSI-BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;https://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://www.blogger.com/profile/IDAKUNANDA' rel='publisher'/>
<link href='https://www.blogger.com/profile/IDAKUNANDA' rel='author'/>
<link href='https://www.blogger.com/profile/IDAKUNANDA' rel='me'/>
<meta content='KODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='NAMA-ADMIN' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot; Untuk membaca postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-aKZzSAygVKk/VYPkX_nAwrI/AAAAAAAACeo/cgQTs8nR5Rg/s1600/Arlina%2BLogo.png' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/PROFIL-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' property='article:publisher'/>
<meta content='KODE-APLIKASI-FACEBOOK' property='fb:app_id'/>
<meta content='KODE-ADMIN-FACEBOOK' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/><link href='//www.google-analytics.com' rel='dns-prefetch'/><link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/><link href='//www.googletagservices.com' rel='dns-prefetch'/><link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/><link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/><link href='//adservice.google.ca' rel='dns-prefetch'/><link href='//adservice.google.com' rel='dns-prefetch'/><link href='//resources.blogblog.com' rel='dns-prefetch'/><link href='//fonts.googleapis.com' rel='dns-prefetch'/><link href='//1.bp.blogspot.com' rel='dns-prefetch'/><link href='//2.bp.blogspot.com' rel='dns-prefetch'/><link href='//3.bp.blogspot.com' rel='dns-prefetch'/><link href='//4.bp.blogspot.com' rel='dns-prefetch'/><link href='//disqus.com' rel='dns-prefetch'/><link href='//github.com' rel='dns-prefetch'/><link href='//cdn.jsdelivr.net' rel='dns-prefetch'/><link href='//fontawesome.com' rel='dns-prefetch'/><link href='//www.sharethis.com' rel='dns-prefetch'/>

Keterangan dari kode diatas:

NilaiKeterangan
DESKRIPSI-BLOGDiisi dengan deskripsi atau kata kunci blog Anda
USER-BLOGGERDiisi dengan ID user blog Anda, sebagai contoh : https://www.blogger.com/profile/10168581425576171487
KODE-VALIDASI-GOOGLE-WEBMASTERDiisi dengan kode validasi Google di Search Console
KODE-VALIDASI-BING-WEBMASTERDiisi dengan kode validasi Bing Webmaster *
NAMA-ADMINIsi dengan nama penulis
id dan IndonesiaIsi dengan kode negara lokasi dimana blog sobat dipublikasikan
PROFIL-FACEBOOKIsi dengan link profil Facebook sobat
FAN-PAGE-FACEBOOKIsi dengan link Fan Page Facebook
KODE-APLIKASI-FACEBOOKIsi dengan kode App Facebook, anda bisa buat di https://developers.facebook.com
KODE-ADMIN-FACEBOOKIsi dengan kode profil Facebook sobat, anda bisa dapatkan di https://findmyfbid.com
USER-TWITTERIsi dengan nama user Twitter sobat

* = Hapus jika tidak digunakan

Oke sekian yang bisa saya sampaikan tentang Meta Tag Seo Friendly dan Valid HTML5 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.

Segera Beralih ke Icon SVG Sekarang Juga

Segera Beralih ke Icon SVG Sekarang Juga

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian informasi untuk Segera Beralih ke Icon SVG Sekarang Juga sebagai pengganti Font Awesome.


Sebelum membahas icon svg tersebut, memang rata-rata blog maupun website masih memakai icon Font Awesome yang dari pemasangannya lebih simple tidak perlu repot-repot memakai gambar ber ekstensi seperti .jpg, .png, maupun .gif. Menggunakan Font Awesome pasti memiliki kelebihan maupun kekurangan.


Kelebihan dan Kekurangan Font Awesome


Kelebihan:

Jenis icon yang disediakan banyak sekali, dalam pemasangannya juga sangat mudah dengan cara menambahkan kode JavaScript pemanggil dan meletakkan kode pendek ke tempat yang akan menampilkan icon tersebut. Tidak perlu membuat icon satu-persatu dengan gambar.


Kekurangan:

Sangat lah memperlambat kecepatan loading, terutama pada platform Blogger, Kenapa begitu? dikarenakan platform Blogger sendiri tidak bisa mengatur cache dan expired header. Harus pintar pintar mengakalinya, walaupun tidak terlihat drastis kalau di cek di GTMetrix maupun PageSpeed Insight pasti akan terlihat lambat kecepatan blog. Pada umumnya contoh dari penggunaan dari Font Awesome:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Icon SVG Solusi Pengganti Font Awesome


Icon SVG adalah singkatan dari Scable Vector Graphic. Format gambar yang sudah dirancang khusus untuk memenuhi kebutuhan website di internet.


Gambar yang ditampilkan tidak akan blur maupun pecah, meskipun di zoom atau diperbesar resolusinya bahkan sampai maksimal atau yang disebut Scalable. Dia merupakan bahasa markup yang dapat menampilkan icon atau gambar dan sudah support disemua browser baik itu mobile atau desktop.


Baca Juga : Cara Mengatasi Leverage Browser Caching di Blogger


Dimana Bisa Mendapatkan Icon SVG?


Silahkan agan berkunjung ke situs https://www.iconfinder.com/, di situs tersebut terdapat banyak jenis icon SVG dan tentunya juga banyak yang gratis (free) untuk dipasangkan di blog agan.


Segera Beralih ke Icon SVG Sekarang Juga

Pilih salah satu gambar yang menurut agan cocok untuk memenuhi kebutuhan blog sobat. pilih salah satu icon tersebut, kemudian klik Copy Base64 SVG


Segera Beralih ke Icon SVG Sekarang Juga

Contoh kode seperti dibawah ini:


data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyOCAxMjg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiM0NDRCNTQ7c3Ryb2tlLXdpZHRoOjY7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDJ7ZmlsbDojNzZFQ0ZGO30KCS5zdDN7ZmlsbDojRTRFN0U3O30KCS5zdDR7ZmlsbDojRkY2OTdCO30KCS5zdDV7ZmlsbDojNjU5RUM5O30KCS5zdDZ7ZmlsbDojNDQ0QjU0O30KCS5zdDd7ZmlsbDojQTRGNEM0O30KCS5zdDh7ZmlsbDojMDZBMThDO30KCS5zdDl7ZmlsbDojOEZFNUI1O30KCS5zdDEwe29wYWNpdHk6MC41O2ZpbGw6IzA2QTE4Qzt9Cgkuc3QxMXtvcGFjaXR5OjAuNTt9Cgkuc3QxMntmaWxsOiNGRkRCQUI7fQoJLnN0MTN7ZmlsbDojRDE4NjY5O30KCS5zdDE0e2ZpbGw6I0ZDRjA5RDt9Cgkuc3QxNXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQoJLnN0MTZ7ZmlsbDojRURFQ0VCO30KCS5zdDE3e2ZpbGw6IzRGQkJDNjt9Cjwvc3R5bGU+PGc+PHBhdGggY2xhc3M9InN0NSIgZD0iTTg0LjksNDguMUg3MC43di05LjNjMC0zLjUsMi4zLTQuMyw0LTQuM2MxLjYsMCwxMC4xLDAsMTAuMSwwVjE5LjFMNzAuOCwxOUM1NS41LDE5LDUyLDMwLjUsNTIsMzcuOXYxMC4zICAgaC04LjlWNjRINTJjMCwyMC40LDAsNDUsMCw0NWgxOC43YzAsMCwwLTI0LjgsMC00NWgxMi42TDg0LjksNDguMXoiLz48L2c+PGc+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTcwLjgsMjlsMTMuOCwwLjF2LTEwTDcwLjgsMTlDNTUuNSwxOSw1MiwzMC41LDUyLDM3Ljl2MTBDNTIsNDAuNSw1NS41LDI5LDcwLjgsMjl6Ii8+PC9nPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNNzAuNywxMTJINTJjLTEuNywwLTMtMS4zLTMtM1Y2N2gtNS45Yy0xLjcsMC0zLTEuMy0zLTNzMS4zLTMsMy0zSDUyYzEuNywwLDMsMS4zLDMsM3Y0MmgxMi43VjY0ICAgYzAtMS43LDEuMy0zLDMtM2g5LjlsMS05LjlINzAuN2MtMS43LDAtMy0xLjMtMy0zdi05LjNjMC01LjEsMy41LTcuMyw3LTcuM2g3LjFWMjJsLTEwLjksMEM2Ni4xLDIyLDU1LDIzLjUsNTUsMzcuOXYxMC4zICAgYzAsMS43LTEuMywzLTMsM2gtOC45Yy0xLjcsMC0zLTEuMy0zLTNzMS4zLTMsMy0zSDQ5di03LjNDNDksMjcuOCw1NC43LDE2LDcwLjgsMTZsMTMuOSwwLjFjMS43LDAsMywxLjMsMywzdjE1LjRjMCwxLjctMS4zLDMtMywzICAgSDc0LjZjLTAuNiwwLTEsMC0xLDEuM3Y2LjNoMTEuMmMwLjgsMCwxLjcsMC40LDIuMiwxYzAuNiwwLjYsMC44LDEuNSwwLjgsMi4zbC0xLjYsMTUuOWMtMC4yLDEuNS0xLjQsMi43LTMsMi43aC05LjZ2NDIgICBDNzMuNywxMTAuNyw3Mi4zLDExMiw3MC43LDExMnoiLz48L2c+PC9zdmc+

Bagaimana cara menerapkan di blog?


Code tersebut masih berbentuk base64 jadi belum bisa diterapkan di blog. Decode terlebih dahulu ke dalam bentuk text, silahkan kunjungi situs ini https://base64.guru/converter/decode/text masukan kode base64 tadi yang sudah di copy sebagai contoh lihat gambar dibawah ini dan kemudian klik Decode Base64 ke Text


Segera Beralih ke Icon SVG Sekarang Juga

Copy code yang terdapat dalam kolom text, sebagai contoh seperti code dibawah ini:


<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:none;stroke:#444B54;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{fill:#76ECFF;}
	.st3{fill:#E4E7E7;}
	.st4{fill:#FF697B;}
	.st5{fill:#659EC9;}
	.st6{fill:#444B54;}
	.st7{fill:#A4F4C4;}
	.st8{fill:#06A18C;}
	.st9{fill:#8FE5B5;}
	.st10{opacity:0.5;fill:#06A18C;}
	.st11{opacity:0.5;}
	.st12{fill:#FFDBAB;}
	.st13{fill:#D18669;}
	.st14{fill:#FCF09D;}
	.st15{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
	.st16{fill:#EDECEB;}
	.st17{fill:#4FBBC6;}
</style><g><path class="st5" d="M84.9,48.1H70.7v-9.3c0-3.5,2.3-4.3,4-4.3c1.6,0,10.1,0,10.1,0V19.1L70.8,19C55.5,19,52,30.5,52,37.9v10.3   h-8.9V64H52c0,20.4,0,45,0,45h18.7c0,0,0-24.8,0-45h12.6L84.9,48.1z"/></g><g><g><path class="st0" d="M70.8,29l13.8,0.1v-10L70.8,19C55.5,19,52,30.5,52,37.9v10C52,40.5,55.5,29,70.8,29z"/></g></g><g><path class="st6" d="M70.7,112H52c-1.7,0-3-1.3-3-3V67h-5.9c-1.7,0-3-1.3-3-3s1.3-3,3-3H52c1.7,0,3,1.3,3,3v42h12.7V64   c0-1.7,1.3-3,3-3h9.9l1-9.9H70.7c-1.7,0-3-1.3-3-3v-9.3c0-5.1,3.5-7.3,7-7.3h7.1V22l-10.9,0C66.1,22,55,23.5,55,37.9v10.3   c0,1.7-1.3,3-3,3h-8.9c-1.7,0-3-1.3-3-3s1.3-3,3-3H49v-7.3C49,27.8,54.7,16,70.8,16l13.9,0.1c1.7,0,3,1.3,3,3v15.4c0,1.7-1.3,3-3,3   H74.6c-0.6,0-1,0-1,1.3v6.3h11.2c0.8,0,1.7,0.4,2.2,1c0.6,0.6,0.8,1.5,0.8,2.3l-1.6,15.9c-0.2,1.5-1.4,2.7-3,2.7h-9.6v42   C73.7,110.7,72.3,112,70.7,112z"/></g></svg>

Jika sudah silahkan pasang ke template sobat, perlu diingat dalam pemasangan icon SVG ini agan perlu memahami class mana yang akan dipasangi icon SVG ini. Sebagai contoh saya akan memasang icon SVG ini pada class="icon-nav" maka contoh kodenya seperti dibawah ini:


<?xml version="1.0" ?><svg class="icon-nav" id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:none;stroke:#444B54;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{fill:#76ECFF;}
	.st3{fill:#E4E7E7;}
	.st4{fill:#FF697B;}
	.st5{fill:#659EC9;}
	.st6{fill:#444B54;}
	.st7{fill:#A4F4C4;}
	.st8{fill:#06A18C;}
	.st9{fill:#8FE5B5;}
	.st10{opacity:0.5;fill:#06A18C;}
	.st11{opacity:0.5;}
	.st12{fill:#FFDBAB;}
	.st13{fill:#D18669;}
	.st14{fill:#FCF09D;}
	.st15{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
	.st16{fill:#EDECEB;}
	.st17{fill:#4FBBC6;}
</style><g><path class="st5" d="M84.9,48.1H70.7v-9.3c0-3.5,2.3-4.3,4-4.3c1.6,0,10.1,0,10.1,0V19.1L70.8,19C55.5,19,52,30.5,52,37.9v10.3   h-8.9V64H52c0,20.4,0,45,0,45h18.7c0,0,0-24.8,0-45h12.6L84.9,48.1z"/></g><g><g><path class="st0" d="M70.8,29l13.8,0.1v-10L70.8,19C55.5,19,52,30.5,52,37.9v10C52,40.5,55.5,29,70.8,29z"/></g></g><g><path class="st6" d="M70.7,112H52c-1.7,0-3-1.3-3-3V67h-5.9c-1.7,0-3-1.3-3-3s1.3-3,3-3H52c1.7,0,3,1.3,3,3v42h12.7V64   c0-1.7,1.3-3,3-3h9.9l1-9.9H70.7c-1.7,0-3-1.3-3-3v-9.3c0-5.1,3.5-7.3,7-7.3h7.1V22l-10.9,0C66.1,22,55,23.5,55,37.9v10.3   c0,1.7-1.3,3-3,3h-8.9c-1.7,0-3-1.3-3-3s1.3-3,3-3H49v-7.3C49,27.8,54.7,16,70.8,16l13.9,0.1c1.7,0,3,1.3,3,3v15.4c0,1.7-1.3,3-3,3   H74.6c-0.6,0-1,0-1,1.3v6.3h11.2c0.8,0,1.7,0.4,2.2,1c0.6,0.6,0.8,1.5,0.8,2.3l-1.6,15.9c-0.2,1.5-1.4,2.7-3,2.7h-9.6v42   C73.7,110.7,72.3,112,70.7,112z"/></g></svg>

Catatan: Perlu diingat kembali class="icon-nav" diatas hanya sebagai contoh ya, silahkan menyesuaikan class yang ada di blog agan

Ribet pemasangannya? memang bisa dibilang juga ribet kalau dibandingkan dengan Font Awesome yang kode pemasangannya lebih sedikit, dengan agan memsang icon SVG di blog di jamin ampuh buat mempercepat loading pada blog. Silahkan dicob, jika tedapat kesulitan dalam pemasangan bisa ditanyakan di kolom komentar ya.


Oke sekian yang bisa saya sampaikan tentang informasi untuk Segera Beralih ke Icon SVG Sekarang Juga Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.