Duta Bloger

Cara Membuat Efek Hujan Salju Di Blogger

2022-08-20T01:14:00.008-07:00

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat efek hujan salju di blogger , Menambahkan efek ini di blog dapat mempercantik tampilan blog sobat.

Selain itu menambahkan efek animasi hujan salju ini akan membuat blog sobat akan menjadi lebih menarik dan mungkin pengunjung akan bertahan lama di blog sobat. efek animasi hujan salju ini sangat sederhana tetapi sangat menarik dan ini lebih kita rekomendasikan untuk sobat.

bagi yang ingin mencobanya silahkan ikuti tutorial memasang efek animasi hujan salju di bawah ini, dan untuk melihat demonya silakan klik tombol demo di bawah ini.

demo

Membuat effek pelangi melekat di footer Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Silahkan sobat cari kode berikut ini ]]></b:skin> atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* Efek Salju Animation */

.salju{background-color:#fff;border-radius:100%;position:absolute;top:-10vh;padding:1vw;}

.salju:nth-child(1){animation:snow 19s linear 40s infinite normal backwards;left:79%;opacity:0.71;padding:0.11vw;}

.salju:nth-child(2){animation:snow 19s linear 10s infinite normal backwards;left:57%;opacity:1.1;padding:0.34vw;}

.salju:nth-child(3){animation:snow 14s linear 15s infinite normal backwards;left:5%;opacity:0.82;padding:0.12vw;}

.salju:nth-child(4){animation:snow 14s linear 30s infinite normal backwards;left:95%;opacity:0.32;padding:0.28vw;}

.salju:nth-child(5){animation:snow 12s linear 8s infinite normal backwards;left:54%;opacity:0.48;padding:0.41vw;}

.salju:nth-child(6){animation:snow 16s linear 30s infinite normal backwards;left:20%;opacity:0.64;padding:0.28vw;}

.salju:nth-child(7){animation:snow 12s linear 36s infinite normal backwards;left:20%;opacity:0.28;padding:0.34vw;}

.salju:nth-child(8){animation:snow 13s linear 3s infinite normal backwards;left:62%;opacity:0.55;padding:0.14vw;}

.salju:nth-child(9){animation:snow 18s linear 44s infinite normal backwards;left:65%;opacity:0.6;padding:0.32vw;}

.salju:nth-child(10){animation:snow 16s linear 32s infinite normal backwards;left:90%;opacity:0.55;padding:0.18vw;}

.salju:nth-child(11){animation:snow 14s linear 50s infinite normal backwards;left:6%;opacity:0.98;padding:0.39vw;}

.salju:nth-child(12){animation:snow 11s linear 22s infinite normal backwards;left:93%;opacity:0.51;padding:0.2vw;}

.salju:nth-child(13){animation:snow 13s linear 8s infinite normal backwards;left:61%;opacity:0.21;padding:0.47vw;}

.salju:nth-child(14){animation:snow 15s linear 43s infinite normal backwards;left:19%;opacity:0.46;padding:0.25vw;}

.salju:nth-child(15){animation:snow 11s linear 13s infinite normal backwards;left:94%;opacity:0.83;padding:0.29vw;}

.salju:nth-child(16){animation:snow 19s linear 15s infinite normal backwards;left:92%;opacity:0.83;padding:0.28vw;}

.salju:nth-child(17){animation:snow 19s linear 30s infinite normal backwards;left:14%;opacity:0.3;padding:0.36vw;}

.salju:nth-child(18){animation:snow 20s linear 41s infinite normal backwards;left:46%;opacity:1.07;padding:0.16vw;}

.salju:nth-child(19){animation:snow 15s linear 7s infinite normal backwards;left:46%;opacity:1.03;padding:0.29vw;}

.salju:nth-child(20){animation:snow 14s linear 7s infinite normal backwards;left:40%;opacity:1.08;padding:0.13vw;}

.salju:nth-child(21){animation:snow 16s linear 18s infinite normal backwards;left:1%;opacity:0.29;padding:0.46vw;}

.salju:nth-child(22){animation:snow 16s linear 3s infinite normal backwards;left:35%;opacity:0.64;padding:0.25vw;}

.salju:nth-child(23){animation:snow 19s linear 45s infinite normal backwards;left:9%;opacity:0.39;padding:0.3vw;}

.salju:nth-child(24){animation:snow 17s linear 40s infinite normal backwards;left:73%;opacity:0.4;padding:0.2vw;}

.salju:nth-child(25){animation:snow 13s linear 10s infinite normal backwards;left:78%;opacity:0.4;padding:0.28vw;}

.salju:nth-child(26){animation:snow 20s linear 6s infinite normal backwards;left:23%;opacity:0.77;padding:0.44vw;}

.salju:nth-child(27){animation:snow 14s linear 17s infinite normal backwards;left:46%;opacity:0.36;padding:0.11vw;}

.salju:nth-child(28){animation:snow 15s linear 14s infinite normal backwards;left:35%;opacity:0.85;padding:0.31vw;}

.salju:nth-child(29){animation:snow 16s linear 47s infinite normal backwards;left:59%;opacity:0.85;padding:0.29vw;}

.salju:nth-child(30){animation:snow 11s linear 48s infinite normal backwards;left:98%;opacity:0.51;padding:0.26vw;}

.salju:nth-child(31){animation:snow 20s linear 7s infinite normal backwards;left:98%;opacity:0.15;padding:0.39vw;}

.salju:nth-child(32){animation:snow 19s linear 44s infinite normal backwards;left:34%;opacity:0.54;padding:0.37vw;}

.salju:nth-child(33){animation:snow 11s linear 8s infinite normal backwards;left:14%;opacity:1.1;padding:0.37vw;}

.salju:nth-child(34){animation:snow 14s linear 28s infinite normal backwards;left:34%;opacity:0.36;padding:0.5vw;}

.salju:nth-child(35){animation:snow 16s linear 21s infinite normal backwards;left:87%;opacity:0.72;padding:0.19vw;}

.salju:nth-child(36){animation:snow 17s linear 18s infinite normal backwards;left:58%;opacity:0.48;padding:0.34vw;}

.salju:nth-child(37){animation:snow 11s linear 49s infinite normal backwards;left:35%;opacity:0.42;padding:0.48vw;}

.salju:nth-child(38){animation:snow 13s linear 29s infinite normal backwards;left:8%;opacity:0.96;padding:0.5vw;}

.salju:nth-child(39){animation:snow 15s linear 43s infinite normal backwards;left:36%;opacity:0.41;padding:0.24vw;}

.salju:nth-child(40){animation:snow 13s linear 46s infinite normal backwards;left:18%;opacity:0.13;padding:0.15vw;}

.salju:nth-child(41){animation:snow 14s linear 22s infinite normal backwards;left:34%;opacity:0.86;padding:0.46vw;}

.salju:nth-child(42){animation:snow 19s linear 3s infinite normal backwards;left:66%;opacity:0.82;padding:0.11vw;}

.salju:nth-child(43){animation:snow 15s linear 46s infinite normal backwards;left:75%;opacity:0.69;padding:0.26vw;}

.salju:nth-child(44){animation:snow 14s linear 12s infinite normal backwards;left:55%;opacity:0.33;padding:0.39vw;}

.salju:nth-child(45){animation:snow 16s linear 33s infinite normal backwards;left:95%;opacity:0.19;padding:0.47vw;}

.salju:nth-child(46){animation:snow 16s linear 15s infinite normal backwards;left:72%;opacity:0.2;padding:0.48vw;}

.salju:nth-child(47){animation:snow 16s linear 8s infinite normal backwards;left:61%;opacity:0.39;padding:0.49vw;}

.salju:nth-child(48){animation:snow 12s linear 21s infinite normal backwards;left:15%;opacity:0.29;padding:0.42vw;}

.salju:nth-child(49){animation:snow 17s linear 26s infinite normal backwards;left:16%;opacity:0.52;padding:0.45vw;}

.salju:nth-child(50){animation:snow 11s linear 42s infinite normal backwards;left:67%;opacity:1.01;padding:0.16vw;}

.salju:nth-child(51){animation:snow 11s linear 29s infinite normal backwards;left:58%;opacity:0.16;padding:0.3vw;}

.salju:nth-child(52){animation:snow 14s linear 33s infinite normal backwards;left:85%;opacity:1.04;padding:0.2vw;}

.salju:nth-child(53){animation:snow 14s linear 10s infinite normal backwards;left:15%;opacity:0.92;padding:0.35vw;}

.salju:nth-child(54){animation:snow 17s linear 44s infinite normal backwards;left:88%;opacity:0.29;padding:0.25vw;}

.salju:nth-child(55){animation:snow 17s linear 20s infinite normal backwards;left:55%;opacity:0.27;padding:0.26vw;}

.salju:nth-child(56){animation:snow 15s linear 27s infinite normal backwards;left:97%;opacity:0.99;padding:0.33vw;}

.salju:nth-child(57){animation:snow 13s linear 31s infinite normal backwards;left:72%;opacity:1.1;padding:0.13vw;}

.salju:nth-child(58){animation:snow 11s linear 6s infinite normal backwards;left:69%;opacity:0.99;padding:0.15vw;}

.salju:nth-child(59){animation:snow 11s linear 23s infinite normal backwards;left:46%;opacity:0.9;padding:0.19vw;}

.salju:nth-child(60){animation:snow 19s linear 16s infinite normal backwards;left:34%;opacity:1.08;padding:0.15vw;}

.salju:nth-child(61){animation:snow 17s linear 21s infinite normal backwards;left:4%;opacity:1.04;padding:0.43vw;}

.salju:nth-child(62){animation:snow 18s linear 3s infinite normal backwards;left:80%;opacity:0.26;padding:0.16vw;}

.salju:nth-child(63){animation:snow 12s linear 34s infinite normal backwards;left:19%;opacity:0.9;padding:0.36vw;}

.salju:nth-child(64){animation:snow 17s linear 7s infinite normal backwards;left:69%;opacity:0.63;padding:0.29vw;}

.salju:nth-child(65){animation:snow 15s linear 36s infinite normal backwards;left:20%;opacity:0.16;padding:0.49vw;}

.salju:nth-child(66){animation:snow 12s linear 6s infinite normal backwards;left:29%;opacity:0.81;padding:0.45vw;}

.salju:nth-child(67){animation:snow 14s linear 22s infinite normal backwards;left:2%;opacity:0.69;padding:0.47vw;}

.salju:nth-child(68){animation:snow 16s linear 41s infinite normal backwards;left:8%;opacity:0.44;padding:0.2vw;}

.salju:nth-child(69){animation:snow 18s linear 5s infinite normal backwards;left:14%;opacity:0.79;padding:0.22vw;}

.salju:nth-child(70){animation:snow 20s linear 12s infinite normal backwards;left:25%;opacity:0.23;padding:0.49vw;}

.salju:nth-child(71){animation:snow 20s linear 32s infinite normal backwards;left:43%;opacity:0.65;padding:0.23vw;}

.salju:nth-child(72){animation:snow 15s linear 3s infinite normal backwards;left:25%;opacity:0.42;padding:0.29vw;}

.salju:nth-child(73){animation:snow 16s linear 20s infinite normal backwards;left:9%;opacity:1.01;padding:0.24vw;}

.salju:nth-child(74){animation:snow 12s linear 26s infinite normal backwards;left:64%;opacity:0.55;padding:0.43vw;}

.salju:nth-child(75){animation:snow 19s linear 17s infinite normal backwards;left:85%;opacity:1.08;padding:0.27vw;}

.salju:nth-child(76){animation:snow 18s linear 3s infinite normal backwards;left:100%;opacity:0.63;padding:0.18vw;}

.salju:nth-child(77){animation:snow 14s linear 19s infinite normal backwards;left:98%;opacity:0.35;padding:0.14vw;}

.salju:nth-child(78){animation:snow 13s linear 3s infinite normal backwards;left:79%;opacity:0.25;padding:0.14vw;}

.salju:nth-child(79){animation:snow 18s linear 28s infinite normal backwards;left:72%;opacity:0.49;padding:0.48vw;}

.salju:nth-child(80){animation:snow 19s linear 3s infinite normal backwards;left:79%;opacity:0.19;padding:0.35vw;}

.salju:nth-child(81){animation:snow 13s linear 48s infinite normal backwards;left:14%;opacity:0.66;padding:0.48vw;}

.salju:nth-child(82){animation:snow 15s linear 1s infinite normal backwards;left:3%;opacity:0.72;padding:0.34vw;}

.salju:nth-child(83){animation:snow 15s linear 36s infinite normal backwards;left:42%;opacity:1.08;padding:0.26vw;}

.salju:nth-child(84){animation:snow 14s linear 15s infinite normal backwards;left:98%;opacity:0.41;padding:0.17vw;}

.salju:nth-child(85){animation:snow 18s linear 20s infinite normal backwards;left:99%;opacity:0.86;padding:0.32vw;}

.salju:nth-child(86){animation:snow 20s linear 14s infinite normal backwards;left:43%;opacity:0.27;padding:0.3vw;}

.salju:nth-child(87){animation:snow 14s linear 44s infinite normal backwards;left:64%;opacity:0.83;padding:0.19vw;}

.salju:nth-child(88){animation:snow 16s linear 24s infinite normal backwards;left:11%;opacity:0.83;padding:0.48vw;}

.salju:nth-child(89){animation:snow 13s linear 24s infinite normal backwards;left:62%;opacity:0.26;padding:0.11vw;}

.salju:nth-child(90){animation:snow 18s linear 44s infinite normal backwards;left:72%;opacity:0.92;padding:0.13vw;}

.salju:nth-child(91){animation:snow 13s linear 20s infinite normal backwards;left:72%;opacity:0.71;padding:0.31vw;}

.salju:nth-child(92){animation:snow 20s linear 14s infinite normal backwards;left:80%;opacity:0.69;padding:0.38vw;}

.salju:nth-child(93){animation:snow 11s linear 21s infinite normal backwards;left:47%;opacity:1.01;padding:0.48vw;}

.salju:nth-child(94){animation:snow 15s linear 35s infinite normal backwards;left:51%;opacity:0.85;padding:0.32vw;}

.salju:nth-child(95){animation:snow 11s linear 47s infinite normal backwards;left:85%;opacity:0.97;padding:0.29vw;}

.salju:nth-child(96){animation:snow 18s linear 37s infinite normal backwards;left:54%;opacity:0.25;padding:0.45vw;}

.salju:nth-child(97){animation:snow 17s linear 39s infinite normal backwards;left:15%;opacity:0.35;padding:0.26vw;}

.salju:nth-child(98){animation:snow 15s linear 5s infinite normal backwards;left:61%;opacity:0.37;padding:0.21vw;}

.salju:nth-child(99){animation:snow 11s linear 2s infinite normal backwards;left:8%;opacity:0.32;padding:0.42vw;}

.salju:nth-child(100){animation:snow 15s linear 19s infinite normal backwards;left:31%;opacity:0.85;padding:0.5vw;}

.salju:nth-child(101){animation:snow 13s linear 14s infinite normal backwards;left:19%;opacity:0.62;padding:0.32vw;}

.salju:nth-child(102){animation:snow 20s linear 42s infinite normal backwards;left:76%;opacity:0.87;padding:0.31vw;}

.salju:nth-child(103){animation:snow 15s linear 41s infinite normal backwards;left:49%;opacity:0.37;padding:0.25vw;}

.salju:nth-child(104){animation:snow 14s linear 42s infinite normal backwards;left:80%;opacity:0.91;padding:0.11vw;}

.salju:nth-child(105){animation:snow 19s linear 48s infinite normal backwards;left:78%;opacity:0.99;padding:0.49vw;}

.salju:nth-child(106){animation:snow 14s linear 11s infinite normal backwards;left:40%;opacity:1.09;padding:0.22vw;}

.salju:nth-child(107){animation:snow 15s linear 42s infinite normal backwards;left:67%;opacity:1.07;padding:0.47vw;}

.salju:nth-child(108){animation:snow 12s linear 28s infinite normal backwards;left:36%;opacity:0.58;padding:0.37vw;}

.salju:nth-child(109){animation:snow 15s linear 33s infinite normal backwards;left:92%;opacity:0.68;padding:0.49vw;}

.salju:nth-child(110){animation:snow 16s linear 5s infinite normal backwards;left:42%;opacity:0.47;padding:0.46vw;}

.salju:nth-child(111){animation:snow 20s linear 24s infinite normal backwards;left:17%;opacity:0.62;padding:0.43vw;}

.salju:nth-child(112){animation:snow 13s linear 1s infinite normal backwards;left:9%;opacity:0.55;padding:0.21vw;}

.salju:nth-child(113){animation:snow 12s linear 22s infinite normal backwards;left:20%;opacity:0.33;padding:0.27vw;}

.salju:nth-child(114){animation:snow 20s linear 36s infinite normal backwards;left:16%;opacity:0.28;padding:0.12vw;}

.salju:nth-child(115){animation:snow 15s linear 6s infinite normal backwards;left:39%;opacity:0.13;padding:0.31vw;}

.salju:nth-child(116){animation:snow 20s linear 35s infinite normal backwards;left:62%;opacity:0.21;padding:0.46vw;}

.salju:nth-child(117){animation:snow 12s linear 14s infinite normal backwards;left:63%;opacity:0.14;padding:0.34vw;}

.salju:nth-child(118){animation:snow 18s linear 14s infinite normal backwards;left:49%;opacity:0.85;padding:0.11vw;}

.salju:nth-child(119){animation:snow 16s linear 27s infinite normal backwards;left:85%;opacity:0.78;padding:0.4vw;}

.salju:nth-child(120){animation:snow 13s linear 27s infinite normal backwards;left:64%;opacity:0.18;padding:0.19vw;}

.salju:nth-child(121){animation:snow 19s linear 4s infinite normal backwards;left:35%;opacity:0.32;padding:0.14vw;}

.salju:nth-child(122){animation:snow 18s linear 50s infinite normal backwards;left:35%;opacity:1.02;padding:0.38vw;}

.salju:nth-child(123){animation:snow 12s linear 7s infinite normal backwards;left:16%;opacity:1.1;padding:0.42vw;}

.salju:nth-child(124){animation:snow 16s linear 15s infinite normal backwards;left:10%;opacity:0.25;padding:0.19vw;}

.salju:nth-child(125){animation:snow 20s linear 12s infinite normal backwards;left:71%;opacity:0.64;padding:0.37vw;}

.salju:nth-child(126){animation:snow 15s linear 14s infinite normal backwards;left:33%;opacity:0.39;padding:0.25vw;}

.salju:nth-child(127){animation:snow 18s linear 36s infinite normal backwards;left:44%;opacity:0.38;padding:0.5vw;}

.salju:nth-child(128){animation:snow 16s linear 4s infinite normal backwards;left:40%;opacity:0.61;padding:0.4vw;}

.salju:nth-child(129){animation:snow 11s linear 5s infinite normal backwards;left:81%;opacity:0.53;padding:0.2vw;}

.salju:nth-child(130){animation:snow 15s linear 14s infinite normal backwards;left:44%;opacity:0.9;padding:0.37vw;}

.salju:nth-child(131){animation:snow 16s linear 7s infinite normal backwards;left:68%;opacity:0.47;padding:0.38vw;}

.salju:nth-child(132){animation:snow 15s linear 36s infinite normal backwards;left:99%;opacity:0.46;padding:0.36vw;}

.salju:nth-child(133){animation:snow 13s linear 25s infinite normal backwards;left:8%;opacity:0.64;padding:0.43vw;}

.salju:nth-child(134){animation:snow 19s linear 38s infinite normal backwards;left:71%;opacity:0.97;padding:0.35vw;}

.salju:nth-child(135){animation:snow 20s linear 48s infinite normal backwards;left:96%;opacity:1;padding:0.29vw;}

.salju:nth-child(136){animation:snow 13s linear 42s infinite normal backwards;left:17%;opacity:0.91;padding:0.42vw;}

.salju:nth-child(137){animation:snow 16s linear 41s infinite normal backwards;left:34%;opacity:0.94;padding:0.28vw;}

.salju:nth-child(138){animation:snow 18s linear 22s infinite normal backwards;left:82%;opacity:0.27;padding:0.38vw;}

.salju:nth-child(139){animation:snow 13s linear 22s infinite normal backwards;left:51%;opacity:0.43;padding:0.5vw;}

.salju:nth-child(140){animation:snow 19s linear 22s infinite normal backwards;left:54%;opacity:0.89;padding:0.41vw;}

.salju:nth-child(141){animation:snow 16s linear 31s infinite normal backwards;left:54%;opacity:0.46;padding:0.12vw;}

.salju:nth-child(142){animation:snow 11s linear 49s infinite normal backwards;left:2%;opacity:0.75;padding:0.29vw;}

.salju:nth-child(143){animation:snow 15s linear 1s infinite normal backwards;left:63%;opacity:0.3;padding:0.29vw;}

.salju:nth-child(144){animation:snow 18s linear 26s infinite normal backwards;left:46%;opacity:0.98;padding:0.43vw;}

.salju:nth-child(145){animation:snow 12s linear 29s infinite normal backwards;left:87%;opacity:0.31;padding:0.33vw;}

.salju:nth-child(146){animation:snow 16s linear 1s infinite normal backwards;left:37%;opacity:0.42;padding:0.13vw;}

.salju:nth-child(147){animation:snow 17s linear 45s infinite normal backwards;left:38%;opacity:0.3;padding:0.44vw;}

.salju:nth-child(148){animation:snow 19s linear 35s infinite normal backwards;left:65%;opacity:0.77;padding:0.21vw;}

.salju:nth-child(149){animation:snow 16s linear 18s infinite normal backwards;left:43%;opacity:0.14;padding:0.37vw;}

.salju: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;}}

