Bar bottom subribes by email and followers for blogger

By:
Tutorial kali ini adalah bagaimana membuat bar button by email dan followers for bloggers, kalau anda lihat di wordpress.com akan ada otomatis dipojok kanan bawah barnya, tinggal follow dan subribe maka secara otomatis tulisan terbaru dari blog yang anda follow akan muncul di email kamu.

Step by step (langkah-langkahnya): 

1. Letakan kode CSSnya dibawah ini tepat diatas code </skin> 

 #w2bfollowSubscribe {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);}
 .w2bfollowButton {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;}
 .w2bfollowButton span {background: url("http://4.bp.blogspot.com/-cojt7gQfz4Q/TztYuq2TltI/AAAAAAAABcE/OTwMxjnwak8/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
 .w2bfollowButton:hover,.followActive {color: #fff !important;}
 .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
 .followactive {background-color: #333;}
 .w2bfollowForm {padding: 15px;}
 .w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
 .w2bfollowForm p {margin: 0 0 10px;}
 .w2bfollowForm .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;}
 .w2bfollowForm form {text-align: center;}
 .w2bfollowForm .emailInput:focus {color: #000;border-color: #000;}
 .w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #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;-ms-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: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #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: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #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;}
 .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
 .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
 .w2bFollowFooter a:hover {color: #fff;background: none;}

2. Letakan kode JSnya diawah ini tepat di atas code </head>

<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>

3. Letakan kode DIVnya dibawah ini tepat diatas </body>

<div id='w2bfollowSubscribe'>
 <div class='w2bfollowForm'>

  <a class="w2bfollowButton" href="#" title="Follow"><span>Follow</span></a>
  <h1 style="font-family:salsa;text-align:center;" >via Email</h1>
  <p>Get updates delivered to your Inbox directly !</p>
  <form action="http://feedburner.google.com/fb/a/mailverify?uri=bloggertutor-pendopo2" method="post" target="popupwindow" onsubmit="window.open('feedburner.google.com/fb/a/mailverify?uri=bloggertutor-pendopo2', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
   <input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
   <input type="hidden" value="stylifyyourblog" name="uri"/>
   <input type="hidden" name="loc" value="en_US"/>

   <input type="submit" value="Subscribe" class="emailSubmit"/>
  </form>
  <p class='w2bFollowFooter'>
   <a href='http://www.blogger.com/follow-blog.g?blogID=1624667035106032539' target='_blank'><img src='http://1.bp.blogspot.com/-lyvoqBODutQ/TagvjM9vDCI/AAAAAAAADsw/2m38l41mVYY/s1600/Blogger_Follow_Button.PNG'/></a>
  </p>
 </div>
</div>

4. Perhatikan alamat subribenya dan Blog ID kamu.

1. http://feedburner.google.com/fb/a/mailverify?uri=bloggertutor-pendopo2
kamu ganti dengan alamat feedburner blog kamu
2 http://www.blogger.com/follow-blog.g?blogID=1624667035106032539
Kamu ganti dengan blog id kamu

Lainnya :




[edit]

Pasang INTERNET FASNET PLUS TV KABEL FIRSTMEDIA
Pasang FIRSTMEDIA internet speed hingga 100mbps + CHannel TV HD hingga 50HD hub 087777313417 only SMS