Cara Membuat Kotak Artikel Berlangganan Email di pojok

Di sinih Miev akan share tentang tutorial Blogger,yaitu Cara Membuat Kotak Artikel Berlangganan Di samping Bawah Blog,huft panjang judulnya,soalnya Miev bingung mau ngasih judul apa :D,di sini cuman menggunakan CSS+ HTML doank,dan tidak akan memberatkan Blog,karena yang memberatkan suatu Blog itu dominan terlalu banyak Gambar apalagi File yang bertype GIF,langsung saja ke permasalahan,

Langkah - Langkah Pembuatan :

Disini kita memanfaatkan fasilitas dari Feedburner untuk form langganannya menarik untuk sobatMiev coba langsung aja kita bahas cara membuatnya.

1. Masuk ke blogger
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Klik Proceed / Lanjutkan jika di editor baru blogger
5. Cari kode </head>
6. Setelah ketemu simpan kode di bawah ini di atas kode </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
;(function(drilm){drilm(document).ready(function(){drilm.extend(drilm.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=drilm("#drilmfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);drilm(".drilmfollowButton").click(function(e){if(followBox.hasClass("followOpened")){drilm(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{drilm(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<style type="text/css">
#drilmfollowSubscribe {
background-color: #464646;
width: 220px;
color: #fff;
position: fixed;
z-index: 999999;
right: 10px;
bottom: 0
}

.followOpened {
-webkit-border-radius: 2px 0 0;
-moz-border-radius: 2px 0 0;
border-radius: 2px 0 0;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5)
}

.drilmfollowButton {
background: #464646;
color: #CCC !important;
font-size: 13px;
line-height: 28px;
padding: 0 10px;
text-decoration: none;
position: absolute;
top: -28px;
right: 0;
display: block;
-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0;
height: 28px
}

.drilmfollowButton span {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDxZkf-zLHTZviv9p1OXANgCScroxw-6aUIFNBxocjS7gcWBkCn61LTkHENm_ooFJ3qMQMHXec12p-bjSBFm2XMsubx6QETZ1mWaqSnpuCfQ9xNN9HdQBBMQtAPbmMBKlJfxkSoDdmJ2z_/s1600/follow-w2b.png) no-repeat scroll 0 5px transparent;
padding-left: 15px;
}

.drilmfollowButton:hover, .followActive {
color: #fff !important
}

.drilmfollowButton:hover span, .followActive span {
background-position: 0 -37px !important
}

.followactive {
background-color: #333
}

.drilmfollowForm {
padding: 15px
}
.drilmfollowForm h3, .drilmfollowForm p, .drilmfollowForm span {
font: bold 13px Arial, sans-serif;
}
.drilmfollowForm h3 {
margin: 0 0 10px;
}

.drilmfollowForm p {
margin: 0 0 10px
}

.drilmfollowForm .emailInput {
width: 95%;
padding: 2px 4px;
margin: 0 auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 15px;
border: 1px solid #444;
color: #888;
display: block;
clear: both
}

.drilmfollowForm form {
text-align: center
}

.drilmfollowForm .emailInput:focus {
color: #000;
border-color: #000
}

.drilmfollowForm .emailSubmit {
cursor: pointer;
padding: 2px 20px;
background: #333;
background: -webkit-linear-gradient(top, #333 0%, #111 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #333 0%), color-stop(1, #111 100%));
background: -moz-linear-gradient(top, #333 0%, #111 100%);
background: -o-linear-gradient(top, #333 0%, #111 100%);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#333 0%, EndColorStr=#111 100%)";
color: #ccc;
text-shadow: 0 1px 0 #000;
border: 1px solid #282828;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: inset 0 1px 0 #444;
-moz-box-shadow: inset 0 1px 0 #444;
box-shadow: inset 0 1px 0 #444;
text-decoration: none;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
margin: 1em 0 1em 0
}

.emailSubmit:hover {
background: #222;
background: -webkit-linear-gradient(top, #333 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #333 0%), color-stop(1, #222 100%));
background: -moz-linear-gradient(top, #333 0%, #222 100%);
background: -o-linear-gradient(top, #333 0%, #222 100%);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#333 0%, EndColorStr=#222 100%)";
color: #fff;
-webkit-box-shadow: inset 0 1px 0 #4f4f4f;
-moz-box-shadow: inset 0 1px 0 #4f4f4f;
box-shadow: inset 0 1px 0 #4f4f4f;
text-decoration: none
}

.emailSubmit:active {
background: #111;
background: -webkit-linear-gradient(top, #111 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #111 0%), color-stop(1, #222 100%));
background: -moz-linear-gradient(top, #111 0%, #222 100%);
background: -o-linear-gradient(top, #111 0%, #222 100%);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#111 0%, EndColorStr=#222 100%)";
color: #aaa;
-webkit-box-shadow: inset 0 -1px 0 #333;
-moz-box-shadow: inset 0 -1px 0 #333;
box-shadow: inset 0 -1px 0 #333;
text-decoration: none
}

.drilmFollowFooter {
text-align: center;
font: normal 11px "Helvetica Neue", sans-serif;
padding: 7px 0;
margin: 0 0 -15px !important;
border-top: 1px solid #3c3c3c
}

.drilmFollowFooter a {
color: #aaa;
text-shadow: 0 1px 0 #262626;
background: none;
text-decoration: none
}

.drilmFollowFooter a:hover {
color: #fff;
background: none
}
</style>

7. Cari kode <body>
8. Simpan kode di bawah ini di bawah kode <body>

<div id="drilmfollowSubscribe" style="display:none;">
<div class="drilmfollowForm">
<a class="drilmfollowButton" href="#" title="Follow"><span>Follow</span></a>
<h3>Follow "<data:blog.title/>"</h3>
<p>Post gratis Instan langsung masuk ke kotak Email</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=softmiev', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Tulis Email Anda..."/>
<input type="hidden" value="softmiev" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Berlanggan" class="emailSubmit"/>
</form>
<p class="drilmFollowFooter">
<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
</p>
</div>
</div>

9. Lihat kata softmiev itu adalah ID dari Feedburner Miev. jadi silahkan ganti dengna ID feedburner sobatMiev,
10. sobatMiev juga bisa mengubah kata <a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>   dengan icon feedCount seperti yang Miev pakai,

Cukup sekian Semoga bermanfaat Untuk sobatMiev


.

Posted in: Tampilan,Tutorial Blog