Cara Menciptakan Kotak Berlangganan( Subscribe Via Email Dan Sosial Media ) Ala Igniel.Com

Selamat tiba di . Kotak langganan artikel atau subscribe bagi blogger mempunyai banyak fungsi. Apalagi bagi blogger yang mempunyai jumlah trafik yang cukup tinggi. Kotak langganan ini dapat alternatif yang membantu meningkatkan jumlah pembaca setia di blog

Selain kotak berlangganan atau subscribe berfungsi untuk pemilik website atau blog, widget yang satu ini juga berfungsi untuk para pengunjung setia untuk menambah koleksi bacaan blog sahabat di blognya. Para pengunjung setia blog sahabat tidak ingin ketinggalan informasi update yang tiba dari blog sobat. Percaya atau tidak kalau semakin banyak orang yang berlangganan di blog sahabat maka blog sahabat akan semakin baik dan blog akan cepat populer.

Walaupun kotak berlangganan mempunyai banyak manfaat buat blog sobat. Tapi, perlu di ingat bahwa kotak subscribe atau kotak berlangganan tersebut haruslah responsif , alasannya yaitu kalau berat maka akan berdampak jelek juga bagi blog sobat

Nah. Postingan kali ini, saya akan membahas cara pembuatan kotak langganan atau subscribe dengan bentuk yang keren, responsif, serta terlihat elegan ala mba igniel di websitenya Berlangganan Artikel Via Email ala Arlina design.

Sebelum masuk ke pembahasan inti saya lebih dahulu mengungkapkan sepenggal dongeng rahasia kenapa hingga mba igniel secara suka rela membagikan subscribe box miliknya????

Pada awalnya mba igniel menciptakan widget subscribe box via email yang di khususkan untuk template premium igniplex. tampilannya sangat sederhana dan terkesan tidak monoton. Widget ini sangat lengkap disertai dengan ikon lonceng dengan efek getar ibarat lonceng yang sedang berdering dan ditambah pula dengan tombol akun media umum jadi, kotak subscribe dan tombol media umum menyatu dalam satu daerah yang sama, perfectkan.

Akhirnya blog utama igniel.com ( Blog utama mba igniel ) ikut memasangnya ( kini sudah tidak lagi ), tak usang sesudah di pasang. Ternyata ada beberapa blog yang juga ikut memasang dan sama persis punyanya mba igniel. Para blogger yang mencuru inspirasi kreatif dari mba igniel dengan cara mengambil pribadi dari source code blog utamanya. Makara daripada nanggung makanya mba igniel membaginya secara pribadi pada semua orang, hitung-hitung amal jariyah....

Sebelum lanjut sahabat terlebih dahulu menciptakan akun Feedburner,. Alamatnya ada dibawah ini.

https://feedburner.google.com

Cara Membuat Kotak Berlangganan( Via Email dan Sosial Media ) Ala Igniel.com

Setelah sahabat mendaftar dan mempunyai akun Feedburner serta mengaktifkan email subscriptions, Langkah selanjutnya sahabat tinggal meletakan aba-aba CSS dan HTML di dalam pengaturan blog.

Langkah Pertama :

Login ke akun blogger sobat
Setelah itu pada hidangan dashboard blogger bab kiri klik hidangan " Tema " > klik " Edit HTML "
Kemudian sahabat cari kode </style> atau ]]></b:skin> untuk mempermudah sahabat dalam mencari aba-aba tersebut tekan CTRL + F secara bersamaan.
Lalu tempatkan aba-aba dibawah ini sempurna di atas aba-aba pada poin ke-3.

/* Subscribe Box by igniel.com */ #ignielSubscribe {width:300px; height:auto; background-color:#eee; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px} #ignielSubscribe .email__ {padding:15px 15px 5px;} #ignielSubscribe .email {margin:auto; color:#555; text-align:center;} #ignielSubscribe .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='%23008c5f'/%3E%3C/svg%3E") center center / 50px no-repeat;} #ignielSubscribe .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;} #ignielSubscribe 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; position:relative;} #ignielSubscribe form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/%3E%3C/svg%3E") no-repeat; content:'';} #ignielSubscribe input {width: calc(100% - 35px); background-color:#ccc; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;} #ignielSubscribe button {background-color:#008c5f; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;} #ignielSubscribe button:hover, #ignielSubscribe button:focus {background-color:#1d2129;} #ignielSubscribe button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;} #ignielSubscribe .medsos {width:100%; text-align:center;} #ignielSubscribe .medsos svg {width:20px;height:20px;margin-top:7px} #ignielSubscribe .medsos svg path {fill:#fff} #ignielSubscribe .medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;} #ignielSubscribe .medsos a:last-child {margin-right:0px;} #ignielSubscribe .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);} #ignielSubscribe .medsos .facebook{background:#3a579a} #ignielSubscribe .medsos .twitter {background:#00abf0} #ignielSubscribe .medsos .googleplus {background:#df4a32} #ignielSubscribe .medsos .youtube {background:#cc181e} #ignielSubscribe .medsos .instagram {background:#992ebc} #ignielSubscribe .medsos .pinterest {background:#e60023} @-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); } }

Yang ditandai width:300px yaitu lebar dari kotak subscribe. Jika ingin lebarnya otomatis mengikuti lahan yang tersedia, ganti menjadi width:100%.

Setelah itu klik " Simpan Tema ". hingga disini sahabat sudah menuntaskan misi untuk langkah pertama.

Langkah Kedua :

Pada dashboard blogger klik hidangan " Tata Letak ". Pilihlah daerah dimana widget subscribe box tersebut akan di pasang. Saran dari saya posisi atau daerah yang paling ideal di bab sidebar.
Pada bab sidebar klik Tambahkan Gadget dan pilih HTML/Javascript
Setelah itu letakan aba-aba dibawah ini di dalamnya.

<!-- Subscribe Box by igniel.com --> <div id="ignielSubscribe">   <div class="email__">     <div class="email">       Dapatkan artikel terbaru setiap hari       <form action="https://feedburner.google.com/fb/a/mailverify?uri=igniel" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=igniel', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">         <input name="email" class="email" placeholder="Contoh: nama@mail.com"/>         <input name="uri" type="hidden" value="igniel" /> <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="Cara Membuat Kotak Berlangganan( Subscribe Via Email dan Sosial Media )  Ala Igniel.com" href="https://www.facebook.com/xxxx" 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="Cara Membuat Kotak Berlangganan( Subscribe Via Email dan Sosial Media )  Ala Igniel.com" href="https://twitter.com/xxxx" 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="Cara Membuat Kotak Berlangganan( Subscribe Via Email dan Sosial Media )  Ala Igniel.com" href="https://www.youtube.com/xxxx" 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="Cara Membuat Kotak Berlangganan( Subscribe Via Email dan Sosial Media )  Ala Igniel.com" href="https://www.instagram.com/xxxx" 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>    <a class="pinterest" title="Cara Membuat Kotak Berlangganan( Subscribe Via Email dan Sosial Media )  Ala Igniel.com" href="https://pinterest/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path></svg></a>     </div>   </div> </div>

- Ganti yang ditandai igniel (ada 3 buah) dengan username Feedburner masing-masing.

- Sementara tanda xxxx adalah username atau ID dari setiap media sosial. Ganti dengan milik sobat.

Subscribe box di atas memakai ikon SVG sama sekali tidak memberatkan blog alasannya yaitu tidak perlu memuat script atau library external apapun. Jika ingin mengganti ikon lonceng atau ikon media umum serta warna tampilannya sahabat dapat kreasikan sendiri.