Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

seo Pinterest Integration Tips for Bloggers 2013

Seo Master present to you:
Pinterest Integration Tips for Bloggers
The internet has fallen in love with Pinterest, and what’s not to love? This fast-growing online destination offers a smorgasbord of images to appease the visually-crazed, and is just social enough to make it a great networking tool. Thanks to the combination of these two elements, Pinterest has become an object of interest to bloggers far and wide.

Even if you don’t have a presence on Pinterest, there is a great chance that your audience does. This means you at least need to give it consideration. For those who are ready to go, the following tips will explain how you can effectively integrate Pinterest with your blogging efforts.

1. ADD A “PIN IT” BUTTON TO YOUR BLOG POSTS

If you follow trends across the social web at all, you knew it wouldn’t be long before Pinterest came out with a button that connects it to the rest of the world. With the Pin It button, you can provide an easy way for people to share your content on their Pinteret boards. Luckily, adding this button to your post is a simple process.

Login to your Pinterest account.
Grab the button code from the “Goodies” section.
Add the code to the HTML area of your blog post and you’re done!
2. MAKE YOUR POSTS PINTERST-FRIENDLY

You’ll see a few videos here and there, but the main activity on Pinterest is sharing images. This is why I highly recommend including images in most, if not all of your posts. If you include at least one image, then readers can pin your entire blog post to a board. You definitely want this type of exposure, so when you go to crank out that next post, don’t forget to complement it with a high quality image or two.

3. USE A PINTEREST PLUGIN

If WordPress is your blogging platform of choice, then you may want to consider using a plugin to support your integration efforts. There are quite a few to choose from, with Pinterest Plugin, Pinterest Galleries, and Pinterst Follow Button being some of the most popular options. While there are no official plugins available for Blogger, there are tools you can use to add Pin It and Follow buttons to your blog.

4. ADD BOARDS TO YOUR BLOG

Most bloggers focus on getting their blog posts on Pinterest, but you can also reverse this and add boards to your blog. There are a couple of ways to do this. You can use a plugin like Pinterest RSS Widget, or code the functionality into your theme, which of course, requires some programming knowledge. You could also use a service like IFTTT, a tool that automates the process for blogs using Pinterest-inspired themes. Keep in mind that the aforementioned methods are all specific to WordPress.

5. NETWORK WITH FELLOW PINNERS

Pinterest may not be the conventional social network, but it falls in the same category as the rest of them nonetheless. You can juice this site for its rich networking capabilities by connecting with other users. Comment on their pins. Like them. Repin them. This is the same approach you want to take when marketing on any social network. Spread the love, steer clear of the spammy advertising tactics, and rubbing shoulders with the Pinterest faithful could send some nice traffic to your blog.

6. TRACK YOUR EFFORTS

So you’ve made the move to integrate Pinterest with your blogging efforts. How’s everything going? Hopefully you have a good tracking system that will allow you to find out. When combing over your reports, you mainly want to find out who is coming in from Pinterest, and what they are doing once they reach your blog. Whether it’s JetPack for WordPress or the Blogger-friendly Google Analytics, there are several tools that can provide these insights.


HOW TO ADD THE PINTEREST PIN IT BUTTON TO BLOGGER?

ADDING PIN IT SCRIPT FOR BLOGGER

  1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
  2. Select the Template > Click on Edit HTML > Proceed
  3. Check/Tick the Expand Template Widgets checkbox
  4. Search for </head> and place the below code before it!
    <script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script>

ADDING PIN IT BUTTON SCRIPT

  1. Search for <data:post.body/>
  2. Place the Bellow Pin It Button script before or after it
    - If you add the below code before the <data:post.body/> then it will appear the Before the Post Content.
    - If you add the below code after the <data:post.body/> then it will appear the After the Post Content.
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
    <data:post.body/>
    <script type="text/javascript">
    w2bPinItButton({
    url:"<data:post.url/>",
    thumb: "<data:post.thumbnailUrl/>",
    id: "<data:post.id/>",
    defaultThumb: "http://www.matrixar.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",
    pincount: "horizontal"
    });
    </script>
    </div>
    </b:if>
    Settings
    defaultThumbSet the Default Thumbnail Image URL.
    pincountSet the Pin it Count Style.

