Membuat Langganan Email Berada Dipojok Blog

Jika pada postingan sebelumnya kita telah membahas bagaimana cara memodifikasi tampilan Email berlangganan by Feedbuner di blog, maka postingan ini tidak jauh berbeda dengan postingan sebelumnya, perbedaannya hanya terletak pada letak dan desainnya saja.

follow by email

Jika sobat ingin memasangnya pada blog sobat ikuti langkah-langkah di bawah ini.

1. Login ke blogger atau klik disini»
2. Pilih template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand template widget.
4. Cari code di bawah ini. Tekan ctrl+F untuk mempermudah pencarian.

</head>

5. Setelah ketemu copy code JQuery di bawah ini dan letakkan di atas code </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(http://4.bp.blogspot.com/-cojt7gQfz4Q/TztYuq2TltI/AAAAAAAABcE/OTwMxjnwak8/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>

6. Kemudian cari code di bawah ini. Tekan ctrl+F untuk mempermudah pencarian.

<body>

7. Setelah ketemu copy code Html di bawah ini dan letakkan di bawah code <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=junedalbughisy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Tulis Email Anda..."/>
<input type="hidden" value="junedalbughisy" 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>

Catatan:

  • Tulisan yang berwarna merah ganti dengan ID feedburner sobat.

8. Dan yang terakhir simpan template.

Selamat mencoba, Happy Blogging :)

Tidak ada komentar:

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top