4. Selanjutnya cari kode </body> atau </body> dan tambahkan kode html dibawah ini tepat DIATAS kode tersebut

<div class='snow-saljus'> <div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div><div class='salju'></div></div>

5. Silahkan tambahkan juga kode javascript ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
var snowStorm=null;function SnowStorm(){this.saljusMax=128,this.saljusMaxActive=64,this.animationInterval=33,this.saljuBottom=null,this.targetElement=null,this.followMouse=true,this.snowColor="#fff",this.snowCharacter="&bull;",this.snowStick=!0,this.useMeltEffect=!0,this.useTwinkleEffect=!1,this.usePositionFixed=!1,this.saljuLeftOffset=0,this.saljuRightOffset=0,this.saljuWidth=8,this.saljuHeight=8,this.vMaxX=5,this.vMaxY=4,this.zIndex=0;var e=void 0===window.attachEvent?function(e,t,i){return e.addEventListener(t,i,!1)}:function(e,t,i){return e.attachEvent("on"+t,i)},t=void 0===window.attachEvent?function(e,t,i){return e.removeEventListener(t,i,!1)}:function(e,t,i){return e.detachEvent("on"+t,i)};function i(e,t){return isNaN(t)&&(t=0),Math.random()*e+t}var n=this,o=this;this.timers=[],this.saljus=[],this.disabled=!1,this.active=!1;var s=navigator.userAgent.match(/msie/i),l=navigator.userAgent.match(/msie 6/i),a=s&&(l||navigator.userAgent.match(/msie 5/i)),r=navigator.appVersion.match(/windows 98/i),f=navigator.userAgent.match(/iphone/i),m=!!(s&&"BackCompat"==document.compatMode||l||f),h=null,c=null,d=null,u=null,v=null,k=null,g=1,w=!1,y=function(){try{document.createElement("div").style.opacity="0.5"}catch(e){return!1}return!0}(),p=document.createDocumentFragment();null===n.saljuLeftOffset&&(n.saljuLeftOffset=0),null===n.saljuRightOffset&&(n.saljuRightOffset=0),this.meltFrameCount=20,this.meltFrames=[];for(var x=0;x<this.meltFrameCount;x++)this.meltFrames.push(1-x/this.meltFrameCount);this.randomizeWind=function(){var e;if(e=i(n.vMaxX,.2),v=1==parseInt(i(2),10)?-1*e:e,k=i(n.vMaxY,.2),this.saljus)for(var t=0;t<this.saljus.length;t++)this.saljus[t].active&&this.saljus[t].setVelocities()},this.scrollHandler=function(){if(u=n.saljuBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10),isNaN(u)&&(u=0),!w&&!n.saljuBottom&&n.saljus)for(var e=n.saljus.length;e--;)0===n.saljus[e].active&&n.saljus[e].stick()},this.resizeHandler=function(){window.innerWidth||window.innerHeight?(h=window.innerWidth-(s?2:16)-n.saljuRightOffset,d=n.saljuBottom?n.saljuBottom:window.innerHeight):(h=(document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(s?0:8)-n.saljuRightOffset,d=n.saljuBottom?n.saljuBottom:document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight),c=parseInt(h/2,10)},this.resizeHandlerAlt=function(){h=n.targetElement.offsetLeft+n.targetElement.offsetWidth-n.saljuRightOffset,d=n.saljuBottom?n.saljuBottom:n.targetElement.offsetTop+n.targetElement.offsetHeight,c=parseInt(h/2,10)},this.freeze=function(){if(n.disabled)return!1;n.disabled=1;for(var e=n.timers.length;e--;)clearInterval(n.timers[e])},this.resume=function(){if(!n.disabled)return!1;n.disabled=0,n.timerInit()},this.toggleSnow=function(){n.saljus.length?(n.active=!n.active,n.active?(n.show(),n.resume()):(n.stop(),n.freeze())):n.start()},this.stop=function(){this.freeze();for(var e=this.saljus.length;e--;)this.saljus[e].o.style.display="none";t(window,"scroll",n.scrollHandler),t(window,"resize",n.resizeHandler),a||(t(window,"blur",n.freeze),t(window,"focus",n.resume))},this.show=function(){for(var e=this.saljus.length;e--;)this.saljus[e].o.style.display="block"},this.Snowsalju=function(e,t,n,o){var s=this,l=e;this.type=t,this.x=n||parseInt(i(h-20),10),this.y=isNaN(o)?-i(d)-12:o,this.vX=null,this.vY=null,this.vAmpTypes=[1,1.2,1.4,1.6,1.8],this.vAmp=this.vAmpTypes[this.type],this.melting=!1,this.meltFrameCount=l.meltFrameCount,this.meltFrames=l.meltFrames,this.meltFrame=0,this.twinkleFrame=0,this.active=1,this.fontSize=10+this.type/5*10,this.o=document.createElement("div"),this.o.innerHTML=l.snowCharacter,this.o.style.color=l.snowColor,this.o.style.position=w?"fixed":"absolute",this.o.style.width=l.saljuWidth+"px",this.o.style.height=l.saljuHeight+"px",this.o.style.fontFamily="arial,verdana",this.o.style.overflow="hidden",this.o.style.fontWeight="normal",this.o.style.zIndex=l.zIndex,p.appendChild(this.o),this.refresh=function(){if(isNaN(s.x)||isNaN(s.y))return!1;s.o.style.left=s.x+"px",s.o.style.top=s.y+"px"},this.stick=function(){m||l.targetElement!=document.documentElement&&l.targetElement!=document.body?s.o.style.top=d+u-l.saljuHeight+"px":l.saljuBottom?s.o.style.top=l.saljuBottom+"px":(s.o.style.display="none",s.o.style.top="auto",s.o.style.bottom="0px",s.o.style.position="fixed",s.o.style.display="block")},this.vCheck=function(){s.vX>=0&&s.vX<.2?s.vX=.2:s.vX<0&&s.vX>-.2&&(s.vX=-.2),s.vY>=0&&s.vY<.2&&(s.vY=.2)},this.move=function(){var e=s.vX*g;s.x+=e,s.y+=s.vY*s.vAmp,s.x>=h||h-s.x<l.saljuWidth?s.x=0:e<0&&s.x-l.saljuLeftOffset<0-l.saljuWidth&&(s.x=h-l.saljuWidth-1),s.refresh(),d+u-s.y<l.saljuHeight?(s.active=0,l.snowStick?s.stick():s.recycle()):(l.useMeltEffect&&s.active&&s.type<3&&!s.melting&&Math.random()>.998&&(s.melting=!0,s.melt()),l.useTwinkleEffect&&(s.twinkleFrame?(s.twinkleFrame--,s.o.style.visibility=s.twinkleFrame&&s.twinkleFrame%2==0?"hidden":"visible"):Math.random()>.9&&(s.twinkleFrame=parseInt(20*Math.random(),10))))},this.animate=function(){s.move()},this.setVelocities=function(){s.vX=v+i(.12*l.vMaxX,.1),s.vY=k+i(.12*l.vMaxY,.1)},this.setOpacity=function(e,t){if(!y)return!1;e.style.opacity=t},this.melt=function(){l.useMeltEffect&&s.melting&&s.meltFrame<s.meltFrameCount?(s.meltFrame++,s.setOpacity(s.o,s.meltFrames[s.meltFrame]),s.o.style.fontSize=s.fontSize-s.fontSize*(s.meltFrame/s.meltFrameCount)+"px",s.o.style.lineHeight=l.saljuHeight+2+.75*l.saljuHeight*(s.meltFrame/s.meltFrameCount)+"px"):s.recycle()},this.recycle=function(){s.o.style.display="none",s.o.style.position=w?"fixed":"absolute",s.o.style.bottom="auto",s.setVelocities(),s.vCheck(),s.meltFrame=0,s.melting=!1,s.setOpacity(s.o,1),s.o.style.padding="0px",s.o.style.margin="0px",s.o.style.fontSize=s.fontSize+"px",s.o.style.lineHeight=l.saljuHeight+2+"px",s.o.style.textAlign="center",s.o.style.verticalAlign="baseline",s.x=parseInt(i(h-l.saljuWidth-20),10),s.y=parseInt(-1*i(d),10)-l.saljuHeight,s.refresh(),s.o.style.display="block",s.active=1},this.recycle(),this.refresh()},this.snow=function(){for(var e=0,t=null,o=n.saljus.length;o--;)1==n.saljus[o].active?(n.saljus[o].move(),e++):0===n.saljus[o].active?0:0,n.saljus[o].melting&&n.saljus[o].melt();e<n.saljusMaxActive&&0===(t=n.saljus[parseInt(i(n.saljus.length),10)]).active&&(t.melting=!0)},this.mouseMove=function(e){if(!n.followMouse)return!0;var t=parseInt(e.clientX,10);g=t<c?t/c*2-2:(t-=c)/c*2},this.createSnow=function(e,t){for(var s=0;s<e;s++)n.saljus[n.saljus.length]=new n.Snowsalju(n,parseInt(i(6),10)),(t||s>n.saljusMaxActive)&&(n.saljus[n.saljus.length-1].active=-1);o.targetElement.appendChild(p)},this.timerInit=function(){n.timers=r?[setInterval(n.snow,3*n.animationInterval),setInterval(n.snow,n.animationInterval)]:[setInterval(n.snow,n.animationInterval)]},this.init=function(){n.randomizeWind(),n.createSnow(n.saljusMax),e(window,"resize",n.resizeHandler),e(window,"scroll",n.scrollHandler),a||(e(window,"blur",n.freeze),e(window,"focus",n.resume)),n.resizeHandler(),n.scrollHandler(),n.followMouse&&e(document,"mousemove",n.mouseMove),n.animationInterval=Math.max(20,n.animationInterval),n.timerInit()};var E=!1;function F(){n.start(!0)}this.start=function(e){if(E){if(e)return!0}else E=!0;if("string"==typeof n.targetElement){var t=n.targetElement;if(n.targetElement=document.getElementById(t),!n.targetElement)throw new Error('Snowstorm: Unable to get targetElement "'+t+'"')}n.targetElement||(n.targetElement=s?document.body:document.documentElement?document.documentElement:document.body),n.targetElement!=document.documentElement&&n.targetElement!=document.body&&(n.resizeHandler=n.resizeHandlerAlt),n.resizeHandler(),n.usePositionFixed=n.usePositionFixed&&!m,w=n.usePositionFixed,h&&d&&!n.disabled&&(n.init(),n.active=!0)},document.addEventListener?(document.addEventListener("DOMContentLoaded",F,!1),window.addEventListener("load",F,!1)):e(window,"load",F)}snowStorm=new SnowStorm;

