Dhecun Blog: Subscription

Showing posts with label Subscription. Show all posts

Membuat Widget Email Subscription Pro Bloggers V2

Selain bisa digunakan di blog Blogspot , widget ini juga bisa digunakan untuk blog Wordpress.

Namun kali ini saya akan membahas cara pemasangan widget ini pada blog Blogspot , oleh karena itu saya mohon maaf yang sebesar-besarnya pada pengguna blog Wordpress ya hehehe :)

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda

2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript

3. Masukkan script dibawah ini

4. Klik simpan

<!-dhecun.blogspot.com thesis email subscription widget->
<div id="sidebars">
<ul class="sidebar_list">
<li id="social-profiles">
<ul>
<li><a class="social facebook" rel="nofollow" target="_blank" title="Like On Facebook" href="https://www.facebook.com/dhecun.blog">Facebook</a></li>
<li><a class="social twitter" rel="nofollow" target="_blank" title="Follow on Twiter" href="https://twitter.com/dhecun.blog" ">Twitter</a></li>
<li><a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/u/0/2726093644608416144">GooglePlus</a></li>
<li><a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/DhecunBlog">RSS</a></li><li>
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/user/dhecun.blog">Youtube</a></li>
</ul>
</li>
<li id="sidebar-social">
<p id="email-notice">
Receive Quality Tutorials Straight In Your Inbox by Submitting Your Email ID Below.We Respect Your Privacy.
<span></span>
</p>
<div id="email-form">
<h6>Get Email Update..!</h6>
<form class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=DhecunBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="input-text" type="text" name="email" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" value="Enter Your Email Address" />
<input type="hidden" value="DhecunBlog" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="button" type="submit" value="Subscribe me..!" />
<p>
We never encourage SPAM
<br />
You can Unsubscribe any time
</p>
</form>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;
">
<a style="color:#000000;" href="http://bit.ly/RoSETF">Widget</a> </span>
</div>
</li>
</ul>
</div>
<style>
#sidebars {
border: 0 none;
float: right;
padding: 0 15px;
width: 310px;
}
#email-notice {
background: none repeat scroll 0 0 #DF6001;
color: #FFFFFF;
font-size: 14px;
line-height: 1.5;
margin: 0 0 20px;
padding: 15px 20px;
position: relative;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
#email-notice span {
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 10px solid #DF6001;
bottom: -10px;
height: 0;
position: absolute;
right: 40px;
width: 0;
}
#email-form {
background: none repeat scroll 0 0 padding-box #313131;
border-bottom: 5px solid #202020;
border-radius: 2px 2px 2px 2px;
text-shadow: 0 -1px 0 #000000;
}
#email-form h6 {
color: #FFFFFF;
font-family: arial;
font-size: 16px;
font-weight: bold;
letter-spacing: 0;
padding: 15px 20px 0;
text-transform: none;
}
#email-form form {
color: #FFFFFF;
margin: 0;
padding: 20px 18px;
}
#email-form input.input-text {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #222222;
margin: 0 0 10px;
padding: 8px;
width: 94%;
}
#email-form .button {
background: none repeat scroll 0 0 #FFFFFF;
float: right;
margin: 0 0 0 10px;
}
#email-form p {
color: #CCCCCC;
font-size: 12px;
line-height: 18px;
margin: 0;
}
#sidebar-social {
float: left;
font-size: 12px;
margin: 0 0 15px;
width: 100%;
}
ul.sidebar_list {
list-style: none outside none;
}
li.widget ul {
list-style: none outside none;
}
#social-profiles {
float: left;
}
#social-profiles ul {
float: left;
list-style: none outside none;
margin: 0 5px 20px;
}
#social-profiles ul li {
float: left;
}
#social-profiles ul li a {
display: block;
float: left;
height: 32px;
margin: 0 15px;
text-indent: -999em;
width: 32px;
}
#social-profiles a.social {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUhY9kvrBuVbP7Un3NBZFj8SWd0JG6YXGUSN4NeeFzBSX7RYoxdF2Ec_1Dx5Ayi9ITr_67-idYNHzHhEk1BkUQ7DW9x15MQMmMqbyUpkN6h-tjpCI-Q_yGvN3basxK27DdH9eW5M-c0Tg/s1600/social.png") no-repeat scroll 0 0 transparent;
}
#social-profiles a.facebook {
background-position: -79px 0;
height: 32px;
margin: 0 15px 0 5px;
width: 32px;
}
#social-profiles a.facebook:hover {
background-position: -79px -74px;
height: 32px;
width: 32px;
}
#social-profiles a.twitter {
background-position: -5px -111px;
height: 32px;
width: 32px;
}
#social-profiles a.twitter:hover {
background-position: -42px 0;
height: 32px;
width: 32px;
}
#social-profiles a.youtube {
background-position: -42px -37px;
height: 32px;
width: 32px;
}
#social-profiles a.youtube:hover {
background-position: -5px -37px;
height: 32px;
width: 32px;
}
#social-profiles a.rss {
background-position: -42px -74px;
height: 32px;
width: 32px;
}
#social-profiles a.rss:hover {
background-position: -79px -37px;
height: 32px;
width: 32px;
}
#social-profiles a.googleplus {
background-position: -5px 0;
height: 32px;
width: 32px;
}
#social-profiles a.googleplus:hover {
background-position: -5px -74px;
height: 32px;
width: 32px;
}
* {
margin: 0;
padding: 0;
}
.custom .sidebar ul.sidebar_list {
padding: 15px 0;
}
</style></!-dhecun.blogspot.com>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-widget-email-subscription-pro_4.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

