HOW TO EMBED/ADD/LINK/SHOW PDF, DOC, XLS,PPT,RTF,ODF FILES IN BLOGGER POST

Most of bloggers using Google's free blogger platform. Even though it has more features but you cannot upload pdf, doc, xls, ppt, odf, rdf files directly on blogger. But now you can embed documents, spreadsheets, PDF files using Google Drive. Google Drive is a Google's recent released cloud storage service it has more useful features. Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. If the file is not uploaded to Google Docs, but it is to be available online.

HOW TO EMBED PDF/DOC FILES IN BLOGGER

METHOD 1

If the file is available online and you want to embed that file in a post.  Then click on Edit HTML Tab when you are writing a post and paste the code shown below where you want to embed that file.

<iframe src="http://docs.google.com/gview?url=http://ilpubs.stanford.edu:8090/361/1/1998-8.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

• Replace http://ilpubs.stanford.edu:8090/361/1/1998-8.pdf with the url where your pdf/doc files are present
• Change width:600px; height:500px according to your template

METHOD 2

If you want to save the file in google drive then open drive.google.com and login to your account then click on the upload button and choose your files need to embed. After upload completed click on the uploaded file link See the screenshot shown below

• Then go to File - Embed (this PDF file) in menu bar.

• After you hit the Embed option then a popup will shows just copy that code and paste it on Edit HTML mode in blogger post editor section.

Read more

COOL/AWESOME/BEAUTIFUL/STYLISH JQUERY POPUP FACEBOOK LIKE BOX WITH EMAIL SUBSCRIPTION BOX FOR BLOGGER

In this tutorial i have created a Cute jQuery Popup Facebook Like Box with email subscription box. As soon as new visitors arrive your blog the popup will be showed to your visitors which can help you to increase likes. Now i will show you How to Add Cute/Cool/Awesome jQuery Popup Facebook Like Box with email subscription box in blogger.

POP-UP FACEBOOK LIKE BOX DEMO

Live Demo

HOW TO ADD THIS IN BLOGGER

• First Find Your Facebook Fan Page ID From HERE
• Now Click on Widget Generator button shown below
• Customize the Settings as you need
• Then click on Customize button then finaly click on Add To Blogger button

Widget Generator

Read more

ADD ANOTHER DIFFERENT/MULTICOLORED POPULAR POST WIDGET V3 IN BLOGGER

This tutorial will show you How To Add Different/Multi Colored Popular Post Widget In blogger.This widget is same as the previous one multicolored widget but it look different.

MULTICOLORED POPULARPOST WIDGET PREVIEW

HOW TO ADD DIFFERENT/MULTI COLORED POPULAR POST WIDGET TO BLOGGER

• Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Press Ctrl + F and search the code shown below
• Now Find the code shown below using [ctrl+F]

]]></b:skin>

• Now Paste the Code Shown Below just above/before it

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

• Now save your template
•  Now Go to Blogger Dashboard --> Layout --> Add a Gadget --> Popular Posts
• Select "display up to 9 posts" and uncheck image thumbnail and snippet
• Now Save the widget

Read more

ADD FACEBOOK LIKE BOX BELOW EVERY POST IN BLOGGER

Facebook like box is a social plugin that allow page owner to get more like directly from their blog/site with a one click without leaving their site. These Facebook likes are representing the reputation and readership of each and every blog by showing the number of likes of that particular blog. So now we will be adding a like box below every post on blogger so that whenever a visitor views your post he will see that like box and will become your page fan.

HOW TO ADD FACEBOOK LIKE BOX TO BLOGGER POSTS

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Find the code shown below using [ctrl+F]

<data:post.body/>

• Now Paste the Code shown below just below it

<b:if cond='data:blog.pageType == &quot;item&quot;'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Flatesthacking&amp;width=580&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:580px; height:180px;" allowTransparency="true"></iframe></b:if>

• Now replace latesthacking with your facebook username and change width 580 and height 180 according to your template

FACEBOOK LIKE BOX DEMO

Read more

ADD FACEBOOK LIKE AND TWITTER FOLLOW BUTTON BELOW EVERY POST IN BLOGGER

This tutorial will show you How To Add Facebook Like and Twitter Follow Button Below Post In Blogger. This widget will help you in increasing your blog's facebook likes and twitter tweets and this is what your blog's need.

HOW TO ADD FACEBOOK LIKE AND TWITTER FOLLOW BUTTON TO BLOGGER

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Find the code shown below using [ctrl+F]

<data:post.body/>

OR

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

• Now Paste the Code shown below just before/above it

<div style="margin:5px 0px 10px 0px; padding:10px; width:590px;float:none; ">
<div style="float:left; width:272px; border-right:1px solid #ddd;">
<iframe allowtransparency="true" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Flatesthacking&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false&amp;height=62" style="border:none; overflow:hidden; width:292px; height:62px;" frameborder="0" scrolling="no"></iframe>
</div>
<div style="margin:15px 15px 0px 0px; padding:0px; float:right; width:260px;">
<iframe title="Twitter Follow Button" style="width: 266px; height: 32px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=latesthack&amp;show_count=true&amp;show_screen_name=true&amp;size=l" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
</div>

• Replace latesthacking with your facebook username and latesthack with your twitter username

FACEBOOK LIKE AND TWITTER FOLLOW BUTTON DEMO

Read more

ADD SOCIAL BOOKMARKING BUTTONS BESIDE ADSENSE AD UNIT IN BLOGGER

This tutorial will show you How To Add Social Bookmarking Buttons Beside Adsense Ad Unit To Blogger. The main advantages of using this widget is that you can increase your Adsense impressions along with CTR - and fill up the empty space besides Adsense units, making your blog look more beautiful and professional. The widget includes buttons for Google Plus, Del.icio.us, Twitter, Facebook, StumbleUpon and Digg.

HOW TO ADD SOCIAL BOOKMARKING BUTTONS BESIDE ADSENSE AD

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Find the code shown below using [ctrl+F]

]]></b:skin>

• Copy the CSS code from widget generator shown below and paste it above ]]></b:skin>

• Now again find the code shown below using [ctrl+F]

<data:post.body/>

• Copy the Html code from widget generator shown below and paste it above <data:post.body/>

Widget Generator

Read more

HOW TO CUSTOMIZE FEEDBURNER BUZZBOOST WIDGET

Feedburner buzzboost widget is used to display recent comments or recents posts of your blog. I have already shared How to add feedburner recent posts widget to blogger,which comes with a default bullet list, and this time i am sharing a simple CSS trick which you can use to decorate/customize your buzzboost widget.

HOW TO CUSTOMIZE FEEDBURNER BUZZBOOST WIDGET WITH CSS

• Go to Blogger Dashboard --> Layout
• Find your Buzzboost widget and add below piece of code just above of the code which is already present.

<style>
.feedburnerFeedBlock ul li {background: #e42b2b;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}
.feedburnerFeedBlock ul li:hover {
 -webkit-border-top-left-radius:27px;-webkit-border-bottom-right-radius:27px;-moz-border-radius-topleft:27px;-moz-border-radius-bottomright:27px;border-top-left-radius:27px;border-bottom-right-radius:27px;
}
.feedburnerFeedBlock ul li a{
color:#ffffff;
text-decoration:none;
}
#creditfooter{
display:none;
}
</style>

Read more