You would have seen many Email Subscription widgets with
some good designing and effects, So, I was just thought why not I create a new
style of Email Subscription widget. Last I was created this widget and now I am
providing my this beautiful work to you. This widget contains social media
icons, google plus badge, email subscription and a little watermark of my blog
just for promotion, hope you will understand that why I have added that
watermark. You can change the text above the Email box through CSS. This widget
is specially made for blogspot's sidebar with 300px width. This widget has no
extra effect that would be harmful for your blog loading speed. This widget has
been created for all our present and upcoming readers. Every one can use this
widget for their blog (Blogspot). I gave this widget a name Planner. I have
already created widgets for blogger like Static Notification bar, Author Bio
Box, Facebook Like box etc.
A Facebook Page or Profile
Twitter Account
Google Plus Profile or Page
FeedBurner Account
ADD EMAIL SUBSCRIPTION AND SOCIAL MEDIA WIDGET TO BLOGGER
ADD CSS CODES IN TEMPLATE
Goto Blogger.com and login
Select your blog and goto template section then click Edit
HTML
Now press ctrl+f and find ]]></b:skin>
Just above ]]></b:skin>
copy and paste the below code
.mtw-essmw {
width : 300px;
padding: 0px 0px;
background-color: #333333;
color: #ffffff;
text-transform: none;
font-size: 14px;
position: relative;
}
.mtw-essmw a:link,
.mtw-essmw a:hover, .mtw-essmw a:active, {
margin: 0px 0px;
text-transform: none;
text-decoration:
underline;
color: #fd4326;
font-size: 13px;
}
.mtw-essmw a img {
float:left;
width: 75px;
height: 75px;
margin: 0px 0px;
}
.mtw-essmw
.mtw-FollowByEmail .follow-by-email-inner {
position: relative;
background-color: #333333;
color: #ffffff;
margin-top: -5px;
height: 85px;
}
.mtw-essmw
.follow-by-email-inner:before {
content: "Want our daily Updates? Just enter your Email
below and hit Submit and connect with us Like others";
font-size: 11px;
}
.mtw-essmw
.mtw-FollowByEmail .follow-by-email-inner .follow-by-email-address {
border: 1px solid #ddd;
border-radius: 3px 3px 3px
3px;
font-size: 13px;
height: 28px;
padding-left: 2px;
width: 100%
}
.mtw-essmw
.mtw-FollowByEmail .follow-by-email-inner .follow-by-email-submit {
background: #fd4326;
border: 0 none;
border-radius: 2px 2px 2px
2px;
color: #FFF;
cursor: pointer;
font-size: 13px;
height: 29px;
margin: 0 3px;
width: 60px;
z-index: 0;
}
.mtw-essmw
.mtw-FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover {
background: #FF7800;}
#likebox-frame {
border: 2px solid #fff;
height: 200px;
left: -2px;
overflow: hidden;
position: relative;
top: -2px;
width: 285px;
z-index: 10;
}
Click on save Template and You're Done
NOTE : Change the White color Text with your own text which
you want to show above Email Box
ADD WIDGET
TO BLOGGER SIDEBAR
Goto Layout section of your blog
At sidebar section Click on add Gadget and select
HTML/Javascript
Then Copy and Paste the below code
<div
class="mtw-essmw">
<a href="http://www.facebook.com/mytechnoways"
target="_blank"><img title="Like Us"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY4Gy5ZIc2j-AdHV0rEi_MiJkO6LAMz9Hus8dAPmQIU1OVhwwrssWQQJm-NE_mawLnv_wTqR0NrLKvIstAA9SNc7I9M70DZfScWJkaUwwGmf6rNwEqAgsb53buDd1nDItB9_5jA0Y05Y0/s1600/fb-icon.png"
/></a>
<a href="http://www.twitter.com/mytechnoways"
target="_blank"><img title="Follow Us"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAxQfr-ukhzt97vXUPVoE37mgbpVMvpWfU0zTLJJNttpSgJAhg8riB-W59xxPuS56dNsXjzEg9_q70dzK4Jz1jIT8ftVSSgIp4cwp2X6phGwC1NACovK410iMU4CVBqdSvfUgcBZ7e2sA/s1600/tw-icon.png"
/></a>
<a href="https://plus.google.com/b/110649610830007788713"
target="_blank"
><img title="+1
Us"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ic6B4-z3wY586NPRzmiF5yCdp20ZoCnsRqZ7o0DhLweSlSC4jWyTJQjnxxgH9B-TmGKIq3KIn8Fb5W2zjAKqn8t5AhfNGUTbBpdku62hrds2hNkaNttpb1HJxwHezztYuJd56D_iHJE/s1600/gp-icon.png"
/></a>
<a href="http://feeds.feedburner.com/mytechnoways"
target="_blank"
><img
title="Subscribe Us"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-6idP-h_uPq_w6AVDPjc3gy7Nr-om1P806U6tVzqUXoYy5PLa2KKwMkXSgvftBlCd5rh5IAM3ROLEL-SFQQPPR5NDvsThTAW5cmG8joDlJnifNcUK2oyIokxpuFbop9gRD0gvHhMaWtY/s1600/rss-icon.png"
/></a>
<center>
<!-- Place this tag
where you want the widget to render. -->
<div border='0'
style="border: 0; margin: 0px;" class="g-person"
data-href="https://plus.google.com/112990314045859316823"
data-layout="landscape" data-rel="author"
data-theme="dark">
</div>
<div
class='mtw-FollowByEmail'>
<div
class='follow-by-email-inner'>
<form
style="border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:3px
0 3px 0;" action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mytechnoways',
'popupwindow', 'scrollbars=yes,width=550,height=520');return
true"><input type="hidden" value="MyTechnoWays"
name="uri"/><input type="hidden" name="loc"
value="en_US"/>
<table width='100%'>
<tr>
<td>
<input
class='follow-by-email-address' type="text" name="email"
placeholder='Email address...' />
</td>
<td width='64px'>
<input
class='follow-by-email-submit' type="submit"
value="Submit"/>
</td>
</tr>
</table>
<input expr:value='data:feedPath'
name='uri' type='hidden'/>
<input name='loc' type='hidden'
value='en_US'/>
</form>
</div></div><br />
<script language='Javascript'>
<!--
document.write(unescape('%3C%61%20%73%74%79%6C%65%3D%22%74%65%78%74%2D%61%6C%69%67%6E%3A%20%72%69%67%68%74%3B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%20%6E%6F%6E%65%3B%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%6D%79%74%65%63%68%6E%6F%77%61%79%73%2E%63%6F%6D%22%3E%4D%54%57%3C%2F%61%3E'));
//-->
</script>
</center>
</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>
Customizations:
Change the 1st Color Text with your
facebook URL
Change the 2nd Color Text with
your Twitter URL
Change the 3rd Color Text with your
Google Plus Page URL
Change the 4th Color Text with your
RSS Feed URL
Change the 5th Color Text with your Google Plus Profile URL
Change the both 6th Color Texts with your FeedBurner Username (2nd text will show in Popup)
MASSAGE : Hey buddies, I hope you all will like this widget
and you will use this widget in your blog with my water mark. This blog is new
and is not getting Enough traffic, So, the basic target of adding the water
mark is to get the traffic from different sources with the help of you all.
This is the first version of widget and when I will get good traffic then I
will create 2nd version of this widget with no Water Mark. If you will face any
problem then let me know through comments. Thanks
0 comments:
Post a Comment