//]]>
</script>

6. Silahkan Sobat SIMPAN TEMA.

Nah, itulah tutorial Cara Membuat Efek Pelangi di Footer Blogger atau Web Menggunakan css. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Cara Membuat Efek Pelangi di Footer Blogger

2022-08-16T05:24:00.005-07:00

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat efek pelangi di footer blogger , Keuntungan Ini akan memberikan tampilan keren pada situs blogger sobat dan pengunjung blog sobat mungkin akan menyukai efek pelangi ini.

efek animasi pelangi Ini akan berfungsi pada perangkat desktop dan seluler. efek Ini akan menampilkan garis pelangi melekat di footer situs web sobat. perlu sobat ketahui efek ini dibuat menggunakan css dan tidak akan mempengaruhi kecepatan blog sobat.

untuk melihat demonya silakan klik tombol demo di bawah ini.

demo

Membuat effek pelangi melekat di footer Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Silahkan sobat cari kode berikut ini ]]></b:skin> atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

.DutaRainbow,.DutaBlurRainbow{position:fixed;width:100%;bottom:0;left:0;right:0;height:3px;z-index:23;background:linear-gradient(-45deg, #4086F4, #31A952, #FBBE01, #EB4132,#4086F4, #31A952, #FBBE01, #EB4132);background-size:200%;-webkit-animation:animeBar 5s linear infinite;animation:animeBar 5s linear infinite}.DutaBlurRainbow{height:10px;z-index:22;filter:blur(10px);opacity:.7}@-webkit-keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

4. Selanjutnya cari kode </footer> atau </body> dan tambahkan kode html dibawah ini tepat DIATAS kode tersebut

<div class='DutaRainbow'>
  <div class='DutaBlurRainbow'>
  </div>
</div>

5. Silahkan Sobat SIMPAN TEMA.

Nah, itulah tutorial Cara Membuat Efek Pelangi di Footer Blogger atau Web Menggunakan css. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Cara Membuat Efek Klik Ripple di Blogger

2022-08-15T01:01:00.003-07:00

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat efek klik ripple keren di blogger , saat ini sobat sering melihat efek ripple di beberapa situs blog dan sobat mungkin berpikir tentang cara membuat efek klik ripple itu ke situs sobat. jadi dalam tutorial ini, kita akan membuat efek klik ripple di blog.

Ketika pengunjung mengklik dimana saja maka akan muncul efek ripple dimana pengunjung mengklik. Ini mungkin mempercantik tampilan situs blog atau web sobat dan pengunjung mungkin bertanya kepada sobat bagaimana cara membuanya. Dengan mengikuti tutorial ini sobat dapat dengan mudah membuatnya sendiri.

untuk melihat demonya silakan klik tombol demo di bawah ini.

Demo

Membuat Efek Klik Ripple di Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Silahkan sobat cari kode </head> atau <!--<head/>-></head> dan pastekan kode jquery dibawah ini tepat DIATAS kode tersebut.

<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

4. Kemudian sobat cari kode berikut ini ]]></b:skin> atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