ADDING STYLINGS

Add the below styling before ]]></b:skin> tag.
.w2bPinitButton{ 
float: left; /* Customize left/right */
margin-right:10px; /* Customize margin-left/margin-right */
display: block;
padding:4px;
}
Customize the Float and Margin properties according to your need.
I hope this Pin it Button is helpful to you. Please share it with your Friends and Leave your Comments. 



2013, By: Seo Master

seo Facebook Like Button to Blogger 2013

Seo Master present to you:
Facebook Like button for BloggerFacebook Like button  add it to Blogger.few days ago, face book surprised us by launching a lot of social plugins, one of them, actually the most popular one yet is the famous like button,
In this tutorial you’ll learn how to add it to your blogger blog.


Step 1. adding it to your template.

The button code,
<b:if cond='data:blog.pageType == &quot;item&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </b:if>
where to add it ?

Log into your blogger account, then go to Layout >> Edit Html.
Before doing any thing you must check Expand Widget Templates box.

And find the next Code<div class='post-header-line-1'/>
And after it, paste your button code
What, If you didn’t find the code above in your template, The try to find the following,<data:post.body/>

And paste the button code Before it.
click Save Template and you are done.
Step 2. Customize your button & Demo.
in the above code you can customize 3 parts. and i’ve colored them to make it easy for you to recognize,
in the above code change the following parts,
like this part controls the verb that appear on your button, keep it as you see or change it to recommend if you want.
arial this part controls the font type, keep it or change it to one of the following,


lucida+grande
segoe+ui
tahoma
trebuchet+ms
verdana
light this part controls your button color theme, and you have three options, light, evil, or dark
Update, How to make it appear on your home page.

in the button code there are two parts you’ll need to remove to make this button appear on your home page, the first line and the last line, if you still don’t under stand, please see the following parts and delete it before pasting the code to your template,<b:if cond='data:blog.pageType == &quot;item&quot;'>
</b:if>


OR





Facebook Like Button for Blogger

Step 1: Log in to Blogger and from the dashboard, go to Template tab.

Step 2: Click “Edit HTML” and check “Expand Widget Templates”.

Step 3: Find <data:post.body/> and immediately after/before it (or both if you want to have it on top and also at the bottom of the post) add the below code after generating it.
Button Options.


<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <div style='float: left;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </div> </b:if>
Step 5: Save your template.
2013, By: Seo Master

seo Css3 Button 2013

Seo Master present to you:
CSS3 Button Generator.
CSS Button Generator will create beautiful css buttons for you to use on your web pages without the need for any images.
How To Apply This Label Hack?






Code:

apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,



.duy-bcss3 {
cursor:pointer;
border:3px solid #6b6b6e;
background-color:#f2ac08;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fcd600', endColorstr='#f2ac08');
background-image:-webkit-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:-moz-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:-ms-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:-o-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
padding:18px 36px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
border-radius:13px;
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
text-shadow:0px 1px 0px rgba(0,0,0,0.3);
color:#140114;
font:normal 20px 'Century Gothic',Helvetica,Arial,Sans-Serif;
text-decoration:none;
outline:none;
vertical-align:middle;
}

.duy-bcss3:hover {
border-color:#4a4743;
background-color:#fcc203;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fcc203', endColorstr='#de7104');
background-image:-webkit-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:-moz-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:-ms-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:-o-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
color:#ffffff;
}

.duy-bcss3:active {
background-color:#de7104;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#de7104', endColorstr='#fcc203');
background-image:-webkit-linear-gradient(top, #de7104, #fcc203);
background-image:-moz-linear-gradient(top, #de7104, #fcc203);
background-image:-ms-linear-gradient(top, #de7104, #fcc203);
background-image:-o-linear-gradient(top, #de7104, #fcc203);
background-image:linear-gradient(top, #de7104, #fcc203);
}




HTML: <a class="duy-bcss3" href="URL" target="_blank">DEMO</a>


2013, By: Seo Master
Powered by Blogger.