Monday, June 18, 2012

Pin It

Add Floating Subscribe Button Using Click



Blogwalking is the one of my hobbies, and i was lucky because i found something special yesterday on someone blog.He uses wordpress, so i adopted it, it looks great and doesn't need some spaces on your page. This is awesome....
See The Demo Below


alright , how to Add it to your blog
  • Paste the code below , above  </head> 
<script type="text/javascript" src="http://dl.dropbox.com/u/85131813/Jquery.min.js"></script>

  • After that, log in to your blogspot=> Pageelements=>add new gadget=> HTML/javascript and paste the code below 
<style> /* Widget by http://zulkhamsyahmh.blogspot.com, Do not Remove or edit this Widget due credits to the maker */
#bit, #bit * {
*zoom: 1;
}
#bit {
font: normal 13px "Helvetica Neue", sans-serif;
_display: none;
}
.loggedout-follow-shelf {
position: fixed;
right: 40%;
z-index: 999999;
bottom: -300px;
}
.loggedout-follow-normal  {
position: fixed;
z-index: 999999;
bottom: -300px;
right: 10px;
}
.loggedout-follow-typekit {
margin-right: 4.5em;
position: fixed;
z-index: 999999;
bottom: -300px;
right: 10px;
}
#bit a.bsub {
display: block;
overflow: hidden;
padding: 0 10px 0 8px;
float: right;
text-decoration: none !important;
line-height: 28px;
font: normal 13px/28px "Helvetica Neue", sans-serif;
color: #CCC;
text-shadow: #444 0px -1px 0px;
letter-spacing: normal;
border: 0;
background-color: #464646;
background-image: -ms-linear-gradient(bottom, #464646, #3f3f3f 5px);
background-image: -moz-linear-gradient(bottom, #3f3f3f, #464646 5px);
background-image: -o-linear-gradient(bottom, #464646, #3f3f3f 5px);
background-image: -webkit-gradient(linear, left bottom, left top, from(#464646), to(#3f3f3f));
background-image: -webkit-linear-gradient(bottom, #3f3f3f, #464646 5px);
background-image: linear-gradient(bottom, #464646, #3f3f3f 5px);
-webkit-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
-moz-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
-o-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
-ms-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
outline-style: none;
outline-width: 0;
}
#bit a.bsub {
-moz-border-radius: 2px 2px 0 0;
-webkit-border-radius: 2px 2px 0 0;
-o-border-radius: 2px 2px 0 0;
-ms-border-radius: 2px 2px 0 0;
border-radius: 2px 2px0 0 0;
}
#bit a.bsub span {
background: url(/wp-content/blog-plugins/loggedout-follow/../../mu-plugins/admin-bar/wpcom-admin-bar-icons.png) 0 -77px no-repeat;
padding-left: 19px;
}
#bit a:hover span, #bit a.bsub.open span {
color: #ffffff !important;
background-position: 0 -117px;
}
#bit a.bsub.open {
background: #333;
}
#bitsubscribe {
background: #464646;
color: #fff;
padding: 15px;
width: 200px;
margin-top: 27px;
-moz-border-radius: 2px 0 0 0;
-webkit-border-radius: 2px 0 0 0;
-o-border-radius: 2px 0 0 0;
-ms-border-radius: 2px 0 0 0;
border-radius: 2px 0 0 0;
*float: right;
*margin-right: -68px;
}
div#bitsubscribe.open {
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.5);
-o-box-shadow: 0 0 8px rgba(0,0,0,0.5);
-ms-box-shadow: 0 0 8px rgba(0,0,0,0.5);
box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
#bitsubscribe div {
overflow: hidden;
}
#bit h3, #bit #bitsubscribe h3 {
margin: 0 0 .5em 0 !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-shadow: 0 1px 0 #333;
font-size: 20px;
color: #fff;
text-align: left;
}
#bit #bitsubscribe p {
margin: 0 0 1em 0;
*margin: 0 0 0 0;
font: 15px/1.3em "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-shadow: 0 1px 0 #333;
color: #fff;
}
#bitsubscribe p a {
margin: 20px 0 0;
color: #fff;
text-decoration: underline;
}
#bit #bitsubscribe p.bit-follow-count {
font-size: 13px;
}
#bitsubscribe input[type=submit] {
padding: 2px 20px;
background: #333; /* Old browsers */
background: -moz-linear-gradient(top, #333 0%, #111 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#111)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333 0%,#111 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333 0%,#111 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #333 0%,#111 100%); /* IE10+ */
background: linear-gradient(top, #333 0%,#111 100%);
color: #ccc;
text-shadow: 0 1px 0 #000;
border: 1px solid #282828;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
-moz-box-shadow: inset 0 1px 0 #444;
-webkit-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;
}
#bitsubscribe input[type=submit]:hover {
background: #222; /* Old browsers */
background: -moz-linear-gradient(top, #333 0%, #222 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333 0%,#222 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333 0%,#222 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #333 0%,#222 100%); /* IE10+ */
background: linear-gradient(top, #333 0%,#222 100%);
color: #fff;
-moz-box-shadow: inset 0 1px 0 #4f4f4f;
-webkit-box-shadow: inset 0 1px 0 #4f4f4f;
box-shadow: inset 0 1px 0 #4f4f4f;
text-decoration: none;
}
#bitsubscribe input[type=submit]:active {
background: #111; /* Old browsers */
background: -moz-linear-gradient(top, #111 0%, #222 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111 0%,#222 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111 0%,#222 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #111 0%,#222 100%); /* IE10+ */
background: linear-gradient(top, #111 0%,#222 100%);
color: #aaa;
-moz-box-shadow: inset 0 -1px 0 #333;
-webkit-box-shadow: inset 0 -1px 0 #333;
box-shadow: inset 0 -1px 0 #333;
text-decoration: none;
}
#bitsubscribe input[type=text] {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
#bitsubscribe input[type=text]:focus {
border: 1px solid #000;
}
#bitsubscribe.open {
display: block;
}
#bsub-subscribe-button {
text-align: center;
margin: 0 auto;
}

</style>
<div id="bit" class="loggedout-follow-normal" style="bottom: -234px; ">
<a class="bsub" href="javascript:void(0)"><span id="bsub-text">Subscribe</span></a>
<div id="bitsubscribe" class="">
<h3><label for="loggedout-follow-field">Subscribe For Latest Update</label></h3>
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=zulkhamsyahmh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="zulkhamsyahmh" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
<a rel="dofollow" href="http://zulkhamsyahmh.blogspot.com/2012/06/add-floating-subscribe-button-using.html">Get This Widget</a></div>
</div><!-- #bitsubscribe -->
  • Change "zulkhamsyahmh" with your own feedburner name
    if you are having problem with feedburner, see How to use feedburner on blogspot
    and Please DO NOT EDIT THE CODE !!!!

Please comment if you get some problem and if you want to use this widget :)
Thanks for the wordpress Template maker who Inspired me.
Like the Post? Do share with your Friends.

Reaksi:

0 komentar:

Post a Comment