Membuat subscribe di blog?
Mungkin itu pernah terpikir oleh para pembuat website atau blog. karena dengan adanya subscribe akan memungkinkan orang untuk dapat berlangganan tiap ada artikel baru di sebuah blog atau website.
Disatu sisi subscribe ini dapat menguntungkan bagi pembaca yang tidak akan ketinggalan update terbaru dari blog, disisi lain ini juga akan menguntungkan milik blog karena akan mendapatkan pelanggan setia bagi blog atau websitenya.
Sekarang bagaimana cara membuat subscribe di blog?. berikut ini akan saya bagikan bagaimana cara membuat subscribe yang mudah khususnya di blogger.
Berikut langkah-langkahnya:
Login ke akun blogger Anda pilih layout
klik add gadget
Pilih Html / Java Scrip
Copy kode di bawah ini
<style>
#dgenera-blog {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
#email-news-subscribe
.email-box{
padding: 5px 5px;
font-family:
"Arial","Helvetica",sans-serif;
height:38px;}
#email-news-subscribe
.email-box input.email{
background:#FFFFFF;
border: 1px solid
#dedede;
color: #999;
padding: 7px 10px 8px
10px;
-moz-border-radius:
3px;
-webkit-border-radius:
3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius:
3px;
border-radius: 3px;
border-image: initial;
font-family:
"Arial","Helvetica",sans-serif;}
#email-news-subscribe
.email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background:
-moz-linear-gradient(center top,#666 0,#333 100%);
background:
-webkit-gradient(linear,left top,left
bottom,color-stop(0,#666),color-stop(1,#333));
font-family:
"Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:white;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe
.email-box input.subscribe:hover{
background-image:-moz-linear-gradient(top,#333,#666);
background-image:-webkit-gradient(linear,left top,left
bottom,from(#333),to(#666));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0
3px #999;
box-shadow:0 0 3px #999
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:#FFFFFF;
}
#other-social-bar {
padding: 0px;
overflow: hidden;
height:37px;
margin-top:-8px;
}
#other-social-bar ul
{list-style: none outside none; padding-left: 4px;}
#other-social-bar
.other-follow {
float: left;
overflow: hidden;
padding:5px;
width: 270px;}
#other-social-bar
.other-follow ul {
list-style: none
outside none;
padding-left: 4px;}
#other-social-bar
.other-follow li {
display:inline;
border:0;
}
#other-social-bar
.other-follow li a {
font-size: 12px;
color:#666;
font-weight: bold;
font-family:arial;
display:inline;
}
#other-social-bar
.other-follow li.my-rss {
background:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw8L8Uhhmb_ROTSXYaH-pXIyHnWAykQ_TKh3vrP15Qf32d-D66TTXqrh1z3xtWFqzCkITOMc-mpHgW71Gps3HzFPDU_SkD_VCwzgJAI7gToDsWkMuNjdOaKa5JXuaH3JxqRBy5hCsOXio/s400/rss-16x16.png')
no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px
20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar
.other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a,
#other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar
.other-follow li.my-rss a:hover, #other-social-bar .other-follow
li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar
.other-follow li.my-twitter {
background:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkWxhCLTBJ2yQmpH6zsmDoBCe8LtWh6ZNI3czyCZsiui9fEE3WDVQIo6_hsXdrt4b-bRCVYl2lQHUMoNeGx90pC0i-g9Lq5uZCAe_CeFDGv7xaAIOuNdKzf94mahyC2imRI1XqyELkasU/s400/twitter%2527.png')
no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px
20px;
width: 60px;
margin-bottom:0px;}
#other-social-bar
.other-follow li.my-gplus {
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWDF-0JMaSudKh4qz5vhBPyVWeLdGemyXqN6TcifzR8l57OsPGFWeo-OHrAQVqMdjIh8XN1rrJtXeRzP5brwktzxN0NI8H6sF_VHjml18HY0c1HZd-KhKT0fLGKrkrbadeN_Bl8fyMUns/s400/gplus-16x16.png)
no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px
20px;
margin-bottom:0px;}
.emailicon {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWc4HuSRcFIjFD6McYez2YcdkTD-0L6IK0Ln8codT5IWgoF1rxto3fw86hac-bIEQvKirXI293jQJmbCOOzFmiPhNEQcGceZpO2HF5m0QoI9_SyblePN5_A5xjqB2Pmeh83OF9mErnn6yX/s400/MBT-RSS-FEED.gif")
no-repeat scroll 0px 2px transparent;
padding: 0px 20px 0px
95px;
min-height:100px;
margin: 0px;
width: 183px;
line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: rgb(51, 51, 51);
}
.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family: impact;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
</style>
<!--[if IE]>
<style>
#email-news-subscribe
.email-box input.subscribe{
background: #333;
}
</style>
<![endif]-->
<div id="dgenera-blog" >
<div class="emailicon"><p>Subscribe to our Free
Email Updates! </p></div>
<div id="email-news-subscribe">
<div class="email-box"> <form
action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow"
onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=CaraOnlineBisnisSuper', 'popupwindow',
'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email"
type="text" style="width: 160px; font-size: 12px;"
id="email" name="email"value="Enter your email
here..." onblur="if (this.value == '') {this.value
= 'Enter your email here...';}" onfocus="if
(this.value == 'Enter your email here...') {this.value =
'';}" type="text" />
<input type="hidden" value="CaraOnlineBisnisSuper" name="uri" /> <input
type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit"
type="submit" value="Subscribe" /> </form>
</div> </div>
<div id="other-social-bar">
<ul class="other-follow">
<li class="my-rss"> <a rel="nofollow"
title="RSS" href="http://feeds.feedburner.com/CaraOnlineBisnisSuper"
target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a
rel="nofollow" title="twitter" rel="author"
href="https://twitter.com/DGcarabisnisonline"
target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow"
title="Google Plus" rel="author"
href=https://plus.google.com/104725840255403357961
target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>
|
Catatan:
Ganti tulisan Caraonlinebisnissuper dengan nama Feedburner anda
Ganti tulisan DGcarabisnisonline dengan id twitter anda
Gannti angka-angka merah dengan id google plus Anda
Setelah selesai di edit kemudian simpan widget anda.
Nah sekarang coba anda lihat penampakan blog Anda, sudah ada Subscribe box-nya kan.
Terimakasih telah berkunjung, bila anda berkenan bisa subsribe blog ini untuk mendapatkan artikel terbaru.
0 Response to "Membuat subscribe keren di blog"
Posting Komentar