Add Feedburner subscription+Social Follow widget below posts of Blogger

Add Feedburner subscription+Social Follow widget below posts of Blogger
Fellow visitors! In New Year add a super cool compact social subscription box widget below post’s of your Blogger blog. This widget is very trendy designed and will make sure to get maximum social fan and email subscriber with style. This widget got three social follow buttons (they change look with mouse hover with sliding effect) Facebook, Twitter and Google plus. Made with CSS, HTML, CSS3, Script, Google font, Font awesome, keyframes  and hard work. Easy to configure and add to your site. Let’s see how it looks, how to add and configure:-

Superb Feedburner subscription+Social Follow widget below posts of Blogger


Preview-

Add Feedburner subscription+Social Follow widget below posts of Blogger


Live Demo- (Click Here)


Codes for copy-

Part 1

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>


Part 2

<!--crawlist.net widget starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="ks-volt">
<h3>Never miss a post, Again! (Subscribe)</h3>
<div class="ks-volta">
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=crawlist&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=500,height=500&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='ks-searchbar1' name='email' onblur='if (this.value == "") {this.value = "   Enter your email";}' onfocus='if (this.value == "   Enter your email") {this.value = ""}' type='text' value='   Enter your email'/>
 <input id='ks-searchbutton' title='' type='submit' value='Submit'/>
</form></div>
<div id="ks-share">
  <div class="facebook ks-button">
    <i class="icon">
      <i class="fa fa-facebook fa">
    </i>
  </i>
  <div class="slide">
    <p>
      Facebook
    </p>
  </div>
 
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
   js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#039;script&#039;, &#039;facebook-jssdk&#039;));&lt;/script&gt;
&lt;div class=&quot;fb-like&quot; data-href=&quot;Your Facebook Fanpage Adress&quot; data-width=&quot;40&quot; data-layout=&quot;button_count&quot; data-action=&quot;like&quot; data-show-faces=&quot;false&quot; data-share=&quot;false&quot;&gt;&lt;/div&gt;

  </div> 
  <div class="twitter ks-button">
    <i class="icon">
      <i class="fa fa-twitter fa">
    </i>
  </i>
  <div class="slide">
    <p>
      Twitter
    </p>
  </div>
  <a href="https://twitter.com/k_shazzad" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @your account name</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>
  </div> 
  <div class="google ks-button">
    <i class="icon">
      <i class="fa fa-google-plus fa">
    </i>
  </i>
  <div class="slide">
    <p>
      Google+
    </p>
  </div>
  <div class="g-plusone" data-size="medium">
  </div>
  <script type="text/javascript">
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
  </script>
  </div> </div></div><!--crawlist.net widget ends-->
<style>
 /*crawlist.net design starts*/
.ks-volt { border:2px #ccc solid; height:160px; width:500px; margin:auto; border-radius:4px; overflow: hidden; background:#fff;}
.ks-volt h3 { color:#333; text-align:center; font-size:20px; font-weight:100;font-family: 'Droid Serif', serif; margin-top:10px; margin-bottom:10px;}
#ks-share {
    background: white;
    width: 480px;
    overflow: hidden;
    margin-top:6px;margin-left:7.5px;}
.ks-button {
    background: #DCE0E0;
    position: relative;
    display: block;
    float: left;
    height: 40px;
    margin: 0 5px;
    overflow: hidden;
    width: 150px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.icon {
    display: block;
    float: left;
    position: relative;
    z-index: 3;
    height: 100%;
    vertical-align: top;
    width: 38px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
    text-align: center;
}
.icon i {
    color: #fff;
    line-height: 42px;
}
.slide {
    z-index: 2;
    display: block;
    margin: 0;
    height: 100%;
    left: 38px;
    position: absolute;
    width: 112px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
}
.slide p {
font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    border-left: 1px solid #fff;
    border-left: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 16px;
    left: 0;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 8px;
    width: 100%;
}
.ks-button .slide {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
/*position fix */
.facebook iframe {
    display: block;
    position: absolute;
    right: -16px;
    top: 10px;
    z-index: 1;
}
.twitter iframe {
    width: 90px !important;
    right: 5px;
    top: 10px;
    z-index: 1;
    display: block;
    position: absolute;
}
.google #___plusone_0 {
    width: 70px !important;
    top: 10px;
    right: 15px;
    position: absolute;
    display: block;
    z-index: 1;
}
/*share bar background*/
.facebook:hover .slide {
    left: 150px;
}
.twitter:hover .slide {
    left: 150px;
}
.google:hover .slide {
    left: 150px;
}
/*icon background*/
.facebook .icon, .facebook .slide {
    background: #305c99;
}
.twitter .icon, .twitter .slide {
    background: #00cdff;
}
.google .icon, .google .slide {
    background: #d24228;
}
.ks-volta { height:50px; margin:auto; width:460px;}
#ks-searchbutton{width: 200px;
height:38px;
  text-align: center;
  font-size: 16px;
font-family: 'Droid Serif', serif;
  font-weight: bold;
  letter-spacing: 0;
  -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
  -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
  box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);

  color: #fff;
  background-color: #f2672e;
  text-shadow: none;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  margin-bottom: 20px;
  -webkit-animation: shadowFadeOut 0.4s;
  -moz-animation: shadowFadeOut 0.4s;    }
 #ks-searchbutton:hover { color: #fff;
  -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
  -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
  box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
  -webkit-animation: shadowFade 0.4s;
  -moz-animation: shadowFade 0.4s;
}
@keyframes shadowFade {
    0% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}