.clicker {width:60px;height:60px;margin-left:-30px;margin-top:-30px;background:#204ecf;border-radius:100%;position:absolute;transform:scale(0);opacity:.3;-ms-filter:none;filter:none;z-index:9999;pointer-events:none}.darkMode .clicker{background:#fff}.clicker.is-active{opacity:0;-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';filter:alpha(opacity=0);transition:opacity 900ms ease,transform 900ms ease;transform:scale(1)}

5. Selanjutnya sobat cari kode </body> atau </body> dan tambahkan javascript dibawah ini tepat DIATAS kode tersebut

<script>
/*<![CDATA[*/ 
(function(){var i=function(n,t){return window.setTimeout(t,n)},o={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},e=function(n,t){var i,o="touchstart"===n.type.toLowerCase();switch(t){case"top":i="pageY";break;case"left":i="pageX"}return(o?n.originalEvent.touches[0]:n)[i]};$(document).on("mousedown touchstart",function(n){var t=$('<div class="clicker"></div>');return t.css({left:e(n,"left"),top:e(n,"top")}),$("body").append(t),i(0,function(){return t.on(o[Modernizr.prefixed("transition")],function(){return t.remove()}),t.addClass("is-active")})})}).call(this); 
/*]]>*/
</script>

6. Silahkan Sobat SIMPAN TEMA.

Nah, itulah tutorial Cara Membuat Efek Klik Ripple di Blogger atau Web Menggunakan Javascript. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Cara Membuat Anti Bom Klik Adsanse Terbaru Di Blogger

2022-08-14T15:08:00.005-07:00

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat anti bom klik adsanse terbaru di blogger , Untuk sobat yang berprofesi sebagai seorang publisher google adsense mungkin sering mendengar istilah bom klik, invalid click atau klik tidak sah. Bom klik iklan merupakan tindakan sangat murugikan bagi publisher adsense. Bom klik adsense sangat dikuwatirkan para publisher google adsense.

Memasang script anti bom klik iklan adsense di blog sangat disarankan untuk blog sobat yang sudah dimonetize Adsense. Script anti boom click adsense ini ampuh untuk mengatasi dari tindakan bom klik yang secara sengaja atau pun tidak disengaja.

ok buat sobat yang ingin mencobanya mari simak caranya di bawah ini.

Membuat anti bom klik iklan adsense di Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Kemudian sobat cari kode berikut ini ]]></b:skin> atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

