Copyright © 2019 - 2020 Mediaachmad.comTemplate design by Wahyu Achmad
Beranda  ›  Blogger  ›  Rombak Web

Cara Buat Widget Email Berlangganan seperti Igniel

November 15, 2019 Posting Komentar

Memasang fitur ikuti blog lewat email itu akan sangat berguna untuk pengunjung blog yang ingin berlangganan dan ingin melihat update terbaru dari artikel blog kalian, melalui via email. Dengan memasang fitur ini di blog kalian dan ternyata banyak juga yang berlangganan ke blog kalian, maka traffic blog akan meningkat. Sudah banyak blogger yang mememasang fitur ini dengan harapan pengunjung akan menjadi pelanggan blog.

Tentunya jika kalian sudah mendapatkan pelanggan blog, walaupun 2-3 orang, kalian harus tetap update artikel terus, karena mereka para pelanggan juga menunggu hasil update dari blog kalian. Untuk model desain untuk fitur widget ini, admin akan memberikan desain model seperti website mbak igniel. Untuk desainnya seperti ini.

Untuk desain agak sedikit rubah sedikit terutama untuk icon emailnya saya tidak adakan karena ada beberapa kendala error position, dan shadow untuk social media buttonnya. Oke Langsung saja simak berikut ini.

Cara Membuat Widget Ikuti Lewat Email seperti Igniel.com

  1. Kalian Login ke Blogger.
  2. Kemudian masuk ke TEMA > Lalu klik EDIT HTML
  3. Cari Kode ]]></b:skin> , Kemudian Copy Pastekan Script dibawah ini diATAS kode ]]></b:skin>.
    4. /* Newsletter */
