Get Print Buttons and Download as PDF in blog/website

Hi, Here I found a very useful/clean way of getting the Print Button in your website/Blog/WordPress which will give you options
1. Print the page cleanily (without Advertisment, side bars, and other unrequired stuffs)
2. Give you option to download the content of webpage as PDF with what you want to select and delete before downloading.
3. Change the formating of the text to be downloaded/Printed as PDF or in paper.

So, here I am using the APIs from "Print Friendly" which works on concept of saving environment and your pocket :)

For Websites

Paste the below given code to the place where you want to see your Print PDF button in website, like you see down this page.

<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-both.gif" alt="Print Friendly and PDF"/></a>





For Blogger/Blogspot

Step.1) Open your Page Template in Edit HTML mode
Step.2) Click on option "Expand Widget Templates."
Step.3)Paste the code below into Template, after the 
<div class='post-footer'>

 tag
Save Template.

<!--- http://usefultechtalk.blogspot.com Print Friendly Starts-->
<b:if cond='data:blog.pageType == "index"'><a expr:href='data:post.url + "?pfstyle=wp"' style="margin-right:1em; color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a><b:else/><b:if cond='data:blog.pageType == "archive"'><a expr:href='data:post.url + "?pfstyle=wp"' style=" margin-right:1em; color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a></b:if></b:if>

<!--http://usefultechtalk.blogspot.com Print Friendly Ends-->

[Please like/share/comment if you find it useful !]

Get Floating Sidebar for facebook, googleplus and other social media buttons

Hi,
I am writing precise and easiest way to understand Social media button on the sidebar, like you can see in the Right of you. As it has to appear in every page/post. So, you need to include the code in layout of your blogspot or css of your website. I am writing for blogspot now.
Step.1) Open your blog in design mode and go to Layout.
Step.2) Add a Gadget. as shown in pic below

Step.3.) copy the code below to the 

<!--SideBar Floating Share Buttons Code Start by http://usefultechtalk.blogspot.in/2012/09/get-floating-sidebar-for-facebook.html-->
<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;
-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;
-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;
-webkit-border-radius:3px;font-size:8px;}
</style>

<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button"
data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js'
  type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://usefultechtalk.blogspot.in/2012/09/get-floating-sidebar-for-facebook.html" target="blank"><font color="red">[Get this for your Blog/Site]<font></font></font></a></div></div>
<!--SideBar Floating Share Buttons Code End by http://usefultechtalk.blogspot.com-->

Step.4.) Change the paramters highligted in Green to chagne alignment of plugin. Save the Code in the Add Gadget. and change URL in yellow to your blog/website. Otherwise everytime someone will like or share in your website. My URL get liked or shared :P.
Step.5.) That's it Done !!



{I have 2 suggestions for you: First, Drag the Gadget to the bottom, otherwise you will unnecessarily see a blank gadget in your top of page. Second, Preferably keep the alignment to left  because if you will keep it right, while someone will like/share/+1 to your post the popup will hide to further right that is outside monitor and somehow fit in pageview. that's look ugly.}

[Please like/share/comment if you find it useful !]

How to write code in box for blog and websites

Already in earlier post I described ways for "How to write/display HTML/XML or any other markup language code" as it is in your website. That's very easy. Once done with that. What if you want to display the code in box with some light colour in background ??
It's also easy.
You need to include a small internal CSS (styling) that's it.
Step.1) Include in your html code this simple style(preferably inside Head tag.)

<style type="css/text">
.mybox
       {
  border: 2px solid green ;
  background-color: #AAAAAA;
       }
</style>


Step.2) Now whatever code you want to keep inside the box. Change it to HTML entities format by processing from www.simplebits.com.
Once processed. Paste the processed code inside

tag as shown:

<div class="mybox">
Your Processed Code HTML entities format
</div>

Step.3) That's it !! [Please like/share/comment if you find it useful !]

All about styling XML with internal and external CSS

           Embedding the CSS in XML for styling 

                      During one of my assignment I came across the requirement of styling XML with CSS, as styling was specific to the file only so, I found internal/embedded CSS better. During this development process, I documented the progress here about all possiblities, tricks and example.

We know that we can use CSS in HTML in 3 ways.
        1.) Internal CSS:

<head>
<style type="text/css">
hr {color:blue;}
p {margin-left:15px;}
body {background-image:url("_images/back_ground.jpg");}
</style>
</head>

---

    2.) External CSS:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

---

    3.) Inline CSS:

 <p style="color:blue;margin-left:15px">This is a paragraph.</p>

---

I tried to emulate internal/embedded styling in XML as like 2nd or 3rd point above.
First Point can be very easily done with xml-stylesheet tag in XML
For example:
We can have a xml like this , a CSS like this and include the CSS definition in XML in this way:

---

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
.
.
</CATALOG>

---

Like HTML uses link tag to connect to external CSS, similarily XML uses xml-stylesheet as Processing Instructions to process external CSS, This Processing Instruction i.e. sml-stylesheet must be before the first tag of the XML document. That's important !!. And like you know, the type="text/css"  is not actually required, but it helps browser to understand that if Browser for some reason don't understand CSS or CSS file doesn't exist then browser should ignore and not download the CSS file. Like link tag, xml-stylesheet  can also be used any no. of time. Please note, that xml-stylesheet is not a tag, but a Processing Instruction. and unlike link tag it has to be used only in the starting of the XML document.

Now coming to the main point of:

Embedding the CSS in the XML 

---

<?xml-stylesheet href="#style" type="text/css"?>
<ROOT>
  <EXTRAS id="style">
    HEADLINE {font-size: x-large;  color: #AAAAAA;}
    AUTHOR, PARA {display: block;color: #DD00FF;}
    EXTRAS { display: none; }
  </EXTRAS>
<ARTICLE>
  <HEADLINE>India My Country</HEADLINE>
  <AUTHOR>Om Sao</AUTHOR>
  <PARA> India is a beautiful South Asian Country which is surrouned by Oceans in three sides. </PARA>
</ARTICLE>
</ROOT>

---

Output of the above embedded CSS in XML  is as expected: 

---

If you try opening the XML with embedded CSS in Google Chrome browser, it fails to render anything..
It's a known bug in Chrome. So, please check in Firefox or IE.

[Please like/share/comment if you find it useful !]

Size of Web Page through browser

These days, everyone wants to make their webpage/website as light as possible. The lightier the page is best it is considered to provide speedy download and fast in dynamics. These led to the era of javascript, jquery library and various AJAX triumphs. But how to know that what is the exact size of webpage that is coming from the server on request to browser.
Here are few ways to know Size of WebPage:
1. Using PHP and Curl:
curl_getinfo($page, CURLINFO_SIZE_DOWNLOAD)
By including this code:

   <?php
//<in place of http://usefultechtalk.blogspot.in enter your web URL>
$curl = curl_init('http://usefultechtalk.blogspot.in');
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
curl_exec($curl);
//get the download size of page
print("Download size: " . curl_getinfo($curl, CURLINFO_SIZE_DOWNLOAD) .'<br>');
?>

2. If you are on Mozilla Firefox, Install Firebug addon. Once Installed in the Net Tab as shown below
One can get the Size of WebPage. You can see the No. of Request in GET form and time to fetch the request.



[Please like/share/comment if you find it useful !]