.disabled{pointer-events:none}.hidden{display:none}

4. Selanjutnya sobat cari kode </body> atau </body> dan tambahkan javascript dibawah ini tepat DIATAS kode tersebut

<script>
//<![CDATA[
/* anti bom click  Iklan*/
var aksiAds = "disabled"; // disabled iklan akan tetap tampil tetapi tidak dapat di klik, ubah menjadi (hidden) jika iklan ingin di sebunyikan
var maxClick = 2; // maximal klik
var adsCookieEx = 1; // cookie akan expired dalam 1 jam bisa di ubah 1 - 24
function ASSetCookie(a,b,c){if (c){var d = new Date();d.setTime(d.getTime() + adsCookieEx * 3600 * 1000);var e = ";expires=" + d.toGMTString()}else{var e = ""}document.cookie = a + "=" + b + e + ";path=/"}function ASGetCookie(a){var b,c,d,e = document.cookie.split(";");for (b = 0;b < e.length;b++) if (c = e[b].substr(0,e[b].indexOf("=")),d = e[b].substr(e[b].indexOf("=") + 1),c = c.replace(/^\s+|\s+$/g,""),c == a) return unescape(d)}function ASSetCookieAds(a,b){var c = ASGetCookie(a);void 0 != c && "" != c ? (ASTheCookieInt = parseInt(c) + 1,ASSetCookie(a,ASTheCookieInt.toString(),0)):ASSetCookie(a,"1",b)}function ASMaxClick(a,b){var c = ASGetCookie(a);return void 0 != c && parseInt(c) >= b ? !0:!1}jQuery(document).ready(function(a){var b = "adsbygoogle",c = 7,d = maxClick,e = ".adsbygoogle",f = !1;ASMaxClick(b,d) && a(e).addClass(aksiAds).click(false),a(e).bind("mouseover",function(){f = !0}).bind("mouseout",function(){f = !1}),a(window).on("beforeunload",function(){f && (ASMaxClick(b,d) ? a(e).addClass(aksiAds).click(false):ASSetCookieAds(b,c))})});
//]]>
</script>

maxClick = 2 - Jumlah maksimum klik, dan akan dimuat kembali setelah 1 jam
adsCookieEx = 1 - Memuat ulang waktu dalam 1 Jam bisa di ubah 1 - 24

5. Silahkan Sobat SIMPAN TEMA.

Nah, itulah tutorial Cara Membuat Anti Bom Klik Adsanse Terbaru di Blogger atau Wodpress Menggunakan Javascript. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Cara Membuat Fitur Reaksi Dengan Lazy Load Di Blogger

2022-08-14T03:05:00.001-07:00

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat fitur reaksi dengan lazy load di blogger , saat ini fitur rating bintang dari Paket Widget sedang down dan jika sobat sedang mencari alternatif maka tutorial ini tepat untuk kalian, kali ini bukan peringkat bintang, bukan itu, para pengguna dapat bereaksi melalui emoji bahwa dengan bantuan ShareThis yang merupakan alternatif seperti WhatsApp, Telegram seperti fitur reaksi, fitur reaksi Ini juga tidak mempengaruhi kecepatan blog sobat.

