🔔Download the application [siapTv.apk ] for ease and comfort in watching matches Install APK

Cara Membuat Subscribtion Box Ala Droidvido



Tutorial blog yang bakal mimin bagikan kali ini adalah sebuah widget kotak berlangganan / subscription box yang bisa sobat pasang di blog.

Untuk demo tampilan berlangganan seperti Droidvido (saat ink) bisa sobat lihat pada gambar di bawah ini.

Tutorial ini saya buat atas permintaan sobat blogger yang ingin memasang Subscription Box seperti di blog ini. Seberulnya bagi yang sudah paham dsngan coding blog mungkin tidak akan kesulitan untuk mencari kode dalam suatu halaman blog, karena semua kode yang diinginkan akan sangat mudah sekali di copy paste lewat Inspect Elements atau Page Source dari halaman blog. Namun mimin akan tetap membagikan tutorial ini biar sobat blogger bisa menambahkannya dengan mudah.

Cara Membuat Subscription Box Ala Droidvido

Langsung saja, di sini sobat hanya perlu memgikuti langkah-langkah sederhana berikut.

1. Buka Blogger > Template > Esit HTML

2. Tambahkan kode di bawah ini di atas kode ]]></b:skin> atau </style>
	
/* Subscribe Box */ 
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;} 
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%} 
.subscribe-form{clear:both;display:block;overflow:hidden} 
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden} 
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0} 
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s} 
.subscribe-css-email-button:hover{background:#37b185;}
 #subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
  #subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s} 
  #subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase} 
  #subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
   #subscribe-css p.subscribe-note span:before{content:&#039;&#039;;position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s} 
   #subscribe-css:hover p.subscribe-note span:before{width:100%;}
    

"Untuk warna dan sebagainya bisa sobat edit kembali sesuai selera"

3. Selanjutnya tambahkan markup di bawah ini bebas diantara tag pembuka <body> dan tag penutup </body> Misal seperti blog ini mimin tambahkan di bagian Footer-wrapper

	
<div id='subscribe-css'> 
<p class='subscribe-note'><span>SUBSCRIBE</span> 
<span class='itatu'>TO</span> OUR NEWSLETTER</p> 
<div class='subscribe-wrapper'>
	 <div class='subscribe-form'> 
<form action='http://feedburner.google.com/fb/a/mailverify?uri=droidvido' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=Droidvido&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> 
<input name='uri' type='hidden' value='Droidvido'/>
<input name='loc' type='hidden' value='en_US'/>
<input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/>
<input class='subscribe-css-email-button' title='' type='submit' value='submit'/>
</form> </div> </div> </div>
 

"Ganti semua kode yang ditandai warna merah dengan id feedburner blog sobat"

4. Setelah itu simpan template dan lihat hasilnya.

Demikian tutorial tentang Cara Membuat Subscription Box Ala Droidvido. Terimakasih dan semoga bermanfaat.

You May Like These Article
What else do you want to write an article about? Write in the comments column.

Post a Comment

Leave Comments on Topic. Always Use Polite Language
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.