<!-dhecun.blogspot.com thesis email subscription widget->
<div id="sidebars">
<ul class="sidebar_list">
<li id="social-profiles">
<ul>
<li><a class="social facebook" rel="nofollow" target="_blank" title="Like On Facebook" href="https://www.facebook.com/dhecun.blog">Facebook</a></li>
<li><a class="social twitter" rel="nofollow" target="_blank" title="Follow on Twiter" href="https://twitter.com/dhecun.blog" ">Twitter</a></li>
<li><a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/u/0/2726093644608416144">GooglePlus</a></li>
<li><a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/DhecunBlog">RSS</a></li>
<li>
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/user/dhecun.blog">Youtube</a></li>
</ul>
</li>
<li id="sidebar-social">
<p id="email-notice">
Receive Quality Tutorials Straight In Your Inbox by Submitting Your Email ID Below.We Respect Your Privacy.
<span></span>
</p>
<div id="email-form">
<h6>
Get Email Update..!</h6>
<form class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=DhecunBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="input-text" type="text" name="email" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" value="Enter Your Email Address" />
<input type="hidden" value="DhecunBlog" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="button" type="submit" value="Subscribe me..!" />
<p>
We never encourage SPAM
<br />
You can Unsubscribe any time
</p>
</form>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;
   ">
 <a style="color:#000000;" href="http://bit.ly/RoSETF">Widget</a> </span>
</div>
</li>
</ul>
</div>
<style>
 #sidebars {
    border: 0 none;
    float: right;
    padding: 0 15px;
    width: 310px;
}
#email-notice {
    background: none repeat scroll 0 0 #DF6001;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
    padding: 15px 20px;
    position: relative;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