Membuat Fitur Reaksi Dengan Lazy Load

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Kemudian sobat cari kode berikut ini ]]></b:skin> atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

.sharethis-inline-reaction-buttons{display:flex;max-width:400px;padding:10px 17px;line-height:25px;background:#fffdfc;border-radius:5px;box-shadow:0 10px 25px -3px rgba(0,0,0,.1);font-size:16px;font-family:inherit;color:#08102b;text-align:center}.drK .sharethis-inline-reaction-buttons{box-shadow:none; background:#2d2d30}

4. Silahkan sobat cari <data:post.body/> dan tambahkan kode html dibawah ini tepat DIBAWAH kode <data:post.body/>.

<b:if cond='data:view.isPost'>

<div class='sharethis-inline-reaction-buttons'/>

</b:if>

5. Setelah itu sobat cari kode </body> atau </body> dan tambahkan javascript dibawah ini tepat DIATAS kode tersebut

<script>/*<![CDATA[*//* ShareThis (LazyLoad) */ var lazyReact = false; window.addEventListener('scroll', function(){if ((document.documentElement.scrollTop != 0 && lazyReact === false) || (document.body.scrollTop != 0 && lazyReact === false)) { (function() { var ad = document.createElement('script'); ad.setAttribute('type','text/javascript'); ad.async = true; ad.src = 'https://platform-api.sharethis.com/js/sharethis.js#property=6100ee7d3b1d5d001213a440&product=inline-reaction-buttons'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyReact = true; }}, true); 

/*]]>*/</script>

sobat bisa mengganti nomor id properti yang ditandai dengan id properti reaksi sharethis.com milik sobat

6. Silahkan SIMPAN TEMA dan Selesai.

Nah, itulah tutorial Cara Membuat Fitur Reaksi Dengan Lazy Load di Blogger Menggunakan script sharethis.com . Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Cara Membuat Teks Dummy Seperti Jagoan Desain di Blogger

2022-06-16T05:10:00.009-07:00

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat teks dummy seperti jagoan desain di blogger , Untuk sobat yang berprofesi sebagai seorang designer, pasti sering mengalami keadaan dimana memerlukan teks sementara untuk bahan design layout. Bisa dikarenakan teks aslinya belum ada atau hanya untuk sekedar contoh.

Daftar Isi Membuat Teks Dummy CSS Teks Dummy Cara pengunaan Teks Dummy

Dummy Text bisa menjadi solusinya. disini admin tidak merekomendasikannya untuk digunakan sebagai pengganti artikel tetapi sobat dapat menggunakannya untuk menampilkan demo widget atau kode sobat.

Membuat Teks Dummy Seperti Jagoan Desain di Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Kemudian sobat cari kode berikut ini ]]></b:skin> atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* Dummy text  */
.duta_dummy{display:block}
.duta_dummy i{display:block;height:16px;margin-bottom:8px;background:#f2f1f7;border-radius:30px;}
.duta_dummy i.img{margin:0 auto;max-width:85%;height:180px;border-radius:10px}
.dummy-header{position:relative;background:#fff;border-radius:6px;padding:15px 15px;box-shadow:0 2px 4px 0 rgba(0,0,0,.05)}
.dummy-header .flex{display:flex;display:-webkit-flex}
.dummy-header .flex i{width:60px;margin:0 10px 0 0}
.dummy-header .flex i:last-child{margin:0}
.drK .duta_dummy i{background:#252526;}

4. Selanjutnya Sobat SIMPAN TEMA.

5.Sekarang buka posting atau halaman yang ingin sobat tambahkan teks dummy dan pilih menu HTML bukan COMPOSE, Pastekan kode dibawah ini di halaman HTML.

<p class="duta_dummy">
  <i style="margin-left: 10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width: 30%;"></i>
</p>
<p class="duta_dummy">
  <i style="margin-left: 10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width: 30%;"></i>
</p>
<p class="duta_dummy">
  <i style="margin-left: 10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width: 30%;"></i>
  </p>

6. Silahkan sobat klik PUBLIKASIKAN dan Selesai.

Diatas, itu adalah tutorial Cara Membuat Teks Dummy Seperti Jagoan Desain di Blogger. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Cara Membuat Rating Bintang di Blogger

2022-06-16T02:15:00.004-07:00

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat rating bintang di blogger . apa keuntungan menggunakan widget rating Bintang ini?

Daftar Isi

Pengunjung situs web, dapat menilai artikel sobat ,dan sobat bisa mengetahui seberapa besar mereka menyukai artikel sobat. widget rating bintang ini dibuat menggunakan script widgetpack.com. Ini akan berfungsi ketika pengunjung menyentuh icon bintang contoh pengunjung menyentuh bintang 5 maka artikel mendapat 5 bintang jika pengunjung menyentuh bintang 4 artikel akan mendapatkan 4 bintang.

Membuat Rating Bintang di Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Kemudian sobat cari kode berikut ini ]]></b:skin> atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* Rating Bintang */
.dutaRate{display:none;padding:30px 0 10px 0}
.dutaRateC{display:flex;max-width:400px;margin-top:30px;padding:25px 17px;line-height:25px;background:#fff;border-radius:5px;box-shadow:0 5px 35px rgba(149,157,165,.3);font-size:16px;font-family:inherit;color:#08102b;text-align:center;justify-content:center}
.dutaRateC .ld{display:inline-flex;align-items:center;font-size:13px;opacity:.8}
.dutaRateC .ld svg{width:18px;height:18px;margin-right:5px;stroke:none !important;fill:#08102b}
.dutaRateS{background:#fff;position:absolute}
.darkMode .dutaRateC, .darkMode .dutaRateS{background:#252526}
.darkMode .dutaRateC{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe}
.darkMode .dutaRateC .ld svg{fill:#fefefe}

4. Silahkan sobat cari <data:post.body/> dan tambahkan kode html dibawah ini tepat DIBAWAH kode <data:post.body/>.

<!--Rating Bintang-->
<b:if cond='data:view.isPost'>    
<div class='dutaRate' id='pRating'>
<div class='dutaRateC'>
<div class='ld'><svg viewBox='0 0 50 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'/></path></svg>Please wait...</div>
<div class='dutaRateS' id='wpac-rating'/></div></div>
</b:if>

5. Setelah itu sobat cari kode </body> atau </body> dan tambahkan javascript dibawah ini tepat DIATAS kode tersebut

<b:if cond='data:view.isPost'>
  <script>/*<![CDATA[*/ /* Rating Bintang Script (Lazyload) */ var lazyrs=!1;window.addEventListener('scroll',function(){(0!=document.documentElement.scrollTop&&!1===lazyrs||0!=document.body.scrollTop&&!1===lazyrs)&&(!function(){wpac_init=window.wpac_init||[],wpac_init.push({widget:'Rating',id:33379}),function(){var t,e;'WIDGETPACK_LOADED'in window||(WIDGETPACK_LOADED=!0,(t=document.createElement('script')).type='text/javascript',t.async=!0,t.src='https://cdn.widgetpack.com/widget.js',(e=document.getElementsByTagName('script')[0]).parentNode.insertBefore(t,e.nextSibling))}();document.querySelector('#pRating').style.display='block';}(),lazyrs=!0)},!0); /*]]>*/</script>
</b:if>

6. Silahkan SIMPAN TEMA dan Selesai.

Nah, itulah tutorial Cara Membuat Widget Rating Bintang di Blogger Menggunakan script widgetpack.com . Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Cara Nonaktifkan Fungsi Klik Kanan di Blog Menggunakan Javascript

2022-06-14T04:52:00.001-07:00

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara nonaktifkan fungsi klik kanan di blog menggunakan javascript, script anti klik kanan bisa digunakan pada blog maupun website wordpress, script ini berfungsi mematikan klik kanan di setiap halaman di blog.

Perlu diketahui ketika sobat melakukan klik kanan pada sebuah halaman situs disana sobat bisa melakukan copy paste, print, save as, view page source, inspect element, dan lainnya. menggunakan skrip anti klik kanan bertujuan agar menjaga artikel yang ada pada blog sobat tidak dapat di copas. script ini dibuat menggunakan javascript

Nonaktifkan Fungsi Klik Kanan di Blog Menggunakan Javascript

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Kemudian sobat cari kode berikut ini ]]></b:skin> atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.


<script type='text/javascript'>
var message="Sorry can't right click";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&amp;&amp;!document.all){if (e.which==2||e.which==3){alert(message);return false;}}} if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;} else if (document.all&amp;&amp;!document.getElementById){document.onmousedown=clickIE4;} document.oncontextmenu=new Function("alert(message);return false")</script>

Sobat dapat mengganti Sorry can't right click dengan teks yang sobat inginkan.

4. Selanjutnya Sobat SIMPAN TEMA.

Nah, itulah tutorial Cara Nonaktifkan Fungsi Klik Kanan di Blogger atau Wodpress Menggunakan Javascript. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Cara Membuat Syntax Highlinter Artikel Seperti Igniel di Blogger

2022-06-14T01:09:00.003-07:00

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat syntax highlinter artikel seperti igniel di blogger menggunakan css, apakah sobat sudah tau apa yang dimaksud dengan Syntax Highlighter?

Syntax Highlighter adalaha editor teks yang digunakan menulis markup kode pada suatu halaman web koding, ini bertujuan untuk memudahkan pembaca memahami keselurahan kodenya. pada tutorial kali ini admin hanya akan membuat satu warna saja dan dibuat menggunakan CSS. jika sobat ingin memasangnya silahkan ikuti tutorialnya di bawah ini.

Membuat Syntax Highlinter Artikel Seperti Igniel Di Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Kemudian sobat cari kode berikut ini ]]></b:skin> atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

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

