How to Add Pinterest Button To Blogger Post

How to Add Pinterest Button To Blogger Post. Pinterest is the new way of socializing where you can share any interest thing you find on internet, including blog post, twitter, or facebook.

Then I want to put Pinterest button on my blog post so it easier for sharing to Pinterest board. Thanks to LetMeClear for How to Add Pinterest Button To Blogger Post tutorial.

Since, Pinning a pin by a “Pin it” button A description and original link location are added to the pinned image on the board. That gives you more chance to visit the source directly. Pin It button allows visitor to share your posts without leaving your blog.

If you're using Wordpress blog, there's many Pinterest button plugin similar with another bookmarks button plugin. If you're using Blogspot/Blogger blog, this is step to add Pin It button to your each and every blog post.

Step#1. Go to Design>> Edit HTML, Make a full back up of your template.

Step#2. Click on the Expand Widget Template checkbox on top right of the HTML window.

Step#3. Find this Data tag normally it will be twice in your HTML is given below. Locate the First one.

<data:post.body/>

Step#4.  Paste the following code immediately below/after the code mention in Step#3.

<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:22px; display:inline-block;'/>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script>
</b:if>
<!-- Pinterest button End -->

Step#5(Optional). If you want to show Pin It button on the top of each post Place the button code in Step#4, before  tag.

Step#6. Hit Save and check your blog Button appears or not on your post page.

Read More

How to Convert Bitmap to Vector Graphics (for Free)

How to Convert Bitmap to Vector Graphics (for Free)

If you're a web designer, there's a good chance that you already know the difference between a bitmap image and a vector one. The former is made up of pixels and so will only appear correct at a certain resolution. The latter however can be scaled up or down as necessary to create an image of any size. In the world of web design, vector graphics can be incredibly useful - not only because they're more flexible, but also because they can be relied upon to look their best on the biggest or smallest screens. So whether you're creating a website that calls for some sharp engraving style graphics, or a simple collection of block shapes, vectored images can be hugely useful.

There are times when a web designer will be provided with graphical assets by a client before they start work on a site. In a perfect world, all of the graphics they provide will be in vectored PDF or EPS - but unfortunately this isn't always the case. A client may in fact provide you with low res JPGs and then ask you to create a high res design with them. This is next to impossible, however there is actually a technique you can use to make a useable vector graphic file from a bitmap one. You might have to sacrifice a bit of detail, but you may be surprised at the results. Best of all, it's free - all you'll need is Adobe Illustrator and a little bit of design ability (as a web designer, this shouldn't be a problem). Plus, it's completely free, unlike many of the bitmap to vector services on the web.

Step one: open your bitmap graphic in Illustrator

