Cara ganti subscribe viomagz

Ganti kotak subscribe

Cara ganti kotak subscribe di viomagz dari tampilan standar. Subscribe di blog merupakan sarana penting karena akan mendapatkan pengunjung yang setia ke blog dari setiap pembaharuan artikel. Untuk menarik perhatian maka anda harus membuat kotak subscribe itu menarik. Cara ganti subscribe viomagz adalah salah satu cara agar tampilan kotak berlangganan tampil beda dan menarik di tema blog viomagz.


Kotak subscribe.

Kotak langganan atau subscribe memiliki fungsi untuk mempermudah pengunjung blog anda agar  mendapatkan artikel (konten) terbaru langsung ke kotak masuk email mereka. Tampilan kotak subscribe secara standar dari tema viomagz terlihat seperti gambar di bawah ini :

Kotak subscribe viomagz


Artikel saya kali ini membahas tentang "Cara ganti subscribe viomagz." Oky kita langsung pada intinya di bawah ini.

Cara ganti subscribe tema blog viomagz.

Untuk dapat menganti subscribe standar dari template viomagz syaratnya anda harus memiliki tema blog buatan dari Sugeng.id ini, maaf saya tidak dapat berbagi link download dari viomagz ini karena belum ijin search dari pemiliknya.

Tahap-tahap untuk menganti kotak subscribe standar dari vio magz.


1. Masuk akun blogspot.
Silahkan anda login ke akun blogger anda dan lanjut dengan klik Tema  > Edit html untuk melihat kode HTML dari vio magz blog anda.

2. Cari kode subscribe.
Mencari kode subscribe di edit html blog anda dengan melakukan pencarian cepat. Silhakan klik di sembarang asal masih dalam kotak edit html blog, kemudian lanjut dengan menekan tombol ctrl + F
secara bersamaan akan muncul jendela baru pencarian di sudut kanan atas ketik kode seperti ini
/* SUBSCRIBER BOX */ lanjut klik enter.
Lihat kode yang di sorot background warna kuning, kode seperti di bawah ini :