4. Selanjutnya Sobat SIMPAN TEMA.

5. Cara pemasangan syntax highlighter di artikel sobat.

<pre class="html"><code>

<!-- Masukkan  kode HTML sobat disini -->

</code></pre>

<pre class="css"><code>

<!-- Masukkan  kode CSS sobat disini -->

</code></pre>

<pre class="javascript"><code>

<!-- Masukkan  kode Javascript sobat disini -->

</code></pre>


<pre class="jquery"><code>

<!-- Masukkan  kode JQuery sobat disini -->

</code></pre>

Jika sobat memasang kode HTML atau JAVASCRIPT di syntax highlighter,kode harus diparse terlebih dahulu

Diatas, itu adalah tutorial Cara Membuat Syntax Highlinter Artikel Seperti Igniel di Blogger Menggunakan CSS. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Cara Membuat Artikel Tidak Bisa Di Copypaste Blogger

2022-06-13T02:03:00.010-07:00

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat artikel tidak bisa di copypaste di blogger menggunakan css. sobat bisa diterapkan pada bagian blockquote, pre, code, kebanyakan blogger umumnya menggunakan bagian tersebut untuk menyimpan berbagai macam kode script baik itu HTML, CSS, JavaScript, PHP dan sebagainya. oleh karenanya kita bisa memasang kode css untuk mengaktifkan fungsi seleksi pada bagian tertentu di blog sobat. Kode ini tidak akan berpengaruh pada loading blog karena hanya menggunakan css saja dan ukurannya sangat kecil bahkan saya katakan tidak akan mempengaruhi loading blog sovat menjadi lambat.

Membuat Artikel Tidak Bisa Di Copypaste Blogger Menggunakan CSS

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Kemudian sobat cari kode berikut ini ]]></b:skin> atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

.post blockquote,.post pre,.post code{
  -webkit-touch-callout:text;
  -webkit-user-select:text;
  -khtml-user-select:text;
  -ms-user-select:text;
  -moz-user-select:text;
}

Sobat dapat menyesuaikannya dengan kode class yang ada pada template blog sobat.

4. Selanjutnya Sobat SIMPAN TEMA

Nah, itulah tutorial Cara Membuat Artikel Tidak Bisa Di Copypaste Blogger Menggunakan CSS. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Cara Membuat Widget Bookmark Di Blogger

2022-03-02T21:46:00.009-08:00

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat widget bookmark di blogger dengan adanya widget bookmark ini mungkin akan berguna untuk pengunjung blog, agar ketika pengunjung ingin membacanya kembali tidak susah mencari artikelnya lagi.

bookmark ini menggunakan localstorage artinya artikel yang di bookmark tidak akan terhapus kecuali pengunjung blog menghapus cookie browser mereka.

Membuat Widget Bookmark Di Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Jika template sobat belum ada Jquery, Pasanglah Jquery terlebih dahulu dengan meletakkan kode dibawah ini tepat diatas </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

4. Cari kode berikut ini ]]></b:skin> atau </style> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.