#email-notice span {
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 10px solid #DF6001;
    bottom: -10px;
    height: 0;
    position: absolute;
    right: 40px;
    width: 0;
}
#email-form {
    background: none repeat scroll 0 0 padding-box #313131;
    border-bottom: 5px solid #202020;
    border-radius: 2px 2px 2px 2px;
    text-shadow: 0 -1px 0 #000000;
}
#email-form h6 {
    color: #FFFFFF;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    padding: 15px 20px 0;
    text-transform: none;
}
#email-form form {
    color: #FFFFFF;
    margin: 0;
    padding: 20px 18px;
}
#email-form input.input-text {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #222222;
    margin: 0 0 10px;
    padding: 8px;
    width: 94%;
}
#email-form .button {
    background: none repeat scroll 0 0 #FFFFFF;
    float: right;
    margin: 0 0 0 10px;
}
#email-form p {
    color: #CCCCCC;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
}
#sidebar-social {
    float: left;
    font-size: 12px;
    margin: 0 0 15px;
    width: 100%;
}
ul.sidebar_list {
    list-style: none outside none;
}
li.widget ul {
    list-style: none outside none;
}
#social-profiles {
    float: left;
}
#social-profiles ul {
    float: left;
    list-style: none outside none;
    margin: 0 5px 20px;
}
#social-profiles ul li {
    float: left;
}
#social-profiles ul li a {
    display: block;
    float: left;
    height: 32px;
    margin: 0 15px;
    text-indent: -999em;
    width: 32px;
}
#social-profiles a.social {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUhY9kvrBuVbP7Un3NBZFj8SWd0JG6YXGUSN4NeeFzBSX7RYoxdF2Ec_1Dx5Ayi9ITr_67-idYNHzHhEk1BkUQ7DW9x15MQMmMqbyUpkN6h-tjpCI-Q_yGvN3basxK27DdH9eW5M-c0Tg/s1600/social.png") no-repeat scroll 0 0 transparent;
}
#social-profiles a.facebook {
    background-position: -79px 0;
    height: 32px;
    margin: 0 15px 0 5px;
    width: 32px;
}
#social-profiles a.facebook:hover {
    background-position: -79px -74px;
    height: 32px;
    width: 32px;
}
#social-profiles a.twitter {
    background-position: -5px -111px;
    height: 32px;
    width: 32px;
}
#social-profiles a.twitter:hover {
    background-position: -42px 0;
    height: 32px;
    width: 32px;
}
#social-profiles a.youtube {
    background-position: -42px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.youtube:hover {
    background-position: -5px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.rss {
    background-position: -42px -74px;
    height: 32px;
    width: 32px;
}
#social-profiles a.rss:hover {
    background-position: -79px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.googleplus {
    background-position: -5px 0;
    height: 32px;
    width: 32px;
}
#social-profiles a.googleplus:hover {
    background-position: -5px -74px;
    height: 32px;
    width: 32px;
}
* {
    margin: 0;
    padding: 0;
}
.custom .sidebar ul.sidebar_list {
    padding: 15px 0;
}
</style></!-dhecun.blogspot.com>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-widget-email-subscription-pro_4.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Keterangan :
1. Tulisan warna biru ganti dengan feedburner username anda.
2. Tulisan warna pink adalah kode teks dari widget.
3. Tulisan warna orange adalah teks diatas button.
4. Tulisan warna merah ganti dengan alamat link dan teks anda.
5. Tulisan warna ungu ( Enter Your Email Address ) adalah teks yang ada di kolom penulisan email widget.

Semoga Bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Widget Email Subscribe Pro Bloggers V1

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Klik simpan

<div id="feature_box"> <div id="sleek-subscribe"> <div class="newsheadline"><span>Sign-up</span> for <cite>FREE</cite> Regular Newsletter.</div> <div id="email-news-subscribe">  <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed Burner Feed Name', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 450px; font-size: 15px;" id="email" name="email" value="Your Custom Text Goes Here" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> <input type="hidden" value="Your Feed Burner Feed Name Here Too" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> </div> </div></center> <style> /*---:[ feature box ]:---*/ #feature_box { background: #eee; border-style: solid; border-color: #ddd; } /*---:[ home page teasers ]:---*/ .teaser a.teaser_link:hover { text-decoration: underline; } .teaser .teaser_author { font-style: italic; } .teaser .teaser_author .author { font-style: normal; text-transform: uppercase; letter-spacing: 1px; } .teaser .edit_post { letter-spacing: 1px; } .teaser .teaser_author a, .teaser a.teaser_comments, .teaser a.teaser_category, .teaser .edit_post a { text-transform: uppercase; letter-spacing: 1px; color: #888; border-bottom: 1px solid #eee; } .teaser .teaser_author a { font-style: normal; } .teaser .format_teaser a { text-decoration: underline; } .teaser .format_teaser a:hover { text-decoration: none; } /*---:[ border package ]:---*/ #header, .post_box, .teasers_box, #footer, .image_box, .custom_box, #feature_box, #archive_intro, .prev_next, #comment_nav_2 { border-width: 0; } /*Featured Box*/ .custom #feature_box{background:#f0f4f4; border:1px solid #d9eaea; padding:10px 15px 5px;} /* Subscription Box */ #sleek-subscribe{display: block; margin:0 auto; } .newsheadline {padding-left:20px;color:#222; font-size:20px; line-height:50px; float:left; font-weight:bold;} .newsheadline span{font-size:38px; color:#444; line-height:14px; font-family:"Trebuchet MS"; font-weight:normal;} .newsheadline cite{font-style:normal; color:#f00;} .signform{background:url('images/form-bg.jpg') no-repeat;padding:0 0 10px 100px; float:right; } .txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#92c3c3; border:1px solid #E36B0A; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;} .btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #AD5513; color:#fff; font-size:15px; border-radius:10px;} .btn2:hover{background:#6689b0; } #email-news-subscribe .email-box{ padding: 5px 10px; font-family: "Arial","Helvetica",sans-serif; border-top: 0; border-right: 1px solid #C7DBE2; border-left: 1px solid #C7DBE2; border-image: initial; height:34px;} #email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333} #email-news-subscribe .email-box input.subscribe{ background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); font-family: "Arial","Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:white; text-shadow:#d08d00 1px 1px 0; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ background: #ff9b00; background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:#FFFFFF; text-shadow:#d08d00 1px 1px 0} #other-social-bar { background-color: #D8E6EB; box-shadow: 0 1px 1px #FFFFFF inset; padding: 0px; font-family: "Arial","Helvetica",sans-serif; font-weight:bold; overflow: hidden; border: 1px solid #B6D0DA; height:57px; } </style> <div style="text-align: right;"> <a href="http://dhecun.blogspot.com/2012/12/membuat-widget-email-subscribe-pro.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

