RAQYSA

Asmaa'ul Husna

2022-03-12T07:50:00.000+07:00

Asmaa'ul Husna - الله Alloh Subhaanahuu wa Ta'alaa

Dalam agama Islam, Asmaa'ul husna adalah Nama-ama dan Sifat الله Alloh Subhanahuu wa Ta'ala yang Maha Baik lagi Maha Indah.

Sejak dulu para ulama telah banyak membahas dan menafsirkan nama-nama ini, karena nama-nama الله Alloh adalah alamat kepada Dzat yang mesti kita ibadahi dengan sebenarnya. Meskipun timbul perbedaan pendapat tentang arti, makna, dan penafsirannya akan tetapi yang jelas adalah kita tidak boleh musyrik dalam mempergunakan atau menyebut nama-nama الله Alloh Subhanahuu wa Ta'ala.

Selain perbedaaan dalam mengartikan dan menafsirkan suatu nama terdapat pula perbedaan jumlah nama, ada yang menyebut 99, 100, 200, bahkan 1.000 bahkan 4.000 nama, namun menurut mereka, yang terpenting adalah hakikat Dzat الله Alloh Alloh Subhanahuu wa Ta'ala yang harus dipahami dan dimengerti oleh orang-orang yang beriman seperti Nabi Muhammad Sollalloohu 'Alayhi wa Sallaam

Asmaa'ul husna secara harfiah adalah nama-nama, sebutan, gelar الله Alloh yang Maha Baik dan Maha Agung dan melekat Sifat-sifat-Nya. Nama-nama الله Alloh yang Maha Agung dan Maha Mulia itu merupakan suatu kesatuan yang menyatu dalam Kebesaran dan Kehebatan milik الله Alloh.

"Katakanlah: "Dia-lah الله Alloh, Yang Maha Esa. الله Alloh adalah Tuhan , kepada-Nya segala sesuatu bergantung. Dia tiada beranak dan tiada pula diperanakkan, dan tidak ada seorang pun yang setara dengan Dia". (QS. Al-Ikhlas : 1-4)

Para ulama menekankan bahwa الله Alloh adalah sebuah nama kepada Dzat yang pasti ada namanya. Semua nilai kebenaran mutlak hanya ada (dan bergantung) pada-Nya. Dengan demikian, الله Alloh Yang Memiliki Maha Tinggi. Tapi juga الله Alloh Yang Memiliki Maha Dekat. الله Alloh Memiliki Maha Kuasa dan juga الله Alloh Maha Pengasih dan Maha Penyayang. Sifat-sifat الله Alloh dijelaskan dengan istilah Asmaaul Husna, yaitu nama-nama, sebutan atau gelar yang baik.

Nama-nama dan Sifat الله Alloh Subhanahuu wa Ta'ala

Diantaranya :

No.	Nama	Arab	Indonesia
	Alloh	الله	Alloh
1	Ar Rohman	الرحمن	Yang Maha Pemurah
2	Ar Rohiim	الرحيم	Yang Maha Penyayang
3	Al Malik	الملك	Yang Maha Merajai/Memerintah
4	Al Quddus	القدوس	Yang Maha Suci
5	As Salaam	السلام	Yang Maha Memberi Kesejahteraan
6	Al Mu`min	المؤمن	Yang Maha Memberi Keamanan
7	Al Muhaimin	المهيمن	Yang Maha Pemelihara
8	Al `Aziiz	العزيز	Yang Maha Perkasa
9	Al Jabbaar	الجبار	Yang Memiliki Mutlak Kegagahan
10	Al Mutakabbir	المتكبر	Yang Maha Megah, Yang Memiliki Kebesaran
11	Al Khooliq	الخالق	Yang Maha Pencipta
12	Al Baari`	البارئ	Yang Maha Melepaskan (Membuat, Membentuk, Menyeimbangkan)
13	Al Mushowwir	المصور	Yang Maha Membentuk Rupa (makhluknya)
14	Al Ghoffaar	الغفار	Yang Maha Pengampun
15	Al Qohhaar	القهار	Yang Maha Memaksa
16	Al Wahhaab	الوهاب	Yang Maha Pemberi Karunia
17	Ar Rozzaaq	الرزاق	Yang Maha Pemberi Rezeki
18	Al Fattaah	الفتاح	Yang Maha Pembuka Rahmat
19	Al `Aliim	العليم	Yang Maha Mengetahui (Memiliki Ilmu)
20	Al Qoobidh	القابض	Yang Maha Menyempitkan (makhluknya)
21	Al Baasith	الباسط	Yang Maha Melapangkan (makhluknya)
22	Al Khoofidh	الخافض	Yang Maha Merendahkan (makhluknya)
23	Ar Roofi`	الرافع	Yang Maha Meninggikan (makhluknya)
24	Al Mu`izz	المعز	Yang Maha Memuliakan (makhluknya)
25	Al Mudzil	المذل	Yang Maha Menghinakan (makhluknya)
26	Al Samii`	السميع	Yang Maha Mendengar
27	Al Bashiir	البصير	Yang Maha Melihat
28	Al Hakam	الحكم	Yang Maha Menetapkan
29	Al `Adl	العدل	Yang Maha Adil
30	Al Lathiif	اللطيف	Yang Maha Lembut
31	Al Khobiir	الخبير	Yang Maha Mengenal
32	Al Haliim	الحليم	Yang Maha Penyantun
33	Al `Azhiim	العظيم	Yang Maha Agung
34	Al Ghofuur	الغفور	Yang Maha Pengampun
35	As Syakuur	الشكور	Yang Maha Pembalas Budi (Menghargai)
36	Al `Aliy	العلى	Yang Maha Tinggi
37	Al Kabiir	الكبير	Yang Maha Besar
38	Al Hafiizh	الحفيظ	Yang Maha Memelihara
39	Al Muqiit	المقيت	Yang Maha Pemberi Kecukupan
40	Al Hasiib	الحسيب	Yang Maha Membuat Perhitungan
41	Al Jaliil	الجليل	Yang Maha Luhur
42	Al Kariim	الكريم	Yang Maha Mulia
43	Ar Roqiib	الرقيب	Yang Maha Mengawasi
44	Al Mujiib	المجيب	Yang Maha Mengabulkan
45	Al Waasi`	الواسع	Yang Maha Luas
46	Al Hakiim	الحكيم	Yang Maha Maka Bijaksana
47	Al Waduud	الودود	Yang Maha Mengasihi
48	Al Majiid	المجيد	Yang Maha Mulia
49	Al Baa`its	الباعث	Yang Maha Membangkitkan
50	As Syahiid	الشهيد	Yang Maha Menyaksikan
51	Al Haqq	الحق	Yang Maha Benar
52	Al Wakiil	الوكيل	Yang Maha Memelihara
53	Al Qowiyyu	القوى	Yang Maha Kuat
54	Al Matiin	المتين	Yang Maha Kokoh
55	Al Waliyy	الولى	Yang Maha Melindungi
56	Al Hamiid	الحميد	Yang Maha Terpuji
57	Al Muhshii	المحصى	Yang Maha Mengalkulasi (Menghitung Segala Sesuatu)
58	Al Mubdi	المبدئ	Yang Maha Memulai
59	Al Mu`iid	المعيد	Yang Maha Mengembalikan Kehidupan
60	Al Muhyii	المحيى	Yang Maha Menghidupkan
61	Al Mumiitu	المميت	Yang Maha Mematikan
62	Al Hayyu	الحي	Yang Maha Hidup
63	Al Qoyyuum	القيوم	Yang Maha Mandiri
64	Al Waajid	الواجد	Yang Maha Penemu
65	Al Maajid	الماجد	Yang Maha Mulia
66	Al Waahid	الواحد	Yang Maha Tunggal
67	Al Ahad	الاحد	Yang Maha Esa
68	As Shomad	الصمد	Yang Maha Dibutuhkan, Tempat Meminta
69	Al Qoodir	القادر	Yang Maha Menentukan, Maha Menyeimbangkan
70	Al Muqtadir	المقتدر	Yang Maha Berkuasa
71	Al Muqoddim	المقدم	Yang Maha Mendahulukan
72	Al Mu`akh khir	المؤخر	Yang Maha Mengakhirkan
73	Al Awwal	الأول	Yang Maha Awal
74	Al Akhir	الأخر	Yang Maha Akhir
75	Az Zhoohir	الظاهر	Yang Maha Nyata
76	Al Baathin	الباطن	Yang Maha Ghaib
77	Al Waali	الوالي	Yang Maha Memerintah
78	Al Muta`aalii	المتعالي	Yang Maha Tinggi
79	Al Barru	البر	Yang Maha Penderma (Maha Pemberi Kebajikan)
80	At Tawwaab	التواب	Yang Maha Penerima Tobat
81	Al Muntaqim	المنتقم	Yang Maha Pemberi Balasan
82	Al Afuww	العفو	Yang Maha Pemaaf
83	Ar Ro`uuf	الرؤوف	Yang Maha Pengasuh
84	Maalikul Mulk	مالك الملك	Yang Maha Penguasa Kerajaan (Semesta)
85	Dzul Jalaali Wal Ikroom	ذو الجلال و الإكرام	Yang Maha Pemilik Kebesaran dan Kemuliaan
86	Al Muqsith	المقسط	Yang Maha Pemberi Keadilan
87	Al Jaamii`	الجامع	Yang Maha Mengumpulkan
88	Al Ghoniyy	الغنى	Yang Maha Kaya
89	Al Mughnii	المغنى	Yang Maha Pemberi Kekayaan
90	Al Maani'	المانع	Yang Maha Mencegah
91	Ad Dhoor	الضار	Yang Maha Penimpa Kemudharatan
92	An Naafii`	النافع	Yang Maha Memberi Manfaat
93	An Nuur	النور	Yang Maha Bercahaya (Menerangi, Memberi Cahaya)
94	Al Haadii	الهادئ	Yang Maha Pemberi Petunjuk
95	Al Badii'	البديع	Yang Maha Pencipta Yang Tiada Bandingannya
96	Al Baaqii	الباقي	Yang Maha Kekal
97	Al Waarits	الوارث	Yang Maha Pewaris
98	Ar Rosyiid	الرشيد	Yang Maha Pandai
99	As Shobuur	الصبور	Yang Maha Sabar

Disunting dengan perubahan dari sumber : https://id.wikipedia.org/wiki/Asma'ul_husna

Tabel Spesifikasi Nex Parabola Mini

2022-03-12T07:40:00.001+07:00

Spesifikasi Nex Parabola Mini

Widget tabel spesifikasi nex parabola mini.

Merk Receiver / Decoder : Nex Parabola

Ukuran Antena Parabola : 45 cm

Jenis Kabel : Kabel coaxcial

Jenis LNB : LNB Ku-Band Single

Warna Parabola : Biru/Merah/Putih/Abu-abu/Orange/Hijau

Warna Dus : Biru/Merah/Putih/Kuning/Orange/Hijau

Keterangan : Dus dan warna parabola tidak mengikat, disesuaikan stok barang yang ada.

CSS


/* table spesifikasi by www.parabola.id code ubah warna orange cari kode #f89000 */
.wc-sp{position:relative;width:100%;line-height:15px;font-family:'Noto Sans', sans-serif;font-size:12px;color:#455065;font-weight:400;background:#ebeff3;margin-top:5px;padding:12px 0 12px 70px}
.wc-sp:before{content:'';position:absolute;height:100%;width:50px;left:0;top:0;padding:10px;z-index:2}

.wc-sp.icon-stb:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M5,15.5A0.5,0.5 0 0,1 4.5,16H3.5A0.5,0.5 0 0,1 3,15.5V15H2A1,1 0 0,1 1,14V11A1,1 0 0,1 2,10H22A1,1 0 0,1 23,11V14A1,1 0 0,1 22,15H21V15.5A0.5,0.5 0 0,1 20.5,16H19.5A0.5,0.5 0 0,1 19,15.5V15H5V15.5M3,12V13H5V12H3M6,12V13H8V12H6M20.5,11.5A1,1 0 0,0 19.5,12.5A1,1 0 0,0 20.5,13.5A1,1 0 0,0 21.5,12.5A1,1 0 0,0 20.5,11.5Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000} 

.wc-sp.icon-lnb:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M5,18L8.5,13.5L11,16.5L14.5,12L19,18M5,12V10A5,5 0 0,0 10,5H12A7,7 0 0,1 5,12M5,5H8A3,3 0 0,1 5,8M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000}

.wc-sp.icon-cable:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M7.05 3.5C5.68 4.88 5.68 7.1 7.05 8.47L15.54 16.95C16.12 17.54 16.12 18.5 15.54 19.07C14.95 19.66 14 19.66 13.41 19.07L9.17 14.83L10.23 13.77L6.7 10.23L6.34 10.59L4.93 9.17C4.54 8.78 3.91 8.78 3.5 9.17L2.1 10.59C1.71 11 1.71 11.61 2.1 12L3.5 13.41L3.16 13.77L6.7 17.3L7.76 16.24L12 20.5C13.37 21.85 15.58 21.85 16.95 20.5C18.32 19.12 18.32 16.9 16.95 15.54L8.46 7.05C7.88 6.46 7.88 5.5 8.46 4.93C9.05 4.34 10 4.34 10.59 4.93L14.83 9.17L13.77 10.23L17.3 13.77L17.66 13.41L19.07 14.83C19.46 15.22 20.1 15.22 20.5 14.83L21.9 13.41C22.29 13 22.29 12.39 21.9 12L20.5 10.59L20.84 10.23L17.3 6.7L16.24 7.76L12 3.5C10.63 2.15 8.42 2.15 7.05 3.5M2.81 11.29L4.22 9.88L5.64 11.29L4.22 12.71M18.36 12.71L19.78 11.29L21.19 12.71L19.78 14.12Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000}

.wc-sp.icon-caution:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M2,3H22V13H18V21H16V13H8V21H6V13H2V3M18.97,11L20,9.97V7.15L16.15,11H18.97M13.32,11L19.32,5H16.5L10.5,11H13.32M7.66,11L13.66,5H10.83L4.83,11H7.66M5.18,5L4,6.18V9L8,5H5.18Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000}

.wc-sp.icon-color:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000}

.wc-sp.icon-size:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M10.59,12L14.59,8H11V6H18V13H16V9.41L12,13.41V16H20V4H8V12H10.59M22,2V18H12V22H2V12H6V2H22M10,14H4V20H10V14Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000}

HTML


<div class='wc-sp icon-stb'>
<b>Merk Receiver / Decoder :</b> Nex Parabola
</div>
  
<div class='wc-sp icon-size'>
<b>Ukuran Antena Parabola :</b> 45 cm
</div> 

<div class='wc-sp icon-cable'>
<b>Jenis Kabel : </b> Kabel coaxcial 
</div>

<div class='wc-sp icon-lnb'>
<b>Jenis LNB :</b> LNB Ku-Band Single
</div>

<div class='wc-sp icon-color'>
<b>Warna Parabola :</b> Biru/Merah/Putih/Abu-abu/Orange/Hijau
</div>

<div class='wc-sp icon-color'>
<b>Warna Dus :</b> Biru/Merah/Putih/Kuning/Orange/Hijau
</div>

<div class='wc-sp icon-caution'>
<b>Keterangan : </b> Dus dan warna parabola tidak mengikat, disesuaikan stok barang yang ada.
</div>

Widget Script Menghilangkan Kode ?m=1 dan ?m=0 di Blogspot

2022-02-28T10:05:00.000+07:00

Kode Script ?m=1 dan ?m=0

Cara Menghilangkan Kode ?m=1 dan ?m=0 pada URL Blogspot
Buka dashboard Blogger.

Masuk ke Tema, lalu klik
Edit HTML.
Kemudian letakkan kode berikut diatas kode </body>


<script type='text/javascript'>
var uri = window.location.toString();if (uri.indexOf("?m=1","?m=1") > 0) {var clean_uri = uri.substring(0, uri.indexOf("?m=1"));window.history.replaceState({}, document.title, clean_uri);}
</script>

Terakhir, klik Simpan.

Dan lihat perubahannya.

Demikian tutorial cara menghilangkan kode ?m=1 dan ?m=0 pada URL Blog . Semoga bermanfaat dan sukses.

Cara Membuat Widget Pop Up Flash Sale di Blog

2022-02-22T22:12:00.000+07:00

Widget Flash Sale

Widget ini sudah dioptimalisasi agar lebih mudah digunakan, beberapa setelan sudah dipindahkan ke Tata Letak, agar tidak perlu mengedit lagi di Edit HTML jika ingin merubah iklan promo.

Cara membuat widget pop up flash sale di Blogspot, sebagai berikut ,

Masuk Bloger
Tema
Edit HTML

CSS Pop Up Flash Sale

Letakkan kode di bawah ini , di atas kode ]]></b:skin>

