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

HOW TO MAKE EACH/ALL LINKS TO OPEN IN NEW TAB/WINDOW

This tutorial will show you How to make each/all links to open in new tab. The main benefit for this code is that By opening each link in new tab certainly increases the website retention time which fools the search engine and thinks website is good thats why people sticking to it for such a long time. It Will Automatically Set (target='_blank') To All Links In Your Blog/Site. This certainly increases the search engine ranking.

HOW TO MAKE ALL LINKS TO OPEN IN NEW TAB

• 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]

</head>

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

<base target='_blank' />

• Now save your template

Read more

ADD BEAUTIFUL/STYLISH/AWESOME BORDERS TO ALL IMAGES IN BLOGGER POSTS

Many bloggers asked me an easy way to add stylish border to all blogger post images, without editing a single post. So today I’ll teach you a very easy way to add border to your all your blog images at once and no need to edit every single image in your blog. This code will apply borders to all images present in blogger post

BORDERS TO THE IMAGES IN BLOGGER POSTS DEMO

HOW TO ADD BORDERS TO THE IMAGES IN BLOGGER POSTS

• 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

.post-body img{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2M2KcbZSFybodnvMj5IpxZK7KWMmFornYTbNzspdSjJJuXILLK0OVy0IgT2AARg_KnFaUyXHB-NH87RPcs_hcop4zi5EUS63jJ7D42dP7HWctK1QHXo5Py-tA4r3GHm3msCegfrD4Yo/s400/image-background.png) repeat scroll 0 0 transparent;
padding:7px;
border:1px solid #cecece;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
}

• Now save your template

Read more

ADD/INSTALL ADDTHIS WELCOME BAR TO BLOGGER BLOG

Add a welcome bar, at the top of your website or blog, not only attract visitors attention to the most important content on your site but also to increase conversions by inviting visitors to share, follow, or visit your pages. Most of you use Hello Bar, but Addthis bar is totally free but hello bar is giving a limit of clicks after limit reached we need to pay for per click but in addthis welcome bar we just need to paste simple code to our website or blog and it allow us infinite click and use of it.AddThis Bar works efficiently on all major browsers including Chrome, Firefox and IE 8 and above.

Here you will see that only 25 clicks are free for hello bar but after 25 click you need to upgrade it to pro and in pro account also you will get 100 clicks only.

HOW TO INSTALL ADD THIS WELCOME BAR TO BLOGGER

• Go To Addthis Welcome bar
• Sign Up or just login if you already have account on it
• Now you will see Widget Generator just tick on every option
• Now copy the entire code which will appear at bottom of page after you customized the welcome bar
• Now 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]

</body>

• Now paste the code you have copied just above it
• Now save your template

Read more

ADD STYLISH EMAIL/SOCIAL SUBSCRIPTION BOX V3 IN BLOGGER BLOG WITH HOVER EFFECT

Last time i have gave you email subscription box V1 and email subscription box V2. Now I come up with  Social Subscription Box V3. This widget contains links of Facebook Fan page, Google+  page and twitter follow button, RSS and an attractive subscription form that will increase the number of your Email subscribers. When reader's look a simple subscribe box, they will not subscribe. But this subscribe box has attractive and awesome look, so your blog reader's will subscribe, sure. You can add this subscribe box to blogger very easily and simple. Now i will show you how to Add Stylish Email/Social Subscription Box V3 in blogger blog with hover effect.

STYLISH EMAIL SUBSCRIPTION BOX DEMO

LIVE DEMO

HOW TO ADD STYLISH EMAIL SUBSCRIPTION BOX TO BLOGGER

• Click on widget Widget Generator button shown below
• Customize the Settings as you need
• Then click on Generate button then finaly click on Add To Blogger button

Widget Generator

Read more

Adding Yahoo Smiley on Blogger Threaded Comments

Adding Yahoo smiley is an old hack, but when we switch comment system to Blogger Threaded Comments (a new blogger comment system) the script doesn't work. One of Blogger from Indonesia, Kang Ismet has released a new script for Yahoo smileys on Blogger Threaded Comments.

 