<center>
<div id="feature_box">
          <div id="sleek-subscribe">
                  <div class="newsheadline">
<span>Sign-up</span> for <cite>FREE</cite> Regular Newsletter.</div>
<div id="email-news-subscribe">
  <div class="email-box">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed Burner Feed Name', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
   
            <input class="email" type="text" style="width: 450px; font-size: 15px;" id="email" name="email" value="Your Custom Text Goes Here" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />       
            <input type="hidden" value="Your Feed Burner Feed Name Here Too" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input class="subscribe" name="commit" type="submit" value="Subscribe" />   
        </form>
</div>
</div>
</div>
</div>
</center>
<style>
/*---:[ feature box ]:---*/
#feature_box { background: #eee; border-style: solid; border-color: #ddd; }

/*---:[ home page teasers ]:---*/
.teaser a.teaser_link:hover { text-decoration: underline; }
.teaser .teaser_author { font-style: italic; }
    .teaser .teaser_author .author { font-style: normal; text-transform: uppercase; letter-spacing: 1px; }
.teaser .edit_post { letter-spacing: 1px; }
    .teaser .teaser_author a, .teaser a.teaser_comments, .teaser a.teaser_category, .teaser .edit_post a { text-transform: uppercase; letter-spacing: 1px; color: #888; border-bottom: 1px solid #eee; }
    .teaser .teaser_author a { font-style: normal; }
    .teaser .format_teaser a { text-decoration: underline; }
    .teaser .format_teaser a:hover { text-decoration: none; }

/*---:[ border package ]:---*/
#header, .post_box, .teasers_box, #footer, .image_box, .custom_box, #feature_box, #archive_intro, .prev_next, #comment_nav_2 { border-width: 0; }

/*Featured Box*/
.custom #feature_box{background:#f0f4f4; border:1px solid #d9eaea; padding:10px 15px 5px;}
        
/* Subscription Box */
#sleek-subscribe{display: block; margin:0 auto; } 
.newsheadline {padding-left:20px;color:#222; font-size:20px; line-height:50px; float:left; font-weight:bold;}
    .newsheadline span{font-size:38px; color:#444; line-height:14px; font-family:"Trebuchet MS"; font-weight:normal;}
    .newsheadline cite{font-style:normal; color:#f00;}
.signform{background:url('images/form-bg.jpg') no-repeat;padding:0 0 10px 100px; float:right; }
      .txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#92c3c3; border:1px solid #E36B0A; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}
      .btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #AD5513; color:#fff; font-size:15px; border-radius:10px;}
            .btn2:hover{background:#6689b0; }

#email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:34px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}   
    #email-news-subscribe .email-box input.email:focus{color:#333}   
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}   
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:57px;
    }
</style>

<!--[if IE]>

<![endif]-->
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-widget-email-subscribe-pro.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Keterangan :
1. Hapus kode berwarna biru muda : <input class="subscribe" name="commit" type="submit" value="Subscribe" /> , jika anda ingin menghapus button Subscribe widget.
2. Untuk penjelasan selanjutnya saya yakin tanpa diterangkan juga anda sudah tahu apa yang akan anda lakukan dengan tulisan yang saya beri warna.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Widget Email Subscription Pro Bloggers V3

Akhirnya Widget Email Subscription V3 ini lahir juga.

Pada versi kali ini widgetnya akan terlihat lebih keren , stylish , fresh dll.

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda

2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript

3. Masukkan script dibawah ini

4. Klik simpan

<div class="post-after-container"><div id="email_icon"></div><h4>Berlangganan artikel via email.</h4>
<div style="padding-bottom:10px;padding-left:60px;">Dapatkan artikel terbaru dari Dhecun Blog yang akan dikirim ke email anda secara gratis...!</div>
<div style="padding-left:60px;"> <div id="email-news-subscribe">

<div class="email-box"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=DhecunBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 250px; font-size: 15px;" id="email" name="email" value="Masukkan email anda disini" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
<input type="hidden" value="DhecunBlog" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Berlangganan sekarang" /></form></div></div></div></div>
<style>
#email_icon { background: url('http://www.mkyong.com/wp-content/themes/mkyongnew/images/email.png') no-repeat; height: 86px; width: 79px; display: block; position: absolute; float: left; margin-left: -35px; margin-top: 35px; } .post-after-container { background-color: #FFFFFF; border: 1px solid #E4E4E7; margin: 0 20px 20px 0; padding:20px; } .post-after-container h4 { font-size: 16px; margin:0 0 18px; padding:0; } #email-news-subscribe .email-box{ padding: 5px 10px; font-family: "Arial","Helvetica",sans-serif; border-top: 0; border-right: 1px solid #C7DBE2; border-left: 1px solid #C7DBE2; border-image: initial; height:34px;} #email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333} #email-news-subscribe .email-box input.subscribe{ background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); font-family: "Arial","Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:white; text-shadow:#d08d00 1px 1px 0; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ background: #ff9b00; background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:#FFFFFF; text-shadow:#d08d00 1px 1px 0} #other-social-bar { background-color: #D8E6EB; box-shadow: 0 1px 1px #FFFFFF inset; padding: 0px; font-family: "Arial","Helvetica",sans-serif; font-weight:bold; overflow: hidden; border: 1px solid #B6D0DA; height:57px; } </style>
<div style="text-align: right;"> <a href="http://dhecun.blogspot.com/2012/12/membuat-widget-email-subscription-pro.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

<div class="post-after-container">
<div id="email_icon">
</div>
<h4>
Berlangganan artikel via email.</h4>
<div style="padding-bottom:10px;padding-left:60px;">

<b>Dapatkan artikel terbaru dari <a href="http://dhecun.blogspot.com">Dhecun Blog</a>
<br/>
<br/>
yang akan dikirim ke email anda secara gratis...!</b></div>
<div style="padding-left:60px;">

</form>
</div>
</div>
</div>
</div>
<style>

#email_icon {
  background: url('http://www.mkyong.com/wp-content/themes/mkyongnew/images/email.png') no-repeat;
  height: 86px;
  width: 79px;
  display: block;
  position: absolute;
  float: left;
  margin-left: -35px;
  margin-top: 35px;
}

.post-after-container {
    background-color: #FFFFFF;
    border: 1px solid #E4E4E7;
    margin: 0 20px 20px 0;
    padding:20px;
}

.post-after-container h4 {
    font-size: 16px;
    margin:0 0 18px;
    padding:0;
}

#email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:34px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;} 
    #email-news-subscribe .email-box input.email:focus{color:#333} 
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0} 
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:57px;
    }