/* css bookmark */
svg.line{width:22px;height:22px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round; stroke-width:1}
.pop-area::-webkit-scrollbar{display:none}
.pop-area{display:flex!important;width:100%;height:100%;position:fixed;top:0;left:0;background:rgb(0 0 0 / 51%);visibility:hidden;opacity:0;transition:all 0.25s ease-in-out;z-index:999999;overflow-y:scroll}
.pop-area.open{opacity:1;visibility:visible}
.pop-area .pop-html{background:#fff;padding-bottom:10px;display:block;margin:auto auto;width:calc(100% - 20px);max-width:500px;visibility:hidden;opacity:0;overflow:hidden;transition:all 0.5s ease-in-out;transform:scale(.5);border-radius:7px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}
.pop-area.open .pop-html{opacity:1;transform:scale(1);visibility:visible}
.pop-area .head-pop:after{content:"Bookmark";color:#fefefe;font-weight:bold}
.pop-area .head-pop{width:-webkit-fill-available;padding:12px 30px;overflow:hidden;background:#017CFD}
.pop-area .close-btn{float:right;cursor:pointer;fill:#7e7e7e;color:#fefefe;font-weight:bold}
.pop-area .body-content{padding:10px}
.pop-area .text-center{display:grid;text-align:center;grid-gap:15px}
.pop-area .text-center svg{margin:0 auto}
.pop-area .btn.btn-outline-info{width:fit-content;margin:0 auto;text-decoration:none}
.pop-area .table:hover{border-color:#017CFD}
.pop-area .table{transition:all .3s;width:100%;border:1px solid rgba(155,155,155,0.15);border-radius:7px;margin:5px 0;padding:5px}
.pop-area .table img{border-radius:4px;width:auto}
.pop-area .table a:hover,.night .pop-area .table a:hover{color:#017CFD}
.pop-area .table a{text-decoration:none;color:#08102b}
.pop-area .img-left{width:150px}
.pop-area .item-left{padding-right:10px}
.pop-area .btn-remove{cursor:pointer}
.show-bookmark{font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;color:var(--bodyC);position:absolute;top:-5px;right:0;z-index:2}
.pop-area .counterStat{color:white;font-size:16px}

/* css darkmode */
.night .pop-area.open .pop-html,.night .pop-area .body-content,.night .pop-area .table a{background-color:#1e1e1e;color:#fefefe}

5. Setelah itu silahkan cari kode </header> dan letakkan kode dibawah ini tepat di atasnya.


<!-- tombol buka bookmark -->
<div class='buka-tutup'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z'></path></g></svg>
<span class='show-bookmark'></span>
</div>

6. Kemudian letakkan kode di bawah ini tepat di atas kode <data:post.body/>


<div class='hartomy-bookmark-btn' data-quantity='1' expr:data-borkimage='resizeImage(data:post.featuredImage, 400, &quot;16:9&quot;)' expr:data-id='data:post.id' expr:data-link='data:post.url' expr:data-title='data:post.title'><svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z'></path><line transform='translate(-4.500000, -2.500000)' x1='12' x2='12' y1='6' y2='12'></line><line transform='translate(-4.500000, -2.500000)' x1='15' x2='9' y1='9' y2='9'></line></g></svg>
</div>

7. Silahkan letakkan Javascript di bawah ini tepat di atas kode </body>


<script>//<![CDATA[
//Silahkan https://www.dutabloger.my.id ganti dengan url blog  Sobat
var massgEmpty="Daftar Artikel Favorit Belum Ada",articleLabel="Semua konten",link_articleLabel="https://www.dutabloger.my.id/search";!function($){"use strict";var OptionManager=(objToReturn={},defaultOptions={bookmarkIcon:"bookmarkIcon",bookmarkBadge:"show-bookmark",articleQuantity:"article-quantity",affixBookmarkIcon:!0,showBookmarkModal:!0,clickOnAddToBookmark:function(t){},clickOnbookmarkIcon:function(t,e){}},objToReturn.getOptions=function(t){var e=$.extend({},defaultOptions);return"object"==typeof t&&$.extend(e,t),e},objToReturn),objToReturn,defaultOptions,articleManager=function(){var t={};localStorage.konten=localStorage.konten?localStorage.konten:"";var e=function(t){localStorage.konten=JSON.stringify(t)},a=function(){try{return JSON.parse(localStorage.konten)}catch(t){return[]}},o=function(t,o){var n=function(t){var e=-1,o=a();return $.each(o,function(a,o){o.id!=t||(e=a)}),e}(t);if(n<0)return!1;var r=a();return r[n].quantity=void 0===o?r[n].quantity:o,e(r),!0};return t.getAllkonten=a,t.updatePoduct=o,t.setarticle=function(t,n,r,i,c,l){return void 0===t?(console.error("id required"),!1):void 0===n?(console.error("title required"),!1):void 0===r?(console.error("link required"),!1):void 0===l?(console.error("borkimage required"),!1):(i=void 0===i?"":i,void(o(t)||function(t,o,n,r,i,c){var l=a();l.push({id:t,title:o,link:n,summary:r,quantity:i,borkimage:c}),e(l)}(t,n,r,i,c,l)))},t.cleararticle=function(){e([])},t.removearticle=function(t){var o=a();o=$.grep(o,function(e,a){return e.id!=t}),e(o)},t.getTotalQuantity=function(){var t=0,e=a();return $.each(e,function(e,a){t+=a.quantity}),t},t}(),loadBookmarkEvent=function(t){var e=OptionManager.getOptions(t),a=$("."+e.bookmarkIcon),o=$("."+e.bookmarkBadge),n=e.articleQuantity;o.text(articleManager.getTotalQuantity()),$("#cart-modal").length||$("body").append('<div class="pop-area" id="cart-modal"><div class="pop-html"><div class="head-pop"><a class="close-btn buka-tutup">X</a></div><div class="body-content"><span class="table-responsive" id="cart-table"></span></div></div></div>');var r=function(){var t=$("#cart-table");t.empty();var e=articleManager.getAllkonten();$.each(e,function(){t.append('<table class="table"><tbody><tr title="'+this.summary+'" data-id="'+this.id+'"><td class="item-left img-left"><img width="60px" height="60px" src="'+this.borkimage+'"/></td><td class="item-left"><a href="'+this.link+'">'+this.title+'</a></td><td class="item-left" title="Remove favorit" class="text-center" style="width: 30px;"><a class="btn-remove"><svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="translate(3.500000, 2.000000)"><path d="M15.3891429,7.55409524 C15.3891429,15.5731429 16.5434286,19.1979048 8.77961905,19.1979048 C1.01485714,19.1979048 2.19295238,15.5731429 2.19295238,7.55409524"></path><line x1="16.8651429" y1="4.47980952" x2="0.714666667" y2="4.47980952"></line><path d="M12.2148571,4.47980952 C12.2148571,4.47980952 12.7434286,0.714095238 8.78914286,0.714095238 C4.83580952,0.714095238 5.36438095,4.47980952 5.36438095,4.47980952"></path></g></svg></a></td></tr></tbody></table>')}),t.append(e.length?"":'<div role="alert" id="cart-empty-message"><div class="text-center"><svg width="80" height="80" viewBox="0 0 24 24"><path d="M19,2L14,6.5V17.5L19,13V2M6.5,5C4.55,5 2.45,5.4 1,6.5V21.16C1,21.41 1.25,21.66 1.5,21.66C1.6,21.66 1.65,21.59 1.75,21.59C3.1,20.94 5.05,20.5 6.5,20.5C8.45,20.5 10.55,20.9 12,22C13.35,21.15 15.8,20.5 17.5,20.5C19.15,20.5 20.85,20.81 22.25,21.56C22.35,21.61 22.4,21.59 22.5,21.59C22.75,21.59 23,21.34 23,21.09V6.5C22.4,6.05 21.75,5.75 21,5.5V7.5L21,13V19C19.9,18.65 18.7,18.5 17.5,18.5C15.8,18.5 13.35,19.15 12,20V13L12,8.5V6.5C10.55,5.4 8.45,5 6.5,5V5Z" fill="#017CFD"/></svg><center>'+massgEmpty+'</center><a class="btn btn-outline-info m-2" href="'+link_articleLabel+'">'+articleLabel+"</a></div></div>")};if(e.affixBookmarkIcon){var i=1*a.offset().top+1*a.css("height").match(/\d+/);$(window).scroll(function(){$(window).scrollTop()>=i?a.addClass("bookmarkIcon-affix"):a.removeClass("bookmarkIcon-affix")})}a.click(function(){e.showBookmarkModal?r():e.clickOnbookmarkIcon(a,articleManager.getAllkonten())}),$(document).on("keypress","."+n,function(t){38!=t.keyCode&&40!=t.keyCode&&t.preventDefault()}),$(document).on({click:function(){var t=$(this).closest("tr"),e=t.data("id");t.hide(500,function(){articleManager.removearticle(e),r(),o.text(articleManager.getTotalQuantity())})}},".btn-remove")};$(document).on({click:function(){return $(".pop-area").toggleClass("open"),!1}},".buka-tutup"),$(function(){var goTohartomyBookmark=function(t){};eval(function(t,e,a,o,n,r){if(n=function(t){return(t<58?"":n(parseInt(t/58)))+((t%=58)>35?String.fromCharCode(t+29):t.toString(36))},!"".replace(/^/,String)){for(;a--;)r[n(a)]=o[a]||n(a);o=[function(t){return r[t]}],n=function(){return"\\w+"},a=1}for(;a--;)o[a]&&(t=t.replace(new RegExp("\\b"+n(a)+"\\b","g"),o[a]));return t}('q h=["\\B\\e\\M","\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f","\\x\\y\\f\\g\\C\\k\\y\\k\\y\\F","\\N\\z\\g\\i\\k\\e\\j\\G\\C\\x\\e\\e\\f\\j\\g\\i\\f\\C\\x\\k\\m","\\H\\z\\A\\r\\k","\\F\\y\\H\\z","\\s\\t\\s","\\s\\t\\O","\\s\\t\\P","\\z\\g\\i\\k\\e\\j\\G\\n\\e\\e\\f\\j\\g\\i\\f","\\s\\t\\Q"];q D=[h[0],h[1],h[2],h[3]];(o(b,c){q d=o(a){R(--a){b[h[5]](b[h[4]]())}};d(++c)}(D,S));q u=o(a,b){a=a-I;q c=D[a];T c};$(u(h[U]))[h[9]]({\'\\x\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':u(h[6]),\'\\g\\r\\r\\A\\t\\n\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':!I,\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)},\'\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){V[u(h[8])](u(h[7]),a)},\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)}})',0,58,"||||||||||||||x6F|x6B|x61|_0x6a0a|x72|x6D|x74|x64|x6E|x42|function|x63|var|x66|x30|x78|_0x3889|x41|x4F|x62|x75|x68|x69|x6C|x2D|_0x4117|x65|x70|x79|x73|0x0|x49|x54|goTohartomyBookmark|x67|x2E|x33|x32|x31|while|0xd6|return|10|console".split("|"),0,{}))});var MyBookmark=function(t,e){var a=$(t),o=OptionManager.getOptions(e),n=$("."+o.bookmarkBadge);a.click(function(){o.clickOnAddToBookmark(a);var t=a.data("id"),e=a.data("title"),r=a.data("link"),i=a.data("summary"),c=a.data("quantity"),l=a.data("borkimage");articleManager.setarticle(t,e,r,i,c,l),n.text(articleManager.getTotalQuantity())})};$.fn.hartomyBookmark=function(t){return loadBookmarkEvent(t),$.each(this,function(){new MyBookmark(this,t)})}}(jQuery);
//]]></script>

8. Simpan dan lihat hasilnya.

Nah, itulah tutorial Cara Membuat Widget Bookmark Di Blogger. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah ini. Terima kasih, jangan lupa dishare ya sobat: