'All In One' Subscription box widget for Blogger
Preview- (here you go)
How to install-
This widget installation has three step, read on-
Step 1: Back up your template (Optional step)
- Log in to your blogger, select your blog,
- Select template option, click 'backup/restore' from upper right corner.
- Download full template and save it on Hard-drive
Step 2: Embedding CSS into template
- Go to 'Template' tab, form Template option select 'Edit HTML'
- Now find (using Ctrl+F or Cmd+F) ]]></b:skin>
- Now copy following codes and paste all above ]]></b:skin>
Codes for copy-
/*crawlist.net CSS starts*/.ks-box{
width:280px;
min-height:300px;
border:1px solid #ccc;
color: #000;
background-color:#fff;
-webkit-box-shadow: 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
-moz-box-shadow: 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
box-shadow: 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;}
.ks-fb { border: 1px solid#f5f5f5; height:60; width:277; -webkit-transition: all 0.5s
ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition:
all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.ks-fb:hover { -moz-box-shadow:1px 1px 10px 1px rgba(1, 1, 255, 1); -webkit-box-shadow:1px 1px 10px 1px rgba(1, 1, 255, 1); box-shadow:1px 1px 10px 1px rgba(1, 1, 255, 1);}
.ks-google { border: 1px solid#f5f5f5; height:65; width:277; -webkit-transition: all 0.5s
ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition:
all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.ks-google:hover { -moz-box-shadow:1px 1px 10px 1px rgba(255, 1,1,1); -webkit-box-shadow:1px 1px 10px 1px rgba(255, 1,1,1); box-shadow:1px 1px 10px 1px rgba(255, 1,1,1);}
.ks-subscribe { border: 1px solid#f5f5f5;min-height:110; width:277;padding-bottom:20; -webkit-transition: all 0.5s
ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition:
all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.ks-subscribe:hover { -moz-box-shadow:1px 1px 10px 1px rgba(255,136,1,1); -webkit-box-shadow:1px 1px 10px 1px rgba(255,136,1,1); box-shadow:1px 1px 10px 1px rgba(255,136,1,1);}
#ks-email-news-subscribe .ks-email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding:7px 10px 8px 10px;
margin-left:12px;
-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: Tahoma, Geneva, sans-serif;}
#ks-email-news-subscribe .ks-email-box input.subscribe{
background:-moz-linear-gradient(center top, #F93 0, #F63 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F93),color-stop(1, #F93));
font-family: "Segoe UI", Rockwell;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #F93;
color:white;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#ks-email-news-subscribe .ks-email-box input.subscribe:hover{
background-image:-moz-linear-gradient(top,#F63,#F93);
background-image:-webkit-gradient(linear,left top,left bottom,from(#F63),to(#F93));
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
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #F63;
color:#FFFFFF;}
.ks-other { border: 1px solid#f5f5f5; height:30; width:277; -webkit-transition: all 0.5s
ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition:
all 0.5s ease-in-out; transition: all 0.5s ease-in-out; margin-top:10px;}
.ks-other:hover { -moz-box-shadow:1px 1px 10px 1px rgba(155, 1, 255, 1); -webkit-box-shadow:1px 1px 10px 1px rgba(155, 1, 255, 1); box-shadow:1px 1px 10px 1px rgba(155,1,255, 1);}/*crawlist.net CSS ends*/
Step 3: Add the widget to Blog
- Now after embedding CSS is completed go to 'Layout' tab,
- Select 'add a gadget' from sidebar, select 'Html/javascript'
- Form pop-up, in 'Html/javascript' content box paste following codes.
Codes for copy-
<!-- crawlist.net widget starts -->
<div class="ks-box">
<div class="ks-google">
<!-- Place this tag where you want the widget to render. -->
<div class="g-person" data-width="277" data-href="//plus.google.com/u/0/112348536843820788771" data-theme="light" data-layout="landscape" data-rel="author"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="ks-fb">
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/your page" data-width="277" data-height="60" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
<div class='ks-subscribe'>
<div id="ks-email-news-subscribe">
<p align="center"><b><font size="4" color="#FF6633" face="Segoe UI, Rockwell">Subscribe us to get free update</font></b></p>
<div class="ks-email-box">
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri= crawlist', 'popupwindow', 'scrollbars=yes,width=500,height=500');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='email input' 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 alt='' class='subscribe' title='' type='submit' value='Submit'/></form>
</div> </div>
<div class="ks-other" align="center">
<a href='http://twitter.com/you' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg07Pu2SYppxbu2LJsCwYaJY52UrduTKcnpBaVdjIaZ8CRk21dMlfRQ1d5NmdM4VMecwBDZLLBZXH8J0N7nSNMY5OcAbLw6_xmCLhuEduU3kv6yWRI7AjxnatniVrN2828rBJ4K1ef9Yx-_/s1600/2twitter.png' title='Twitter'/></a>
<a href='http://linkedin.com/you' target='_blank'><img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy6bPyaMlMsdjpJQ6BgtrXKBUCLI8cGVlZ1NV2mY97-GtsG1miyZRJP12POZIFpS6I7n7NqsEj0wVf3d92SOkaOaZ3k45EcKWqZDzKebymJUp65XpCBigl8kEMwa2dhBb-hGBE9WsAtD2J/s1600/3linkedin.png' title='Linkedin'/></a>
<a href='http://pinterest.com/you' target='_blank'><img alt='pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ZxIwwPjU-ZyLhojh33KZb4j8a6chrXU1WB5CtO-njRgi8CWugfUEV9FvVi5wqWHSTXe1wBddusyNlGZlu5I7l5wX1ZVs4Py3ulNwYvcX8xpjkPPwKdUHSvs2dd9I17ng_NEiFVxrjp8U/s1600/4pinterest.png' title='pinterest'/></a>
<a href='http://instagram.com/you' target='_blank'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLFwaDY-AV9px8BragRRh4IT1_Eh6RuQk0yH2mFsxyaV8LpvNnGMy_JWrJzjPsCxC-cLbhnaH28PAAX-0AkZSERxIuyEbN_d5YU4AvKt0yfD2rP2M1pBz3Wkbv5-pCr62UwpEuxmRzUCR2/s1600/5instagram.png' title='instagram'/></a>
<a href='http://youtube.com/you' target='_blank'><img alt='youtube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq02ceEJNWfsg98tbNGpztAJyJ7iu4pVB0ou6onEGnPlq1rt2bMrXS2yFcTDUicT4icdDDk7C30xaX965pezyw84-y_dga0bXSLwbhhOQU-xpOOZ8vv-tucgbM4Rg2_CBjhFGPvkdD4Lct/s1600/8youtube.png' title='youtube'/></a>
<a href='mailto:you@mail.com' target='_blank'><img alt='Contact me' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf6cbV4wdZYnXB7cZwqrO7o64yMBZDDt9IR99YU1RpCUpIA8DPAvMQGY9emauyfbf5jX-IGPhk86AlMCFdJLNkewqK9p4feSEuCmnoXMFQ43jxGcrR-m9IaWEsuto77FbYeipyW-pDngGy/s1600/10email.png' title='Email me'/></a>
</div></div></div>
<!-- crawlist.net widget ends -->
How to configure-
- To configuring Google plus badge, change (plus.google.com/u/0/112348536843820788771) with your Google plus profile id (it Blue colored)
- To configuring Facebook fanpage option change (https://www.facebook.com/your page) with your profile/page full like (it Pink colored)
- To configuring Feedburner email subscription form change (Crawlist) with your Feed-burner profile Id (it green colored)
- To configuring Social media profiles First collect your following social media profiles direct link and replace with default link. Example (http://twitter.com/you) with your twitter profile rest links are same. Change (you@mail.com) with your contact email address.(all social media profiles are red colored)
- Tested with many template all results are fine.
- Old version Web browser is not compatible with this Widget (Transition effect will not work)
- Icons by Elegant themes,