</style>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-widget-email-subscription-pro.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Keterangan:

1. Tulisan warna merah adalah judul dari widget , ganti sesuai keinginan anda.

2. Tulisan warna biru : adalah keterangan widget , ganti sesuai keinginan anda.

3. Tulisan warna pink : ganti dengan username feedburner anda.

4. Tulisan warna hijau : adalah teks yang berada pada kolom pengisian email , ganti sesuai keinginan anda.

5. Tulisan warna orange : adalah teks tampilan button , bisa anda ganti dengan teks kirim , send it , dll terserah anda.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Pasang Widget Otomatis

Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.

RSS feeds

Space Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

Follow this blog

RSS feeds

RSS
Post RSS
Comments RSS

Widget Populer

Widget Zoom Detail Gambar

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

/***********************************************
* Frame dcode

***********************************************/

</script>

jQuery(document).ready(function($){

$('#image1').addimagezoom({
  zoomrange: [3, 30],
  magnifiersize: [500,500],
  magnifierpos: 'right',
  cursorshade: true,
  largeimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png' //<-- No comma after last option!
 })

$('#image2').addimagezoom({
  zoomrange: [5, 5],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadecolor: 'pink',
  cursorshadeopacity: 0.3,
  cursorshadeborder: '1px solid red',
  largeimage: 'alamat gambar 2' //<-- No comma after last option!
 })

$('#image3').addimagezoom()

})