/* SUBSCRIBER BOX */ .berlangganan-box { background: $(header.background.kiri); background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan)); color: $(header.title.color); padding: 15px; margin: 20px 0; text-align: center; } .berlangganan-box p { margin:15px 0; } .berlangganan-box input.email-address[type="text"] { width: 60%; padding: 10px; text-align: center; border-radius: 2px; border: none; outline: none; } .berlangganan-box input.submit-email[type="submit"] { background: #fff; padding: 10px 15px; border-radius: 2px; color: $(body.text.color); border: none; outline: none; } .berlangganan-box input.submit-email[type="submit"]:hover { background: $(body.text.color); color: #fff; cursor: pointer; } .berlangganan-box input.email-address[type="text"]:focus { background: #fffcd2; }

Setelah ketemu kode seperti di atas blok dan hapus kode tersebut, kemudian anda ganti dengan kode di bawah ini
/* subscribebox ungke */ #subscribebox {background-image: linear-gradient(to right, #440044, #770077, #BB00BB,#FF00FF); padding:20px;font-family: 'PT Sans', sans-serif; } .widget_follow_subscribe .widget-detail { padding: 36px 30px 40px 30px;} #subscribebox p { color: white; font-size: 15px; text-align: center; font-weight: 700; } .follow-subscribe-social { margin: 0 0 15px; padding: 0 0 14px; border-bottom: #858585 solid 1px; } .follow-subscribe-social ul { list-style: none; margin: 0; padding: 0; text-align: center; } .follow-subscribe-social ul li { display: inline; margin: 0 15px 0 0; border-bottom: none; } .follow-subscribe-social ul li:last-child { margin: 0; } .follow-subscribe-social ul li a { font-size: 17px; color: #cacaca; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .follow-subscribe-social ul li a:hover { color: #fff; } form.subscribe { margin-top: -7px; } form.subscribe input { display: block; width: 100%; } .subscribe-email { height: 45px; border: none; margin: 0 0 10px; font-size: 0.928571em; background-color: #ffffff; text-align: center; color:efefef; } .subscribe-email:focus { outline: 0; }

Setelah ketemu kode seperti di atas blok dan hapus kode tersebut, kemudian anda ganti dengan kode di bawah ini

/* subscribebox ungke */ #subscribebox {background-image: linear-gradient(to right, #440044, #770077, #BB00BB,#FF00FF); padding:20px;font-family: 'PT Sans', sans-serif; } .widget_follow_subscribe .widget-detail {  padding: 36px 30px 40px 30px;} #subscribebox p {  color: white;  font-size: 15px;  text-align: center;  font-weight: 700; } .follow-subscribe-social {  margin: 0 0 15px;  padding: 0 0 14px;  border-bottom: #858585 solid 1px; } .follow-subscribe-social ul {  list-style: none;  margin: 0;  padding: 0;  text-align: center; } .follow-subscribe-social ul li {  display: inline;  margin: 0 15px 0 0;    border-bottom: none; } .follow-subscribe-social ul li:last-child {  margin: 0; } .follow-subscribe-social ul li a {  font-size: 17px;  color: #cacaca; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .follow-subscribe-social ul li a:hover {  color: #fff; } form.subscribe {  margin-top: -7px; } form.subscribe input {  display: block;  width: 100%; } .subscribe-email {  height: 45px;  border: none;  margin: 0 0 10px;  font-size: 0.928571em;  background-color: #ffffff;   text-align: center;   color:efefef; } .subscribe-email:focus {  outline: 0; }

Cari lagi kode seperti di bawah ini di edit template blog anda.

<div class='berlangganan-box'> <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=BlogMasSugeng&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <p>Berlangganan update artikel terbaru via email:</p><p><input class='email-address' name='email' placeholder='Masukan alamat email...' type='text'/></p><input name='uri' type='hidden' value='BlogMasSugeng'/> <input name='loc' type='hidden' value='en_US'/> <p><input class='submit-email' type='submit' value='Berlangganan'/></p> </form> </div>

Hapus kode seperti di atas dan ganti dengan kode di bawah ini

<!-- subscribe box --> <div id='subscribebox'> <center><img alt='Subcribe' border='0' height='100' src='https://1.bp.blogspot.com/-tYhj8P62n2Q/XrvMzI2GXuI/AAAAAAAAALM/GFME69QoC3URgbsxhcmbSgszdNi1C5VPgCLcBGAsYHQ/s1600/dualipa.gif' width='100'/></center> <p>Dapatkan Artikel Gratis dari :<br/> Dualipaid.blogspot.com</p> <form action='https://feedburner.google.com/fb/a/mailverify?uri=dualipaid' class='subscribe' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=dualipaid, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='DuaLipaId'/> <input name='loc' type='hidden' value='en_US'/> <input autocomplete='off' class='subscribe-email' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' placeholder='Masukkan email anda di sini..' type='text'/> <input class='subscribe-button' type='submit' value='Dapatkan'/> </form> <p style='font-size:90%;'> &quot; Setelah Daftar email kamu <br/> Jangan Lupa Untuk lihat Kotak Masuk Di Email Kamu !!!</p> </div> <!-- subscribe box end -->


3. Aktif feedburner.
Untuk mengaktifkan feedburner anda ganti kode ini  dualipaid dengan uri blog anda. Silahkan anda lanjut dengan ganti kata ini "Dapatkan Artikel Gratis dari    Dualipaid.blogspot.com  , Setelah Daftar email kamu Jangan Lupa Untuk lihat Kotak Masuk Di Email Kamu !!! " dengan kata-kata anda sendiri, lakukan pratinjau dulu kemudian simpan tema.

Jika belum paham mengaktifkan feedburner silahkan baca panduan tentang cara buat subscribe feedburner.

4. Tahap terakhir.
Jika anda menerapkan kodenya dengan benar maka kotak subscribe tema blog viomagz blog anda akan berubah seperti terlihat pada gambar di bawah ini.

kotak subscribe baru


Sampai ditahap ini anda sudah berhasil menganti kotak subscribe di template vio magz. nahhh itulah Cara ganti subscribe tema blog viomagz semoga bermanfaat.
Next Post Previous Post
No Comment
Add Comment
Comment url