Fullscreen mode
Normal mode

Cara Membuat Widget Berlangganan seperti Blog Igniel

Faronesia.com - Fitur subscribe blog atau lebih dikenal widget berlangganan blog memang sudah tidak asing lagi untuk para blogger. Pasalnya setiap saya mengunjungi suatu situs maupun blog orang lain fitur ini selalu ada sebagai pelengkap blog. Dan saya rasa widget berlangganan lewat email atau subsriber box ini sudah wajib ada pada blog anda.

Selain itu fitur berlangganan blog juga banyak macam jenis desain dan modelnya. Namun dikesempatan ini saya akan memberikan tutorial membuat widget berlangganan ala blog Igniel. Selain bagus dan menarik, fitur berlangganan milik mbak Igniel juga terkesan simpel dan modis. Dengan memasang widget berlangganan ala mbak Igniel maka blog yang anda miliki akan menjadi lebih keren lagi.

Agar pemasangannya berjalan dengan lancar ada baiknya anda membackup template blog anda sebelum di modifikasi. Hal ini berguna untuk jaga-jaga jika anda salah dalam menempelkan kode yang menyebabkan error pada template yang anda miliki.

Cara Membuat Widget Berlangganan seperti Blog Igniel

  • Masuk dashboard blog anda
  • Lalu masuk ke menu tema
  • Cari kode ]]></b:skin>
  • Tempelkan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Subscribe Box by igniel.com */ #ignielSubscribe{width:100%;height:auto;background-color:#eee;border:1px solid #ddd;border-radius:7.5px;display:block;margin:auto;line-height:40px;padding:0}#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='%230575E6'/%3E%3C/svg%3E") center center / 50px no-repeat}#ignielSubscribe .medsos__{padding:15px 0;line-height:0;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:0 0 15px;padding:0;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:0;padding:8px 10px 8px 40px;font-size:12px;text-align:left!important;border-radius:50px 0 0 50px;outline:none;outline-width:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#ignielSubscribe button{background-color:#0575E6;width:40px;min-width:40px;height:36px;margin:0;padding:0;border:0;box-shadow:none;vertical-align:top;cursor:pointer;transition:all .3s ease;background-image:unset;border-radius:0 50px 50px 0}#ignielSubscribe button:hover,#ignielSubscribe button:focus{background-color:#1d2129}#ignielSubscribe button:before{display:inline-block;width:20px;height:20px;margin:0;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:0 7px 15px 0 rgba(0,0,0,.4);transition:all ease-in-out 300ms;border-radius:100px}#ignielSubscribe .medsos a:last-child{margin-right:0}#ignielSubscribe .medsos a:hover{box-shadow:0 23px 15px -3px rgba(0,0,0,.25);transform:translate(0,-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)}}
  • Setelah itu simpan Tema
  • Selanjutnya masuk ke menu Tata Letak => pilih tempat widget tersebut, misalkan pada Sidebar.
  • Tambahkan Gadget HTML/JAVASCRIPT dan letakan kode di bawah ini di dalamnya.
<div id="ignielSubscribe">
  <div class="email__">
    <div class="email">
      Dapatkan artikel terbaru setiap hari
      <form action="https://feedburner.google.com/fb/a/mailverify?uri=ID_FEEDBURNER_BLOG" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=ID_FEEDBURNER_BLOG', '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="Facebook" href="https://www.facebook.com/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/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/ID_CHANNEL_YOUTUBE" 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/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>
   <a class="pinterest" title="Pinterest" href="https://pinterest/ID_PINTEREST" 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>
Perhatikan kode diatas yang ditandai dengan warna merah, ubah sesuai dengan perintah dibawah ini
  • ID_FEEDBURNER_BLOG = silahkan ganti dengan ID blog anda
  • ID_FACEBOOK = silahkan ganti ID facebook anda
  • USERNAME_TWITER = silahkan ganti username twitter anda
  • ID_CHANNEL_YOUTUBE = silahkan ganti dengan ID youtube anda
  • USERNAME_INSTAGRAM = silahkan ganti dengan username instagram anda
  • ID_PINTEREST = silahkan ganti dengan ID pinterest anda
Demikianlah mengenai Cara Membuat Widget Berlangganan seperti Blog Igniel semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.

0 Response to "Cara Membuat Widget Berlangganan seperti Blog Igniel"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel