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 Fix Newer Older Post Navigation?

Yesterday, Im shocked by hidden older and newer post navigation. Actually I dont know why it's happened because my template (also on this blog) display properly since I create it.

Why my newer and older post navigation is hidden or display unproperly? How to solve this? I have tried to edit CSS code. Fortunately, it works.

Follow this step.
1. Open edit HTML
2. Check this section code
#blog-pager {
text-align: center;
}
3. Insert clear:both; code so the code will be look like this
#blog-pager {
text-align: center;
clear:both;
}
4. Save

Hope this work on your template too.

We all want some reliable tools to sort out study in a reliable manner for the latest 220-802 exam which is challenging task, however, that could be possible only through subscribing for Pass4Sure Training materials. ccna exam questions training from Pass can provide you maximum facilitations in your task and you can come out successful from exam with no problems at all. If you want to have an awesome study for the 00M-234 exam then latest PassForSure Cisco CCNA Security testing engine and interactive study guides are highly suitable tools for you. Make up your career path in a right way only through acquiring incredible quality act practice test dumps and simulations that are available to you at discounted cost. If you are one of those individuals who want to get all the things going in a right direction then 640-722 online simulations and dumps is perfectly right choice for you.

Read More

How to Put Twitter Icon on My Blog?

As my previous post, there are so many twitter icon and button resources. And the next question is how to put twitter button on my blog?
There are many ways to do this. But if you want the fast and simple way, you can use this free twitter icon service. This site offer up to 176 twitter icon.


Here's the step

1. Go to twitter icon site
2. Choose your desired icon/banner/button
3. Enter your twitter username
4. Copy HTML code
5. Go to your blogger dashboard
6. Click on Layout
7. Click Add a Gadget , at sidebar or wherever you want to put this twitter icon
8. Choose HTML Gadget
9. Paste HTML code from twittericon.com
10. Save
    

Now you get the banner and start to tweet tweet

Read More

How to Add Social Bookmarks Icon to Blogger Post?

Social bookmarks become a common media for sharing information, especially in blogging. We can add this featured on post that make it easy to share. Check my social bookmarks icon below this post. Usually we use static icon. But this one has a unique effect like an animation, infact that's using CSS only. So How to add social bookmarks to blogger post? Follow these steps below

1. Sign in to Blogger dashboard, go to Layout>Edit HTML , tick mark on expand widget template

2. Copy these code below

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
padding-top:20px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>

3. Paste below this code

]]></b:skin>

4. Find these code

<data:post.body/>

5. Copy these code and paste below <data:post.body/>

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

You can adjust its width to your main post width size.

6. Save

Note :

- Actually you can put it anywhere as long as still on post section. You also can paste it under

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

- If your template using automatic readmore, paste that code after <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

- You can change background "Sharing is Sexy" using your own image
replace this URL to your own

background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;

Important update:

hi all.. please hosted button image to your own hosting...
open this link

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18GvLKJQZpDhdHXaqasD_I3QSuHr3tkD5JOfER0iXDEQzR5wc0t7M_EQCc-iQgb7fXEQxKiUtiO-K67tpJ9Biz7eIhGJLwnW3PW1Grl69LIFykt8NxEH44-FFe7j2K6oTx7t23wXxWaI/s1600/sprite.png

save the image
upload to your own imagehosting
replace
http://img509.imageshack.us/img509/3131/sexysprite.png
to your own image URL

Imageshack only provide a little free imagehosting, so please host it self

Credit to Naeem Noor

Read More

How to Create Multicolumn Labels/Categories ?

Usually we use default labels/categories blogger widget. But if there's too many labels, it become too long. There's three tricky option to simplify labels widget.

1. Create multicolumn labels. You can see the example at my sidebar. Divide labels become two column
2. Use scrolling option
3. Use dropdown option

Now we try to make multicolumn labels only using CSS. No need heavy loaded- javascript as tag cloud widget. Suggested to make new section. Create section for labels and then put before footer. Why we should create new section? If we set multicolumn on sidebar, it will impact to another list widget.

The point is, create 4 column labels in lower section. You can preview the example here

Here's how to

Open Edit HTML and Create CSS code

1. Copy these CSS code below and paste before ]]></b:skin>

#category-wrapper {
width:960px;
clear:both;
margin:0 auto 10px;
padding-top:15px;
line-height: 1.6em;
text-align:left;
border-bottom:1px solid #efefef;
}

.cat {
color: #000000;
line-height: 1.5em;
}

.cat ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.cat ul li {
float:left;
width:22%;
list-style-type: none;
margin: 0 0 5px;
padding-left: 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4SD_gFe-HtW8t4UdTw35n2GTWA7kwQan0apKG9S-J_twl5ZARm7XAj47HsAiY3YwnsWBoLZ75zG8JEDVoX2iMJHinKJZux9ibYDp574d9pfdLODSxEusv7C-rCQOYCd1A7_PejyFA7H4/s320/li.gif) no-repeat left center;
}

.cat .widget {
border-bottom:1px dotted #F7F7F7;
margin:0 .5em 1.5em .5em;
padding:0 0 1.5em;
}

Note :
#category-wrapper {
width:960px; adjust this value to your current template size

.cat ul li {
float:left;
width:22%; adjust this value, If you want to make two column set to about 45% , make three column set to about 33% .

2. Copy these code below

<div id='category-wrapper'>
<b:section class='cat' id='cat'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
</b:section>
</div>

Paste before

<div id='footer-wrapper'>

Save Template


Now you've created special wrapper for Labels widget

Thanks to Herro

Read More

How to Change Header Through Page Element?

If you use free template, of course there are so many same template with yours. So how to make it unique? You can change header background template with your own unique header. How to? Here's how to configure header on your blog through page element.

- Go to Layout > Edit HTML, find header css code. For example

#header-wrapper {

background:#FFFFFF;

width:920px;

height:90px;

margin:0 auto 0px;

}

It means, header size on your template is width 920 pixel and height 90 pixel. Now you have known your header size.

- Create your own header, size width 920 pixel and height 90 pixel using image editing software such as Photoshop, Corel Draw, Inkscape

- Go to Layout > Page Element

- Click Edit on Header Section and this form will appear

- Click Choose File from your computer, pick your header image that you've created before

- After upload finish, image header will appear

- There are two placement option. If you want header title and description text keep appear, choose Behind title and Description , if you want image header wrap header title, choose Instead of title and description

- Save

Read More

Why Date Not Show Up on Post?

"Why the date not show up on my blog post?"
Have this ever happened to you? Actually this is simple problem. Template designer usually set this date header not display considering its appearance. How to solve this problem? There's two alternative solving problem.

1. Check HTML Code
First, you have to check html code, as I said, the author could be set date display none. Go to EDIT HTML. If there's code below


h2.date-header {
margin: 1.5em 0 .5em;
display: none;
}

Delete display: none;

And then Save. Preview it and date will appear.


2. Change Timestamp Format Setting

Even the author set not to display date header, usually they still set to display timestamp. Actually we can this tricky setting.
Go to Setting > Formatting > Timestamp Format
There's many choice of timestamp format setting. Choose timestamp that show date, voila, your date will appear.

Read More