Cara Membuat Tombol Follow di Pojok Kiri Bawah Ala Wordpress

Also Read Other Articles

Cara Membuat Tombol Follow di Pojok Kiri Bawah Ala Wordpress

Membuat blog menjadi lebih Style, Gokiel, Eksentrik, Cantik, Menarik dan Elegant mungkin menjadi pilihan utama para Blogger Mania, seperti saya sendiri jujur suka sekali dengan tampilan yang stylist namun padat berisi, he2. Sobat blogger mania suka dengan widget disamping, he..he... Mau pasang atau gak nehhh hiks..hiks.. Kalau sobat serius mau pasang mo aye terusin nulisnya he..he.., Oke dah tanpa banyak bicara tapi Banyak Bekerja.... Ceritanya Gini Gun...

1. Masuk Dasbor blog sobat

2. klik Rancangan

3. Add gadget (tambah Gadget) jangan lupa HTML Javascript

4. Masukkan kode berikut di dalamnya

<style type="text/css"> /*<![CDATA[*/ #djnotefollowSubscribe {background-color: #0dc3ff;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;} .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 10px 0 0;border-radius: 10px 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);} .djnotefollowButton {background: #CC0000;color: #fff;font-size: 12px;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;} .djnotefollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz6Uifx0BH6kypnxrtJ4yPzlsO9Fbv96oW6E7Iv4uhB3YQ7iUhyjIH3VrGIkymAI-RWpzpwTKevnMHkhwRyUErMf8PJ8b36frGris87VR3zIpj6naVc9lNkl6BxTXm4qaoM4Q9_Hbf4omQ/s1600/follow-djnote.png") no-repeat scroll 0 3px transparent;padding-left: 15px;} .djnotefollowButton:hover,.followActive {color: #fff !important;} .djnotefollowButton:hover span,.followActive span {background-position: 0 -37px !important;} .followactive {background-color: #333;} .djnotefollowForm {padding: 15px;} .djnotefollowForm h3 {font-size: 12px;margin: 0 0 10px;font-weight: normal;} .djnotefollowForm p {margin: 0 0 10px;} .djnotefollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 11px;border: 1px solid #444;color: #888;display: block;clear: both;} .djnotefollowForm form {text-align: center;} .djnotefollowForm .emailInput:focus {color: #000;border-color: #000;} .djnotefollowForm .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;} .djnoteFollowFooter {text-align: center;font: normal 11px "Berlin Sans FB", Arial;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;} .djnoteFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;} .djnoteFollowFooter a:hover {color: #fff;background: none;} /*]]>*/ </style> <script type="text/javascript"> /*<![CDATA[*/ ;(function(djnote){djnote(document).ready(function(){djnote.extend(djnote.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=djnote("#djnotefollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);djnote(".djnotefollowButton").click(function(e){if(followBox.hasClass("followOpened")){djnote(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{djnote(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery); /*]]>*/ </script> <div id="djnotefollowSubscribe" style="display:none;"> <div class="djnotefollowForm"> <a class="djnotefollowButton" href="URL SOBAT" title="Follow"><span>Follow</span></a> <h3>Follow "Name Sobat"</h3> <p>Dapatkan Artikel Terbaru Kami!!!</p> <form action="http://feeds.feedburner.com/FeedBurner Sobat" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Feed Sobat', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type="text" class="emailInput" name="email sobat" placeholder="Enter Your Email..."/> <input type="hidden" value="DjNote" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input type="submit" value="Subscribe" class="emailSubmit"/> </form> <p class="djnoteFollowFooter"> <center><p><a href="http://feeds.feedburner.com/Feed Sobat"><img src="http://feeds.feedburner.com/~fc/Feed Sobat?bg=CC0000&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p> <p><a><a href="https://twitter.com/Tweet Sobat" class="twitter-follow-button" data-show-count="false">Follow @Name Sobat</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><a/><p> </p></a></a></p></center></p></div> </div>

5. Ganti Kode yang saya beri warna merah, dan masing - masing dengan URL dan Nama Sobat 
6. Klik Simpan Lihat Hasilnya.. Menarik Bukaan...

Selamat Mencoba dan Salam Sukses !!!