#ignielNewsletter {/*box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);*/width:100%; height:auto; background:#fff; border-radius:7.5px;display: block; margin:auto; line-height:40px; padding:0px}
#ignielNewsletter .email__ {padding:15px 15px 5px;}
#ignielNewsletter .email span {font-size: 13px;text-align: center;}
#ignielNewsletter .email {margin:auto; color:#777;line-height:29px;}
#ignielNewsletter .email:before {content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:ignielRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:ignielRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:ignielRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='orange'/%3E%3C/svg%3E") center center / 50px no-repeat;}
#ignielNewsletter .medsos__ {padding:15px 0px; line-height:0px; border-top:1px dotted #cccfe2;}
#ignielNewsletter form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px}
#ignielNewsletter input {padding-left: 15px;width: calc(100% - 35px); height:35px; border:1px solid #cccfe2; border-right:0px; font-size:12px; border-radius:50px 0px 0px 50px;}
#ignielNewsletter button {width:35px; height:35px; margin:0px; padding:0px; background-color:#de0985; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}
#ignielNewsletter button:hover, #ignielNewsletter button:focus {background-color:#f18241;}
#ignielNewsletter button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'></path></svg>") no-repeat; content:''; vertical-align:-3px;}
#ignielNewsletter .medsos {width:100%; text-align:center;}
#ignielNewsletter .medsos svg {width:20px;height:20px;margin-top:7px}
#ignielNewsletter .medsos svg path {fill:#fff}
#ignielNewsletter .medsos a {/*box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4);*/display:inline-block; margin-right:7px; width:35px; height:35px; transition: all ease-in-out 300ms; border-radius:100px;}
#ignielNewsletter .medsos a:last-child {margin-right:0px;}
#ignielNewsletter .medsos a:hover {transform: translate(0px, -10px) scale(1.05);}
#ignielNewsletter .medsos .facebook{background:#3a579a}
#ignielNewsletter .medsos .twitter {background:#00abf0}
#ignielNewsletter .medsos .googleplus {background:#df4a32}
#ignielNewsletter .medsos .youtube {background:#cc181e}
#ignielNewsletter .medsos .instagram {background:#992ebc}
#ignielNewsletter .medsos .codepen {background:#292E34}
.newspaptext {font-size:12px;text-align:center;}
/*Animasi*/
@-webkit-keyframes ignielRing{
0% { -webkit-transform: rotateZ(0); }
1% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
9% { -webkit-transform: rotateZ(30deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes ignielRing{
0% { -moz-transform: rotate(0); }
1% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
9% { -moz-transform: rotate(30deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% { -moz-transform: rotate(-20deg); }
21% { -moz-transform: rotate(18deg); }
23% { -moz-transform: rotate(-16deg); }
25% { -moz-transform: rotate(14deg); }
27% { -moz-transform: rotate(-12deg); }
29% { -moz-transform: rotate(10deg); }
31% { -moz-transform: rotate(-8deg); }
33% { -moz-transform: rotate(6deg); }
35% { -moz-transform: rotate(-4deg); }
37% { -moz-transform: rotate(2deg); }
39% { -moz-transform: rotate(-1deg); }
41% { -moz-transform: rotate(1deg); }
43% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}
@keyframes ignielRing{
0% { transform: rotate(0); }
1% { transform: rotate(30deg); }
3% { transform: rotate(-28deg); }
5% { transform: rotate(34deg); }
7% { transform: rotate(-32deg); }
9% { transform: rotate(30deg); }
11% { transform: rotate(-28deg); }
13% { transform: rotate(26deg); }
15% { transform: rotate(-24deg); }
17% { transform: rotate(22deg); }
19% { transform: rotate(-20deg); }
21% { transform: rotate(18deg); }
23% { transform: rotate(-16deg); }
25% { transform: rotate(14deg); }
27% { transform: rotate(-12deg); }
29% { transform: rotate(10deg); }
31% { transform: rotate(-8deg); }
33% { transform: rotate(6deg); }
35% { transform: rotate(-4deg); }
37% { transform: rotate(2deg); }
39% { transform: rotate(-1deg); }
41% { transform: rotate(1deg); }
43% { transform: rotate(0); }
100% { transform: rotate(0); }
}
  4. Jika sudah Klik Simpan Tema.
  5. Masuk ke Menu Tata Letak, Pilih posisi Widget (Saya sarankan di sidebar kanan/kiri).
  6. Lalu Tambahkan Gadget HTML/JAVASCRIPT, Pastekan Kode dibawah ini di dalamnya. Lalu SIMPAN.
    7. <div id="ignielNewsletter">
<div class="email__">
<div class="email">
<div class="newspaptext">Dapatkan artikel terbaru setiap hari</div>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=ID_FEEDBURNER_BLOG&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow">
<input name="email" class="email" onblur="if (this.value==&quot;&quot;){this.value=&quot;Contoh: nama@mail.com&quot;;}" onfocus="if (this.value==&quot;Contoh: nama@mail.com&quot;){this.value=&quot;&quot;;}" type="text" value="Contoh: nama@mail.com" />
<input name="uri" type="hidden" value="ID_FEEDBURNER_BLOG" /> <input name="loc" type="hidden" value="en_US" />
<button type="submit"></button>
</form>
</div>
</div>
<div class="medsos__">
<div class="medsos">
<a class="facebook" title="Facebook" href="https://www.facebook.com/MASUKAN_ID_FACEBOOK" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a>
<a class="twitter" title="Twitter" href="https://twitter.com/MASUKAN_USERNAME_TWITER" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>
<a class="youtube" title="Youtube" href="https://www.youtube.com/channel/MASUKAN_ID_CHANNEL_YOUTUBE?sub_confirmation=1" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a>
<a class="instagram" title="Instagram" href="https://www.instagram.com/MASUKAN_USERNAME_INSTAGRAM" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>
</div>
</div>
</div>
  7. BELUM SELESAI, Silakan Simak Keterangan dibawah ini, Silakan setting ganti sesuai keinginan kalian.

Keterangan

  • ID_FEEDBURNER_BLOG : Ganti dengan ID feedburner blog kalian. scroll kebawah
  • MASUKAN_ID_FACEBOOK : Ganti dengan ID facebook kalian.
  • MASUKAN_USERNAME_TWITER : Ganti dengan USERNAME twiter kalian
  • MASUKAN_ID_CHANNEL_YOUTUBE : Ganti dengan USERNAME id channel youtube kalian.
  • MASUKAN_USERNAME_INSTAGRAM : Ganti dengan USERNAME username instagram kalian.
  • orange : Warna Untuk Lonceng, silakan ganti sesuai dengan keinginan kalian. scroll kebawah

Cara mengetahui ID url feeds feedburner Web

  1. Pertama Silakan kunjungi situs feedburner.google.com
  2. Masuk ke akun Google Kalian
  3. Kemudian akan tampil seperti ini
  4. Lalu Klik FEED TITLE Blog Kalian. Contoh: Omahnime
  5. Lalu pilih Edit Feed Details.
  6. Pada Form Feed Address setelah url feedburner.com. Itulah ID_FEEDBURNER Kalian.
  7. Jika sudah silakan COPY ID tersebut di Widget HTML/JAVASCRIPT yang dibuat tadi, untuk PASTEkan lokasi Code Silakan kalian simak di Keterangan.
  8. Selesai.

Kadang ada juga ID yang seperti ini blogspot/DBjeR, jadi ada kode tambahan, ID_KALIAN/TAMBAHAN_CODE_ID. Silakan copy juga TAMBAHAN_CODE_IDnya.

Cara merubah warna Lonceng

Untuk warna Lonceng TIDAK BISA menggunakan Code HEX (Contoh : #ffffff) dan RGB (Contoh: rgb(255,255,255,255)). Jadi harus menggunakan NAMA dari warna Tersebut (Contoh: Red,Blue,Yellow,dll). Jika kalian bingung untuk cari Nama warnanya, silakan simak table warna berikut ini.

Jika ada SPACE Silakan HILANGKAN Spasi untuk memberikan WARNA Lonceng, Contoh: Burly Wood --Menjadi--> BurlyWood
Alice Blue
Antique White
Aqua
Aquamarine
Azure
Beige
Bisque
Black
Blanched Almond
Blue
Blue Violet
Brown
Burly Wood
Cadet Blue
Chartreuse
Chocolate
Coral
Cornflower Blue
Cornsilk
Crimson
Cyan
Dark Blue
Dark Cyan
Dark Golden Rod
Dark Gray
Dark Green
Dark Khaki
Dark Magenta
Dark Olive Green
Dark Orange
Dark Orchid
Dark Red
Dark Salmon
Dark Sea Green
Dark Slate Blue
Dark Slate Gray
Dark Turquoise
Dark Violet
Deep Pink
Deep Sky Blue
Dim Gray
Dodger Blue
Fire Brick
Floral White
Forest Green
Fuchsia
Gainsboro
Ghost White
Gold
Golden Rod
Gray
Green
Green Yellow
Honey Dew
Hot Pink
Indian Red
Indigo
Ivory
Khaki
Lavender
Lavender Blush
Lawn Green
Lemon Chiffon
Light Blue
Light Coral
Light Cyan
Light Golden Rod Yellow
Light Gray
Light Green
Light Pink
Light Salmon
Light Sea Green
Light Sky Blue
Light Slate Gray
Light Steel Blue
Light Yellow
Lime
Lime Green
Linen
Magenta
Maroon
Medium Aqua Marine
Medium Blue
Medium Orchid
Medium Purple
Medium Sea Green
Medium Slate Blue
Medium Spring Green
Medium Turquoise
Medium Violet Red
Midnight Blue
Mint Cream
Misty Rose
Moccasin
Navajo White
Navy
Old Lace
Olive
Olive Drab
Orange
Orange Red
Orchid
Pale Golden Rod
Pale Green
Pale Turquoise
Pale Violet Red
Papaya Whip
Peach Puff
Peru
Pink
Plum
Powder Blue
Purple
Rebecca Purple
Red
Rosy Brown
Royal Blue
Saddle Brown
Salmon
Sandy Brown
Sea Green
Sea Shell
Sienna
Silver
Sky Blue
Slate Blue
Slate Gray
Snow
Spring Green
Steel Blue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
Wheat
White
White Smoke
Yellow
Yellow Green

Walaupun sedikit rumit dan mungkin itu bisa bermanfaat untuk kalian. Untuk kurang lebihnya admin minta maaf, sekidan dan terima kasih.

Cara Buat Widget Email Berlangganan seperti Igniel
Wahyu Achmad
Penulis biasa

Bagikan

Facebook Twitter
Pinterest
WhatsApp
GMail
More
Less
Tumblr
Mix E-Mail
LinkedIn
Reddit
XING
Hacker News
VK
Telegram
OK
Line

Postingan Terkait

Posting Komentar

Posting Komentar