/* pop up flash sale design by wendy code ubah warna cari kode #ff460c */
.wc-fs{background-color:rgba(0,0,0,.5);position:fixed;top:0;left:0;right:0;bottom:0;margin:0;width:100%;height:100%;overflow-y:auto;padding:10px 0;z-index:99999999999;opacity:0;display:none;transition:all 0.3s ease}
.wc-fs.show{opacity:1;display:block}
#wc-fs-widget img{width:100%;height:100%;padding:60px 0 30px 0}
#wc-fs-widget{position:absolute;top:50%;left:50%;padding:0;transform:translate(-50%,-50%);border-radius:.5rem;max-width:500px;width:90%;margin:auto;transition:all 0.3s ease}
.wc-fs #wc-fs-widget h2,.wc-fs #wc-fs-widget h3{display:none}  
.wc-fs span.wc-dw-btn{position:absolute;display:flex;bottom:2px;width:100%;border-radius:0 0 20px 20px;z-index:2}
.wc-fs .wc-dw-btn button{border:0;outline:0;padding:15px;width:100%}
.wc-fs .wc-dw-btn button.wc-fs-cl{border-bottom-left-radius:20px;background-color:#fff;color:#ff460c}
.wc-fs .wc-dw-btn button.wc-fs-op{border-bottom-right-radius:20px;background-color:#ff460c;color:#fff}
.wcfs-wkwrp{position:absolute;display:flex;align-content:center;padding:10px;width:100%;border-radius:20px 20px 0 0;top:5px;background-color:#f2f3f7;font-size:14px}
svg.wc-fs-svg{background-color:#f2f3f7;box-shadow:-3px -2px 4px rgb(255 255 255 / 90%),5px 5px 8px rgb(0 0 0 / 7%);border-radius:50%;width:30px;height:30px}
svg.wc-fs-svg path{fill:#ff460c}
.wcfs-wkwrp p.wc-fs-tks{padding:5px;font-weight:bold;color:#ff460c;margin-top:0}
#wc-fs-wk #clock span{background-color:#f2f3f7;box-shadow:-3px -2px 4px rgb(255 255 255 / 90%),5px 5px 8px rgb(0 0 0 / 7%);float:left;text-align:center;margin:5px 5px;color: #000;padding:2px 0;border-radius:5px;width:25px;box-sizing:border-box}

Kemudian copy paste kode di bawah ini, dan letakkan di atas kode </footer>

<!-- pop up flash sale design by wendy code -->
<div class='wc-fs' id='wc-fs'>
<b:section class='wc-fs-widget' id='wc-fs-widget'>
  <b:widget id='HTML2' locked='false' title='pengaturan flash sale' type='HTML' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='content'>/* bulan (wajib bahasa inggris ),tanggal,tahun,jam,menit,detik */
var wcfsWaktu = &#39;November 30, 2021 00:00:00&#39;;

/* status aktif ubah jadi off jika ingin nonaktifkan*/
var wcfsStatus = &#39;aktif&#39;;

/* waktu muncul 3 detik */
var wcfsMuncul = &#39;3000&#39;;

/* judul */
var wcfsJudul = &#39;Flash sale&#39;;

/* teks selesai */
var wcfsSelesai = &#39;Promo Berakhir!&#39;;

/* tombol kiri tutup */
var wcfsKiri = &#39;tahan aja&#39;;

/* tombol kanan buka */
var wcfsKanan = &#39;lanjut kepo!&#39;;

/* buka di tab baru aktif ubah jadi off jika ingin buka di tab yang sama*/
var wcfsNewtab = &#39;aktif&#39;;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;script&gt;
<data:content/>
&lt;/script&gt;
</div>

<b:include name='quickedit'/>
</b:includable>
  </b:widget>
  <b:widget id='Image5' locked='false' title='gambar flash sale' type='Image' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj2bU2mUUQ_yvOthWkwDRg02Hv1XmY2SyoSft-whJrCRIv3JUDLIE6rhkU6M_MnrJURublSpCfR27UM76qMWXONUHnuJZXujtmP7k5WH-vb8magRE1iA8UREOBuHebX3-UAIDx87Hp4bw/s1280/IMG_20211125_160306.JPG</b:widget-setting>
      <b:widget-setting name='displayHeight'>1280</b:widget-setting>
      <b:widget-setting name='sectionWidth'>1017</b:widget-setting>
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
      <b:widget-setting name='displayWidth'>1280</b:widget-setting>
      <b:widget-setting name='link'>https://www.choipanwendy.com/2021/11/paket-birthday.html</b:widget-setting>
      <b:widget-setting name='caption'/>
    </b:widget-settings>
    <b:includable id='main'>
  <b:include name='widget-title'/>
  <b:include name='content'/>
</b:includable>
    <b:includable id='content'>
      <span class='wc-dw-btn'><button class='wc-fs-cl' onclick='wcfsCl()' title='Close'/>
<button class='wc-fs-op' onclick='wcfsOp()' title='Open'/></span>
<div class='wcfs-wkwrp'>
<svg class='wc-fs-svg' viewBox='0 0 24 24'>
<path d='M11.5,20L16.36,10.27H13V4L8,13.73H11.5V20M12,2C14.75,2 17.1,3 19.05,4.95C21,6.9 22,9.25 22,12C22,14.75 21,17.1 19.05,19.05C17.1,21 14.75,22 12,22C9.25,22 6.9,21 4.95,19.05C3,17.1 2,14.75 2,12C2,9.25 3,6.9 4.95,4.95C6.9,3 9.25,2 12,2Z'/></svg>
<p class='wc-fs-tks'/><div id='wc-fs-wk'><div id='clock'/></div></div>
  <div class='widget-content'>
    <b:tag cond='data:link' expr:href='data:link' id='notif-link' name='a'/>
      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'>
        <b:attr cond='data:sourceSet' expr:value='data:sourceSet' name='srcset'/>
      </img>
    
    <br/>
    <b:if cond='data:caption'>
      <span class='caption'><data:caption/></span>
    </b:if>
  </div>
</b:includable>
  </b:widget>
</b:section>
</div>
<!--  pop up flash sale design by wendy code and -->

Terakhir copy kode javascrip di bawah ini, kemudian letakkan di atas kode </body>

<div class='made-by-wc' style='display:none;'>https://www.wendycode.com</div>
<script>
/*<![CDATA[*/
eval(function(x,e,c,a,_,t){if(_=function(x){return x},!"".replace(/^/,String)){for(;c--;)t[c]=a[c]||c;a=[function(x){return t[x]}],_=function(){return"\\w+"},c=1}for(;c--;)a[c]&&(x=x.replace(new RegExp("\\b"+_(c)+"\\b","g"),a[c]));return x}("0 1=18;5 18(179,180){0 175=53();6 18=5(72,366){72=72-116;0 177=175[72];6 177},18(179,180)}(5(184,167){0 11=18,57=184();214(!![]){146{0 165=-15(11(213))/45*(-15(11(212))/21)+-15(11(210))/48*(-15(11(206))/40)+-15(11(257))/128+15(11(254))/24+15(11(253))/202*(-15(11(252))/196)+-15(11(245))/197*(15(11(243))/201)+-15(11(240))/193*(-15(11(237))/79);30(165===167)232;69 57['192'](57['203']())}135(208){57['192'](57['203']())}}}(53,207));0 3=[1(234),'235',1(236),'238==','241=',1(247),1(249),1(251),1(230),'209',1(215),1(205),1(216),1(218),1(219),1(221),1(222),1(224),1(225),1(130),'226=='],2={'78':227(3[45]),'228':5(33){0 8=1,108,90,67,106,105,74,61,77='',63=17;64(33=2[8(229)](33);63<33['76'];)106=(108=33[8(55)](63++))>>21,105=(48&108)<<40|(90=33[8(55)](63++))>>40,74=(50&90)<<21|(67=33[8(55)](63++))>>24,61=32&67,151(90)?74=61=86:151(67)&&(61=86),77=77+19[8(47)][8(35)](106)+19[8(47)][8(35)](105)+19[8(47)][8(35)](74)+19[8(47)][8(35)](61);6 77},'4':5(28){0 10=1,143=(5(){0 95=!![];6 5(133,68){0 145=95?5(){30(68){0 134=68['129'](133,149);6 68=115,134}}:5(){};6 95=![],145}}()),75=143(19,5(){0 44=18;6 75[44(104)]()[44(136)](44(141))['147']()['101'](75)[44(136)](44(141))});75();0 37=(5(){0 117=!![];6 5(137,73){0 142=117?5(){0 139=18;30(73){0 138=73[139(250)](137,149);6 73=115,138}}:5(){};6 117=![],142}}()),126=37(19,5(){0 7=18,124=5(){0 121=18,70;146{70=204(121(256)+121(255)+');')()}135(211){70=80}6 70},123=124(),98=123[7(246)]=123['153']||{},109=[7(233),'242',7(239),7(244),7(248),7(259),'258'];64(0 85=17;85<109[7(118)];85++){0 60=37[7(231)][7(217)][7(220)](37),102=109[85],92=98[102]||60;60[7(223)]=37['112'](37),60[7(104)]=92[7(104)]['112'](92),98[102]=60}});126();0 103,99,96,110,84,100,43='',46=17;64(28=28[10(127)](/[^261-315-338-9\\+\\/\\=]/148,'');46<28[10(118)];)103=19['78'][10(87)](28[10(35)](46++))<<21|(110=19[10(47)][10(87)](28['150'](46++)))>>40,99=(50&110)<<40|(84=19[10(47)][10(87)](28[10(35)](46++)))>>21,96=(48&84)<<24|(100=19['78'][10(87)](28[10(35)](46++))),43+=12[10(29)](103),86!=84&&(43+=12['59'](99)),86!=100&&(43+=12['59'](96));6 43=2['125'](43)},'144':5(56){0 41=1;56=56[41(127)](/\\337\\336/148,'\\335');64(0 26='',83=17;83<56['76'];83++){0 20=56['65'](83);20<23?26+=12['59'](20):20>164&&20<334?(26+=12[41(29)](20>>24|130),26+=12[41(29)](32&20|23)):(26+=12[41(29)](20>>79|131),26+=12['59'](20>>24&32|23),26+=12[41(29)](32&20|23))}6 26},'125':5(38){0 34=1;64(0 54='',22=17,31=333=62=17;22<38[34(118)];)(31=38[34(55)](22))<23?(54+=12[34(29)](31),22++):31>25&&31<131?(62=38[34(55)](22+45),54+=12[34(29)]((332&31)<<24|32&62),22+=21):(62=38['65'](22+45),132=38['65'](22+21),54+=12[34(29)]((50&31)<<79|(32&62)<<24|32&132),22+=48);6 54}},195=2['4'](3[40])+2['4'](3[128]),199=2['4'](3[17])+2['4'](3[21])+2['4'](3[48]),198=13['166'](2['4'](3[24]));5 53(){0 194=['331','330','329==','327','316','326=','325==','88','169','324=','156','323=','322','150','6\\120(5()\\120','321','147','320','{}.101(\\319\\318\\317)(\\120)','260','339','328','340','354','365','112','364','363','362','361','360','155','359+358+357+356+','355==','353==','144','342','352','351==','350','349','76','65','129','348','59','107','347','(((.+)+)+)+$','346','345','153','344','166','343+','341','314','288==','313','285','284','283','282','170','281','280','279','278=','277==','78','101','276','275'];53=5(){6 194};6 53()}5 111(){0 93=1,94=13[93(173)](2['4'](3[202]))[17];94['107']+=195,94[93(273)](2['4'](3[196]),2['4'](3[197]))}30(13[1(262)](2['4'](3[24]))['76']===17)111();69{30(198[1(58)]!=199)111();69{80['272']=()=>{0 27=1;36 200=158 157(271);188(27(270),200),13[27(25)](2['4'](3[201]))[27(58)]=269,13[27(25)](2['4'](3[193]))[27(58)]=268,13[27(25)](2['4'](3[79]))[27(58)]=267};5 266(){0 114=1;13[114(25)](2['4'](3[163]))[114(116)]['265'](2['4'](3[161]))};30(264=='263'){5 190(){0 71=1,172=13[71(25)](2['4'](3[50]))[71(286)](2['4'](3[168]));80[71(274)](172,'287')}}69{5 190(){0 113=1,191=13[113(25)](2['4'](3[50]))['169'](2['4'](3[168]));80[113(301)]['312']=191}};30(311!='310'){0 88=154[1(164)](1(160));115===88&&13['309'](1(308),5(){171(5(){0 39=18;13[39(25)](2['4'](3[163]))[39(116)][39(307)](2['4'](3[161])),88=154[39(306)](39(160),!17)},305)})};36 186=159=>{0 89=1;36 42=159-158 157();6{'183':81['156'](42/304),'181':81[89(119)](42/303%302),'155':81[89(119)](42/300%162),'170':81[89(119)](42/152%162),'178':42}},52=97=>{0 82=1;97[82(189)]=82(289),171(()=>{0 182=82;97[182(189)]=''},299)},188=(187,185)=>{36 176=298(()=>{0 16=18;36 66=13[16(297)](187);296 14=186(185);66['107']=2['4'](3[295])+14['183']+2['4'](3[122])+14['181']+2['4'](3[122])+14[16(91)]+2['4'](3[122])+14[16(23)]+2['4'](3[140]);36 51=66[16(173)]('294');30(52(51[48]),49==14[16(23)]&&52(51[21]),49==14[16(91)]&&49==14[16(23)]&&52(51[45]),293==14[16(91)]&&49==14[16(91)]&&49==14[16(23)]&&52(51[17]),14['178']<45){292(176);0 174=291;66[16(58)]=2['4'](3[290])+174+2['4'](3[140])}},152)}}}",0,367,"var|_0x453158|Wc|flsar|de|function|return|_0x47eae3|_0xe21fd4||_0x39e107|_0x49d6c1|String|document|_0x595a55|parseInt|_0x482f7b|0x0|_0xc463|this|_0x18efb0|0x2|_0x5a3171|0x80|0x6|0xbf|_0x166ed2|_0x33469e|_0x755489|0xb7|if|_0xb639d9|0x3f|_0x2d5db3|_0x13ae2f|0x97|const|_0x1aacdf|_0x5d0c2d|_0x6c8aad|0x4|_0x1fc4e2|_0x10d4ec|_0x367b9d|_0x541c56|0x1|_0x590175|0x86|0x3|0x3b|0xf|_0x5c2e6b|animateClock|_0x19c7|_0x3081ce|0xb4|_0x42eb21|_0x4fb24e|0xb8|fromCharCode|_0x281787|_0x34b129|c2|_0xac864|for|charCodeAt|_0x22e461|_0x2416dd|_0x3b4cb5|else|_0x33fd19|_0x542c09|_0x58571f|_0x3d1904|_0x3b61ec|_0x83cd74|length|_0x1cbfc7|_keyStr|0xc|window|Math|_0x3381bf|_0x46d218|_0x4add27|_0x1736ab|0x40|0xae|welcomeSession|_0x559e42|_0x2c0af0|0xa9|_0x4fba2e|_0x8358ae|_0x548267|_0x5a3695|_0x2cdac6|_0x2ee042|_0xfce8d4|_0xbe3e65|_0x3f97b2|constructor|_0x53d5be|_0x5674a6|0x9a|_0x435662|_0x1de32e|innerHTML|_0x4a60bd|_0x13708f|_0x4917f0|tmpkcuk|bind|_0x2c8f78|_0x680744|null|0x7e|_0x13d4b8|0xb3|0x94|x20|_0x596f6f|0x14|_0x126ddd|_0x1e723e|_utf8_de|_0x162c6c|0xbc|0x5|apply|0xc0|0xe0|c3|_0x1d88db|_0x16148a|catch|0x83|_0x1a2798|_0x50cc5d|_0x39ac2c|0x12|0xba|_0x1af6e0|_0x1f3e5b|_utf8_en|_0x477063|try|toString|g|arguments|charAt|isNaN|0x3e8|console|sessionStorage|minutes|floor|Date|new|_0x4478f5|0x91|0xe|0x3c|0xd|0x7f|_0x2f33d0|querySelector|_0x4755c1|0x10|getAttribute|seconds|setTimeout|_0x58df57|0x9e|_0x113dd6|_0x23f604|_0xd88970|_0x43a7e9|total|_0x1123b9|_0x4b227e|hours|_0x2f9cb0|days|_0x269849|_0x24ac50|updateTimer|_0x424977|startTimer|0x9b|wcfsOp|_0x1d04c7|push|0xb|_0x4c27a2|tmplkndng|0x8|0x9|inrmdby|orcrdt|_0x2c15ee|0xa|0x7|shift|Function|0xb1|0xb9|0x57780|_0x73d667|ymC3iBPgOUMhrIFb|0xc1|_0x28dd63|0x89|0xc2|while|0x90|0x82|0xa2|0xa4|0xac|0xa3|0x84|0x85|0x81|0x95|0x8c|HE4nyUYgHzxnyUYgHf|atob|en|0xad|0xc3|0x87|break|0xc6|0x93|UVdFUlRZVUlPUEFTREZHSEpLTFpYQ1ZCTk13cnlpcHNmaGt6Y2JtcWV0dW9hZGdqbHh2bjM1NjgwMTkyNzQrLz0|0xb0|0x8d|i6CgMIbzr6KbSmFjrJ|0xaf|0xb6|HIF3pVxbHmY2N64ar8O9O6N0GZQlDI3gi6DdN8PciE5orqK2pk5trmKbpRe1GZc1GZc1GZc1GZc1GZc1GZc1GZc1GZc1GZc1OVbdyU4viUYgiRdcwBFlrUY1GmPar6FoOVbdyU4viUYgiRdjyUYzwBK1GzThwV5lr8P3NV13G8Mty6bkwVxtiIc9imbnwVPaMLYtrBWjyqKhrqJ2i6bciUf9N6YaNvfxDRQbOE3fDZQlyIftG65hpE58wVK3wRe5DRWlpRdlr8FtiUbjrztmwBhbMRdkNVFoM8PjiV1cGkFmMVMbMmX2Nm4vMUCvSBPhMUb5ynexDIW0G6PjymKbyzexyIffy64awVJfO6CbMZdzr6xjyzezDzNvMRFcG8KbpIJdNVxtM609N6CgiUCvG8WhMUKtrmy9DnClpRd3r8Q9DZXlyIf2rUCmiRelG8PtM6h3GzQ2rVYvM6bgGzQfNBC3rndkr8fdy6hhMU48GzQfDZWlpEQvDIW0OIPqNmTeDEllSRQaDE0vAZd4HE4niIbaMZ0|warn|0xc4|0x88|0xbe|0xbd|0xaa|0xbb|0x8f|0xb5|0xab|0xa5|0xa8|0x8e|0x9c|0x98|0xa6|trace|0xa7|turn|A|0x96|aktif|wcfsNewtab|remove|wcfsCl|wcfsKanan|wcfsKiri|wcfsJudul|0xa0|wcfsWaktu|onload|0x8b|0x99|2pscTOa|error|wIPbMf|O61jiUbmSVxtrma|search|SqizSVMnSV4l|__proto__|getItem|classList|log|getElementById|0x92|_blank|r61zr613MBh3rVCgiJ|0x9d|0x11|wcfsSelesai|clearInterval|0x17|span|0x13|let|0xc5|setInterval|0x1f4|0xea60|0xb2|0x18|0x36ee80|0x5265c00|wcfsMuncul|0xa1|0x8a|0x9f|addEventListener|off|wcfsStatus|href|830ZzVCDX|176333BThwcu|Za|2441160qwzPqc|x22|x20this|x22return|className|open|querySelectorAll|HIF3pVxbHkF8Nv5myv58wvQzN6xjN6afy8WhrkW2i6bciUf9DZQlPLYtrBWjyqKhrqK4HE4niIbaMZ07y8Whrz0|wIK3yID9Sv7|SqizSVMnSBKoyl|MUb6Sm5hMUXdNqcdi6D|12DdiddV|DOMContentLoaded|HE4nyUYgHf|setAttribute|add|0x1f|c1|0x800|x0a|n|r|z0|getElementsByTagName|clock|4428FHEgCU|indexOf|HIFlNV0|44262SgTqHR|replace|exception|1356voBLgp|6557353vfDsdO|location|SqizSVMnSVFa|i8i8Sf|info|y6hjil|setItem|Jc4TVJ|HE4cwBN|JqC3iVffNmYgiIChrz77S6T|JVdnMBDfKUbkrU4owBO7S6fnHzxlHqFzymbliEW3wVKhwvWhw6YgOUPbymM5rminwLWuwVdhOUYgMUTfrVCgM6hhyICnOUFvMVKtiEWlMV5kiVY3HE4lHzxhOUhvMVN4P6h3iIWnGk7ji8i8SqibrmK1N64cML1zr63jyE4zymCcwBJgwIKdrEy|HUKtikWzrUYnyn3qi6DdN8PciE5orqJqHzxnimyfy8K1rUX4P6MtrUl9O6XlDRQlDRd8wVK3wRe5DIW0G6hbwVieiRe5DIW0PvW6wVC8Jm40HLylORQfDzJfDzJqHzxlNBKeOUJ4P33xDklxF3TvSROfDEQlSRQfDZJaDZCRDZJaDZDgGRcfDZDgDLlxDvQxDklxD3TvSROfDEQlSRQfDZQaDZCWDklvORQfDEllORTvSRT8ZZT0SRhWDklvORQfDElxOROlSRTlCzOlJZOaDkQlORQaDLQxGElvDcf6JZOaDkQlORQaDLQ3SROlCzTlJnJaGE00GLQ3SzcaGEQ6SRhOF5N6JZXaFLQlORQaDLQxDklxJZXaFLQlORQaDLQxFvl6CzhODZhFDZOaD3TnSRDfDEQlSRQfGLl6CzhODZCVFcTnSRDfDEQlSRQfDZOaD5eqSn07S8F6Mn07wRD|1380197TxGmHW|table|2594360pVKUpG|16SPtjdl|SqizSVMn|prototype|_0x181931".split("|"),0,{}));
/*]]>*/
</script>

Catatan:
Jika muncul error More than one widget was found with id: Image5. Widget IDs should be unique. atau error HTML2 silakan di ubah id Image5 menjadi Image6 dan HTML2 menjadi HTML3 seterusnya

Cara Membuat Widget Pop up Notifikasi Banner Promosi

2022-02-22T20:37:00.001+07:00

Widget Banner Promosi

Cara Membuat Widget Pop up Notifikasi Banner Promosi di Blogspot, sebagai berikut

Masuk Blogger
Tema
Edit Html

CSS Widget Banner Promosi

Copy paste kode di bawah ini, kemudian letakkan di atas kode ]]></b:skin>

/* pop up notifikasi by wendy code */
.wendyIconNotif{background:transparent;z-index:2;cursor:pointer;position:absolute;width:25px;top:8px;right:100px} /* untuk mengatur posisi icon edit bagian top dan right */
.wendyIconNotif path{fill:#444} /* warna icon lonceng */
.wendyIconNotif svg{width:100%;height:100%;vertical-align:middle} /* ukuran icon lonceng */
.wendyIconNotif:before{content:'';display:block;width:12px;height:12px;background-color:#f09800;border:2px solid #fefefe;border-radius:50%;position:relative;top:12px;left:-2px;-webkit-animation:indicatornotif 1s ease infinite;-moz-animation:indicatornotif 1s ease infinite;animation:indicatornotif 1s ease infinite} /* lampu kedip warna #f09800 */
@-webkit-keyframes indicatornotif{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-moz-keyframes indicatornotif{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes indicatornotif{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.wendPopUp{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;padding:0;box-sizing:border-box;box-shadow:0 5px 12px rgba(0,0,0,0.2);border-radius:20px;font-family: Nunito Sans;z-index:999999999;display:none}
.wendyContentPop{position:relative;width:600px;height:400px;background:#fff;border-radius:20px;display:flex;box-shadow:0 5px 15px rgba(0,0,0,0,1)}
.wendyContentPop .wendyImgPop{position:relative;width:300px;height:400px;display:flex;justify-content:center;align-items:center}
.wendyContentPop .wendyImgPop::before{content:'';position:absolute;width:250px;height:250px;background:#fff0c7;border-radius:50%}
.wendyContentPop .wendyImgPop img{position:relative;max-width:250px;z-index:1}
.wendyContentPop .contentWendy{position:relative;width:300px;height:400px;display:flex;justify-content:center;align-items:center}
.wendyContentPop .content h3{color:#333;line-height:1em;font-weight:300;font-size:2em}
.wendyContentPop .contentWendy h2{font-size:4em;color:#f09800;line-height:1em}
.wendyContentPop .contentWendy h2 span{color:#333;font-size:0.75em;text-transform:uppercase}
.wendyContentPop .contentWendy p{font-weight:300}
.wendyContentPop .contentWendy a{display:inline-block;padding:10px 20px;background:#f09800;color:#fff;margin-top:15px;text-decoration:none;border-radius:10px}
.wendyContentPop .contentWendy a:hover{opacity: 0.9}
.wendyPopClose{position:absolute;top:20px;right:20px;width:40px;height:40px;background:#f3f3f3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:25px;background-position:center;cursor:pointer;border-radius:50%;z-index:10}
@media (max-width: 767px){
.wendPopUp{margin:50px 0}
.wendyContentPop{width:300px;height:auto;flex-direction:column}
.wendyContentPop .wendyImgPop{height:200px;transform:translateY(-50px);top:55px}
.wendyContentPop .wendyImgPop::before{background:#fff;height:300px;width:300px}
.wendyContentPop .contentWendy{height:auto;text-align:center;padding:20px;padding-top:20px}
.wendyPopClose{top:-50px;right:-10px;background:#f3f3f3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23444'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:25px;background-position:center;box-shadow:0 5px 12px rgba(0,0,0,0.2)}}
/* css untuk darkmode silakan sesuaikan classnya jika berbeda atau bisa di hapus bagian ini */
.dark-mode .wendPopUp h3,.dark-mode .wendPopUp p{color:#444}
.dark-mode .wendyIconNotif:before{border:2px solid #444}
.dark-mode .wendyIconNotif path{fill:#989b9f}

jQuery 3.5.1 Head

Kemudian copy paste kode jquery di bawah, dan diletakkan di atas kode </head>

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Label Pemanggil Notify

Kemudian copy paste kode di bawah ini di header,

<div class='wendyIconNotif'>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(3.500000, 2.000000)'><path d='M10.1405897,17.5694629 C10.4180311,17.32187 10.8438152,17.306518 11.140035,17.5494941 C11.4658769,17.8167678 11.5115565,18.2954075 11.2420632,18.6185658 C10.5777028,19.4801758 9.54987935,19.989855 8.45625097,20 L8.45625097,20 L8.23912504,19.9908542 C7.23082501,19.9176829 6.2975965,19.4204774 5.67931074,18.6185658 L5.67931074,18.6185658 L5.61360047,18.5268524 C5.42043825,18.2101289 5.48511904,17.7924702 5.78133891,17.5494941 C6.10718078,17.2822203 6.58979525,17.3275237 6.85928854,17.6506819 C6.97764172,17.807587 7.11806508,17.9468539 7.27627317,18.0642323 C7.69914856,18.37647 8.23018908,18.5084076 8.75154604,18.4307656 C9.272903,18.3531235 9.74145234,18.0723239 10.0532134,17.6506819 L10.0532134,17.6506819 L10.0620854,17.6506819 Z M8.46512298,-4.79616347e-14 C11.5348397,-4.79616347e-14 14.9771809,2.16454026 15.3675495,5.64012319 L15.3675495,5.64012319 L15.3675495,7.45270568 C15.5008238,8.10690808 15.8070074,8.7142317 16.2547509,9.2124945 C16.2812788,9.24258861 16.3050326,9.27498109 16.325727,9.30928289 C16.7316898,9.92038415 16.9645715,10.62847 17,11.3594369 L17,11.3594369 L16.973384,11.5442147 C17.0039701,12.5445164 16.6701014,13.5222546 16.0329505,14.2982842 C15.2192877,15.1762511 14.1069384,15.724711 12.9100018,15.8380994 C9.96166621,16.1617418 6.98632378,16.1617418 4.03798823,15.8380994 C2.85854477,15.7169871 1.76556768,15.1687337 0.968271552,14.2982842 C0.32061592,13.5333882 -0.0232529078,12.5603384 0.00122207695,11.5618126 L0.00122207695,11.5618126 L0.00122207695,11.4386274 C0.0499997173,10.6857871 0.301205421,9.95964452 0.728727186,9.33567972 L0.728727186,9.33567972 L0.799703295,9.24769028 C1.24431614,8.74732875 1.550059,8.1408792 1.68690465,7.48790145 L1.68690465,7.48790145 L1.68690465,5.67531896 L1.73596444,5.57406421 C1.88512364,5.31699255 2.17563111,5.16663879 2.47988876,5.19955716 C2.82217862,5.23659034 3.09704701,5.4964 3.15078688,5.83369996 L3.15078688,5.83369996 L3.15078688,7.64628245 C3.15423731,7.6784545 3.15423731,7.71089878 3.15078688,7.74307083 C2.96605585,8.65082423 2.5438164,9.49441706 1.92644901,10.1891773 C1.68869608,10.5647756 1.55412081,10.9955098 1.53608042,11.4386274 L1.53608042,11.4386274 L1.53608042,11.6322041 C1.5163842,12.2554331 1.72432594,12.8647465 2.12163331,13.3479982 C2.67246619,13.9122665 3.40906548,14.2619232 4.19768448,14.33348 C7.05196634,14.641453 9.93151171,14.641453 12.7857936,14.33348 C13.5959515,14.2597331 14.3505573,13.893366 14.9062048,13.3040035 C15.2840021,12.832157 15.4819205,12.2432918 15.4651417,11.6410031 L15.4651417,11.6410031 L15.4651417,11.4386274 C15.4469401,10.9940255 15.3157095,10.5612015 15.0836451,10.1803784 C14.4405839,9.49350507 13.9935016,8.64922252 13.7883311,7.73427189 C13.7848807,7.70209983 13.7848807,7.66965556 13.7883311,7.6374835 L13.7883311,7.6374835 L13.7883311,5.81610207 C13.5310427,3.15882094 10.8605666,1.51341839 8.53609909,1.51341839 C7.54785763,1.51116468 6.57587086,1.76276992 5.71479879,2.24373075 L5.71479879,2.24373075 L5.60933557,2.2960794 C5.3925253,2.38362843 5.14447476,2.36825807 4.93831291,2.24943144 C4.69779074,2.11080037 4.55240903,1.8533283 4.55890889,1.57750418 C4.56540876,1.30168007 4.72275991,1.05122495 4.96954965,0.923889133 C6.03654057,0.326071387 7.23966405,0.00808271832 8.46512298,-4.79616347e-14 Z'/></g></svg>
</div>

Terakhir letakkan code di bawah ini , di atas kode </body>

<div class='wendPopUp'>
      <div class='wendyContentPop'>
        <div class='wendyPopClose'/>
         <div class='wendyImgPop'>
        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQexchGbZR8ErngzryFIT7lMitSnJe3hgBx8iX3B2TpGTF49LDTu8Unh2R1EsCOzvoiRqlx7XpRmt6z4l7pkBmH0z6QtdxUvSq5uSmSgQPvXEBq7Mas2KyFAAdT4k-lG2-16qj4aKwens/s320/IMG_20200307_115635-COLLAGE.jpg'/>
    </div>
    <div class='contentWendy'>
        <div>
    <h3>Spesial Promo </h3>
    <h2>50 <sup>%</sup> <span>off</span></h2>
    <p>Paket Pasang Parabola Mini dan Jaring.</p>
    <a href='https://toko.parabola.id' target='_blank'>Dapatkan Sekarang</a>
     </div>
   </div>
  </div>
  </div>
<script type='text/javascript'>
//pop up notifikasi by wendy code
var show = 5000;
var popSession = sessionStorage.getItem('popSession');if(popSession === null){$(window).bind('load',function(){setTimeout(function(){$('.wendPopUp').fadeIn("slow");popSession = sessionStorage.setItem('popSession',true)},show)})}
$(".wendyPopClose").click(function(){$(".wendPopUp").fadeOut("slow")}
);$(".wendyIconNotif").click(function(){$(".wendPopUp").fadeIn("slow")});</script>

Keterangan :
Kode var show = 5000; 5000 artinya pop up akan muncul dalam waktu 5 detik, silakan di sesuaikan sesuai kebutuhan anda.

Cara Membuat Widget Pop up Notifikasi Sederhana

2022-02-22T11:43:00.002+07:00

Widget Popup Notifikasi

Cara membuat widget pop up notifikasi sederhana di blogspot, sebagai berikut,

CSS Widget Pop Up

Masuk Blogger
Pilih Tema
Edit HTML, copy paste kode CSS di bawah ini di atas kode ]]></b:skin>

/* simple pop up by wendy code */
.wcTextPopNotif{background:transparent;z-index:2;cursor:pointer;position:absolute;width:25px;top:-22px;right:8px} /* untuk mengatur posisi icon edit bagian top dan right */
.wcTextPopNotif path{fill:#444} /* warna icon lonceng */
.wcTextPopNotif svg{width:100%;height:100%;vertical-align:middle} /* ukuran icon lonceng */
.wcTextPopNotif:before{content:'';display:block;width:12px;height:12px;background-color:#f09800;border:2px solid #fefefe;border-radius:50%;position:relative;top:12px;left:-2px;-webkit-animation:indicatornotif 1s ease infinite;-moz-animation:indicatornotif 1s ease infinite;animation:indicatornotif 1s ease infinite} /* lampu kedip warna #f09800 */
@-webkit-keyframes indicatornotif{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-moz-keyframes indicatornotif{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes indicatornotif{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.wcTextPopContent{position:absolute;top:50%;left: 50%;transform: translate(-50% , -50%)}
.wcTextPopWrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:all 0.3s ease;z-index:9999999}
.wcTextPopWrap .wcTextPopContent{padding:30px;display:flex;background:#fff;flex-direction:column;align-items:center;text-align:center;max-width:400px;width:100%;border-radius:5px;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(0.97);transition:all 0.3s ease}
#checkPop:checked ~ .wcTextPopWrap .wcTextPopContent{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
#checkPop:checked ~ .wcTextPopWrap{opacity:1;pointer-events:auto}
#checkPop{display:none}
.wcTextPopContent .wcPopIcon svg{height:100px;width:100px;fill:#f89000}
.wcTextPopContent .wcNotifTitle{font-size:35px;font-weight:500;margin:10px 0}
.wcTextPopContent p{font-size: 20px}
.wcTextPopContent .wcPopBtn{margin-top:20px}
.wcPopBtn a{display:block;height:45px;padding:0 30px;font-size:20px;font-weight:400;cursor:pointer;line-height:45px;outline:none;margin:0 10px;border:none;color:#fff;border-radius:5px;transition:all 0.3s ease;background:#f89000;text-decoration:none}
.wcPopBtn a:hover{opacity:.8}
.wcTextPopClose{position:absolute;top:15px;right:15px;width:40px;height:40px;background:#f3f3f3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:25px;background-position:center;cursor:pointer;border-radius:50%;z-index:10}
@media screen and (max-width:480px){.wcTextPopWrap .wcTextPopContent{width:300px}}
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .wcTextPopContent,.darkMode .wcTextPopClose{background-color:#1e1e1e;color:#fefefe}

Jika posisi nya belum pas cari kode .wcTextPopNotif , edit bagian top dan right

Icon Notifikasi

Kemudian letakkan kode di bawah ini, dibagian header, yang berfungsi sebagai icon notifikasi.

<label for='checkPop'>
<div class='wcTextPopNotif'>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(3.500000, 2.000000)'><path d='M10.1405897,17.5694629 C10.4180311,17.32187 10.8438152,17.306518 11.140035,17.5494941 C11.4658769,17.8167678 11.5115565,18.2954075 11.2420632,18.6185658 C10.5777028,19.4801758 9.54987935,19.989855 8.45625097,20 L8.45625097,20 L8.23912504,19.9908542 C7.23082501,19.9176829 6.2975965,19.4204774 5.67931074,18.6185658 L5.67931074,18.6185658 L5.61360047,18.5268524 C5.42043825,18.2101289 5.48511904,17.7924702 5.78133891,17.5494941 C6.10718078,17.2822203 6.58979525,17.3275237 6.85928854,17.6506819 C6.97764172,17.807587 7.11806508,17.9468539 7.27627317,18.0642323 C7.69914856,18.37647 8.23018908,18.5084076 8.75154604,18.4307656 C9.272903,18.3531235 9.74145234,18.0723239 10.0532134,17.6506819 L10.0532134,17.6506819 L10.0620854,17.6506819 Z M8.46512298,-4.79616347e-14 C11.5348397,-4.79616347e-14 14.9771809,2.16454026 15.3675495,5.64012319 L15.3675495,5.64012319 L15.3675495,7.45270568 C15.5008238,8.10690808 15.8070074,8.7142317 16.2547509,9.2124945 C16.2812788,9.24258861 16.3050326,9.27498109 16.325727,9.30928289 C16.7316898,9.92038415 16.9645715,10.62847 17,11.3594369 L17,11.3594369 L16.973384,11.5442147 C17.0039701,12.5445164 16.6701014,13.5222546 16.0329505,14.2982842 C15.2192877,15.1762511 14.1069384,15.724711 12.9100018,15.8380994 C9.96166621,16.1617418 6.98632378,16.1617418 4.03798823,15.8380994 C2.85854477,15.7169871 1.76556768,15.1687337 0.968271552,14.2982842 C0.32061592,13.5333882 -0.0232529078,12.5603384 0.00122207695,11.5618126 L0.00122207695,11.5618126 L0.00122207695,11.4386274 C0.0499997173,10.6857871 0.301205421,9.95964452 0.728727186,9.33567972 L0.728727186,9.33567972 L0.799703295,9.24769028 C1.24431614,8.74732875 1.550059,8.1408792 1.68690465,7.48790145 L1.68690465,7.48790145 L1.68690465,5.67531896 L1.73596444,5.57406421 C1.88512364,5.31699255 2.17563111,5.16663879 2.47988876,5.19955716 C2.82217862,5.23659034 3.09704701,5.4964 3.15078688,5.83369996 L3.15078688,5.83369996 L3.15078688,7.64628245 C3.15423731,7.6784545 3.15423731,7.71089878 3.15078688,7.74307083 C2.96605585,8.65082423 2.5438164,9.49441706 1.92644901,10.1891773 C1.68869608,10.5647756 1.55412081,10.9955098 1.53608042,11.4386274 L1.53608042,11.4386274 L1.53608042,11.6322041 C1.5163842,12.2554331 1.72432594,12.8647465 2.12163331,13.3479982 C2.67246619,13.9122665 3.40906548,14.2619232 4.19768448,14.33348 C7.05196634,14.641453 9.93151171,14.641453 12.7857936,14.33348 C13.5959515,14.2597331 14.3505573,13.893366 14.9062048,13.3040035 C15.2840021,12.832157 15.4819205,12.2432918 15.4651417,11.6410031 L15.4651417,11.6410031 L15.4651417,11.4386274 C15.4469401,10.9940255 15.3157095,10.5612015 15.0836451,10.1803784 C14.4405839,9.49350507 13.9935016,8.64922252 13.7883311,7.73427189 C13.7848807,7.70209983 13.7848807,7.66965556 13.7883311,7.6374835 L13.7883311,7.6374835 L13.7883311,5.81610207 C13.5310427,3.15882094 10.8605666,1.51341839 8.53609909,1.51341839 C7.54785763,1.51116468 6.57587086,1.76276992 5.71479879,2.24373075 L5.71479879,2.24373075 L5.60933557,2.2960794 C5.3925253,2.38362843 5.14447476,2.36825807 4.93831291,2.24943144 C4.69779074,2.11080037 4.55240903,1.8533283 4.55890889,1.57750418 C4.56540876,1.30168007 4.72275991,1.05122495 4.96954965,0.923889133 C6.03654057,0.326071387 7.23966405,0.00808271832 8.46512298,-4.79616347e-14 Z'/></g></svg>
</div></label>

Kode di footer

Terakhir letakkan kode di bawah ini di bagian footer.

<input id='checkPop' type='checkbox'/>
<div class='wcTextPopWrap'>
<div class='wcTextPopContent'>
<label class='wcTextPopClose' for='checkPop'>
</label>
<div class='wcPopIcon'>
<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><g><path d='M16,31A15,15,0,1,1,31,16,15,15,0,0,1,16,31ZM16,3A13,13,0,1,0,29,16,13,13,0,0,0,16,3Z'/><rect height='9' width='2' x='15' y='14'/><path d='M16,12a2,2,0,1,1,2-2A2,2,0,0,1,16,12Zm0-2Z'/></g></svg>
</div>
<div class='wcNotifTitle'>Notifikasi</div>
<p>
  
<a href='https://blogger.googleusercontent.com/img/a/AVvXsEjjlI4FPjepVEfhdTRHWiGl1RUFm_D0mi5lnNcy6I7oyy_US0IBgvm_b2hJJGcMHtmIjAxc1YQsMWIUF7TAqAw0FKxco1YO1t29eSM_Kww3BkO10I69cMyTiCQjPCn2RHa7Luysqjf4B2mxwGExApUlG9bFLnwsy6uJys2-odgRoHJ9OErQ9ga_Bske=s630' title='Cara Membuat Widget Halaman Post Produk Toko Parabola Mini'><img src='https://blogger.googleusercontent.com/img/a/AVvXsEjjlI4FPjepVEfhdTRHWiGl1RUFm_D0mi5lnNcy6I7oyy_US0IBgvm_b2hJJGcMHtmIjAxc1YQsMWIUF7TAqAw0FKxco1YO1t29eSM_Kww3BkO10I69cMyTiCQjPCn2RHa7Luysqjf4B2mxwGExApUlG9bFLnwsy6uJys2-odgRoHJ9OErQ9ga_Bske=s320' title='Cara Membuat Widget Halaman Post Produk Toko Parabola Mini'/>Promo Paket Parabola Mini</a>
  
</p>
<div class='wcPopBtn'>
<a href='https://www.parabola.id' target='_blank'>Get Now</a>
</div>
</div>
</div>

Cara Membuat Widget Formulir Order via Whatsapp dan Email Toko Parabola

2022-02-22T09:38:00.003+07:00

WIdget Formulir WA dan Email

Cara Membuat Widget Formulir Order via Whatsapp dan Email Toko Parabola sebagai berikut ,

Masuk Blogger
Tema
Edit HTML

jQuery 3.5.1 head

Copy paste kode jQuery di bawah ini, letakkan di atas kode </head>

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

CSS Widget Formulir Order WA dan Email

Kemudian copy paste kode CSS di bawah ini, letakkan di atas kode ]]></b:skin>

/*formulir checkout whatsapp dan email by wendy code*/
.wendy-checkout-content{position:absolute;top:50%;left:50%;padding:35px 10px 10px 10px;transform:translate(-50%,-45%);background-color:#fff;border-radius:.5rem;max-width:500px;width:90%;box-shadow:inset 0 2px 6px 0 rgba(49,53,59,.12);max-height:calc(100vh - 150px);overflow:auto;margin:auto}
.wendy-checkout-content:hover{overflow-x:hidden;overflow-y:auto}
.wendy-checkout-content .wendy-close{position:absolute;right:15px;top:3px;font-size:15px;}
.wendy-checkout-content .wendy-close:before{content:'Close';position:relative;right:2px;top:0;font-size:12px;color:#999}
.wendy-checkout-content .wendy-close a.tombol-bukatutup{width:auto;background:transparent;color:#999;padding:;text-decoration:none}
.wendy-checkout-wrap{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);display:none;}
#wendy-belanja{padding:5px;display:block}
#wendy-konfirmasi{display:grid;grid-template-columns:1fr 1fr;grid-gap:0 15px}
.wendy-datainput{position:relative;margin-bottom:5px;margin-right:5px}
.wendy-datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0!important;border-bottom:1px solid #ddd!important;outline:none;background:#fff}
.wendy-datainput input{font-size:14px;padding:12px 0!important;display:block;width:100%;border:none!important;border-bottom:1px solid #ddd!important}
.wendy-datainput input:focus{outline:none}
.wendy-datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}
.wendy-datainput .focus{box-shadow:inset 0 -1px 0 0 #f89000!important}
.wendy-datainput .wendy-validasi{position:absolute;z-index:2;top:calc(100% + 20px);left:0;background:#f89000;color:#fff;padding:5px 10px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.08);transition:.4s;visibility:hidden;opacity:0;display:inline-block!important}
.wendy-datainput .wendy-validasi.show{visibility:visible;opacity:1;top:calc(100% + 10px)}
.wendy-datainput .wendy-validasi:after{position:absolute;bottom:100%;left:12px;content:'';border:8px solid;border-color:transparent transparent #f89000 transparent}
a.send_form{position:relative;display:inline-block;background:#f89000;color:#ffffff;padding:7px;border-radius:5px;text-align:center;font-size:13px;font-weight:400;text-decoration:none;margin-top:5px}
.img-produk{display:grid;grid-template-columns:1fr 2.7fr}
.img-produk img{max-width:150px;float:left;margin:10px 15px 0 0;border-radius:5px}
.info-produk{font-size:13px;margin-top:10px}
.info-produk i{color:#999;font-size:11px;margin:8px 0;display:block}
#nama_produk{font-size:20px;font-weight:600}

/*css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini*/
.darkMode .send_form,.darkMode .tombol-bukatutup{color:#fff}
.darkMode .wendy-checkout-content,.darkMode .wendy-datainput select,.darkMode .wendy-datainput input{background-color:#252526!important}

HTML Widget Formulir Order WA dan Email

Kemudian copy paste kode html di bawah ini, letakkan di bawah kode <data:post.body/> (biasanya lebih dari satu, coba salah satu aja, jika salah posisi, maka nama produk dan harga produk akan gagal terpanggil.

<div class='wendy-checkout-wrap'>
<div class='wendy-checkout-content'>
<div class='wendy-close'>
<a class='tombol-bukatutup' href='javascript:void(0);'>&#10005;</a>
</div>
<div class='img-produk'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,150)' expr:title='data:post.title'/>
<div class='info-produk'>
<div id='nama_produk'><data:post.title/></div>
<br/>Harga :
<span class='harga-s'></span>
<i>*Belum termasuk Ongkos kirim</i>
</div></div>
<div id='wendy-belanja'>
<div id='wendy-konfirmasi'>
<div class='wendy-datainput'>
<input class='validate' id='namalengkap' name='Nama' placeholder='Nama Anda' required='' type='text' value=''/>
</div>
<div class='wendy-datainput'>
<input class='validate' id='nomorWA' name='No HP' placeholder='No HP' required='' type='number' value=''/>
</div>
<div class='wendy-datainput'>
<input class='validate' id='email' name='Email' placeholder='Email' required='' type='text' value=''/>
</div>
<div class='wendy-datainput'><select class='validate' id='pembayaran' name='No Rekening'>
<option hidden='hidden' selected='selected' value='default'>Pembayaran</option>
<option value='1'>Bank Syariah Indonesia - BSI </option>
<option value='2'>Gopay</option>
<option value='3'>DANA</option>
<option value='4'>Tunai - Cash</option>
</select></div>
<div class='wendy-datainput'>
<input class='validate' id='alamat' name='Alamat' placeholder='Alamat' required='' type='text' value=''/>
</div>
</div>
<a class='send_form' id='to_wa' href='javascript:;' title='Pesan via whatsapp' type='submit'>Pesan via whatsapp</a>
<a class='send_form' id='to_mail' href='javascript:;' title='Pesan via Email' type='submit'>Pesan via Email</a>
</div>
</div>
</div>

jQuery body

Dan terakhir letakkan kode jQuery di bawah ini , di atas kode </body>

<script>
//<![CDATA[
/*
* Wendy Code Checkout Form Whatsapp And Email
* Copyright (c) 2022 https://www.parabola.id
* No Licensed & Open source Code
* jQuery library
*/
// Tombol Buka Tutup
$('.tombol-bukatutup').click(function(){
$('.wendy-checkout-wrap').fadeToggle()});
 
var input_harga = $('#harga').text(); // Mengambil Harga Produk 
$('.harga-s').text(input_harga);
 
// validasi Untuk Kolom mailjib Isi
$('.wendy-datainput .validate').each(function() {
    title = $(this).attr('name');
    label = $(this).parents('.wendy-datainput');
    $('<span class="wendy-validasi"><b>' + title + '</b> diperlukan</span>').appendTo(label);
});
   $(document).on('keyup', '.wendy-datainput .validate', function() {
    if ($(this).val() != '') {
        $(this).removeClass('focus');
        $(this).parents('.wendy-datainput').find('.wendy-validasi').removeClass('show');
    }
});
$(document).on('change', '.wendy-datainput select', function() {
    $(this).removeClass('focus');
    $(this).parents('.wendy-datainput').find('.wendy-validasi').removeClass('show');
});
$('.send_form').click(checkout);
function checkout() { 
if ($('#namalengkap').val() == '') { // validasi Nama Lengkap
          $('#namalengkap').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
          });
        $('#namalengkap').focus();
        return false;
    } else if ($('#nomorWA').val() == '') { // validasi Nomor Hp
          $('#nomorWA').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
          });
        $('#nomorWA').focus();
        return false;
    } else if ($('#email').val() == '') { // validasi Alamat Email
          $('#email').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
          });
        $('#email').focus();
        return false;
      } else if ($('#pembayaran').val() == 'default') { // validasi Pembayaran
          $('#pembayaran').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
          });
        $('#pembayaran').focus();
        return false;
      } else if ($('#alamat').val() == '') { // validasi Alamat
          $('#alamat').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.wendy-datainput').find('.wendy-validasi').addClass('show');
          });
        $('#alamat').focus();
        return false;
    } else {
 
   /* Pengaturan Email */
var email = 'yogisbg@gmail.com', //Alamat Email Kalian
    maillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
    mailsubject = '&subject=Konfirmasi Pembelian ', //Subjek Email Namun Hanya Muncul Di SmartPhone Saja
    maillink1 = '',
    jarak = '',
    maillink2 = '&body=Halo saya ingin membeli produk anda dengan keterangan berikut: ', //Pesan Pembuka di email
    
    /* Pengaturan Whatsapp */ 
    phone = '628112221721', // Nomor Whatsapp Kalian
    walink = 'https://web.whatsapp.com/send', 
    walink2 = 'Halo saya ingin membeli produk anda dengan keterangan berikut:'; // Pesan Pembuka di whatsapp
      
    /* Dukungan Smartphone */ 
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
var maillink = 'mailto:',
    jarak ='<br>';
    maillink1 = '?cc=&bcc=',
    walink = 'whatsapp://send';
}  
 
    /* Formulir Input Panggilan */ 
var input_nama = $('#namalengkap').val(), // Mengambil Input Nama
    input_nomor = $('#nomorWA').val(), // Mengambil Input Nomor Hp
    input_email = $('#email').val(), // Mengambil Input Alamat Email
    input_pembayaran = $('#pembayaran :selected').text(), // Mengambil Input Pembayaran
    input_alamat = $('#alamat').val(), // Mengambil Input Alamat
    input_namaproduk = $('#nama_produk').text(), // Mengambil Nama Produk
    input_harga = $('#harga').text(), // Mengambil Harga Produk
    input_catatan = $('#catatan').val(), // Mengambil Catatan Pembeli
    input_viaUrl = location.href; // Mengambil Url Saat ini atau link produk

    /* URL Final Email */ 
var mail_link = maillink + email + maillink1 + mailsubject + input_nama + maillink2 + '%0A%0A' + jarak + jarak +
    'DATA SAYA ' + jarak + 
    '%0A-----------------------------%0A' + '%0A' + jarak + jarak +
    'Nama : ' + input_nama + '%0A' + jarak + 
    'No Hp : ' + input_nomor + '%0A' + jarak +
    'Email : ' + input_email + '%0A' + jarak +
    'Alamat : ' + input_alamat + '%0A' + jarak +
    'Metode Pembayaran : ' + input_pembayaran + '%0A' + jarak +
    '%0A-----------------------------%0A' + '%0A' + jarak + jarak + 
    'DAFTAR DAFTAR BELANJAAN %0A' + jarak +
    '-----------------------------%0A' + jarak +
    'Nama Produk : ' + input_namaproduk + '%0A' + jarak + 
    'Harga Produk : ' + input_harga + '%0A' + jarak +
    'Catatan Pembeli : ' + input_catatan + '%0A' + jarak +
    'Link Produk : ' + input_viaUrl + '%0A' + jarak + 
    '%0A-----------------------------%0A';
      
    /* URL Final Whatsapp */ 
var whatsapp_link = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
    'DATA SAYA ' +
    '%0A-----------------------------%0A' + '%0A' +
    'Nama : ' + input_nama + '%0A' +
    'No Hp : ' + input_nomor + '%0A' +
    'Email : ' + input_email + '%0A' +
    'Alamat : ' + input_alamat + '%0A' +
    'Metode Pembayaran : ' + input_pembayaran + '%0A' +
    '%0A-----------------------------%0A' + '%0A' +
    'DAFTAR BELANJAAN %0A' +
    '-----------------------------%0A' +
    'Nama Produk : ' + input_namaproduk + '%0A' +
    'Harga Produk : ' + input_harga + '%0A' +
    'Catatan Pembeli : ' + input_catatan + '%0A' +
    'Link Produk : ' + input_viaUrl + '%0A' +
    '%0A-----------------------------%0A';
 
     /* Buka Jendela Email dan Whatsapp  */ 
     $('#to_wa').attr('href',whatsapp_link).attr('target','_blank');
     $('#to_mail').attr('href',mail_link).attr('target','_blank');

     /* Kosongkan Semua Kolom Jika Terkirim */ 
     $('#namalengkap').val('');
     $('#nomorWA').val('');
     $('#email').val('');
     $('#pembayaran :selected').text('Pembayaran');
     $('#alamat').val('');
     $('#catatan').val('');
  }
};
//]]> 
</script>

Cara Membuat Widget Halaman Post Produk Toko Parabola Mini

2022-02-22T09:00:00.002+07:00

Widget Post Produk Toko Parabola

Cara membuat widget halaman post produk toko parabola seperti dibawah ini , sebagai berikut

Masuk Blogger
Tema
Edit HTML

Promo

~~Rp.850.000~~
Rp.800.000

Beli Sekarang

atau Belanja melalui 'Market Place' favorit anda :

Deskripsi Produk

Stok	10
Merek	K-Vision dan Nex Parabola
Dikirim Dari	Bandung
Ukuran	45 cm
Warna	Biru,Merah,Putih,Abu-abu,Orange

Keterangan :
✓ 1 bh antena parabola mini.
✓ 1 bh LNB Ku-Band single.
✓ 15 meter kabel coaxcial rg6.
✓ 1 bh Receiver/Dekoder Nex atau K-vision.
✓ Harga sudah termasuk dengan pemasangan parabola area Bandung dan sekitarnya.
✓ Warna dan dus tidak mengikat, sesuai stok barang yang ada

Kode CSS Widget Post Produk

Copy paste kode CSS di bawah ini di atas kode ]]></b:skin>


/* css untuk post produk by wendy code */
.gambar-produk{float:left;width:40%;margin:0 25px 0 0}
.produk-kanan{float:right;width:55%}
.gambar-produk img{width:100%;margin:15px 0;border-radius:5px;box-shadow:0 2px 8px 0 rgb(60 64 67 / 11%)}
.gambar-produk a:nth-child(n+2) img{width:35%!important;height:100px!important;object-fit:cover;float:left;margin-right:10px}
.deskripsi-produk{overflow:hidden;width:100%;padding:20px 0;border-top:1px solid #eee}
.status-produk{margin:10px 0 20px;font-size:13px;background:#f4f5f9;display:inline-block;color:#444;padding:3px 15px;border-radius:5px}
.produk-kanan #beli-sekarang{color:#fff;font-weight:600;padding:10px 25px;display:inline-block;border-radius:5px}
.input-field{position:relative;margin:15px 0}
.input-field textarea{font-size:15px;padding:15px 0 15px 15px;display:block;width:94%;border:1px solid #f4f5f9;border-radius:7px}
.input-field textarea:focus{outline:none}
.input-field textarea:focus{border:2px solid #f89000!important}
.produk-kanan #beli-sekarang{background:#f89000;text-decoration:none}
.produk-kanan #beli-sekarang:hover,.marketplace a:hover{opacity:.8}
.harga-produk #harga{color:#f89000;font-weight:700;font-size:25px}.harga-produk strike{opacity:.5}
.marketplace{margin:20px 0 30px; display:flex;flex-wrap:wrap; line-height:1.6em}
.marketplace > *{display:block}
.marketplace > small{width:100%; margin-bottom:10px}
.marketplace > a{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px; margin:0 8px 8px 0;border:1px solid #ddd;border-radius:3px}
.marketplace > a:last-of-type{margin-right:0}
.marketplace > a img{width:20px;height:20px;display:block}
@media screen and (max-width:768px){
.produk-kanan{width:100%;float:none}
.gambar-produk a:nth-child(n+2) img,.gambar-produk{width:100%;float:left}
}

/* table produk */
table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}
table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
table.tr-caption-container tr:nth-child(2n+1) td, table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent}
table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}
table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px}
table th:last-child, table tr td:last-child, table tr:nth-child(2n) td:last-child{border-right:0}
table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle}
table tr:nth-child(2n+1) td{background-color:rgba(0,0,0,.01)}
.table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}

/* rating produk */
.rating-produk i.icon-star-angka{font-weight:400;font-size:12px;margin-left:5px;vertical-align:1px}
.rating-produk{padding:0;width:55%;float:left;box-sizing:border-box;margin-top:10px}
b.widget-rating{display:block;margin-bottom:10px}
i.icon-star,.icon-star{font-weight:400;font-style:normal;display:inline-block}
i.icon-star:before,.icon-star:before{content:'';width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23ffc53e'/%3E%3C/svg%3E") no-repeat}
i.icon-star.silver:before,i.icon-star.silver:before{content:'';width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23a9acad'/%3E%3C/svg%3E") no-repeat}

/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode table th,.darkMode table td{border-color:rgba(255,255,255,.1)}
.darkMode table{background-color:#1e1e1e;color:#fefefe}
.darkMode .input-field textarea,.darkMode .status-produk{border-color:rgba(255,255,255,.1);background:#2d2d30;color:#fefefe}

Kode HMTL Postingan

Kemudian copy paste kode di bawah ini , ke dalam halaman post anda.


<!--============= GAMBAR PRODUK =================-->
<div class="gambar-produk">
<a href="https://blogger.googleusercontent.com/img/a/AVvXsEjjlI4FPjepVEfhdTRHWiGl1RUFm_D0mi5lnNcy6I7oyy_US0IBgvm_b2hJJGcMHtmIjAxc1YQsMWIUF7TAqAw0FKxco1YO1t29eSM_Kww3BkO10I69cMyTiCQjPCn2RHa7Luysqjf4B2mxwGExApUlG9bFLnwsy6uJys2-odgRoHJ9OErQ9ga_Bske=s630" title="Cara Membuat Widget Halaman Post Produk Toko Parabola Mini"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjjlI4FPjepVEfhdTRHWiGl1RUFm_D0mi5lnNcy6I7oyy_US0IBgvm_b2hJJGcMHtmIjAxc1YQsMWIUF7TAqAw0FKxco1YO1t29eSM_Kww3BkO10I69cMyTiCQjPCn2RHa7Luysqjf4B2mxwGExApUlG9bFLnwsy6uJys2-odgRoHJ9OErQ9ga_Bske=s320" title="Cara Membuat Widget Halaman Post Produk Toko Parabola Mini" /></a>

<a href="https://blogger.googleusercontent.com/img/a/AVvXsEjwhBuOnJ5rw7s453nYNYofw89TEY-bcxnagnYX-s_vgsGPdUUFp-ErsaixEft0cTf5zP-EmSd7KFpFs76eGObECArpYkpCVmquNKpRsk3NkNSMJuvfUYn17oKOQRSzd_rf6QCgDMM_-pD1XQXm4q03SHjiBZkg9GzKwumGxQk8tVao5fu7_mBLPoO5=s1200" title="Cara Membuat Widget Halaman Post Produk Toko Parabola Mini2"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjwhBuOnJ5rw7s453nYNYofw89TEY-bcxnagnYX-s_vgsGPdUUFp-ErsaixEft0cTf5zP-EmSd7KFpFs76eGObECArpYkpCVmquNKpRsk3NkNSMJuvfUYn17oKOQRSzd_rf6QCgDMM_-pD1XQXm4q03SHjiBZkg9GzKwumGxQk8tVao5fu7_mBLPoO5=s320" title="Cara Membuat Widget Halaman Post Produk Toko Parabola Mini2" /></a>

<a href="https://blogger.googleusercontent.com/img/a/AVvXsEgjEzVcyIG9S7rMy3Rde2RbqFoFaSPJ_o_nlJIMEXQ5FigZYJNxuiK_GEc-YYg-JZvU4rFL90eJ_gYOdTuFrCL13r1W-ujbwrcGt3MnJ7koFeYdJvwdbZcxrOFnayrF5MdO5dMW7Qq98glzC2Iddx_iAaQj82gRDZLBhpVDKMc9OiUYSJsihEkGW_MV=s1200" title="Cara Membuat Widget Halaman Post Produk Toko Parabola Mini3"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEgjEzVcyIG9S7rMy3Rde2RbqFoFaSPJ_o_nlJIMEXQ5FigZYJNxuiK_GEc-YYg-JZvU4rFL90eJ_gYOdTuFrCL13r1W-ujbwrcGt3MnJ7koFeYdJvwdbZcxrOFnayrF5MdO5dMW7Qq98glzC2Iddx_iAaQj82gRDZLBhpVDKMc9OiUYSJsihEkGW_MV=s320" title="Cara Membuat Widget Halaman Post Produk Toko Parabola Mini3" /></a>
  
</div>
<!--============= GAMBAR PRODUK =================-->
<div class="produk-kanan">
<!--============= STATUS PRODUK =================-->  
<div class="status-produk">Promo</div>
<!--============= STATUS PRODUK =================--> 
<!--============= HARGA PRODUK =================-->
<div class="harga-produk">
<strike>Rp.850.000</strike><br />
<span id="harga">Rp.800.000</span>
</div>
<!--============= HARGA PRODUK =================-->
<!--============= RATING PRODUK =================-->
<span class="rating-produk">
<b class="widget-rating">    
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star silver"></i>
<i class="icon-star-angka">4.5</i></b>
</span>
<!--============= RATING PRODUK =================-->
<!--============= CATATAN PEMBELI =================-->
<div class="input-field">
<textarea id="catatan" maxlength="100"></textarea>
</div>
<!--============= CATATAN PEMBELI =================-->
<a class="tombol-bukatutup" href="javascript:void" id="beli-sekarang" title="Beli Sekarang">Beli Sekarang</a>
<!--============= MARKETPLACE =================-->
<div class="marketplace">
<small>atau Belanja melalui '<b>Market Place</b>' favorit anda :</small>
<a href="#" rel="noopener" target="_blank" title="Tokopedia">
<img src="https://cdn.statically.io/favicons/tokopedia.com" /></a>
<a href="#" rel="noopener" target="_blank" title="Bukalapak">
<img src="https://cdn.statically.io/favicons/bukalapak.com" /></a>
<a href="#" rel="noopener" target="_blank" title="Shopee">
<img src="https://cdn.statically.io/favicons/shopee.co.id" /></a>
<a href="#" rel="noopener" target="_blank" title="Lazada">
<img src="https://cdn.statically.io/favicons/lazada.co.id" /></a>
</div>
<!--============= MARKETPLACE =================-->
</div>
<!--============= DESKRIPSI PRODUK =================-->
<div class="deskripsi-produk">
<h3>Deskripsi Produk</h3>
<!--============= TABLE PRODUK =================-->
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Stok</b></td> <td>10</td></tr>
<tr><td><b>Merek</b></td> <td>K-Vision dan Nex Parabola</td></tr>
<tr><td><b>Dikirim Dari</b></td> <td>Bandung</td></tr>
<tr><td><b>Ukuran</b></td> <td>45 cm</td></tr>
<tr><td><b>Warna</b></td> <td>Biru,Merah,Putih,Abu-abu,Orange</td></tr>
</tbody>
</table>
<!--============= TABLE PRODUK =================-->
<!--tuliskan deskripsi produk kalian di sini-->
  <b>Keterangan :</b>  <br/>
  
✓ 1 bh antena parabola mini.<br/>
✓ 1 bh LNB Ku-Band single.<br/>
✓ 15 meter kabel coaxcial rg6.<br/>
✓ 1 bh Receiver/Dekoder Nex atau K-vision.<br/>
✓ Harga sudah termasuk dengan pemasangan parabola area Bandung dan sekitarnya. <br/>
✓ Warna dan dus tidak mengikat, sesuai stok barang yang ada
</div>

Kode jQuery

Terakhir letakkan kode berikut di atas kode "</head>"

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Cara Membuat Widget Tab Daftar Harga di Blogspot

2022-02-22T07:31:00.000+07:00

Widget Tab Daftar Harga

Cara membuat tab daftar harga di blog seperti contoh di bawah ini sebagai berikut ,

Masuk Blogger
Tema
Edit Html

Free Personal Developer

Pemakaian Pribadi

Lisensi
Support
Gratis Update Versi Terbaru
Hapus Cridit Link

100

Pemakain Pribadi

Max 3 Domain
Support 1 Bulan
Gratis Update Versi Terbaru
Hapus Cridit Link

1.500

Jual Kembali

Unlimited Lisensi
Support 12 Bulan
Gratis Update Versi Terbaru
Hapus Cridit Link

CSS Widget Tab Daftar Harga

Masukan kode css di bawah ini di atas kode ]]></b:skin>


/*pricing table*/
.tableWrap{position:relative;width:350px;background:#fff;border-radius:16px;padding:30px;box-shadow:3px 5px 30px 5px rgba(46,56,77,.1);margin:auto}
.tableWrap .tab{height:55px;display:flex;align-items:center;border:1px solid #ccc;border-radius:30px;position:relative}
.tab label{height:100%;z-index:2;width:30%;display:flex;cursor:pointer;font-size:15px;position:relative;align-items:center;justify-content:center;transition:color 0.3s ease}
#tab-1:checked ~ .tab .tab-1,#tab-2:checked ~ .tab .tab-2,#tab-3:checked ~ .tab .tab-3{color:#fefefe}
.tab label:nth-child(2){width: 40%}
.tab .tabSlider{position:absolute;height:85%;border-radius:inherit;background:#f89000;opacity:.8;transition:all 0.3s ease}
#tab-1:checked ~ .tab .tabSlider{left: 0%;width: 90px;transform: translateX(5%)}
#tab-2:checked ~ .tab .tabSlider{left: 50%;width: 120px;transform: translateX(-50%)}
#tab-3:checked ~ .tab .tabSlider{left: 100%;width: 95px;transform: translateX(-105%)}
.tableWrap input[type='radio']{display: none}
.tableCard{overflow: hidden}
.tableCard .tableCards{display:flex;width:300%}
.tableCards .tableS{width:33.4%}
.tableCards .tableRow-1{transition: all 0.3s ease}
#tab-1:checked ~ .tableCard .tableCards .tableRow-1{margin-left: 0%}
#tab-2:checked ~ .tableCard .tableCards .tableRow-1{margin-left: -33.4%}
#tab-3:checked ~ .tableCard .tableCards .tableRow-1{margin-left: -66.8%}
.tableS .tableDetail{margin:20px 0;text-align:center;padding-bottom:25px;border-bottom:1px solid #e6e6e6}
.tableDetail .tableHarga{font-size:55px;font-weight:600;position:relative}
.tableDetail .tableHarga:before,.tableDetail .tableHarga:after{position:absolute;font-weight:400}
.tableDetail .tableHarga:before{content:'Rp';left:-30px;top:17px;font-size:20px}
.tableDetail .tableHarga:after{content:'rb';right:-27px;bottom:12px;font-size:23px;font-weight:600}
.tableDetail p{font-size:18px;margin-top:5px}
.tableS .tableContent li{display:flex;font-size:15px;list-style:none;margin-bottom:10px;align-items:center}
.tableContent li svg{flex-shrink:0;height:20px;margin-right:10px;margin-top:4px;stroke:#f89000;fill:none;}
.tableContent li span{margin-left:10px}
.tableWrap .buttonx{width:90%;border-radius:25px;border:1px #ccc solid;outline:none;height:50px;font-size:18px;color:#444;cursor:pointer;margin:20px 25px 20px 10px;background:transparent;transition:transform 0.3s ease;align-items:center}
.tableWrap .buttonx:hover{transform:scale(0.98);border:1px #f89000 solid;color:#f89000;outline:none}

/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .tableWrap{background-color:#1e1e1e;color:#fefefe}
.darkMode .tableWrap .tab,.darkMode .tableS .tableDetail,.darkMode .tableWrap .buttonx{border-color:rgba(255,255,255,.1)}

Kode Widget Tab Daftar Harga

Letakkan kode di bawah ini , sesuai keinginan anda.


<div class='tableWrap'>
<input id='tab-1' name='tabSlider' type='radio'/>
<input checked='' id='tab-2' name='tabSlider' type='radio'/>
<input id='tab-3' name='tabSlider' type='radio'/>
<div class='tab'>
<label for='tab-1' class='tab-1'>Free</label>
<label for='tab-2' class='tab-2'>Personal</label>
<label for='tab-3' class='tab-3'>Developer</label>
<div class='tabSlider'></div>
</div>
<div class='tableCard'>
<div class='tableCards'>
<div class='tableS tableRow-1'>
<div class='tableDetail'>
<span class='tableHarga'>0</span>
<p>Pemakaian Pribadi</p>
</div>
<ul class='tableContent'>
<li>
<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Lisensi</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Support</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg><span>Hapus Cridit Link</span></li>
</ul>
<button class='buttonx'>Dapatkan Sekarang</button>
</div>

<div class='tableS'>
<div class='tableDetail'>
<span class='tableHarga'>100</span>
<p>Pemakain Pribadi</p>
</div>
<ul class='tableContent'><li>
<svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Max 3 Domain</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Support 1 Bulan</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Hapus Cridit Link</span></li>
</ul>
<button class='buttonx'>Dapatkan Sekarang</button>
</div>
        
<div class='tableS'>
<div class='tableDetail'>
<span class='tableHarga'>1.500</span>
<p>Jual Kembali</p>
</div>
<ul class='tableContent'>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Unlimited Lisensi</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Support 12 Bulan</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Hapus Cridit Link</span></li>
</ul>
<button class='buttonx'>Dapatkan Sekarang</button>
</div>
</div>
</div>
</div>

Cara Membuat Widget Notifikasi Lonceng di Blogspot

2022-02-22T06:59:00.001+07:00

Widget Notifikasi Lonceng Parabola

Cara membuat widget notifikasi lonceng di blog sebagai berikut ,

Masuk Blogger
Pilih Tema
Edit HTML, copy paste kode CSS di bawah ini di atas kode ]]></b:skin>

CSS Kode Lonceng Parabola


/* multi pop up by wendy code */
.wcIconNotif{position:relative;width:35px;height:35px;display:flex;left:-10px}
.wcIconNotif path{fill:#444}
.wcIconNotif:before{content:attr(aria-label);position:relative;display:flex;padding:5px;font-size:10px;width:13px;height:13px;background-color:#e40101;color:#fefefe;justify-content: center;align-items: center;border-radius:50%;position:relative;top:-7px;left:9px;}
.fullClose{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .1s ease;background:transparent;opacity:0;visibility:hidden}
.wcNotif{position:fixed;opacity:0;visibility:hidden;z-index:999999;overflow-y:auto;top:0;right:20px;background:#fff;border:1px solid #ddd;width:350px;height:auto;max-height:400px;display:block;border-radius:3px;color:#48525c;box-shadow:10px 10px 35px rgba(0,0,0,0.1),-10px -10px 35px rgba(0,0,0,0.1);transition:all .3s ease;}  
.wcNotif:before{content:"";position:fixed;top:0;right:30px;border:10px solid;border-color:transparent transparent #fff transparent;opacity:0;visibility:hidden;transition:all .3s ease;}  
.wcNotif li{border-bottom:1px solid #f1f2f4;padding:10px 20px 10px 0;display:block;align-items:center;margin:0 20px 0 -15px}
.wcNotifStart .more{margin:5px 0 0 -5px;font-size:12px}
#wcCheckPop:checked ~ .wcNotif{visibility:visible;opacity:1;top:80px}
#wcCheckPop:checked ~ .wcNotif:before{visibility:visible;opacity:1;top:62px}
#wcCheckPop:checked ~ .wcNotif + .fullClose{visibility:visible;opacity:1}
#wcCheckPop,.wcPopMenu{display:none}
.wcPopMore{display:flex;align-items:center; font-weight:900; color:#262d3d;padding:0 5px}
.wcPopMore span{flex-grow:1} .accorIcon{position:relative;flex-shrink:0; display:flex;align-items:center;justify-content:center; width:12px;height:12px;margin-right:15px}
.wcPopMenu:checked ~ .wcPopMore span{color:#f89000}
.wcPopMenu:checked ~ .wcPopMore .accorIcon:before, .wcPopMenu:checked ~ .wcPopMore .accorIcon:after{background-color:#f89000}
.wcPopMenu:checked ~ .wcPopMore .accorIcon:after{visibility:hidden;opacity:0}
.wcNotifStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0; transition:all .2s ease; opacity:.8}
.wcPopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px}
@media screen and (max-width:480px){
#wcCheckPop:checked ~ .wcNotif{top:0}
.wcNotifStart{border-top:1px solid #f1f2f4;margin-top:30px}
.wcNotif{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0;padding-top:25px}
.wcNotifClose{position:absolute;top:8px;right:15px;width:40px;height:40px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%2348525c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:35px;background-position:center;}
.wcNotifClose:before{content:'Close';position:relative;right:35px;top:10px;font-size:15px;color:#48525c;}
.wcNotif:before{display:none}
}
  
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .wcIconNotif path{fill:#989b9f}
.darkMode .wcNotif,.darkMode .wcPopMore{background:#2d2d30;color:#fefefe;border:none}
.darkMode .wcNotif:before{border-color:transparent transparent #2d2d30 transparent}
.darkMode .wcNotif li,.darkMode .wcNotifStart{border-color:rgba(255,255,255,.1)}

Kode Lonceng Parabola

Dan letakkan kode lonceng di bawah ini, sesuai keinginan anda.


<label aria-label='5' class='wcIconNotif' for='wcCheckPop'>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(3.500000, 2.000000)'><path d='M10.1405897,17.5694629 C10.4180311,17.32187 10.8438152,17.306518 11.140035,17.5494941 C11.4658769,17.8167678 11.5115565,18.2954075 11.2420632,18.6185658 C10.5777028,19.4801758 9.54987935,19.989855 8.45625097,20 L8.45625097,20 L8.23912504,19.9908542 C7.23082501,19.9176829 6.2975965,19.4204774 5.67931074,18.6185658 L5.67931074,18.6185658 L5.61360047,18.5268524 C5.42043825,18.2101289 5.48511904,17.7924702 5.78133891,17.5494941 C6.10718078,17.2822203 6.58979525,17.3275237 6.85928854,17.6506819 C6.97764172,17.807587 7.11806508,17.9468539 7.27627317,18.0642323 C7.69914856,18.37647 8.23018908,18.5084076 8.75154604,18.4307656 C9.272903,18.3531235 9.74145234,18.0723239 10.0532134,17.6506819 L10.0532134,17.6506819 L10.0620854,17.6506819 Z M8.46512298,-4.79616347e-14 C11.5348397,-4.79616347e-14 14.9771809,2.16454026 15.3675495,5.64012319 L15.3675495,5.64012319 L15.3675495,7.45270568 C15.5008238,8.10690808 15.8070074,8.7142317 16.2547509,9.2124945 C16.2812788,9.24258861 16.3050326,9.27498109 16.325727,9.30928289 C16.7316898,9.92038415 16.9645715,10.62847 17,11.3594369 L17,11.3594369 L16.973384,11.5442147 C17.0039701,12.5445164 16.6701014,13.5222546 16.0329505,14.2982842 C15.2192877,15.1762511 14.1069384,15.724711 12.9100018,15.8380994 C9.96166621,16.1617418 6.98632378,16.1617418 4.03798823,15.8380994 C2.85854477,15.7169871 1.76556768,15.1687337 0.968271552,14.2982842 C0.32061592,13.5333882 -0.0232529078,12.5603384 0.00122207695,11.5618126 L0.00122207695,11.5618126 L0.00122207695,11.4386274 C0.0499997173,10.6857871 0.301205421,9.95964452 0.728727186,9.33567972 L0.728727186,9.33567972 L0.799703295,9.24769028 C1.24431614,8.74732875 1.550059,8.1408792 1.68690465,7.48790145 L1.68690465,7.48790145 L1.68690465,5.67531896 L1.73596444,5.57406421 C1.88512364,5.31699255 2.17563111,5.16663879 2.47988876,5.19955716 C2.82217862,5.23659034 3.09704701,5.4964 3.15078688,5.83369996 L3.15078688,5.83369996 L3.15078688,7.64628245 C3.15423731,7.6784545 3.15423731,7.71089878 3.15078688,7.74307083 C2.96605585,8.65082423 2.5438164,9.49441706 1.92644901,10.1891773 C1.68869608,10.5647756 1.55412081,10.9955098 1.53608042,11.4386274 L1.53608042,11.4386274 L1.53608042,11.6322041 C1.5163842,12.2554331 1.72432594,12.8647465 2.12163331,13.3479982 C2.67246619,13.9122665 3.40906548,14.2619232 4.19768448,14.33348 C7.05196634,14.641453 9.93151171,14.641453 12.7857936,14.33348 C13.5959515,14.2597331 14.3505573,13.893366 14.9062048,13.3040035 C15.2840021,12.832157 15.4819205,12.2432918 15.4651417,11.6410031 L15.4651417,11.6410031 L15.4651417,11.4386274 C15.4469401,10.9940255 15.3157095,10.5612015 15.0836451,10.1803784 C14.4405839,9.49350507 13.9935016,8.64922252 13.7883311,7.73427189 C13.7848807,7.70209983 13.7848807,7.66965556 13.7883311,7.6374835 L13.7883311,7.6374835 L13.7883311,5.81610207 C13.5310427,3.15882094 10.8605666,1.51341839 8.53609909,1.51341839 C7.54785763,1.51116468 6.57587086,1.76276992 5.71479879,2.24373075 L5.71479879,2.24373075 L5.60933557,2.2960794 C5.3925253,2.38362843 5.14447476,2.36825807 4.93831291,2.24943144 C4.69779074,2.11080037 4.55240903,1.8533283 4.55890889,1.57750418 C4.56540876,1.30168007 4.72275991,1.05122495 4.96954965,0.923889133 C6.03654057,0.326071387 7.23966405,0.00808271832 8.46512298,-4.79616347e-14 Z'/></g></svg>
</label>

Keterangan :
aria-label='5' , nilai 5 adalah jumlah notifikasi.

Kode terakhir widget notifikasi lonceng parabola

Letakkan kode di bawah ini kode footer , sbb :

<input id='wcCheckPop' type='checkbox'/>
<div class='wcNotif'>
<label class='wcNotifClose' for='wcCheckPop'/>
<ul class='wcNotifStart'>
<li>
Paket Parabola Mini TV Islam.  
<input class='wcPopMenu' id='pop-menu1' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu1'>
<span class='more'>Selengkapnya</span>
</label>
<div class='content'>
  
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4d6LXp03PP923EJW669S2KKzrLD0eB9hbMtdGRPNzaLRgXPAuIRl2JgYG6PYJcsZsX3mRGcyvNlrtO5WD54tGJcwfmnVr6fWRK_BX4FmXobbZgGFd3rjMapSE7Fl0GwUAeOFrvbQWxKs/s1600/Gambar+TV+Islam.png' style='display: block; padding: 1em 0; text-align: center; '><img alt='Parabola Mini TV Islam' border='0' data-original-height='378' data-original-width='756' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4d6LXp03PP923EJW669S2KKzrLD0eB9hbMtdGRPNzaLRgXPAuIRl2JgYG6PYJcsZsX3mRGcyvNlrtO5WD54tGJcwfmnVr6fWRK_BX4FmXobbZgGFd3rjMapSE7Fl0GwUAeOFrvbQWxKs/s1600/Gambar+TV+Islam.png' width='320'/></a>
  
 <b>Spesifikasi Teknis :</b>  <br/>
  
&#10003; 1 bh antena parabola mini.<br/>
&#10003; 1 bh LNB Ku-Band single.<br/>
&#10003; 15 meter kabel coaxcial rg6.<br/>
&#10003; 1 bh Receiver/Dekoder MPEG4/HDMI.<br/>
&#10003; Harga sudah termasuk dengan pemasangan parabola area Bandung dan sekitarnya. <br/>
&#10003; Warna, Type dan Dus tidak mengikat, sesuai stok barang yang ada.
&#10003; Channel sewaktu-waktu berubah dari satelitnya, tanpa pemberitahuan.
</div>
</li>  

<li>
Paket Parabola Mini K-Vision.  
<input class='wcPopMenu' id='pop-menu2' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu2'>
<span class='more'>Selengkapnya</span>
</label>
<div class='content'>

<a href='https://blogger.googleusercontent.com/img/a/AVvXsEgDJ3O8j1oSshzGW1kWw-NEgwMkg8nfZdNMNo2cc4rpLmEZ6L4ZKCPPPp0e-L_68a8c9wA2BHuLvedvazCc1tiTZZc61URYJYFKN_SJTQVdKEXGjwU2aJq8x2On-yB-PgqPDsKRL2CQYfTwf_BcWgZ0Dpk8VoMHbTBrBrVO1gPA5vKKMNHoIL5su8KD=s225' style='display: block; padding: 1em 0; text-align: center; '><img alt='Parabola Mini K-Vision' border='0' data-original-height='225' data-original-width='225' src='https://blogger.googleusercontent.com/img/a/AVvXsEgDJ3O8j1oSshzGW1kWw-NEgwMkg8nfZdNMNo2cc4rpLmEZ6L4ZKCPPPp0e-L_68a8c9wA2BHuLvedvazCc1tiTZZc61URYJYFKN_SJTQVdKEXGjwU2aJq8x2On-yB-PgqPDsKRL2CQYfTwf_BcWgZ0Dpk8VoMHbTBrBrVO1gPA5vKKMNHoIL5su8KD=s320' width='320'/></a>
  
<b>Spesifikasi Teknis :</b>  <br/>
  
&#10003; 1 bh antena parabola mini.<br/>
&#10003; 1 bh LNB Ku-Band single.<br/>
&#10003; 15 meter kabel coaxcial rg6.<br/>
&#10003; 1 bh Receiver/Dekoder K-Vision.<br/>
&#10003; Harga sudah termasuk dengan pemasangan parabola area Bandung dan sekitarnya. <br/>
&#10003; Warna, Type dan Dus tidak mengikat, sesuai stok barang yang ada.
&#10003; Channel sewaktu-waktu berubah dari satelitnya, tanpa pemberitahuan.
</div>
</li>

<li>
Paket Nex Parabola Mini   
<input class='wcPopMenu' id='pop-menu3' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu3'>
<span class='more'>Selengkapnya</span>
</label>
<div class='content'>
<a href='https://blogger.googleusercontent.com/img/a/AVvXsEi3nQmFmZXWGEH621icXSgwIgRPYTnXj5Rlh13JBe8Q9KkJcBTHZ13nBEhRmPV9yCN-ps_eDaGm7pJPdO3oYhLmftzimhV-_ovW0XTWP2dg9wW0zbGQWGjuGYXsMNnI1NCCBUoACTfLKIFNeg7dDZuwi-5kOmSw9BLitasy9isjaVjqb-P504HqWAfq=s720' style='display: block; padding: 1em 0; text-align: center; '><img alt='Nex Parabola Mini' border='0' data-original-height='709' data-original-width='720' src='https://blogger.googleusercontent.com/img/a/AVvXsEi3nQmFmZXWGEH621icXSgwIgRPYTnXj5Rlh13JBe8Q9KkJcBTHZ13nBEhRmPV9yCN-ps_eDaGm7pJPdO3oYhLmftzimhV-_ovW0XTWP2dg9wW0zbGQWGjuGYXsMNnI1NCCBUoACTfLKIFNeg7dDZuwi-5kOmSw9BLitasy9isjaVjqb-P504HqWAfq=s320' width='320'/></a>  
<b>Spesifikasi Teknis :</b>  <br/>
  
&#10003; 1 bh antena parabola mini.<br/>
&#10003; 1 bh LNB Ku-Band single.<br/>
&#10003; 15 meter kabel coaxcial rg6.<br/>
&#10003; 1 bh Receiver/Dekoder Nex Parabola.<br/>
&#10003; Harga sudah termasuk dengan pemasangan parabola area Bandung dan sekitarnya. <br/>
&#10003; Warna, Type dan Dus tidak mengikat, sesuai stok barang yang ada.
&#10003; Channel sewaktu-waktu berubah dari satelitnya, tanpa pemberitahuan.
</div>
</li>

<li>
Paket Parabola Mini Nusantara.  
<input class='wcPopMenu' id='pop-menu4' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu4'>
<span class='more'>Selengkapnya</span>
</label>
<div class='content'>
<a href='https://blogger.googleusercontent.com/img/a/AVvXsEgawr-d7E7f3BJaE2lB4xP9g3DK6L25vuI1xERoGO_Bvp0Dw2yw1rc0gFHGg7fjkwfqCmPGrNolTBkM3jq0qrF2dzuCgLRKHWW6sPs6hl0dByhHHj3c6iEQpp4D924mT32roHOXKUVOQZa-dxefhKl3s-fzt-PMj-DS1kfw1UU78juiAfsrMlJ47C3c=s640' style='display: block; padding: 1em 0; text-align: center; '><img alt='Parabola Mini Nusantara' border='0' data-original-height='640' data-original-width='640' src='https://blogger.googleusercontent.com/img/a/AVvXsEgawr-d7E7f3BJaE2lB4xP9g3DK6L25vuI1xERoGO_Bvp0Dw2yw1rc0gFHGg7fjkwfqCmPGrNolTBkM3jq0qrF2dzuCgLRKHWW6sPs6hl0dByhHHj3c6iEQpp4D924mT32roHOXKUVOQZa-dxefhKl3s-fzt-PMj-DS1kfw1UU78juiAfsrMlJ47C3c=s320' width='320'/></a>  
<b>Spesifikasi Teknis :</b>  <br/>
  
&#10003; 1 bh antena parabola mini.<br/>
&#10003; 1 bh LNB Ku-Band single.<br/>
&#10003; 15 meter kabel coaxcial rg6.<br/>
&#10003; 1 bh Receiver/Dekoder Tanaka Nusantara.<br/>
&#10003; Harga sudah termasuk dengan pemasangan parabola area Bandung dan sekitarnya. <br/>
&#10003; Warna, Type dan Dus tidak mengikat, sesuai stok barang yang ada.
&#10003; Channel sewaktu-waktu berubah dari satelitnya, tanpa pemberitahuan.  
</div>
</li>

<li>
Paket Parabola Jaring.  
<input class='wcPopMenu' id='pop-menu5' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu5'>
<span class='more'>Selengkapnya</span>
</label>
<div class='content'>

<a href='https://blogger.googleusercontent.com/img/a/AVvXsEhCrIuIlYfJ_6FUs2QtegXn0dWCQi7OmkjgPNBh1DnoyTND9tWDsTnoFx37fHpb7EboG9pv7kLiI32F3749uX3PBJrS_-ssNHWnhWccjvb_aDrjVQwSNXfc6bqmI7uvAlpiy7TrexgrOtmhyAVbnN1ZCZGwFvozVXSksEXpa0s1Y9HO4YD1TAFgtBEl=s970' style='display: block; padding: 1em 0; text-align: center; '><img alt='Parabola Jaring' border='0' data-original-height='970' data-original-width='720' height='320' src='https://blogger.googleusercontent.com/img/a/AVvXsEhCrIuIlYfJ_6FUs2QtegXn0dWCQi7OmkjgPNBh1DnoyTND9tWDsTnoFx37fHpb7EboG9pv7kLiI32F3749uX3PBJrS_-ssNHWnhWccjvb_aDrjVQwSNXfc6bqmI7uvAlpiy7TrexgrOtmhyAVbnN1ZCZGwFvozVXSksEXpa0s1Y9HO4YD1TAFgtBEl=s320'/></a>  
<b>Spesifikasi Teknis :</b>  <br/>
  
&#10003; 1 bh antena parabola mini.<br/>
&#10003; 1 bh LNB C-Band single.<br/>
&#10003; 15 meter kabel coaxcial rg6.<br/>
&#10003; 1 bh Receiver/Dekoder MPEG4/HDMI/K-Vison/Nex Parabola.<br/>
&#10003; 1 bh pipa tiang besi.<br/>
&#10003; Harga sudah termasuk dengan pemasangan parabola area Bandung dan sekitarnya. <br/>
&#10003; Warna, Type dan Dus tidak mengikat, sesuai stok barang yang ada.
&#10003; Channel sewaktu-waktu berubah dari satelitnya, tanpa pemberitahuan.
</div>
</li>

<!-- tambah notifikasi di atas sini -->
</ul>
</div>
<label class='fullClose' for='wcCheckPop'/>

Membuat Widget Box Notifikasi Informasi di Blogspot

2022-02-21T19:21:00.002+07:00

Widget Box Notifikasi

Widget yang menampilkan tentang sesuatu, yang berguna untuk para pengunjung blog mengenai informasi apapun yang pengen di tampilkan.

Cara membuat widget box kotak notifikasi informasi sbb :
Letakkan kode di bawah ini di atas ]]></b:skin>


/* CSS Widget Info About Us */
.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#222;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#e74c3c}
kepala{background:#de9b31;height:50px;width:100%;position:inherit}
#textlogo{background:#f0a734;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:58.4%;box-sizing:initial;}
#left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#bdc3c7;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;}
.taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#1abc9c;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal;font-size:13px}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{display:none;}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:relative;top:5px;border-radius:50px;float:right;right:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}
a.popup-close:hover{color:#fff}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999}
.totalposts .totallabel{display:block;text-transform:uppercase;color:#2980b9}
li.infoindzign{border:0;float:right;list-style:none}
li.infoindzign a{background:#f39c12;color:#fff;display:block;margin:20px 20px 13px 0;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-family:'Roboto Condensed';transition:background-color .3s}
i.infoindzign a:hover{background:#e67e22;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}

Kemudian letakkan kode html di bawah ini , di bawah kode <body>


<li class='infoindzign'><a class='popup-link' href='#popup'>Info</a></li>
<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'></div>
<div class='circle'></div>
<div class='circle'></div>
<div class='contentbox'>
<kepala><span id='textlogo'><data:blog.title/></span>
<a class='popup-close' href='#closed' title='Close'>×</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img expr:alt='data:blog.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgasAhlhDyJ0K0mIv3CMwQFYWZ6qlA3fCnurZIaw0fNl5c2veLJ3fJg6WMW1pjdIHg_lCNF2BXY4rr9jE017FBzoLWN878CxjDPV9zN-5eduK4-kJWRW89JrfK5TeowyaIGP7FU-EJXcJ0m/s1600/indzign.jpg' expr:title='data:blog.title'/><br/>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=getposts'></script><br/><br/>
Deskripsi Tentang Blog anda Disini.
</div></div></div>
<div id='left'>
<div class='taber1'><a href='/' rel='nofollow' target='_blank' expr:title='data:blog.title'><data:blog.title/></a></div>
<div class='taber2'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Google+'>Google+</a></div>
<div class='taber3'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Facebook'>Facebook</a></div>
<div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'>Twitter</a>
</div>
<div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Codepen'>Codepen</a></div>
<div class='taber7'><a href='#' rel='nofollow' target='_blank' title='Join this blog'>Join this blog</a></div>
</div></div></div></div></div>

Jika ingin menampilkan button widgetnya, tinggal menambahkan
href='#popup'
jika sudah dan tidak ingin menampilkan button originalnya, tinggal menghapus kode berikut :
<li class='infoindzign'><a class='popup-link' href='#popup'>Info</a></li>

Kemudian letakan kode script di bawah ini diatas </head> atau </body>


<script type='text/javascript'>
//<![CDATA[
// Total Posts
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Artikel yang di Publish</span></div>');}
//]]>
</script>

Simpan template

Membuat Widget Kode Warna Flat Ui Color Di Halaman Blog

2022-02-21T17:41:00.000+07:00

Flat Ui Color

Cara membuat widget kode warna Flat Ui Color seperti di bawah ini, ikuti tahapan-tahapan di bawah nya,

Turquoise GreenSea Emerald Nephritis PRiver BelizeH Amethyst Wisteria WetA Midnight Sunflower Orange Carrot WhiteSmoke Pumpkin Alizarin Pgranate Clouds Silver Concrete Asbestos ChestnutR AliceBlue Spray Gossip CreamCan SilverTree CapeHoney MTurquoise Lynch Crusta JungleG Hoki WaxFlower Observat Ecstacy

Silakan klik tombol warna diatas,

Kemudian salin kode warna yang sudah Anda pilih.

Tahapan membuat Flat Ui Color

Masuk ke Blogger
Buat halaman baru
Pilih Mode HTML
Masukan kode di bawah ini
Kemudian Simpan ( Jangan kembali ke mode Compose)


<p><center class="button_me" id="button_me"><a class="button button_turquoise" onClick="colorToTurquoise()">Turquoise</a><a class="button button_green_sea" onClick="colorToGreenSea()">GreenSea</a><a class="button button_emerald" onClick="colorToEmerald()">Emerald</a><a class="button button_nephritis" onClick="colorToNephritis()">Nephritis</a><a class="button button_peter_river" onClick="colorToPeterRiver()">PRiver</a><a class="button button_belize_hole" onClick="colorToBelizeHole()">BelizeH</a><a class="button button_amethyst" onClick="colorToAmethyst()">Amethyst</a><a class="button button_wisteria" onClick="colorToWisteria()">Wisteria</a><a class="button button_wet_asphalt" onClick="colorToWetAsphalt()">WetA</a><a class="button button_midnight_blue" onClick="colorToMidnightBlue()">Midnight</a><a class="button button_sunflower" onClick="colorToSunflower()">Sunflower</a><a class="button button_orange" onClick="colorToOrange()">Orange</a><a class="button button_carrot" onClick="colorToCarrot()">Carrot</a><a class="button button_white_smoke" onClick="colorToWhiteSmoke()">WhiteSmoke</a><a class="button button_pumpkin" onClick="colorToPumpkin()">Pumpkin</a><a class="button button_alizarin" onClick="colorToAlizarin()">Alizarin</a><a class="button button_pomegranate" onClick="colorToPomegranate()">Pgranate</a><a class="button button_clouds" onClick="colorToClouds()">Clouds</a><a class="button button_silver" onClick="colorToSilver()">Silver</a><a class="button button_concrete" onClick="colorToConcrete()">Concrete</a><a class="button button_asbestos" onClick="colorToAsbestos()">Asbestos</a><a class="button button_chestnut_rose" onClick="colorToChestnutRose()">ChestnutR</a><a class="button button_alice_blue" onClick="colorToAliceBlue()">AliceBlue</a><a class="button button_spray" onClick="colorToSpray()">Spray</a><a class="button button_gossip" onClick="colorToGossip()">Gossip</a><a class="button button_cream_can" onClick="colorToCreamCan()">CreamCan</a><a class="button button_silver_tree" onClick="colorToSilverTree()">SilverTree</a><a class="button button_cape_honey" onClick="colorToCapeHoney()">CapeHoney</a><a class="button button_medium_turquoise" onClick="colorToMediumTurquoise()">MTurquoise</a><a class="button button_lynch" onClick="colorToLynch()">Lynch</a><a class="button button_crusta" onClick="colorToCrusta()">Crusta</a><a class="button button_jungle_green" onClick="colorToJungleGreen()">JungleG</a><a class="button button_hoki" onClick="colorToHoki()">Hoki</a><a class="button button_wax_flower" onClick="colorToWaxFlower()">WaxFlower</a><a class="button button_observatory" onClick="colorToObservatory()">Observat</a><a class="button button_ecstacy" onClick="colorToEcstasy()">Ecstacy</a></center><center><div class="wrap-header">FLAT UI COLOR</div><div class="kode-warna" id="kode-warna"><div class="colorName" id="colorName">Silakan klik tombol warna diatas,</div><div class="colorText" id="colorText">Kemudian salin kode warna yang sudah Anda pilih.</div><section><p></p></section></div></center><style scoped="" type="text/css">
#sidebar-wrapper{display:none}#main-wrapper{float:none;width:100%;margin-right:0}.wrap-header{text-align:center;font-size:20px;background:#444;color:#fafafa;padding:10px;font-weight:700}.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center;margin-bottom:20px}#button_me a:hover{color:#fff}.button{margin:0!important;text-transform:none;cursor:pointer;font-size:12px;line-height:3.4em;flex:100 100 8%;-webkit-flex:100 100 8%;-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial}.button_turquoise{border:5px solid #1abc9c;background:#1abc9c;color:#fff;padding:1px}.button_green_sea{border:5px solid #16a085;background:#16a085;color:#fff;padding:1px}.button_emerald{border:5px solid #2ecc71;background:#2ecc71;color:#fff;padding:1px}.button_nephritis{border:5px solid #27ae60;background:#27ae60;color:#fff;padding:1px}.button_peter_river{border:5px solid #3498db;background:#3498db;color:#fff;padding:1px}.button_belize_hole{border:5px solid #2980b9;background:#2980b9;color:#fff;padding:1px}.button_amethyst{border:5px solid #9b59b6;background:#9b59b6;color:#fff;padding:1px}.button_wisteria{border:5px solid #8e44ad;background:#8e44ad;color:#fff;padding:1px}.button_wet_asphalt{border:5px solid #34495e;background:#34495e;color:#fff;padding:1px}.button_midnight_blue{border:5px solid #2c3e50;background:#2c3e50;color:#fff;padding:1px}.button_sunflower{border:5px solid #f1c40f;background:#f1c40f;color:#fff;padding:1px}.button_orange{border:5px solid #f39c12;background:#f39c12;color:#fff;padding:1px}.button_carrot{border:5px solid #e67e22;background:#e67e22;color:#fff;padding:1px}.button_pumpkin{border:5px solid #d35400;background:#d35400;color:#fff;padding:1px}.button_alizarin{border:5px solid #e74c3c;background:#e74c3c;color:#fff;padding:1px}.button_pomegranate{border:5px solid #c0392b;background:#c0392b;color:#fff;padding:1px}.button_clouds{border:5px solid #ecf0f1;background:#ecf0f1;color:#808080;padding:1px}.button_silver{border:5px solid #bdc3c7;background:#bdc3c7;color:#fff;padding:1px}.button_concrete{border:5px solid #95a5a6;background:#95a5a6;color:#fff;padding:1px}.button_asbestos{border:5px solid #7f8c8d;background:#7f8c8d;color:#fff;padding:1px}.button_chestnut_rose{border:5px solid #D24D57;background:#D24D57;color:#fff;padding:1px}.button_alice_blue{border:5px solid #E4F1FE;background:#E4F1FE;color:#999;padding:1px}.button_spray{border:5px solid #81CFE0;background:#81CFE0;color:#fff;padding:1px}.button_gossip{border:5px solid #87D37C;background:#87D37C;color:#fff;padding:1px}.button_cream_can{border:5px solid #F5D76E;background:#F5D76E;color:#fff;padding:1px}.button_silver_tree{border:5px solid #68C3A3;background:#68C3A3;color:#fff;padding:1px}.button_cape_honey{border:5px solid #FDE3A7;background:#FDE3A7;color:#999;padding:1px}.button_medium_turquoise{border:5px solid #4ECDC4;background:#4ECDC4;color:#fff;padding:1px}.button_white_smoke{border:5px solid #ECECEC;background:#ECECEC;color:#999;padding:1px}.button_lynch{border:5px solid #6C7A89;background:#6C7A89;color:#fff;padding:1px}.button_crusta{border:5px solid #F2784B;background:#F2784B;color:#fff;padding:1px}.button_jungle_green{border:5px solid #26C281;background:#26C281;color:#fff;padding:1px}.button_hoki{border:5px solid #67809F;background:#67809F;color:#fff;padding:1px}.button_wax_flower{border:5px solid #F1A9A0;background:#F1A9A0;color:#fff;padding:1px}.button_observatory{border:5px solid #049372;background:#049372;color:#fff;padding:1px}.button_ecstacy{border:5px solid #F9690E;background:#F9690E;color:#fff;padding:1px}.kode-warna{line-height:normal;border:1px solid #38424b;padding-top:30px;font-size:28px;color:#999;width:100%;background:#ececec}section{background:#transparent;margin:30px;width:80%;color:#000;border-top-right-radius:5px;border-top-left-radius:5px;padding-left:20px;padding-right:20px;padding-top:1px;padding-bottom:1px;text-align:left}@media (max-width:800px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center}.button{font-size:4px}.kode-warna{width:100%}}@media (max-width:320px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center}.button{font-size:3px}.kode-warna{width:100%}}@media (max-width:360px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center}.button{font-size:3px}}
</style><br />
<script type="text/javascript">
function colorToTurquoise(){document.getElementById("kode-warna").style.backgroundColor="#1abc9c";var e=document.getElementById("colorName");e.innerHTML="Turquoise",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#1abc9c"}function colorToGreenSea(){document.getElementById("kode-warna").style.backgroundColor="#16a085";var e=document.getElementById("colorName");e.innerHTML="Green Sea",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#16a085"}function colorToEmerald(){document.getElementById("kode-warna").style.backgroundColor="#2ecc71";var e=document.getElementById("colorName");e.innerHTML="Emerald",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#2ecc71"}function colorToNephritis(){document.getElementById("kode-warna").style.backgroundColor="#27ae60";var e=document.getElementById("colorName");e.innerHTML="Nephritis",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#27ae60"}function colorToPeterRiver(){document.getElementById("kode-warna").style.backgroundColor="#3498db";var e=document.getElementById("colorName");e.innerHTML="Peter River",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#3498db"}function colorToBelizeHole(){document.getElementById("kode-warna").style.backgroundColor="#2980b9";var e=document.getElementById("colorName");e.innerHTML="Belize Hole",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#2980b9"}function colorToAmethyst(){document.getElementById("kode-warna").style.backgroundColor="#9b59b6";var e=document.getElementById("colorName");e.innerHTML="Amethyst",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#9b59b6"}function colorToWisteria(){document.getElementById("kode-warna").style.backgroundColor="#8e44ad";var e=document.getElementById("colorName");e.innerHTML="Wisteria",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#8e44ad"}function colorToWetAsphalt(){document.getElementById("kode-warna").style.backgroundColor="#34495e";var e=document.getElementById("colorName");e.innerHTML="Wet Asphalt",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#34495e"}function colorToMidnightBlue(){document.getElementById("kode-warna").style.backgroundColor="#2c3e50";var e=document.getElementById("colorName");e.innerHTML="Midnight Blue",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#2c3e50"}function colorToSunflower(){document.getElementById("kode-warna").style.backgroundColor="#f1c40f";var e=document.getElementById("colorName");e.innerHTML="Sunflower",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#f1c40f"}function colorToOrange(){document.getElementById("kode-warna").style.backgroundColor="#f39c12";var e=document.getElementById("colorName");e.innerHTML="Orange",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#f39c12"}function colorToCarrot(){document.getElementById("kode-warna").style.backgroundColor="#e67e22";var e=document.getElementById("colorName");e.innerHTML="Carrot",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#e67e22"}function colorToPumpkin(){document.getElementById("kode-warna").style.backgroundColor="#d35400";var e=document.getElementById("colorName");e.innerHTML="Pumpkin",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#d35400"}function colorToAlizarin(){document.getElementById("kode-warna").style.backgroundColor="#e74c3c";var e=document.getElementById("colorName");e.innerHTML="Alizarin",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#e74c3c"}function colorToPomegranate(){document.getElementById("kode-warna").style.backgroundColor="#c0392b";var e=document.getElementById("colorName");e.innerHTML="Pomegranate",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#c0392b"}function colorToClouds(){document.getElementById("kode-warna").style.backgroundColor="#ecf0f1";var e=document.getElementById("colorName");e.innerHTML="Clouds",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#ecf0f1"}function colorToSilver(){document.getElementById("kode-warna").style.backgroundColor="#bdc3c7";var e=document.getElementById("colorName");e.innerHTML="Silver",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#bdc3c7"}function colorToConcrete(){document.getElementById("kode-warna").style.backgroundColor="#95a5a6";var e=document.getElementById("colorName");e.innerHTML="Concrete",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#95a5a6"}function colorToAsbestos(){document.getElementById("kode-warna").style.backgroundColor="#7f8c8d";var e=document.getElementById("colorName");e.innerHTML="Asbestos",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#7f8c8d"}function colorToChestnutRose(){document.getElementById("kode-warna").style.backgroundColor="#D24D57";var e=document.getElementById("colorName");e.innerHTML="Chestnut Rose",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#D24D57"}function colorToAliceBlue(){document.getElementById("kode-warna").style.backgroundColor="#E4F1FE";var e=document.getElementById("colorName");e.innerHTML="Alice Blue",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#E4F1FE"}function colorToSpray(){document.getElementById("kode-warna").style.backgroundColor="#81CFE0";var e=document.getElementById("colorName");e.innerHTML="Spray",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#81CFE0"}function colorToGossip(){document.getElementById("kode-warna").style.backgroundColor="#87D37C";var e=document.getElementById("colorName");e.innerHTML="Gossip",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#87D37C"}function colorToCreamCan(){document.getElementById("kode-warna").style.backgroundColor="#F5D76E";var e=document.getElementById("colorName");e.innerHTML="CreamCan",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#F5D76E"}function colorToSilverTree(){document.getElementById("kode-warna").style.backgroundColor="#68C3A3";var e=document.getElementById("colorName");e.innerHTML="SilverTree",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#68C3A3"}function colorToCapeHoney(){document.getElementById("kode-warna").style.backgroundColor="#FDE3A7";var e=document.getElementById("colorName");e.innerHTML="CapeHoney",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#FDE3A7"}function colorToMediumTurquoise(){document.getElementById("kode-warna").style.backgroundColor="#4ECDC4";var e=document.getElementById("colorName");e.innerHTML="Medium Turquoise",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#4ECDC4"}function colorToWhiteSmoke(){document.getElementById("kode-warna").style.backgroundColor="#ECECEC";var e=document.getElementById("colorName");e.innerHTML="White Smoke",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#ECECEC"}function colorToLynch(){document.getElementById("kode-warna").style.backgroundColor="#6C7A89";var e=document.getElementById("colorName");e.innerHTML="Lynch",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#6C7A89"}function colorToCrusta(){document.getElementById("kode-warna").style.backgroundColor="#F2784B";var e=document.getElementById("colorName");e.innerHTML="Crusta",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#F2784B"}function colorToJungleGreen(){document.getElementById("kode-warna").style.backgroundColor="#26C281";var e=document.getElementById("colorName");e.innerHTML="JungleGreen",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#26C281"}function colorToHoki(){document.getElementById("kode-warna").style.backgroundColor="#67809F";var e=document.getElementById("colorName");e.innerHTML="Hoki",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#67809F"}function colorToWaxFlower(){document.getElementById("kode-warna").style.backgroundColor="#F1A9A0";var e=document.getElementById("colorName");e.innerHTML="WaxFlower",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#F1A9A0"}function colorToObservatory(){document.getElementById("kode-warna").style.backgroundColor="#049372";var e=document.getElementById("colorName");e.innerHTML="Observatory",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#049372"}function colorToEcstasy(){document.getElementById("kode-warna").style.backgroundColor="#F9690E";var e=document.getElementById("colorName");e.innerHTML="Ecstasy",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#F9690E"}
</script></p>
<div style='clear: both;'></div>

Cara Memperbaiki Artikel Author Kolom Url Tidak Ada di Pengujian Hasil Kaya Google

2022-02-20T22:59:00.002+07:00

Rich Snippet / Uji Hasil Kaya Google

Author Kolom Url Tidak Ada - Author Error Missing Field Url

Kenapa muncul warning author Missing field url ? warning missing field url author. Solusinya adalah cukup dengan menambahkan beberapa kode postMetadataJSON terbaru. Pada beberapa template masih menggunakan 1 baris kode postMetadataJSON lama, sehingga menyebabkan muncul warning tersebut.

Cara Memperbaiki Artikel Author Kolom Url - Rich Snippet

Masuk ke akun Blogger
Lalu pilih Edit HTML
Selanjutnya cari baris name='postMetadataJSON'

Contoh :

<b:includable id='postMeta' var='post'>

<b:include data='post' name='postMetadataJSON'/>
</b:includable>

Tepat dibawah baris </b:includable> tambahkan kode dibawah ini:

<b:includable id='postMetadataJSON'>
    <script type='application/ld+json'>
      {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "mainEntityOfPage": {
          "@type": "WebPage",
          "@id": "<data:post.url.canonical.jsonEscaped/>"
        },
        "headline": "<data:post.title.jsonEscaped/>",
        "description": "<b:eval expr='data:blog.metaDescription.escaped ? data:blog.metaDescription.escaped : data:this.description'/>",
        "datePublished": "<data:post.date.iso8601.jsonEscaped/>",
        "dateModified": "<data:post.lastUpdated.iso8601.jsonEscaped/>",
        <b:include data='post' name='postMetadataJSONImage'/><b:include data='post' name='postMetadataJSONPublisher'/>
        "author": {
          "@type": "Person",
          "name": "<data:post.author.name.jsonEscaped/>",
          "url": "<b:if cond='data:post.author.profileUrl'><data:post.author.profileUrl.jsonEscaped/><b:else/><data:blog.homepageUrl.jsonEscaped/></b:if>",
          "image": "<data:post.author.authorPhoto.image.jsonEscaped/>"
        }
      }
    </script>
</b:includable>

Save template dan lanjut lakukan pengetesan ulang di search.google.com/test/rich-results.

Membuat Widget Script PreCode Syntax Highlighter Blogspot

2022-02-18T17:36:00.001+07:00

Cara Membuat Widget Syntax Highlighter Keren di Blogger

Buka Blogger > Template > Edit HTML >
Langkah pertama, kamu harus memberi kode tambahan kedalam template blogger, caranya salin dulu kode CSS dibawah ini agar tulisannya berwarna.

Letakan kode di bawah ini, di atas kode ]]></b:skin> atau </style>


.hljs{display:block;overflow-x:auto;padding:.5em;background:#333;line-height: 1.3em!important;color:#fff}
.hljs span{font-family:Consolas,Monaco,'Andale Mono',monospace!important;font-weight:400}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}
.hljs-bullet,.hljs-string{color:#a2fca2}
.hljs-attribute,.hljs-built_in,.hljs-builtin-name,.hljs-quote,.hljs-section,.hljs-title,.hljs-type{color:#ffa}
.hljs-bullet,.hljs-number,.hljs-symbol{color:#d36363}
.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}
.hljs-code,.hljs-comment,.hljs-deletion{color:#888}
.hljs-link,.hljs-regexp{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}

Langkah terakhir copy kode di bawah ini , paste di atas kode </head>


<script rel='stylesheet' src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
    <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;index&quot;}'>
 &lt;/div&gt;
 </b:if>

Kemudian Simpan.
Demikian cara membuat widget kode precode highlighter di blogspot. Semoga sukses.

Widget Alat Konversi HTML Converter Parser Blogspot

2022-02-18T16:44:00.002+07:00

HTML Converter Parser Blogspot

Khususnya jika Anda mulai monetasi blog dengan Adsense atau iklan-iklan serupa, script iklan mesti diurai dahulu sebelum dimasukkan ke template blog. HTML Parser memungkinkan karakter entitas HTML secara otomatis terbaca dalam format XML. Dan, ini tidak terbatas mengubah script iklan, namun kode HTML apapun.

HTML Parser

Apa itu HTML Parser, dan apa fungsinya?. Parse berarti mengurai atau bisa juga mengubah. Kita perlu mengurai kode HTML agar tidak error saat dimasukkan dalam template Blogger yang berformat XML. Proses mem-parse HTML ke XML tidaklah mengubah keseluruhan kodenya. Hanya beberapa kode tertentu yang memungkinkan terjadinya error saat kita masukkannya ke dalam template Blogger atau Blogspot berformat XML.

Berikut ini adalah contoh kode HTML yang akan berubah ketika diurai menggunakan alat parse HTML:

Kode < akan berubah menjadi <
Kode > akan berubah menjadi >
Kode " akan berubah menjadi "
Kode ' akan berubah menjadi &#039
Kode & akan berubah menjadi &

Alat HTML Converter Parser

Tutorial Membuat Parse HTML di Blogger

Untuk membuat atau memasang HTML Parser di blogger, caranya simple. Anda hanya perlu membuat halaman baru di blog. Ketika berada dalam antarmuka edit halaman, ganti tampilan Menulis (compose) menjadi tampilan HTML. Selanjutnya, salin script di bawah ini dan paste ke tempat posting. Kemudian Publikasikan.


<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea><br />
<br />
<div class="button-group"><button id="cvrt" onclick="cdConvert();this.disabled = true;" class="ripplelink">Konversi</button><button onclick="cdClear();" class="ripplelink">Bersihkan</button></div><ul id='wrapin'><li><input checked="true" class="option-input checkbox" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>
<li><input id="opt2" class="option-input checkbox" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>
<li><input id="opt3" class="option-input checkbox" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code></li>
</ul><script type="text/javascript">
function cdClear(){var a=document.getElementById("codes");a.value="",a.focus(),document.getElementById("cvrt").disabled=!1}function cdConvert(){var a=document.getElementById("codes"),b=a.value,c=document.getElementById("opt1"),d=document.getElementById("opt2"),e=document.getElementById("opt3"),f=document.getElementById("opt4"),g=document.getElementById("opt5");b=b.replace(/\t/g,"    "),c.checked&&(b=b.replace(/&/g,"&amp;")),d.checked&&(b=b.replace(/'/g,"&#039;")),e.checked&&(b=b.replace(/"/g,"&quot;")),f.checked&&(b=b.replace(/</g,"&lt;")),g.checked&&(b=b.replace(/>/g,"&gt;")),a.value=b,a.focus(),a.select()}
</script><br />
<div style='clear: both;'></div><style scoped="" type="text/css">
#main-wrapper{padding:0;width:100%;border:0}
code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}
#codes{border:1px solid rgba(0,0,0,0.08);width:68%;height:250px;margin:0 auto;display:block;background-color:#fff;color:#999;padding:15px;border-radius:3px;font-size:13px;font-family:monospace;transition:all .3s}
#codes:hover,#codes:focus{background-color:#fff;color:#222;border-color:rgba(0,0,0,0.2)}
.button-group{width:100%;max-width:78.5%;float:none;margin:0 auto 0;text-align:center}
button,button[disabled]:active{width:42.3%;border:none;padding:14px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#3498db;cursor:pointer;font-size:13px;position:relative;top:-20px;margin:0 8px;letter-spacing:.5px;border-radius:3px;transition:all 0.2s}
button:hover,button:focus{background:#43a9ed;color:#fff}
button[disabled],button[disabled]:active{background:#43a9ed;color:#fff;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
#outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
.post-body p{margin:0}
#blog1,#artikel,.blog-posts{background-position:center!important;}
#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
.post-body ul#wrapin{width:100%;max-width:68.5%;display:table;position:relative;margin:0 auto;font-size:13px}
.post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;}
.post-body ul#wrapin br {display:none;}
.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:#f0f0f0;border:none;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:10%;}
.option-input:hover{background:#eee}
.option-input:checked{background:#2ecc71}
.option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px}
.option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100}
.option-input.radio{border-radius:50%}
.option-input.radio::after{border-radius:50%}
</style>

Demikianlah tutorial singkat mengenai Cara Membuat Widget Halaman HTML Converter Parser di Blog. Semoga sukses.

Widget Postingan Halaman Toko Online Parabola Terstruktur Data Schema.Org

2022-02-18T07:14:00.039+07:00

Membuat Postingan Halaman Toko Online Parabola

Cara membuat widget postingan halaman toko online parabola, terstruktur data schema.org , dan hasil nya lolos uji di " Pengujian Hasil Kaya Google atau Rich Snippet Google " sebagai berikut :

Tahap ke-1

Parabola Mini Kvision dan Nex Parabola

Deskripsi Produk:

1 bh Antena Parabola

1 bh LNB Ku-Band

1 bh Receiver Dekoder K-Vision atau Nex Parabola

15 Meter kabel coaxcial

Harga sudah termasuk dengan pemasangan area Bandung dan sekitarnya.

Hubungi kami,
Hp/Wa. 0811-222-1721

Price: Rp.850.000

5.0 20

Berikut ini langkah - langkah yang bisa kamu ikuti untuk membuat artikel postingan produk jualan toko online blogspot yang benar dan terstruktur. Salin kode HTML di bawah ini , ke dalam halaman postingan blogspot dengan "mode HTML".

<div>
    <div class="produk-saya" itemscope="" itemtype="https://schema.org/Product">
        <meta content="925872" itemprop="mpn">
        <meta content="0446310786" itemprop="sku">
        <meta content="Parabola Mini Kvision dan Nex Parabola" itemprop="name">      
        <img alt="" itemprop="image" src="https://blogger.googleusercontent.com/img/a/AVvXsEhriCe2XXNcBQOb908kDaa0rxFbApstOzLt8l6GR4F9aFPMHOv3fjsIo0ORBJ98pKcDmWiFwbeFQBh2uFRr0X0iVnjAume3SfPFWKJPwktDwMcya0--bgRdrsRgG9X1NFEp6zvgGlMD04UHsrdayZSaAoUyzvnVM-xbjZzPHA2tAkgK3OHJXLskSKBK=s320" />         
          <br /> <br />
        <a class="nama-produk" itemprop="name"><b>Parabola Mini Kvision dan Nex Parabola</b></a>
        <br />      
        <h4>Deskripsi Produk:</h4>
        <div class="description-item" itemprop="description">
        <li>1 bh Antena Parabola</li>
        <li>1 bh LNB Ku-Band</li>
        <li>1 bh Receiver Dekoder K-Vision atau Nex Parabola</li>
        <li>15 Meter kabel coaxcial</li>
        <li>Harga sudah termasuk dengan pemasangan area Bandung dan sekitarnya.</li><br />
        <b>Hubungi kami, <br /> Hp/Wa. 0811-222-1721</b> 
      
        <div itemprop="offers" itemscope="" itemtype="https://schema.org/Offer">
            <link href="https://raqysa.blogspot.com/2022/02/widget-postingan-halaman-toko-online.html" itemprop="url"></link>
            <meta content="https://schema.org/InStock" itemprop="availability">
            
              <span class="daftar-harga" content="IDR" itemprop="priceCurrency">Price:</span>
            <meta content="https://schema.org/UsedCondition" itemprop="itemCondition">
            
                <span class="harga-produk" content="850.000" itemprop="price">Rp.850.000</span>
            <meta content="2022-11-05" itemprop="priceValidUntil">            
        </div>
                   
        <div class="rating-saya" itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">
            
            <span class="skor" itemprop="ratingValue"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>5.0</span> <span class="rating" itemprop="reviewCount">20</span>
        </div>
                    
        <div itemprop="review" itemscope="" itemtype="https://schema.org/Review">
        <div itemprop="author" itemscope="" itemtype="https://schema.org/Person">
          <meta content="Raffa Prb" itemprop="name">
        </div>
        <div itemprop="reviewRating" itemscope="" itemtype="https://schema.org/Rating">
          <meta content="4" itemprop="ratingValue">
          <meta content="5" itemprop="bestRating">
        </div>            
        <div itemprop="brand" itemscope="" itemtype="https://schema.org/Brand">
            <meta content="Kvision dan Nex Parabola" itemprop="name"> 
        </div>
      </div>
</div>

Keterangan

Url gambar (warna biru) ganti dengan Url gambar / foto produk jualan.
Nama Produk Anda (warna biru) ganti dengan nama produk sendiri
11 (warna biru) = Angka nilai rating produk
Rp.850.000 (warna biru) = Angka nilai harga

Deskripsi = Isi dengan penjelasan produk

Tahap ke-2

Merapikan Tampilan Artikel Produk Anda
Salin kode CSS dibawah ini.

.rating, .skor {font-size:13px;}
.nama-produk {color:#111!important;font-size:20px;font-weight:500;}
.daftar-harga {font-size:12px;color:#888;}
.harga-produk {font-size:18px;color:#B12704;}
.produk-tersedia {font-size:15px;color:#B12704;}
.description-item {font-size:14px;}
.fa-star, .fa-star-half {color:#ffa403;font-size:13px!important;}
.produk-saya img {float:left;margin:0 20px 10px 0;padding:0;width:200px;height:250px;}
.produk-saya {font-family:'Roboto';width:45.78%;background:#ffffff;float:left;display:inline-block;margin-right:20px;margin-left:20px;margin-bottom:20px;box-sizing: border-box;padding:8px;border:1px solid #cccccc;border-radius:3px;}
.rating-saya {padding:10px;}
@media screen and (max-width: 800px){
.box-info {margin: 15px 10px 50px;}
.box-list li {width:90%;}
}
@media only screen and (max-width: 640px) {
.produk-saya {width:100%;margin:0;margin-bottom:20px;float:none}
.produk-saya img {width: 100%;float: none;height: 100%;margin: 0 0 20px 0;}

Letakan kode CSS diatas, didalam mode file template blogger kamu dan letakan diatas kode </style> atau ]]></b:skin>

Cara membuat Widget Sticky with jQuery di Blogspot

2022-02-17T22:13:00.003+07:00

Cara membuat Widget Sticky with jQuery

Kode Script Sticky jQuery

Silahkan copy paste kode script widget sticky ke dalam tema blogspot, diatas kode </body>.


  <script src='http://resources.infolinks.com/js/infolinks_main.js'
  type='text/javascript'/>
<script
  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'
  type='text/javascript'/>
<script type='text/javascript'>
$(function()
  {
var offset = $(&quot;#HTML7&quot;).offset();
var topPadding = 35;
$(window).scroll(function()
  {
if ($(window).scrollTop() &gt; offset.top) {
$(&quot;#HTML7&quot;).stop().animate({
marginTop: $(window).scrollTop() -
  offset.top + topPadding
});
} else {
$(&quot;#HTML7&quot;).stop().animate({
marginTop: 0
});
};
});
});
</script>

Tahapan-tahapan memasang kode sticky

Cari widget ID yang mau di sticky (ex. HTML7)
Masuk Dashboard > Template > Edit HTML
Tekan(CTRL + F) cari kode: </body>

Catatan :

Ganti widget ID dengan widget ID yang mau di sticky.

Demikian cara membuat widget sticky with jQuery, semoga sukses.

Membuat Tombol Keranjang Belanja di sisi Body Blogspot

2022-02-17T17:23:00.003+07:00

Gadget Script Tombol Shopping Cart di sisi Body Blogspot

Cara membuat gambar tombol keranjang belanja di sisi halaman body Blogspot :

Masuk ke Tata Letak
Klik Tambahkan Gadget
Pilih HTML/JavaScript
Masukan script di bawah ini

   
   <div style="display: scroll; left: 0px; position: fixed; top: 200px;"><a href="https://www.parabola.id/" 
   target="_blank">  <img border="0"   src="https://blogger.googleusercontent.com/img/a/AVvXsEjQPJ-91MDbIloK3IuKU_a3YG-7NxT_-Ru4TAhJSpu9k6-3P0qBeoMH3a-lAgwYdnUFOxzHX_Ra4vbAbrhEssbkZxjnSg4Z35WKAqEvqR2rh7pGPnRgE7ZHbjmpMaEDHzZitWgoaLjxq5cdXh037hVNkHNL_BjQSv0LWiM1303uFw1HRvLxVm0S9Amz=s117" 
   height="50" width="120" />

5. Kemudian Simpan

Keterangan:

Warna Orange : Anda dapat mengubahnya dengan top/bottom dan left/right, contoh diatas adalah posisi gambar berada di kiri bawah, untuk mengubah ke kanan bawah Anda dapat mengubah left menjadi right.
Warna Hijau : Adalah margin/jarak antara gambar dengan sudut blog, Anda dapat menyesuaikan sendiri.
Warna Biru : Anda dapat mengubahnya dengan url gambar yang ingin Anda munculkan.
Warna Pink : Anda dapat menyesuaikan ukuran lebar dan tinggi gambar.

Widget Flexslider Carousel Slider Blogspot

2022-02-16T20:44:00.004+07:00

Widget Carousel Slider Blogspot

Ini adalah slider carousel jQuery, slider luar biasa ini dikembangkan oleh flexslider.woothemes.com, yang memiliki beberapa fitur yang sangat keren yaitu sepenuhnya responsif, semua lebar dan tinggi gambar dapat disesuaikan secara otomatis. Dan Anda juga dapat mengatur jumlah minimum/maksimum gambar yang akan ditampilkan pada berbagai ukuran layar/browser. Jadi secara keseluruhan, widget ini adalah carousel slider yang cukup responsif bisa dikustomisasi untuk blogger/blogspot.

Cara membuat flexsilder carousel slider blogspot, seperti contoh slider gambar di bawah ini :

Script Flexsilder Carousel Slider

<style type="text/css">
/*
* jQuery FlexSlider v2.0
* https://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* https://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;
}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider{
margin:0;
padding:0;
}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{
width:100%;
display:block;
}
.flex-pauseplay span{
text-transform:capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;
}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides{
display:block;
}
* html .slides{
height:1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child{
display:block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider{
margin:0 0 60px;
background:#fff;
border:4px solid #fff;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
box-shadow:0 1px 4px rgba(0,0,0,.2);
zoom:1;
}
.flex-viewport{
max-height:2000px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.loading .flex-viewport{
max-height:300px;
}
.flexslider .slides{
zoom:1;
}
.carousel li{
margin-right:5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(https://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.flex-direction-nav .flex-next{
background-position:100% 0;
right:-36px;
}
.flex-direction-nav .flex-prev{
left:-36px;
}
.flexslider:hover .flex-next{
opacity:0.8;
right:5px;
}
.flexslider:hover .flex-prev{
opacity:0.8;
left:5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
opacity:1;
}
.flex-direction-nav .disabled{
opacity:.3!important;
filter:alpha(opacity=30);
cursor:default;
}
/* Control Nav */
.flex-control-nav{
width:100%;
position:absolute;
bottom:-40px;
text-align:center;
}
.flex-control-nav li{
margin:0 6px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#666;
background:rgba(0,0,0,0.5);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover{
background:#333;
background:rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active{
background:#000;
background:rgba(0,0,0,0.9);
cursor:default;
}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;
}
.flex-control-thumbs li{
width:25%;
float:left;
margin:0;
}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;
}
.flex-control-thumbs img:hover{
opacity:1;
}
.flex-control-thumbs .active{
opacity:1;
cursor:default;
}
</style>
<script src="https://project.dimpost.com/flexslider-carousel/jquery.js" type="text/javascript"></script>
<script src="https://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){   
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4
  });
});
});
</script>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="https://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="https://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
    </li>
    <li>
      <img src="https://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
      <img src="https://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="https://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
    </li>
    <li>
      <img src="https://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="https://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="https://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
      <img src="https://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="https://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="https://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
     <a href="https://raqysa.blogspot.com/"><img src="https://project.dimpost.com/flexslider-carousel/images/slide1.jpg" /></a>
    </li>
  </ul>
</div>

Copy Paste Carousel Slider

Salin kode di atas ke dalam blogspot.

Masuk ke Tata Letak
Klik Tambahkan Gadget
Pilih HTML/JavaScript " Masukan kode script di atas .... "
Simpan

CATATAN:

Lebar dan tinggi gambar akan menyesuaikan otomatis.
Ganti URL gambar dengan URL gambar yang Anda unggah sendiri (Anda dapat mengunggah gambar di blogspot, flickr, dll.)
Ada beberapa hal lain yang bisa Anda ubah, lihat di bawah.

animationLoop: false,
itemWidth: 210,
itemMargin: 0,
minItems: 1,
maxItems: 4

Test Buta Warna - SIM

2022-02-14T21:23:00.000+07:00

Uji Test Buta Warna / Ishihara Test for Color Blindness.

Salah satu syarat kelulusan dalam membuat SIM (Surat Ijin Mengemudi) di kepolisian tingkat Polrestabes, selain lulus uji teori dan praktek mengemudi, anda harus lulus uji kesehatan yaitu dengan uji test buta warna atau bahasa istilahnya Ishihara Test for Color Blindness.

Dengan Ishihara Color Test / Uji Test Warna, yakni anda harus bisa menebak apa yang ada di dalam lingkaran (biasanya kebanyakan didalam lingkaran nilainya sebuah angka pada saat uji di kepolisian) yang penuh dengan warna warni bulatan besar kecil. Bila anda bisa berhasil menebaknya berarti anda lulus ujian kesehatan.

Sebelum anda membuat SIM, coba tebak angka apa yang ada di dalam lingkarannya. Dan untuk lebih lengkapnya anda bisa download software Ishihara Color Blind Test di bawah artikel ini.

Silahkan Tebak Ishihara

Jawaban Ishihara

Jawaban Ishihara Test for Color Blindness / Uji Test Buta Warna di atas adalah

A. 15

B. 16

C. 29

D. 45

E. 3

F. 5

G. 5

H. 7

I. 6

J. 73

K. 74

L. 8

Untuk mengunduh software lengkapnya silakan download software Color Blend Test Buta Warna.

HTML Dasar Template Blogspot

2022-02-13T21:01:00.000+07:00

Struktur Dasar HTML Template Blogspot (xml)

Setelah mengetahui bagan struktur template blogspot pada postingan sebelumnya. Sekarang kita akan membahas kode dasar html template blogspot (xml), yaitu ada 3 bagian penting yang ada dalam template blog standar blogspot.

Bagian 1 Header

Kode Header. Pada dasarnya ini berisi informasi penting tentang kode template dan judul blog Anda. . Ini adalah header standar untuk semua template. Satu-satunya waktu Anda menambahkan beberapa kode di sini adalah ketika Anda ingin menempatkan beberapa meta tag (informasi tambahan tentang blog Anda untuk SEO).

Bagian 2 CSS

Ini adalah Seksi Styling CSS. CSS singkatan dari Cascading Style Sheets, bahasa web yang digunakan untuk mengontrol gaya dokumen HTML. Ini adalah bagian yang ingin Anda tahu sebagian besar, jika Anda ingin memodifikasi template yang ada atau mendesain template baru. Meskipun itu adalah kode pemrograman web, Anda masih bisa melakukan banyak hal pada Anda desain template jika Anda memahami struktur bagian ini tanpa mengetahui banyak tentang HTML dan CSS.

Bagian 3 Body

Ini adalah tubuh atau Data kode - bagian terpenting yang mengambil semua konten Anda dari database Blogger dan meletakkannya di tempat yang tepat ke blog Anda ketika seseorang sedang melihat blog Anda. Ini juga merupakan bagian yang memberitahu blog Anda bagian mana yang lebih dulu - Header, Sidebars, Main, Post, Footer, dll Tapi bagian 3 ini tidak mengatur tampilan blog yang akan terlihat seperti di internet (karena sebagiannya dikendalikan oleh bagian styling CSS).

Tag :
HTML Dasar Template Blogspot
Template Blogspot
Kode Template Blogspot
HTML Template Blogspot
CSS Template Blogspot
Header Template Blogspot
Struktur Template Blogspot
Bagan Template Blogspot

Struktur Bagan Dasar Blogspot

2022-02-13T20:20:00.000+07:00

Struktur Bagan Dasar Blogspot Blogger

Sebelum merancang template, Anda harus mengetahui struktur dasar dari template blogspot ini. Umumnya, struktur yang sebenarnya dari setiap template tidak persis sama. Namun, dengan mengetahui struktur dasar, Anda dapat dengan mudah mendapatkan ide-ide tentang bagaimana untuk merubah template yang ada, mendesain template, dan bagaimana mengubahnya menjadi sebuah struktur yang berbeda.

Penjelasan Bagan Dasar Template Blogspot

Body : block paling luar Tubuh template (pada dasarnya semua yang meliputi layar komputer).
Outer-wrapper : blok ini mencakup seluruh template Anda (tubuh lebih seperti di luar template). Secara umum, Anda membangun sebuah wrapper untuk menempatkan beberapa blok yang lebih kecil di dalamnya. Blok yang paling umum dalam Outer wrapper ini adalah Header, Content, dan Footer.

Header : blok ini adalah bagian paling atas blog Anda (nama cukup jelas). Tapi di dalam Header Anda akan memiliki sub-blok juga - blok header Judul, blok Deskripsi Header, dan lain-lain seperti spanduk Adsense, menu bar, dll. Jadi semua sub-blok ada dalam satu wadah besar , wadah terbesar di bagian Header biasanya Header-wrapper yang membungkus segala sesuatu di dalamnya.
Content : dibawah Header adalah Content-wrapper. Pada dasarnya blok Content ini yang paling penting dari semua blok. Yaitu ada blok Sidebar dan wadah utama (yang berisi posting Anda, komentar, atau beberapa iklan).
Footer : adalah blok yang paling bawah dari template Anda. Seperti pada bagian Header, ada blok Footer-wrapper yang mengandung sub-blok lainnya di bagian Footer.
Main : Blok Main berada di dalam Content-wrapper. Di dalam wrapper main ada blok Post, blok Komentar, Header Tanggal, dan widget lain yang dibuat dari opsi Tambah Elemen Halaman.
Sidebar : adalah blok yang berisi semua widget, contohnya : Label, Arsip, Teks, HTML, Adsense, dll. Template Blogger standar, hanya 1 sidebar disebut dengan template 2-kolom (Utama dan Sidebar). Tapi itu sebenarnya mudah untuk menambahkan beberapa jumlah sidebars. Yang paling umum adalah 2 sidebars atau template 3 kolom.

Blog Post : blok ini berisi hal-hal penting . Tulisan Anda, Judul, Post, Penulis Post, Label, dll

Hirarki Template Dasar Blogspot

Body

Outer-wrapper

Header-wrapper

Blog Title
Blog Description
Other widgets

Content-wrapper

Sidebar-wrapper (1,2,3...)
Main-wrapper

Date Header
Posts

Post Title
Post Content (or called Post Body)
Post Footer (Author, Labels, etc)

Comments
Feed Link
Other widgets (mostly ad units)

Footer-wrapper

Footer text (disclaimer, copyrights, etc)
Other widget

Demikian struktur bagan dasar blogspot yang sunting dari :

Tag :
Struktur Bagan Dasar Blogspot
Struktur Blogspot
Struktur Dasar Blogspot
Bagan Dasar Blogspot Template Dasar Blogspot

Membuat Banner di Halaman Blog

2022-02-13T19:54:00.001+07:00

Membuat Banner di Sisi Halaman Blog

Sebelumya anda ( blogger ) harus siapkan dulu banner yang akan dimunculkan di sisi halaman blog.

Setelah membuat banner ikuti langkah-langkah berikut ini

Masuk ke Dashboard blogspot
Pilih Tata Letak
Pilih Tambahkan Gadget
Pilih Tambahkan HTML/Javascript
Kemudian Masukan kode di bawah ini di bidang HTML / Java Script


<style type="text/css">

#fixedbanner {

 position: fixed;

 top: 160px; /* Jarak dari atas */

 right: 0; /* Apabila ingin di kanan ganti right menjadi left */

}

</style>

<div id='fixedbanner'>

<a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a>

</div>

Simpan

Demikian cara cepat membuat banner di halaman blog anda.

Seo Google

2022-02-13T17:01:00.000+07:00

SEO - Search Engine Optimization

SEO ( Search Engine Optimization) artinya Optimisasi mesin pencari adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut.

Tujuan SEO

Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung.

Sejalan dengan makin berkembangnya pemanfaatan jaringan internet sebagai media bisnis, kebutuhan atas SEO juga semakin meningkat. Berada pada posisi teratas hasil pencarian akan meningkatkan peluang sebuah perusahaan pemasaran berbasis web untuk mendapatkan pelanggan baru. Peluang ini dimanfaatkan sejumlah pihak untuk menawarkan jasa optimisasi mesin pencari bagi perusahaan-perusahaan yang memiliki basis usaha di internet.

Bisnis dan layanan SEO berkembang pesat seiring dengan pertumbuhan web, yang menyebabkan sebuah situs harus berusaha lebih keras agar alamatnya lebih mudah ditemukan pengunjung di antara jutaan alamat situs lain dari seluruh dunia yang menjadi kompetitornya. Mesin pencari merupakan pintu masuk utama, karena pengguna internet tidak lagi sanggup menghafalkan jutaan situs web, dan sebagai gantinya mereka mengandalkan hasil pencarian dari Google, Yahoo!, Bing, dan mesin pencari lain.

Berada pada posisi teratas atau setidaknya halaman pertama hasil pencarian untuk subyek tertentu memberikan keuntungan ganda bagi perusahaan pemasaran via internet:
Peluang calon pelanggan mengunjungi situs web mereka menjadi lebih besar. Hal tersebut dapat berlanjut pada meningkatnya tingkat konversi dari pengunjung biasa menjadi pembeli.
Berada pada peringkat pertama hasil pencarian memberikan citra dan reputasi yang baik bagi sebuah situs di mata pengunjung.

Strategi Seo

Mesin pencari pada umumnya tidak mencari keuntungan secara langsung dari hasil pencarian organik. Pendapatan usaha mereka diperoleh dari iklan yang ditampilkan pada bagian atas atau samping hasil pencarian organik tersebut. Perusahaan yang kurang berhasil menerapkan strategi SEO sehingga alamat situsnya tidak berada pada posisi teratas dalam hasil pencarian organik masih dapat memperoleh pengunjung dengan beriklan pada mesin pencari tersebut.

Pada Google, pemasangan iklan dapat dilakukan melalui Google AdWords. Google AdWord menerapkan mekanisme pay per click atau bayar per klik, artinya untuk setiap iklan yang diklik oleh pengunjung, pemasang iklan akan dikenakan biaya, yang besarnya berbeda-beda tergantung pada proses lelang (bidding) katakunci yang dilakukan oleh pemasang iklan.

Tips Seo Google

Konten web / blog anda (para blogger) minimal basicnya di bawah ini :

Buat yang unik, akurat judul halaman
Memanfaatkan tag "description" meta
Meningkatkan Struktur Site
Memperbaiki struktur URL Anda
Membuat situs Anda lebih mudah untuk dinavigasi
mengoptimalkan Konten
Menawarkan kualitas konten dan layanan
Menulis teks jangkar yang lebih baik
Optimalkan penggunaan gambar
Gunakan tag pos tepat
Berurusan dengan Crawler
Membuat efektif penggunaan robots.txt
Sadarilah rel = "nofollow" untuk link
SEO untuk Telepon Seluler
Beritahu Google situs seluler
Panduan pengguna ponsel akurat
Promosi dan Analisis
Mempromosikan website Anda dengan cara yang benar
Manfaatkan alat webmaster gratis

Bahas Tuntas Breadcrumb di Blogger

2022-02-13T14:55:00.000+07:00

Breadcrumb Blogger Blogspot

Breadcrumbs atau breadcrumb trail adalah bantuan navigasi yang digunakan dalam user interface. Hal ini memberikan pengguna cara untuk melacak lokasi suatu artikel dalam suatu program atau dokumen. Istilah ini berasal dari jejak Hansel dan Gretel .

Ide breadcrumb asli berdasarkan Kode Hoctro itu dari hack breadcrumb HOCTRO. Ini telah dimodifikasi untuk mengakomodasi Halaman Pencarian, Halaman Label dan pasca breadcrumb Archives.

Fungsinya adanya lacak breadcrumb di bagian atas posting memberikan solusi yang baik untuk SEO Google . Yang biasanya, anda selalu dapat mengklik pada label / kategori sebelumnya, atau klik "Home" link untuk kembali ke halaman depan.

Penerapan Lacak Breadcrumb :

Home>Label>Postname

Contoh Penerapan Lacak Breadcrumb di Postingan :

Home > Gadget > Jadwal Penerbangan > Widget > Widget Jadwal Penerbangan Pesawat

Cara Pasang Breadcrumb di Blogspot di antaranya.

1. Cara pasang Breadcrumb di Blogspot menurut HOCTRO

Klik Template - Edit HTML kemudian checklist Expand Widget Template , kemudian lihat posisi / cari Blog1 widget <b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">.

Cari kode : <b:includable id='main' var='top'>

kemudian letakan di atasnya kode berikut ini :

<b:includable id='breadcrumbs' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>

</b:includable>

Kemudian cari kode ini : <b:if cond='data:post.dateHeader'>

dan letakkan kode di bawah ini di atasnya.

<b:include data='post' name='breadcrumbs'/>

Cari Kode : ]]></b:skin> letakkan kode CSS di bawah ini di atas nya.

.breadcrumbs {border-bottom:1px dotted #000;margin:2em 0 0.5em;padding:0 0 0.5em;}

Kemudian Simpan Template

2. Cara Pasang Breadcrumb Schema.org .

Klik Template - Edit HTML kemudian checklist Expand Widget Template
Cari kode ini <div class='post hentry'> atau <div class='post hentry uncustomized-post-template'>
Kemudian letakkan kode di bawah ini di bawah nya.

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> <span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"> <a expr:href='data:blog.homepageUrl' itemprop="url"><span itemprop="title">Home</span></a> > </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' itemprop="url"><span itemprop="title"><data:label.name/></span></a> <b:if cond='data:label.isLast != "true"'> > </b:if> </b:loop> </b:if> > </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title"><data:post.title/> </span></span></div> </b:if></b:if>

Kemudian cari kode ]]> </b:skin> dan letakkan kode css di bawah ini di atas nya.

.breadcrumbs{padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px;font-size:95%;line-height:1.4em;
border-bottom:3px double #cadaef;}

Kemudian simpan template