</script>

// feb 2 12
// modifikasi script

jQuery.noConflict()

jQuery('head').append('<style type="text/css">.featuredimagezoomerhidden {visibility: hidden!important;}</style>');

var featuredimagezoomer={
 loadinggif: 'spinningred.gif', //full path or URL to "loading" gif
 magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image

/////NO NEED TO EDIT BEYOND HERE////////////////
 dsetting: { //default settings
   magnifierpos: 'right',
   magnifiersize:[200, 200],
   cursorshadecolor: '#fff',
   cursorshadeopacity: 0.3,
   cursorshadeborder: '1px solid black',
   cursorshade: false,
   leftoffset: 15, //offsets here are used (added to) the width of the magnifyarea when
   rightoffset: 10 //calculating space requirements and to position it visa vis any drop shadow
  },
 isie: (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)return true;@end @*/return false;})(), //is this IE?

showimage: function($, $tracker, $mag, showstatus){
  var specs=$tracker.data('specs'), d=specs.magpos, fiz=this;
  var coords=$tracker.data('specs').coords //get coords of tracker (from upper corner of document)
  specs.windimensions={w:$(window).width(), h:$(window).height()}; //remember window dimensions
  var magcoords={} //object to store coords magnifier DIV should move to
  magcoords.left = coords.left + (d === 'left'? -specs.magsize.w - specs.lo : $tracker.width() + specs.ro);
  //switch sides for magnifiers that don't have enough room to display on the right if there's room on the left:
  if(d!=='left' && magcoords.left + specs.magsize.w + specs.lo >= specs.windimensions.w && coords.left - specs.magsize.w >= specs.lo){
   magcoords.left = coords.left - specs.magsize.w - specs.lo;
  } else if(d==='left' && magcoords.left < specs.ro) { //if there's no room on the left, move to the right
   magcoords.left = coords.left + $tracker.width() + specs.ro;
  }
  $mag.css({left: magcoords.left, top:coords.top}).show(); //position magnifier DIV on page
  specs.$statusdiv.html('Current Zoom: '+specs.curpower+'<div style="font-size:100%">Use Mouse Wheel to Zoom In/Out</div>');
  if (showstatus) //show status DIV? (only when a range of zoom is defined)
   fiz.showstatusdiv(specs, 400, 2000);
 },

hideimage: function($tracker, $mag, showstatus){
  var specs=$tracker.data('specs');
  $mag.hide();
  if (showstatus)
   this.hidestatusdiv(specs);
 },

showstatusdiv: function(specs, fadedur, showdur){
  clearTimeout(specs.statustimer)
  specs.$statusdiv.fadeIn(fadedur) //show status div
  specs.statustimer=setTimeout(function(){featuredimagezoomer.hidestatusdiv(specs)}, showdur) //hide status div after delay
 },

hidestatusdiv: function(specs){
  specs.$statusdiv.stop(true, true).hide()
 },

getboundary: function(b, val, specs){ //function to set x and y boundaries magnified image can move to (moved outside moveimage for efficiency)
  if (b=="left"){
   var rb=-specs.imagesize.w*specs.curpower+specs.magsize.w
   return (val>0)? 0 : (val<rb)? rb : val
  }
  else{
   var tb=-specs.imagesize.h*specs.curpower+specs.magsize.h
   return (val>0)? 0 : (val<tb)? tb : val
  }
 },

moveimage: function($tracker, $maginner, $cursorshade, e){
  var specs=$tracker.data('specs'), csw = Math.round(specs.magsize.w/specs.curpower), csh = Math.round(specs.magsize.h/specs.curpower),
  csb = specs.csborder, fiz = this, imgcoords=specs.coords, pagex=(e.pageX || specs.lastpagex), pagey=(e.pageY || specs.lastpagey),
  x=pagex-imgcoords.left, y=pagey-imgcoords.top;
  $cursorshade.css({ // keep shaded area sized and positioned proportionately to area being magnified
   visibility: '',
   width: csw,
   height: csh,
   top: Math.min(specs.imagesize.h-csh-csb, Math.max(0, y-(csb+csh)/2)) + imgcoords.top,
   left: Math.min(specs.imagesize.w-csw-csb, Math.max(0, x-(csb+csw)/2)) + imgcoords.left
  });
  var newx=-x*specs.curpower+specs.magsize.w/2 //calculate x coord to move enlarged image
  var newy=-y*specs.curpower+specs.magsize.h/2
  $maginner.css({left:fiz.getboundary('left', newx, specs), top:fiz.getboundary('top', newy, specs)})
  specs.$statusdiv.css({left:pagex-10, top:pagey+20})
  specs.lastpagex=pagex //cache last pagex value (either e.pageX or lastpagex), as FF1.5 returns undefined for e.pageX for "DOMMouseScroll" event
  specs.lastpagey=pagey
 },