Go ahead and open Illustrator (you need to have at least CS2 installed, otherwise the option you need won't be available). You should place the bitmap image into Illustrator by clicking File then Place. You can use any bitmap image you like: PDF, jpeg, and so on.

Step two: perform the Live Trace

Next, click Object > Live Trace > Tracing Options. Here you can change various parameters and try to create a trace that is as true to the original as possible. The options on this screen will give you various details about the image and let you choose how you want the trace to be carried out. Once you're ready, click the Trace button to finish this step.

Step three: turn the image into a vector

Your adapted image is now ready to be converted into
a vector version. To do this, go back to the image and select Object > Live Trace > Expand. If your original image was colour, there's a chance that distortion may have occurred that makes the image unusable or less visually appealing. This is an unavoidable side effect of creating vectors this way; you're essentially creating a 'skeleton' version of an image, without the finer details. However, there is a way to use such images if you really need to, as black and white 'stencil' style objects.

Step four: create your final black and white vector image

To go monochrome and make the final image, click Object > Live Trace > Tracing Options. Here you can select Black and White to complete your vector image. Now all that's left is to save the vectored image in a suitable file type. This could be PDF or EPS. Your image can then be scaled up or down as necessary and used in all sorts of designs.

So there you have it, a quick and easy way to turn a bitmap image into a vector one in just a few minutes. Remember that this method works best for images that aren't too complex. If there are lots of different coloured elements, or too much going on in terms of detail, you may want to find another way to secure the image in vector form. Your client should always be able to provide you with high res original imaging, but if that's not possible, the above procedure will at the very least give you something workable. You never know - your client may end up preferring the version that you create in black and white!

Read More

How To Add Comment Reply/Threaded Comment On Customized Template?

How To Add Comment Reply/Threaded Comment On Customized Template?

Blogger has no comment reply or threaded comment feature. It won't show reply comment button automatically because it have been customized or tweaked. So, you need a few tweak to show this reply comment link or Blogger's threaded comment feature.

I assume that you've applied new Blogger Dashboard. Follow this step "How to add comment reply button on Blogger/Blogspot":

- Go to Template menu

- Click on Edit HTML button, then HTML frame will appear

- Tick mark on Expand Widget Template to show complete HTML code

- Find this code below

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

- Replace the red code with these code below

   

      <b:if cond='data:post.showThreadedComments'>

        <b:include data='post' name='threaded_comments'/>

        <b:else/>

        <b:include data='post' name='comments'/>

      </b:if>

- Click Save Template button

Read More

How to Add Floating Facebook Share,Tweet, +1 Button in Blogger?

How to Add Floating Facebook Share,Tweet, +1 Button in Blogger?

I have ever posted about how to put social bookmark sharer button, that's sharing is sexy button. I also have posted about how to put our social media icon to help your reader close and know more about you. A hour ago, I was looking for simple sharer button, I only need Facebook sharer, Tweet button, and the new one +1 button from Google. Fortunately, I find a easy tutorial about how to add floating social bookmark button next to post in Blogger from MyBloggerTricks. Really thanks to you, the author.

You can see this sticky widget to left of my blog, both on homepage and postpage. The installation process is so easy. Here I share how to add floating Facebook Share,Tweet, +1 Button in Blogger.

1. Go To Blogger > Design
2. Choose a HTML/JavaScript widget
3. Paste the following code inside it

<style>
/*-------MBT Floating Sharing Widget------------*/
#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;
}
#mbtsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-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="floatdiv">
<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">

    <tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <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>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.mybloggertricks.com">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div>


4. Save your widget and drag it just below the post body as shown below

5. Finally click the save button at the top right corner and done

Any question or complete customization, you can go to author website.

Read More

Introducing : Business Ads Ready Blogger Template

Introducing my new blogger template design, Business Ads Ready blogger template. As its name, this template ready for adsense. You can check demo or screenshoot. There's four section for placing adsense code set through page element. It's really easy to customize.
At right top section, you can place your adsense 468x60, suitable for image type. Check featured post. You can place your best post, and put your adsense code. I recommend image adsense because it will appear like image post. Under navigation menu, you can set adsense list that will appear like menu.
Your blog will appear neat because of automatic readmore function. No need another tag, just write your post and it will be cut and display thumbnail automatically (if you insert image)
You can DOWNLOAD .


Featured :

1. Three column at lower section
2. Automatic readmore function
3. Breadcumb navigation
4. Smooth navigation menu (using javascript)
5. Easy customize adsense section
6. Banner 125x125 section
7. Featured post, that you can wrap your adsense
8. Header logo

P.S :
I also offer footer link. Why I should buy footer link? That's a cheaper and easier way to spread your link. What's the advantage? With reasonable price, you get unlimited link.
Wanna buy footer link? Contact me at cebong.ipit@gmail.com

Read More

New Responsive Template for Blogger

Still looking for new blog templates to beautify your blog? This ya one of the newest templates from Soratemplate. This template is inspired from a paid template from Wordpress Templates sold for $ 40 dollars, and is given free templates for you to Blogger users.

Here's a brief info and features of this template.

Name Template : Keilir Template

Platform: Blogger / Blogspot

Release Date : Agustus 2013

Template features : Blogging, Personal, Responsive, Dropdown Menu, Social Widget, Page Navigation.

 Dropdown Menu Setting:

Now find the code as shown below and edit it to suit the content of your blog. replace '#' with your menu link.

 <ul class='nav' id='menu-primary'>
 <li><a href='#'>Home</a></li>
 <li><a href='#'>Theme Options</a></li>
 <li class='dropdown'><a href='#'>Pages</a>
  <ul class='dropdown-menu'>
   <li><a href='#'>Full Width</a></li>
   <li><a href='#'>Right Sidebar</a></li>
 ..........

 Page Navigation Widget Setting

find the following code:

var posts=4, // Number of posts in each page
    num=2, // Number of buttons will display

adjust according to your wishes, var post = 4 it states that each page will display 4 posts, numbering each page will show 2 num show only two numbers mean.


For details, please try the following demo link.

 

Read More