Skip to main content

Cara membuat Subscribe Box Keren Di Blogger

Hi sobat blogger apa kabarnya di hari ini? mudah-mudahan pada sehat ya.
Di kesempatan kali ini saya akan membagikan sebuah widget blogger yang dimana widget seperti ini wajib ada di sebuah blog.
Dan mungkin juga sebagian blogger sudah paham tentang kegunaan dari widget ini, dan untuk kalian yang belum tahu apa kegunaan dari widget ini bisa menyimaknya dibawah ini.
Cara membuat Subscribe Box Keren Di Blogger 
Buat kalian sobat blogger yang belum memasang widget seperti ini, saya sarankan agar bisa memasangnya di blog. Karena sangat penting sekali widget subscribe berlangganan via email selain itu juga pengunjung tidak akan ketinggalan update dari blog kalian yang di share apa lagi, update postingan kalian berkualitas dan banyak penggemarnya.

Lantas bagaimana cara membuat widget seperti ini? Nah untuk kalian yang ingin membuatnya gampang kok kalian bisa ikuti langkah-langkah dibawah ini.

Jika kalian tertarik silahkan kalian pasang terlebih dahulu code dibawah ini. dan letakan codenya tepat sebelum </head> 



 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Jika sudah selanjutnya kalian letakan code CSS dibawah ini, letakan codenya tepat sebelum </style> atau </b:skin> 

#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;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 .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .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:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

Kalian juga bisa sesuaikan CSS warnanya dengan selera kalian, dengan mengedit bagian Backgroundnya. Jika tidak kalian bisa langsung save/simpan kembali template yang sudah kalian edit tadi.

Selanjutnya agar widgetnya bisa tampil kalian gunakan code dibawah ini, dan bisa kalian letakan dibagian bawah postingan, footer, atau terserah kalian enaknnya di letakan dimana.

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>


LIVE DEMO


CATATAN:Silahkan kalian bisa edit,
code diatas sesuai apa yang sudah saya tandai.
Nah mungkin dari saya cukupkan sekian dulu ya sobat tentang Cara membuat Subscribe Box Keren Di Blogger selamat mencoba, dan semoga bermanfaat.
Labels:

Comments

Post a Comment

Popular posts from this blog

50 Situs Mendapatkan Bitcoin Gratis No SCAM

Bitcoin di tahun 2016 ini penggunaannya sudah sangat banyak, hal ini terbukti dengan harga bitcoin yang semakin hari semakin mahal saja harganya. Saya sendiri yang belum lama menggeluti bitcoin ini sejak agustus tahun 2015, harga bitcoin pada saat itu hanya sekitar Rp.5.000.000 lebih Tetapi harga bitcoin saat ini adalah sekitar Rp.7.500.000 saat di terbitkannya artikel ini dan diperkirakan harga bitcoin akan semakin naik. Harga dari tahun ke tahun yang meningkat ini tentu saja menjadi keuntungan tersendiri bagi para penikmat bitcoin, hingga bisa mendapatkan keuntungan puluhan juta rupiah. Namun tidak semudah itu untuk mendapatkan bitcoin karena kita harus memiliki sebuah alat khusus untuk menambang bitcoin serta modal yang cukup besar hanya untuk 1 bitcoin saja. Karena hal tersebut hanya sebagian orang saja yang mampu mendapatkan bitcoin. Bitcoin Gratis Tetapi bitcoin untuk kalangan tertentu saja yang bisa, bukan berarti kita yang tidak memiliki modal untuk mendapatkan bitco...
Post a Comment
Read more

Wah, Tak Hanya Cantik, 7 Artis Ini Juga Dianugerahi Bibir Yang Sensual. Siapa Aja Sih?

Setiap wanita itu terlahir cantik, karena kecantikan adalah hal yang relatif dan sesuai dengan pendapat orang masing-masing. Kita tidak bisa mengatakan wanita gendut itu tidak cantik, karena ada beberapa negara yang justru cantik jika mempunyai tubuh gendut. Dan setiap negara ataupun orang mempunyai idealnya sendiri bagaimana kecantikan sejati. Yang Paling penting kecantikan bukanlah di wajah, tapi di hati. Namun, bicara tentang bibir sensual dimana kebanyakan orang menganggapnya demikian. Berikut Ini ada 7 Artis yang tak hanya cantik, tapi juga mempunyai bibir yang sensual. Siapa aja sih? Ariel Tatum Kecantikan dari Artis yang mengawali karir semenjak usia 10 tahun ini sering sekali pamer bibir sensualnya saat berfoto. Raline Shah Raline tak hanya cantik, tapi juga dianugerahi bibir yang sensual. Selain itu, artis cantik ini juga sangat rendah hati dan jauh dari kata sombong. Manohara Odelia Pinot Terkenal sekali dengan kecantikannya, memang lama tidak terdengar akan kab...
Post a Comment
Read more

Yuk Lihat 5 Rahasia Dari Serial Kartun Yang Berhasil Diungkap!

Saat kita menonton kartun sebagai anak-anak atau orang dewasa, selalu ada hal yang kita takutkan. Beberapa karakter tidak pernah mengungkapkan wajah mereka, dan beberapa pertanyaan tetap tidak terjawab. Kami di Mesin Waktu menemukan jawaban atas beberapa pertanyaan tersebut. Baca sampai akhir untuk melihat misteri dalam beberapa kartun yang terkenal. 1. Formula Rahasia Krabby Patty Jika kamu pernah menonton SpongeBob, kamu pasti tahu bahwa Krabby Patty adalah burger populer yang disajikan di Krusty Krab. Dalam salah satu episode, formula rahasia burger bisa dilihat dengan ramuan yang ditampilkan sebagai huruf acak. Beberapa penggemar percaya bahwa ramuan rahasia sebenarnya adalah kepiting, sementara yang lain menyatakan bahwa tidak ada formula rahasia sama sekali, dan itu dibuat agar Plankton tetap sibuk. 2. Wajah Majikan Tom Majikan Tom dalam kartun Tom and Jerry yang terkenal muncul dalam banyak episode, namun penggemar tidak pernah memiliki kesempatan untuk melihat wajah...
Post a Comment
Read more