To add yahoo smileys emoticon on your comment, just follow three simple steps
1. Adding CSS Code
2. Adding JavaScript code
3. Adding HTML code

Adding CSS Code

1. Go to Blogger Dashbord > Template > Edit HTML
2. Click on Expand Widgets tick box
3. Add bellow code just before ]]></b:skin>

<!-- Yahoo Smileys by BloggerHack.com Code Start-->
.bloggerhackysmile {
    background: none repeat scroll 0 0 #EFF5FB !important;
    font-size: medium !important;
    padding: 10px !important;
    text-align: left !important;
    font-weight:bold !important;
    font-size:11px !important;
}
img.bhacksmly {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}
<!-- Yahoo Smileys Code End-->

Adding JavaScript

1. Search for </body> tag
2. Addlbellow code before </body> and Save Template. 

<!-- Yahoo Smileys Script BloggerHack.com -->
<script src='http://bloggerhack.googlecode.com/files/ysmiley_fixed.js' type='text/javascript'/>

With two steps above, you have added Yahoo Smiley on your Blogger Comments. But smileys doesn't appear above your comment form. To show smileys and codes, follow the last instruction about Adding HTML code.

Adding HTML code

1 Search for bellow tag.

<div class='post-footer-line post-footer-line-3'>
code...
</div>
</b:includable>

2.Add below code between </div>and </b:includable>

<!-- Yahoo Smileys by BloggerHack.com Star-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='background-color:#FEF8EC; border:none; width:100%; padding:10px; height:100px; overflow:auto;'>
<div class='bloggerhackysmile'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> 
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
<img alt='' class='bhacksmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!
</div></div></b:if>
<!-- Yahoo Smileys by BloggerHack.com End-->

3. Save t he template, and you are done..

Read more

How To Enable Threaded Comments on Blogger / Blogspot

Blogger Threaded Comments. Finnaly Blogger has launched new threaded comments. Threaded commenting should make it easier for you to respond to individual comments. Blogger threaded comment system is only two levels deep, meaning you can only reply to original comments, and not to comment replies . But I guess it’s a good start. Let's wait for new update from Blogger.

How To Enable Threaded Comments on Blogger / Blogspot

As mentioned on Blogger buzz official site, you have to setup your blog. “Blog Feed” set to “Full”, and are using “Embedded” comments, then you’re ready to start a discussion with your readers.

Blogger New Interface

1. Go to Dashboard , select your blog.
2. Go to Settings > Posts and Comments
3. Comment Location option set to Embedded

4. Go to Settings > Other
5. Allow Blog Feed option set to Full

Blogger Old Interface

1. Go to Dashboard, select your blog.
2. Go to Settings > Comments
3. Comment Form Placement option set to Embedded below post

4. Go to Settings > Site Feed
5. Allow Blog Feed option set to Full

STILL NOT GETTING THREADED COMMENTS?

If sou still not getting threaded comments, let's two alternative method for Standard Templatesand Costumized Templates.

Standard Templates

1. Go to Design > Edit HTML
2. Click on Revert widget templates to default link

You can do this step for Costumized Templates, but this will Discard the all Changes Widget and revert to Default

Costumized Templates

1. Go to Template > Edit HTML
2. Click on Expand Widget Templates check box
3. Find the Following code

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>

4. You will get two results. Replace both code with following code

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

5. Save the Template!

Still getting problem? Share your comment here!

Read more

How To Find Facebook Profile/Page ID

When creating a Facebook account, the system automatically assigns the user an identification number, known as the Facebook ID. Facebook allows the user replace their ID with username. If you are using a custom username for your Facebook profile or page, then unique profile ID will not appear.

Many tutorials give you an instruction by clicking right mouse on image profile to find your unique ID. Now I will tell you even easier to find your Facebook profile ID.


How To Find Facebook Profile/Page ID?
Just type at your address bar: https://graph.facebook.com/YOUR USERNAME or PAGE

Or type your username below and hint Get Facebook ID

Read more