magnifyimage: function($tracker, e, zoomrange){
  var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
  var zoomdir=(delta<=-120)? "out" : "in"
  var specs=$tracker.data('specs')
  var magnifier=specs.magnifier, od=specs.imagesize, power=specs.curpower
  var newpower=(zoomdir=="in")? Math.min(power+1, zoomrange[1]) : Math.max(power-1, zoomrange[0]) //get new power
  var nd=[od.w*newpower, od.h*newpower] //calculate dimensions of new enlarged image within magnifier
  magnifier.$image.css({width:nd[0], height:nd[1]})
  specs.curpower=newpower //set current power to new power after magnification
  specs.$statusdiv.html('Current Zoom: '+specs.curpower)
  this.showstatusdiv(specs, 0, 500)
  $tracker.trigger('mousemove')
 },

init: function($, $img, options){
  var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
  fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0};
  setting.largeimage = setting.largeimage || $img.get(0).src;
  $magnifier=$('<div class="magnifyarea" style="position:absolute;width:'+setting.magnifiersize[0]+'px;height:'+setting.magnifiersize[1]+'px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;" />')
   .append('<div style="position:relative;left:0;top:0;" />')
   .appendTo(document.body) //create magnifier container
  //following lines - create featured image zoomer divs, and absolutely positioned them for placement over the thumbnail and each other:
  if(setting.cursorshade){
   $cursorshade = $('<div class="cursorshade" style="visibility:hidden;position:absolute;left:0;top:0;" />')
    .css({border: setting.cursorshadeborder, opacity: setting.cursorshadeopacity, backgroundColor: setting.cursorshadecolor})
    .appendTo(document.body);
  } else {
   $cursorshade = $('<div />'); //dummy shade div to satisfy $tracker.data('specs')
  }
  $statusdiv = $('<div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;" />')
   .html('<img src="'+this.loadinggif+'" />')
   .appendTo(document.body); //create DIV to show "loading" gif/ "Current Zoom" info
  $tracker = $('<div class="zoomtracker" style="cursor:progress;position:absolute;left:'+o.left+'px;top:'+o.top+'px;height:'+h+'px;width:'+w+'px;" />')
   .css({backgroundImage: (this.isie? 'url(cannotbe)' : 'none')})
   .appendTo(document.body);
  $(window).resize(function(){ //in case resizing the window repostions the image
    var o = $img.offset();
    $tracker.css({left: o.left, top: o.top});
   });

function getspecs($maginner, $bigimage){ //get specs function
   var magsize={w:$magnifier.width(), h:$magnifier.height()}
   var imagesize={w:w, h:h}
   var power=(setting.zoomrange)? setting.zoomrange[0] : ($bigimage.width()/w).toFixed(5)
   $tracker.data('specs', {
    $statusdiv: $statusdiv,
    statustimer: null,
    magnifier: {$outer:$magnifier, $inner:$maginner, $image:$bigimage},
    magsize: magsize,
    magpos: setting.magnifierpos,
    imagesize: imagesize,
    curpower: power,
    coords: getcoords(),
    csborder: $cursorshade.outerWidth(),
    lo: setting.leftoffset,
    ro: setting.rightoffset
   })
  }

function getcoords(){ //get coords of thumb image function
   var offset=$tracker.offset() //get image's tracker div's offset from document
   return {left:offset.left, top:offset.top}
  }

$tracker.mouseover(function(e){
     $cursorshade.add($magnifier).add($statusdiv).removeClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', false);
   }).mouseout(function(e){
     $cursorshade.add($magnifier).add($statusdiv.not('.preloadevt')).addClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', true);
   }).mousemove(function(e){ //save tracker mouse position for initial magnifier appearance, if needed
    lastpage.pageX = e.pageX;
    lastpage.pageY = e.pageY;
   });

