Today I will show you how to add a facebook
like box along with beautiful social sharing subscription box at the bottom of
every post. This will help you to increase your facebook fan
page likes tremendously
and add more subscribes to your posts. Readers get more attracted to it because
of its awesome look.
Just follow the simple steps below and add it
to your blog/website.
How to add Facebook Like Box with Social Subscription
Widget to Blogger?
STEP #1: Log on to Blogger
STEP #2: Go to Dashboard>Template
STEP #3: Click on Edit HTML>Proceed
STEP #4: Tick on Expand Widget
Template checkbox
STEP #5: Find (Ctrl
+ f) below code
<div class='post-footer-line
post-footer-line-1'/>
STEP #6: Now copy
and paste below Code just
above it.
<b:if
cond='data:blog.pageType == "item"'><table border='0'
cellpadding='0' cellspacing='0' width='100%'><tr><td
width='50%'> <div id="mdpostfblikebox"><iframe
src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWIKITECHNOL&width=300&height=255&colorscheme=light&show_faces=true&border_color=%23e1e1e1&stream=false&header=false&appId=328967870473940"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:300; height:255px;"
allowTransparency="true"></iframe></div></td><td
width='50%'><div id="mdpost-likebox"><h2>Do you Like
this Article?</h2><div class="row"><div
class="fb-like" data-href="https://www.facebook.com/WIKITECHNOL"
data-send="true" data-width="450" data-show-faces="false"></div></div><div
class="row"> <a href='http://feeds.feedburner.com/WIKITECHNOL'
target='_blank' title='Suscribe to RSS feed'><img
class="middle"
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWWeVBFYqdh6haz56ATwGmQd4YE6fn6zu5wWKRsW-hhI7aTSZBNUmABjaxjXj1YvRRT39uH35AcU1-_Zwq72kCpJYzP3PwPz_aib51ivzxf-s_dElWMG5RHK2uVglJnoQMsxkXUr1mSAkZ/s1600/mdRSS.png'
alt="rss"/></a> <a href='http://twitter.com/WIKITECHNOL' target='_blank'
title='Follow me on Twitter'><img class="middle"
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3fv_uNI_NBBjih1IMLwvOxwvL_3eNMV1dbemoJFixJciGCveCbGdmwaC8fOIMi7jD15yMYJ_193Y_p4SIu-Pm7jWgrX32KrhhMUjLgQWvi_V5i9fhPF4-cr6gVrePJ5qTW7p1hBXr1ZW/s1600/mdTwitter.png'
alt="twitter"/></a> <a href='http://www.facebook.com/WIKITECHNOL' target='_blank'
title='Became Fan on Facebook'><img class="middle"
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvjXEiFLxXF7I1BQGhl3d6a-jCbyrwIhKdVAji6Dr4r1Aptpl0LMh_dtpqQUNER717E1lvUBGahsFvIdKJOd0neIsNFHaAwBOBkb6Qib0lupXvZ04F-hiQxnpkOBKLjyivW5EMhY2wUHJZ/s1600/mdFaceBook.png'
alt="facebook"/></a></div><div class="row"><h6>Get
Subscribe to Free Email Updates!!</h6></div><div
class="row"><div class="email"><form
action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WIKITECHNOL', 'popupwindow',
'scrollbars=yes,width=550,height=520');return true"
class="emailform"> <input type="hidden" value="WIKITECHNOL"
name="uri" /> <input type="hidden"
name="loc" value="en_US" /> <input
type="text" onblur="if (this.value == "")
{this.value = "Enter your email...";}" onfocus="if
(this.value == "Enter your email...") {this.value =
""}" value="Enter your email..."
name="email" class="emailinput" /> <input
type="submit" class="emailbutton" value="SignUp"
title=''/></form></div></div><div
class="row"> <small>*Your email address will not be shared
with
anyone.</small></div></div></td></tr></table></b:if>
Customization:
- Replace WIKITECHNOL with your facebook fan page user id.
- Replace WIKITECHNOL with your twitter fan page user id.
- Replace WIKITECHNOL with your RSS feedburner user id.
STEP #7: Next
search for]]></b:skin> in your blogs template.
STEP #8: Copy and Paste code just above it.
#mdpost-likebox
{
display:block;
min-height:250px
}
#post-likebox
h2
{
font-size:30px;
font-style:italic;
font-variant:small-caps
}
#mdpost-likebox
div.row
{
text-align:center;
margin-bottom:10px
}
#mdpost-likebox
img
{
display:inline-block
}
#mdpost-likebox
.email
{
clear:none
}
#mdpostfblikebox
{
margin:10px
10px 0 0;
text-align:left;
float:left;overflow:hidden
}
.button,.emailbutton
{
background:#f7f8f9;
background:-webkit-linear-gradient(top,
#f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top,
#f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top,
#f7f8f9 0%, #e9e9e9 100%);
background:-ms-linear-gradient(top,
#f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top,
#f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px
solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px
12px;
margin:0;
-webkit-box-shadow:0
1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0
1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0
1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888
!important;text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
font-weight:bold;
text-decoration:none
!important
}
.button:hover,.emailbutton:hover
{
background:#f1f1f1;
background:-webkit-linear-gradient(top,
#f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top,
#f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top,
#f1f1f1 0%, #e0e0e0 100%);
background:-ms-linear-gradient(top,
#f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top,
#f1f1f1 0%, #e0e0e0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
text-decoration:none
!important
}
.widget-button
{
color:#AAA
!important;
display:block;
font-size:18px;
margin:30px
auto;
padding:8px
30px;
text-align:center;
text-shadow:1px
1px 0 #FFF;
text-transform:uppercase;
width:30%;
font-weight:bold
}
.email
{
clear:none
}
.email
{
clear:both;
width:100%;
margin:10px
0
}
.emailform
{
position:relative;
width:250px;
background:#fff;
margin:0
auto;
-webkit-box-shadow:1px
1px 2px #dfdfdf;
-moz-box-shadow:1px
1px 2px #dfdfdf;
box-shadow:1px
1px 2px #dfdfdf;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
border:1px
solid #ddd
}
.searchinput,.emailinput
{
width:200px;
height:18px;
margin:0
auto;
padding:8px
40px 8px 10px;
border:none;
background:none;
font-family:georgia
font-style:italic;
font-size:14px;
color:#666
}
.emailbutton
{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:-1px;
bottom:-1px;
display:block;
line-height:16px
}
.emailbutton
{
padding:8px
!important
}
.emailinput
{
padding-right:70px
!important;
width:170px
!important
}
.emailform,
.emailinput
{
width: 98%
!important;
-webkit-box-sizing:
border-box;
-moz-box-sizing:
border-box;
box-sizing:
border-box;
height:auto;
}
STEP #9: Now save your template and you have done!!
So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.
So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.
{ 0 comments... read them below or add one }
Post a Comment