@keyframes shadowFadeOut {
    0% {
      -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-webkit-keyframes shadowFade {
    0% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-webkit-keyframes shadowFadeOut {
    0% {
      -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-moz-keyframes shadowFade {
    0% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

@-moz-keyframes shadowFadeOut {
    0% {
      -webkit-box-shadow: inset 0px 44px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 44px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 44px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
    100% {
      -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
      -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
      box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
      color: #fff;
    }
}

#ks-searchbar1
{
border:1px solid #d5d5d5;
background:#ffffff;
color:#888888;
width:250px;
height:34px;
font-family: 'Droid Serif', serif;
font-size:16px;
}
/*crawlist.net design ends*/
</style>
</b:if>


How to add
This widget set up has two part, read on-
  • First, Log into your Blogger, select your blog, 
  • Select 'Template', select 'Edit HTML' 
  • Now search for (Using Ctrl+F in Windows, Cmd+F in Mac) into code snippet </head>
    • Above </head> copy and paste part 1's codes
    • Second, Again search for

    <div class='post-footer-line post-footer-line-1'>

    • You may find this line twice, select sound line, and copy and paste part 2's codes below that line
    • If your template doesn't contain this line <div class='post-footer-line post-footer-line-1'> (Basically HTML5 templates) search for </article>
    • And below </article> copy and paste Part 2's codes. and configure

    How to configure
    • To configure your Feedburner email subscription form. replace crawlist with your feeburner id, it can be found in (http://feeds.feedburner.com/your feed id)
    • To configure Facebook like button, just replace your Facebook fan page full address on 'Your Facebook Fanpage Adress'
    • To configure twitter follow button, just replace your twitter account url on https://twitter.com/k_shazzad and @your account name
    • After configure hit 'Save template' and check out your blogger blog.

    Compatibility
    • This widget is compatible with all browser's latest version (old version's are supports too except IE),
    • All stranded structured template will show this widget correctley, if some template don't show it right, you may have to change #ks-share 's margin values and .ks-button 's margin values. This widget will not appear on homepage.
    So any feedback don’t forget to mention. Goodluck and Happy new year…

    3:49 AM | Labels: , | 0 Comments  

    Metro Social Subscription Widget for Blogger/Wordpress

    Metro Social Subscription Widget for Blogger/Wordpress
    Icon styled social subscription widget is looks random and simple, on the another hand metro/windows style social media subscription widget looks cool and smart. Before I published 2 different styled metro social media profile widget, and with this post I exposing just another metro social subscription widget with different format, Contains Facebook, Twitter, Google plus, Pinterest, Linkedin and Feedburner slot with hover effect and tool-tip. This widget will fit to any kind of website no matter it Blog or portfolio website. Let's see how it looks like and how to use it in your Blogger blog and wordpress sites.

    Metro Social Subscription Widget for Blogger/Wordpress


    Preview- 
    Metro social subscription widget for Blogger wordpress
    Live Demo- (here you go)

    Codes-

    <style>/*crawlist.net CSS starts*/
    .ks-metro {
        height:300px;
        width:286px;
        border:#fff 1px hidden;
        margin:auto;
    }
    .ks-fbbox {
        float:left;
        height:150px;
        width:150px;
        border:#33C hidden 1px;
    }
    .ks-ttbox {
        float:right;
        height:70px;
        width:136px;
        border:#90F hidden1px;
    }
    .ks-gpbox {
        float:right;
        height:78px;
        width:136px;
        border:#F03 hidden 1px;
    }
    .ks-febox {
        float:right;
        height:147px;
        width:136px;
        border:#F96 hidden 1px;
    }

    .ks-lnbox {
        float:left;
        height:70px;
        width:150px;
        border:#00F hidden 1px;
    }
    .ks-ptbox {
        float:left;
        height:75px;
        width:150px;
        border:#F03 hidden 1px;
    }

    #ks-social-icons {
    display: block;
    }
    #ks-social-icons img {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
    border:#FFF 1px hidden;}

    #ks-social-icons img:hover {
    -webkit-opacity: 0.8;
    -moz-opacity: 0.8;
    opacity: 0.8;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
    border:#FFF 1px hidden;
    }/*crawlist.net CSS ends*/
    </style>
    <div class="ks-metro"><div id="ks-social-icons">
    <!--crawlist.net widget Starts--><div class="ks-fbbox">
    <a href="http://www.facebook.com/your profile" target="_blank" rel="nofollow" title="Join us on Facebook"><img height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2cIceYoqqvLx_UGzuGLGS835de8xvNMv6-nRz3oEWVBjzvurzx0or_4-Le3YSp5JsQZHxPxoOto36oWdgDDKN1IEuy_fQZ4vFOV4mQAvJ9oklVdF_5NwxuUMmUBbJD_y_whRne8ZZatCV/s1600/1.png" width="150" /></a></div>
    <div class="ks-gpbox">
    <a href="http://plus.google.com/your profile" target="_blank" rel="nofollow" title="Join us on Google Plus"><img height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCNvB5Y8vxU2B3w9Put_GqNGnH8RM-FXnkp9sfSLoRCCa9Q6Yk0ZB2oN7kKrl0aK0bNOYr1j4nuHsI_ejH-GjMmkwbdbJrvt6btjanestLgVNXugT29uYM3CKIWzj2eueON3JaB6tNa6lJ/s1600/2.png" width="136" /></a></div>
    <div class="ks-ttbox">
    <a href="http://www.twitter.com/your profile" target="_blank" rel="nofollow" title="Join us on Twitter"><img height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIR7ivLhFeeQiEy5hyphenhyphen2CiYOg3u9NcyAJnOfkwQM20FQgbjFSex67BWb2CsWkXqj0idaI0BcxUs9yjSSo0j_aw7trD4GBi-1xyztbRvzZA062RH6n5LLy7FQwRlppgUlkYFY_sn-Y1l3Hp/s1600/3.png" width="136" /></a></div>
    <div class="ks-febox">
    <a href="http://feedburner.com/your profile" target="_blank" rel="nofollow" title="Never miss a post"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhed2QOkmMW4do2Pb3T_TWFaq2Mu7CEfnNw6hd1SCmeKn3vjDFdDNekIFMXYXDLEkNxGm0fb1-J75NpGsfGka8lmRP8Fj4adb2-w-0dLhQAtV-FabYHaMNeYzNTGeWgBS2JXvv8n5xdUW9s/s1600/4.png" width="136" /></a></div>
    <div class="ks-lnbox">
    <a href="http://www.linkedin.com/your profile" target="_blank" rel="nofollow" title="Join us on Linkedin"><img height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5UqrxkgpvOyg5QiWzug8N5x9OA7uUkoE45D-OYxKf4MtKeSCXIIIaKiH7aEXE4rPCeTGH24GNHHvDxnkan-HYNFGu28yZGfx63leDEonkBpH7z_P48Ruqy-AlCbx8TDijnZFULhTVb0L/s1600/5.png" width="150" /></a></div>
    <div class="ks-ptbox">
    <a href="http://www.pinterest.com/your profile" target="_blank" rel="nofollow" title="Join us on Pinterest"><img height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiew4l0v9xc8f6MMH4AS-rXIFGRHInB5i6I89og7JRv1vadNa3S7QXAfeXJPv8KyOHq1aY_TbnF0S4Ca_uqaEQbZrDy_NKKbd0p9w5_oKc-V-pTYRfpxDBgkfk4X239rIILJU8YhtsLNac/s1600/6.png" width="150" /></a></div><!--crawlist.net widget ends--></div>

    How to add this widget in Blogger
    • First log in to your Blogger, select your Blog, 
    • Go to 'Layout' tab then click 'add a gadget'  
    • Select 'html/javascript' from pop up menu. 
    • Copy following codes and configure

    How to add this widget in Wordpress
    • From dashboard hover mouse on 'Appearance' tab, 
    • From 'appearance' menu select 'widgets', 
    • Then drag and drop 'Text' content box in widget area, 
    • Copy following codes and paste into 'text' box
    • New Dashboard: Click on 'Text' add it to sidebar and paste following codes.

    How to configure
    First collect your following social media profiles direct links and replace with default links. All links are red colored;

    So, what you think about this widget and how it working on your Blog don't forget to mention :) And don't forget to subscribe and like Crawlist on Facebook for more cool widget's updates.

    10:51 AM | Labels: , , | 0 Comments  

    Ribbon: Feedburner Email Subscription box for Blogger/Wordpress

    Unique Feedburner Email Subscription box for Blogger/Wordpress
    Feedburner email subscription box is a must have widget for both Blogger and wordpress users. But the default subscription widget is pretty simple and non attractive, that’s what I did published custom attractive and eye catchy subscription box before (like- Cool Feedburner email subscription box, Total social subscription box widget, 4 stylish Feedburner subscription widget) And here I am publishing another one The Unique subscription box here. This widget is both attractive and eye catchy, it made with Pure CSS3 ribbon, retina ready background, flat pressable submit button and so so. It also smaller sized and will be fit with any kind of website I guess. Let’s see how it looks like and how to add it in your Blogger and wordpress blogs.

    Ribbon: Feedburner Email Subscription box for Blogger/Wordpress


    Preview-

    Ribbon: Feedburner Email Subscription box for Blogger/Wordpress


    Live demo-



    Codes for copy-


    <style>/*crawlist.net CSS starts*/
    .ks-ooo {position:relative; z-index:0;}
    .ks-ooo > div {margin-bottom:40px;}
    .ks-ooo > div:last-of-type {margin-bottom:0;}
    .ks-ooo .ribbon {
        margin:auto;
        position:relative;
        width:300px;
        height:40px;
        behavior:url(PIE.htc);
    }
    .ks-ooo .ribbon > span {
        display:block;
        position:relative;
        height:100%;
        behavior:url(PIE.htc);
        -pie-watch-ancestors:1;
    }
    .ks-ooo .ribbon > span:before, .ks-ooo .ribbon > span:after {
        content:'';
        position:absolute;
        z-index:-1;
        border-style:solid;
        border-width:14px;
        border-color:transparent;
    }
    .ks-ooo.ie8 .ribbon > span:before, .ie8 .ribbon > span:after {
        display:none;
    }
    .ks-ooo .ribbon > span:before {
        left:-14px;
    }
    .ks-ooo .ribbon > span:after {
        right:-14px;
    }
    .ks-ooo .ribbon:before {
        content:'';
        position:absolute;
        z-index:-2;
        left:-31px;
        border-style:solid;
        border-width:20px;
        border-right-width:25px;
    }
    .ks-ooo .ribbon:after {
        content:'';
        position:absolute;
        z-index:-2;
        right:-31px;
        border-style:solid;
        border-width:20px;
        border-left-width:25px;
    }
    .ks-ooo .oo1 > span {
        -moz-box-shadow:   0 1px 2px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
        box-shadow:        0 1px 2px rgba(0, 0, 0, 0.5);
    }
    .ks-ooo .oo1 > span:before, .ks-ooo .oo1 > span:after {
        bottom:-14px;
    }
    .ks-ooo .oo1:before {
        top:14px;
    }
    .ks-ooo .oo1:after {
        top:14px;
    }
    .ks-ooo .o1o, .ks-ooo.ie8 .o1o > span {
        background-color:#42a5d4;
        background-image:-webkit-gradient(linear, left top, left bottom, from(#42a5d4), to(#24769d)); /* Saf4+, Chrome */
        background-image:-webkit-linear-gradient(top, #42a5d4, #24769d); /* Chrome 10+, Saf5.1+, iOS 5+ */
        background-image:   -moz-linear-gradient(top, #42a5d4, #24769d); /* FF3.6 */
        background-image:    -ms-linear-gradient(top, #42a5d4, #24769d); /* IE10 */
        background-image:     -o-linear-gradient(top, #42a5d4, #24769d); /* Opera 11.10+ */
        background-image:        linear-gradient(top, #42a5d4, #24769d);
        -pie-background:         linear-gradient(top, #42a5d4, #24769d); /* IE6-IE9 */
    }
    .ks-ooo .o1o > span:before {
        border-right-color:#174c66;
    }
    .ks-ooo .o1o > span:after {
        border-left-color:#174c66;
    }
    .ks-ooo .o1o:before {
        border-color:#24769d #24769d #24769d transparent;
    }
    .ks-ooo .o1o:after {
        border-color:#24769d transparent #24769d #24769d;
    }
    .ks-boxsa {height:135px; width:270px; border:#ccc solid 1px; margin:auto; border-radius:0px 0px 5px 5px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE4jbiHjpc8NpaoabXNwMNGT2ieqaKtKuqdJkP2vytvwd4z5giBcFeBr40w5R9-6diCS5rpfrF1r5bTjgluPtvBsn55bCDVBO8yWwazE11enPslFDEoW0DJuD7jTvr2MUuN9GPyPgjSvo/s1600/paper.png);margin-left:14px;
    }

    .ks-box {height:150px; width:300px;}
    .ks-box h4{font-size:16px; text-align:center;
        color:#fff;
        line-height:40px;
        font: Georgia;
        font-weight:200;
        font-style:italic;
    }
    #ks-inject { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCEinBtcs5e_OHXzI4MWiKsWaI35dEl3pvzrbI7bRAvPrT1VHzsmHTpELlEg5GqBE27IBPo3SbfDiu8DIY0s0EfUFBzAjsSd5ylT80Y5habNSd7MLHpLBrhbrlap6FqzAQgYNzFZSosY/s1600/email.png') #fff no-repeat 10px center; padding-left: 35px;
            border: 1px solid #ccc;
            font-size: 15px;
            line-height:2;
      
            height:37px;
            width:198px;
            border-radius: 3.5px;
            -moz-border-radius: 3.5px;
            -webkit-border-radius: 3.5px;
            box-shadow: 0 2px 2px #ddd;
            -moz-box-shadow: 0 2px 2px #ddd;
            -webkit-box-shadow: 0 2px 2px #ddd;
            margin-top:13.5px;
          
                -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;}
          
    #ks-inject:focus { border-color:#F4836A;
        outline: none;
        box-shadow: 0 0 2px 1px #F4836A;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;}


    #ks-buofo {
      position: relative;
      vertical-align: top;
      width: 165px;
      height: 40px;
      padding: 0;
      font-size: 24px;
      color: white;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
      background: #3498db;
      border: 0;
      border-bottom: 2px solid #2a8bcc;
      cursor: pointer;
      -webkit-box-shadow: inset 0 -2px #2a8bcc;
      box-shadow: inset 0 -2px #2a8bcc;

      margin-top:10.5px;
     
              border-radius: 1.5px;
            -moz-border-radius: 1.5px;
            -webkit-border-radius: 1.5px;
    }
    #ks-buofo:hover {opacity:0.7;}
    #ks-buofo:active {
      top: 1px;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
    .ks-boxsa h6{font: "Segoe UI"; font-size:14px; font-weight:100; margin-top:7px; color:#333; font-style:italic;
    }
    /*crawlist.net CSS ends*/
    </style>
    <!--crawlist.net widget starts-->
    <div class="ks-box">
    <div class="ks-ooo">
    <div class="ribbon oo1 o1o"><span><h4>Subscribe for Newsletter</h4></span></div>
    <div class="ks-boxsa" align="center">
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=FeedId&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=500&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='crawlist'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='ks-inject' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = ""}' type='text' value='Enter your email'/>
     <input id='ks-buofo' title='' type='submit' value='Submit'/>
    </form>
    <h6 align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWfYVatzsUnjHJB-0HFguORePV-3lVS4zyRoxjOkcvuCSEEKzkas0ENbjY5t3S4BJPfgkIUKfgHwGmP7YwwJYOvz2VDg24C7hIE3FxeQd137O5ep1IcVbQmslXfGYgBlNr3pp6IqgM_A/s1600/lock.png" height="12px" width="10px"/> 100% Privacy Guaranty</h6>
    </div></div></div>
    <!--crawlist.net widget ends-->


    How to add this widget in Blogger
    • First log in to your Blogger, select your Blog, 
    • Go to 'Layout' tab then click 'add a gadget' 
    • Select 'html/javascript' from pop up menu. 
    • Copy following codes and configure

    How to add this widget in Wordpress
    • From dashboard hover mouse on appearance tab, 
    • From appearance menu select 'widgets', 
    • Then drag and drop 'Text' content box in widget area, 
    • Copy following codes and paste into 'text' box, 
    • For new dashboard click on 'Text' add it to sidebar and paste following codes and configure

    How to configure
    First log into your Feedburner account, get your Feedburner Id and replace FeedId pink colored (example- http://feeds.feedburner.com/your website’s feed id) Then save widget. Visit your site to see this widget working.

    Widget compatibility
    • This widget tested with many templates and it compatible with all of them. Some template will not show this widget properly, in that case you have to fix widget’s margin code. 
    • This widget works fine on All major web browser (latest versions)
    So what you think about this widget do not forget to mention by comment, I would love to hear. And stay subscribed for more widget update in future. Goodluck

    10:40 AM | Labels: , , | 0 Comments  

    Add animated underline links of your Blogger blog

    Add animated underline links of your Blogger blog
    I published couple of cool tutorial and tricks for customizing your blogs post area elements before; here to mention some notable using Google font in post, customized blockquote, syntax highlighter, setting up 404 error page, Flickr images gallery, Remove default border and shadow from images, embedding vimeo videos etc. Here to the next stage of Blogger post customization I presenting to you here animated underline links. By applying this tutorial in post all links will show different way; animated underline will appear on mouse hover on links. This trick made with CSS3 animation and it’s easy to set up. Let’s see how it works and how to add it on your Blogger blog.

    Add animated underline links of your Blogger blog


    Live Demo: (click here)

    Codes for Copy:


    <style>/*crawlist.net CSS starts*/
    .post-body a, a:visited {
      text-decoration: none;
      position: relative;
      color: #3498DB;
    }
    .post-body a:after, a:visited:after {
      content: '';
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0%;
      background: #19B5FE;
      transition: 0.2s;
      margin-top:2px
    }
    .post-body a:hover:after, a:visited:hover:after {
      width: 100%;
    }
    .post-body a.block, a:visited.block {
      display: block;
      padding: 0.5em;
    }
    .post-body a.block:hover, a:visited.block:hover {
      background: #fff;
    }/*crawlist.net CSS ends*/
    </style>


    How to add:
    • Login to Blogger, select your blog,
    • Go to ‘Layout’ tab, select ‘add a gadget’
    • Select ‘HTML/JavaScript’ from pop up page
    • Copy and paste all given codes in there,
    • And save the gadget, later template
    Now check your blog out for new link outlook.

    FAQ and Caution:
    • This code won’t work if your template has a different name for Post body class, so if this code fails then search within your template for the class name of the post area, and replace them with my given default codes classes.
    • You can change the links and underlines color, together or separately; just find and replace the color code with your demand.
    • This code chunk made with CSS and CSS3 should work nicely on any latest web browsers.
    So what your opinion about this tutorial don’t forget to mention :) Goodluck,,,

    10:13 AM | Labels: , | 0 Comments  

    How to Auto tweet and Auto post to Facebook your Blogger blog’s post

    How to Auto tweet and Auto post to Facebook your Blogger blog’s post
    Letting your social networking fan know about your new published post instantly ‘Auto tweet and auto post to Facebook’ your post is very effective and time saving. For Wordpress - using plugin can solve this auto tweet and auto post job but Blogger doesn’t have option like this. But there is also solution exists. Let’s see what I’m talking about Auto tweet and Auto post to Facebook your blogger blog’s post.


    How to Auto tweet and Auto post to Facebook your Blogger’s post


    Auto tweet and auto post to Facebook

    Twitter Feed, does the job easily. All you need to do is set up your blog URL at their service. Here is a quick overview: How to submit you blog at Twitter Feed for Auto tweeting and Auto posting to Facebook your Blog post.

    Below walk through steps are written; just read on:-
    • Open an account at Twitter Feed, confirm your email, and visit dashboard.
    • Click on ‘Create new feed’, you will direct to setup page
    • In setup page ‘Name your feed’ and ‘add your source URL’ you’ll be fill up with your site’s feed. Every site has feed. Your Blogger site too, default source URL looks like-

    http://www.crawlist.net/feeds/posts/default

    So place at ‘add your source URL’ input area you’ll be placing your site’s default feed

    http://your blogger site.blogspot.com/feeds/posts/default

    Alternatively you can use Feedburner URL too

    http://feeds.feedburner.com/your site feed id

    • Click to toggle ‘Advanced Settings’
    Set up ‘Update Frequency’ (30 minute to – 24 hours)
    Set up ‘And post up to new update’ (1-5) at a time.
    Set up ‘How link will be shown’, Just Title, Just description or both.
    Set up ‘Shorten link through’ service
    • Available Services is ‘Twitter’, ‘Facebook’, ‘LinkedIn’, ‘LinkedIn Company Page’, ‘App.Net’. Authenticate those services with your following profiles.
    • Job is done, check your status at dashboard anytime.
    Hope you successfully made this job done. Any question or feedback don’t forget to mention by comment. Chill....

    10:02 AM | Labels: , | 0 Comments  

    Add 6 stylish list/bullet to Blogger posts

    Add 6 stylish list/bullet to Blogger posts
    Blogger’s default list/bulleting system is using dots, dotting style is cool but not that much cool if you are little bit of stylish and want to stay trendy and also want to represent your lists with high-end taste. That’s reason here I am publishing 6 different style of bullet system calls Arrow, Minus, Check, Plus, Carrow and Star. Made with CSS, Google font, Sprite images and they are super easy to add; designed that way. Let’s see how they look like and how to add them to your Blogger blog.

    Arrow style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-303px -322px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    Minus style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-101px -520px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    Check style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-461px -163px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    Plus style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-141px -480px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    Carrow style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-619px -3px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    Star style

    change bullet style of blogger

    .post-body ul {margin:0; padding:6px 0; list-style:none;}
    .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-580px -44px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
    @import url(https://fonts.googleapis.com/css?family=Droid+Serif);


    How to add:
    • Log in to your Blogger, select your blog
    • Go to ‘Template’ tab, select ‘Edit HTML’
    • Search for ]]>< into code snippet (using Ctrl+F or Cmd+F)
    • Before ]]>< copy paste any of style you want to use
    • Save template, and see the changes by visiting blog or new post editing

    Caution and FAQ:
    • Most of Template have default list/bullet style designed into template codes; and those code stays in

    .post-body ul {} and .post-body ul li {}

    So you your template already have these lines; mark them and delete them. And set my given codes.
    • You can’t use two or more style. But if you know little bit of coding then change the CSS class,

    .post-body ul {} and .post-body ul li {}
    to
    .1 ul {} and .1 ul li {}

    And in post editor switch to HTML, after listing being done; and add CSS class to following ul (like: <ul class="1">)

    So what you opinion, feedback about this tutorial don’t forget mention. Goodluck.....

    9:39 AM | Labels: , | 0 Comments  

    7 best CMS/script for building Social networking website

    7 best CMS/script for building Social networking website
    The demands of social networking and community sites are increasing rapidly. For building a community/networking site you need to code it from scratch. But if you are not a pro coder or you don’t have a nerd team, building a social networking website is completely impossible. So as non coder to build Social networking website you can use CMS (content management system - readymade platform what helps you to build site) also known as platform software or script. With social networking CMS you will be able to-
    • Build a Social networking website in a short time
    • It can be use for personal or commercial purpose
    • Customizable, so you can modify any part of site as you want
    • Some of these CMS are open source (completely free and you can modify/upgrade the source code) and some of paid.
    Let’s see what content management systems I talking about for building Social networking website.

    7 best CMS/script for building Social networking website

    Dolphin is the world's most advanced community CMS. It is Open source, independent, downloadable, scalable, customizable, full-featured, free software for building social networks, dating sites and web-communities. Loaded with video chat, recorder, video player, forums, groups, events, video messenger, mailbox, desktop app, video sharing, photo sharing, iPhone app and much more. Premium upgrade available.

    Jcow is flexible Social Networking software written in PHP. It can help you to: Build a social network for your interests and passions, Build a member community for your existing website, Build a social networking site like Facebook, Twitter. Paid version got more customizable option.

    Buddypress is a Wordpress CMS's plugin. After installing Wordpress you will be able to install this plugin and start a minimal social networking site on your Wordpress. Build a social network for your company, school, sports team, or niche community. BuddyPress lets users sign-up and start creating profiles, posting messages, making connections, creating and interacting in groups, and much more. BuddyPress boasts an ever growing array of new features developed by an awesome plugin development community. There are more than 330 BuddyPress plugins available, and the list is growing every day, multi language supports, updates regularly.

    Oxwall is unbelievably flexible and easy to use PHP/MySQL, Community CMS/platform. Oxwall is used for a wide range of projects starting from family sites and custom social networks to collaboration tools and enterprise community solutions.

    Beatz is an online social networking community script that allows you to start your own favorite artist band website. Beatz is an online community script for sharing, discussing and learning about new artists and your favorites.

    Elgg empowers individuals, groups and institutions to create their own fully-featured social environment. Elgg is an open source social engine which powers all kinds of social environments - from education and business to martial arts and rugby. If you are looking for a professional social intranet or want to run a site for your organization.

    Etano can be used to start up a dating site, a social networking site, a classifieds site or any other type of site involving groups of people, companies and products.

    CMS are the great choice to make a site specially social networking sites, what got more sensitive functions. So choose what CMS you want to use, go to their site download the script, upload and install that, configure and start your social networking site without tension. Don’t forget to mention what you’ll be use.

    10:53 PM | Labels: , | 0 Comments  

    Professional Mailchimp Sign-up/Opt-in Form for Wordpress/Blogger

    Professional Mailchimp Sign-up/Opt-in Form for Wordpress/Blogger
    Email marketing is an important option for both entrepreneur Blogger and Internet marketers. For email marketing's essential tools is email sending services. Awber, Mailchimp, Madmimi, Get response are very popular. In these email sending services Mailchimp is very good choice for no matter you are beginner or pro and of course it's free and have ability to send beautiful customized newsletters. For sending newsletter you will need to have a list what can be done by sign up form. Problem is there Mailchimp Optin/email subscription/newsletter sign up forms are very simple and looks a bit of awkward with our themes/templates, Right?
    So reveling you from these boring-ness with sign up form here I publishing a homemade professional looking mailchimp sign up/subscription form. It's easy to configure and flat designed and it will easily match with any blogsites/websites. Let's see how it looks like and how to add it to your Blogger blog and wordpress sites and how to configure.

    Professional Mailchimp Sign-up/Opt-in Form for Wordpress/Blogger 

     

    Live Preview-(Click Here)

    Codes-

    <!-- Begin MailChimp Signup Form -->
    <!-- crawlist.net form starts -->
    <div id="optin">
    <h4>Subscribe for Newsletter</h4>
    <p>Join our mailing list, recieve new post update, learn pro tricks weekly</p>
        <form action="http://blogspot.us3.list-manage.com/subscribe/post?u=0b55fc18f7e81c4baff2c9e57&amp;id=857e43dd4c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
           <input type="text" size="30" value="Enter your name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
            <input type="email" size="30" value="Enter your email" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
                         <div id="mce-responses" class="clear">
                <div class="response" id="mce-error-response" style="display:none"></div>
                <div class="response" id="mce-success-response" style="display:none"></div>
            </div>
            <div class="clear">
                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
            </div>
        </form>
         <h5><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWfYVatzsUnjHJB-0HFguORePV-3lVS4zyRoxjOkcvuCSEEKzkas0ENbjY5t3S4BJPfgkIUKfgHwGmP7YwwJYOvz2VDg24C7hIE3FxeQd137O5ep1IcVbQmslXfGYgBlNr3pp6IqgM_A/s1600/lock.png' alt='privacy' width="9" height="12"/>  We'll never spam or sell your email, 100% privacy gurrenty</h5>
        </div>
    <!-- crawlist.net form ends -->
    <!--End mc_embed_signup-->
    <style>
    #optin {
        background: #f5f5f5;
        border: 3px solid #ccc;
        height:300px;
        width:280px;
        text-align: center;
        padding:8px 8px;
    }
    #optin h4 {
        font-family:"Segoe UI"; font-size:18px; font-weight:bold; margin-top:10px;}
    #optin p {font-family:Georgia, "Times New Roman", Times, serif; }

    #optin h5 {font-family:Georgia, "Times New Roman", Times, serif; font-size:10px; margin-top:7px; padding-left:42px; padding-right:42px;}
       
        #optin input {
            background: #fff;
            border: 1px solid #ccc;
            font-size: 15px;
            margin-bottom: 10px;
            height:34px;
            width:220px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            box-shadow: 0 2px 2px #ddd;
            -moz-box-shadow: 0 2px 2px #ddd;
            -webkit-box-shadow: 0 2px 2px #ddd;
        }
            #optin input.name { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJuzW5TNG0IZtAb9gJO25jbT34wLEUE3KagAyzZtgWiGwGCa60LxH2NTVMI5n4yfTj4G_SRGRqbC__AudGLiGxKpOJnBhqoCelgRZWZ95hhjOLo2WCgDmpC8GGgn-ZJ5iUinXIr4bfX1I/s1600/name.png) no-repeat 10px center; padding-left: 35px }
            #optin input.email { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCEinBtcs5e_OHXzI4MWiKsWaI35dEl3pvzrbI7bRAvPrT1VHzsmHTpELlEg5GqBE27IBPo3SbfDiu8DIY0s0EfUFBzAjsSd5ylT80Y5habNSd7MLHpLBrhbrlap6FqzAQgYNzFZSosY/s1600/email.png) no-repeat 10px center; padding-left: 35px }
            #optin input[type="submit"] {
                position: relative;
      vertical-align: top;
      width:180px;
      height: 50px;
      padding: 0;
      font-size: 22px;
      color: white;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
      background: #f1c40f;
      border: 0;
      border-bottom: 2px solid #e2b607;
      cursor: pointer;
      -webkit-box-shadow: inset 0 -2px #e2b607;
      box-shadow: inset 0 -2px #e2b607;
            }
           
            #optin input[type="submit"]:hover{opacity:.7;}
           
                #optin input[type="submit"]:active {   top: 1px;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none; }
    </style>


    How to add this widget in Blogger
    • First log in to your Blogger, select your Blog, 
    • Go to 'Layout' tab then click 'add a gadget'  
    • Select 'html/javascript' from pop up menu. 
    • Copy following codes and configure

    How to add this widget in Wordpress
    • From dashboard hover mouse on 'Appearance tab', 
    • Then from 'appearance' menu select 'widgets', 
    • Then drag and drop 'Text' content box in widget area, 
    • Copy following codes and paste into 'text' box, 
    • For new dashboard click on 'Text' add it to sidebar 
    • And paste following codes and configure

    How to configure
    Configuring this form won't take a while, read on-
    • First log in to your mailchimp account, 
    • Select 'List' from side menu, 
    • Inside 'List' on your email subscriber list's very right part after 'stats' 
    • Click on dropdown menu, select, 'Sign up forms' from there.
    Professional mailchimp Sign up form

    • Then Select 'Embedded forms'. 
    • When you are  into 'Embedded forms' 
    • From Classic sign up forms page's botton contains sign up forms HTMLcode, 
    • Copy all code and paste them on any txt file/word file (notepad)
    Professional mailchimp Sign up form

    • And select the following link what shown as image and replace the link with my default link (pink colored).
    Save your widget/gadget and take a look at your site, How it looking on your site, how it working or any trouble please leave with comment. More cool Mailchimp subscription form will release soon stay subscribed, Happy Email marketing :)

    10:43 PM | Labels: , , | 0 Comments  

    60 best Free Web Directory for Building Backlinks

    60 best Free Web Directory for Building Backlinks
    Without backlink running a website is worthless and pointless. Building backlink/link building for your website/blogsite there are a lot of source you can use. Submit your website link to several web directories is also a good source for getting good and strong backlinks.
    There are a lot of web directory I have found around the web, they offer's free and paid web directory service. Going through most of them here I sharing 60 best free web directory for building backlinks. Here some directories works instantly without any condition, some of 'em requires link exchange and some will review your site first (they will track your site's popularity and content quality, than will add you site to their directory). Read on the -

    60 best Free Web Directory for Building Backlinks


    1. Dmoz


    2. So Much


    3. Jayde


    4. Scrub The Web


    5. Yahoo directory


    6. 1 Abc


    7. Little directory


    8. 1 Webs Directory


    9. Amray


    10. Directory Fire


    11. Directory World


    12. T Section


    13. Direct My Link


    14. Cipinet


    15. 9 Sites


    16. Gain Web


    17. My Directory Live


    18. Free Website Directory


    19. Elite Sites Directory


    20. Pro Link Directory


    21. Nexus Directory


    22. Business Seek


    23. PIseries


    24. Directory Volt


    25. R Directory


    26. Suggest Url


    27. Search Sight


    28. Synergy Directory


    29. Wwwi


    30. Directory bin


    31. A list directory


    32. Link nom


    33. 10 Directory


    34. Best Free Websites


    35. Suggest Site


    36. Link Pedia


    37. Pedsters Planet


    38. Inteligent D


    39. Link Dir


    40. Submission4u


    41. Leading Link Directory


    42. The Net Directory


    43. Nipao


    44. The Web Directory


    45. Url Moz


    46. Wikidweb


    47. XY Link Directory


    48. Answer Spots


    49. SEO Free Links


    50. Dmoz in


    51. Sighber Cafe


    52. Tech4on


    53. A Million Sites


    54. Digg Directory


    55. Royal Link Up


    56. Best million links


    57. Vie Search


    58. Dir4UK


    59. PRweblink


    60. PR3 Plus


    Hoping this list will help you a lot. And if it does don't forget to mention. Happy link building!

    11:02 AM | Labels: , | 0 Comments  

    Add Shareaholic Share button & bar to Blogger/below posts

    Add Shareaholic Share button & bar to Blogger/below posts
    Shareaholic is one of the most used all in one content sharing platform (like Addthis, Sharethis). The difference with other sharing platform of Shareaholic is;
    • Shareaholic has much cooler icons (Eye catchy, trendy and stylish)
    • Got all the basic sharing services
    • Shows share counts
    • Very customizable (Position, Icon size, Layout, Align, Headline)
    • Analytic, Fast loading, Responsive, and optional monetization option

    Adding Shareaholic Sharing widgets in Blogger blog is easy, for your consideration setup process of adding
    Shareaholic widgets into Blogger blogs written below, read on-

    Add Shareaholic Share button & bar to Blogger blog/below posts

     

    • Verify and login to your account
    • Hit (Add Website) from Website Tools Dashboard page
    • Insert your BlogSpot Domain name and site name
    • Select platform ‘Blogger’, Content category, site Language, Hit continue
    • Next page you’ll see ‘Apps’ option, Turn on ‘Floating Share Buttons’, Click on ‘Setting’ icon
    • Now in ‘Layout’ fix Size, Counter, Align, Vertical offset, and services,
    • Additionally click on ‘Display rules’, Hit Save Settings
    • Now you’ll return to the Dashboard page, Get your mouse over ‘Location’ option
    • Select ‘Share Buttons’, In share button page, in Location input type ‘Below post’
    • Select your Theme, Headline, Position, Layout, Counter, Align and services
    • After all configurations complete, select ‘Save settings’,
    • You’ll redirect to Dashboard page, now click on ‘Get setup code’ and
    • Log into your Blogger blog on the other tab, select your blog
    • Go to ‘Template’ tab, and select ‘Edit HTML’
    • Search for </head> (using CTRL+F or CMD+F) into code snippet
    • Before </head> tag, paste ‘Get setup code’s codes
    • Again, Get back to Shareaholic tab, from location configuration, click on ‘</> icon’
    • And copy all codes from pop-up page
    • And from Blogger’s tab (into code snippet) search for,

    <div class='post-footer-line post-footer-line-1'>
    • You may find this code phrase twice, ignore first phrase, after second phrase paste those codes,
    • You may add these codes too, with default codes cause default codes widget will appear on homepage too, re-edit the default code with this codes, like this-

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='shareaholic-canvas' data-app='share_buttons' data-app-id='your id'></div>
      </b:if>
      • If you can’t find <div class='post-footer-line post-footer-line-1'> than search for </article>, and paste codes below </article>
      Save Template finally, And check your blog out for live preview

      Content sharing widgets are very necessary tool for a blogsite, so share your content with style with Shareaholic sharing efforts make your Blogger blog little bit stylish and trendy. Any problem facing with tutorial leave with comments, new tutorial will release soon stay subscribed. Chill…..

      4:53 AM | Labels: , , | 0 Comments  

      Subscribe to: Posts (Atom)