$tracker.one('mouseover', function(e){
   var $maginner=$magnifier.find('div:eq(0)')
   var $bigimage=$('<img src="'+setting.largeimage+'"/>').appendTo($maginner)
   var showstatus=setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]
   $img.css({opacity:0.1}) //"dim" image while large image is loading
   var imgcoords=getcoords()
   $statusdiv.css({left:imgcoords.left+w/2-$statusdiv.width()/2, top:imgcoords.top+h/2-$statusdiv.height()/2, visibility:'visible'})
   $bigimage.bind('loadevt', function(){ //magnified image ONLOAD event function (to be triggered later)
    $img.css({opacity:1}) //restore thumb image opacity
    $statusdiv.empty().css({border:'1px solid black', background:'#C0C0C0', padding:'4px', font:'bold 13px Arial', opacity:0.8}).hide().removeClass('preloadevt');
    if($tracker.data('premouseout')){
     $statusdiv.addClass('featuredimagezoomerhidden');
    }
    if (setting.zoomrange){ //if set large image to a specific power
     var nd=[w*setting.zoomrange[0], h*setting.zoomrange[0]] //calculate dimensions of new enlarged image
     $bigimage.css({width:nd[0], height:nd[1]})
    }
    getspecs($maginner, $bigimage) //remember various info about thumbnail and magnifier
    $magnifier.css({display:'none', visibility:'visible'})
    $tracker.mouseover(function(e){ //image onmouseover
     $tracker.data('specs').coords=getcoords() //refresh image coords (from upper left edge of document)
     fiz.showimage($, $tracker, $magnifier, showstatus)
    })
    $tracker.mousemove(function(e){ //image onmousemove
     fiz.moveimage($tracker, $maginner, $cursorshade, e)
    })
    if (!$tracker.data('premouseout')){
     fiz.showimage($, $tracker, $magnifier, showstatus);
     fiz.moveimage($tracker, $maginner, $cursorshade, lastpage);
    }
    $tracker.mouseout(function(e){ //image onmouseout
     fiz.hideimage($tracker, $magnifier, showstatus)
    }).css({cursor: fiz.magnifycursor});
    if (setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]){ //if zoom range enabled
     $tracker.bind('DOMMouseScroll mousewheel', function(e){
      fiz.magnifyimage($tracker, e, setting.zoomrange);
      e.preventDefault();
     });
    }
   }) //end $bigimage onload
   if ($bigimage.get(0).complete){ //if image has already loaded (account for IE, Opera not firing onload event if so)
    $bigimage.trigger('loadevt')
   }
   else{
    $bigimage.bind('load', function(){$bigimage.trigger('loadevt')})
   }
  })
 },

iname: (function(){var itag = jQuery('<img />'), iname = itag.get(0).tagName; itag.remove(); return iname;})()
};

jQuery.fn.addimagezoom=function(options){
 var $=jQuery;
 return this.each(function(){ //return jQuery obj
  if (this.tagName !== featuredimagezoomer.iname)
   return true; //skip to next matched element
  featuredimagezoomer.init($, $(this), options);
 });
}
</script>
<p><img id="image1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png" style="width:170px;height:170px" /><p></p></p> 
<center>Mainkan roda mouse anda untuk membuat tampilan lebih besar</center>
<br/>
<div style="text-align:center; font-size:0.75em">
<a href="http://dhecun.blogspot.com/2012/11/script-zoom-gambar-dengan-detail.html">[ Get Widget ]</a></div>

Widget Share Button Melayang

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://dhecun.blogspot.com/2012/11/memasang-widget-share-button-facebook.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

Tukar Link

Traffic

Dhecun Blog Statistics summary for website

Semua Artikel

Tampilkan semua artikel

10 Artikel Terbaru

Gabungan

Ganti warna border

Ganti warna background

Ganti background dan border

Blogger templates

Pages

Beranda

My Facebook

Kirim SMS Gratis

Download Gratis

Contact us

Dhecun Blog

Membuat Widget Email Subscription Pro Bloggers V2

Tuesday, December 4, 2012

Membuat Widget Email Subscribe Pro Bloggers V1

Membuat Widget Email Subscription Pro Bloggers V3

Pasang Widget Otomatis

Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Space Iklan

Kategori pasang iklan

Iklan Sponsor 1

About Me

Contact

Rekomendasi

Follow

RSS feeds

Widget Populer

Share

Tukar Link

Traffic

Semua Artikel

10 Artikel Terbaru

Followers

Advertiser

Pasang iklan dapat diut