Links and Codes, Css

CSS CODE to Center Your Blog Title
(add this to your add css tab in template designer)

You can change the number below to move the title left or right.

#header-inner {text-align: center ;}
.header-outer {
margin-left:10px;
}





Pinterest Pin it Hover Button Code
Remember to save your template in case you goof.
Look for the </body> tag at the bottom of the html, and insert the code below just before the </body> tag.



<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguKQCTepaW89PlnueDLVytk_JWSorbsI0vdTBfZUULCFKLTtDvw3rRqFLkRbrNUFa-EoKRJFaUxWA4byW1c6eMdv_PpEW5KbBXuFeTlX-UtSqhNlm088CFdwupcuHPvKQoXCXHhw/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>


If you want to change the image...you will need a direct link to the site that hosts your image.  I used photo bucket.  You will copy the direct link and paste it over the red part of the html below.


<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguKQCTepaW89PlnueDLVytk_JWSorbsI0vdTBfZUULCFKLTtDvw3rRqFLkRbrNUFa-EoKRJFaUxWA4byW1c6eMdv_PpEW5KbBXuFeTlX-UtSqhNlm088CFdwupcuHPvKQoXCXHhw/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>


****************************************************
Promote your Etsy shop on your blog

Slideshow:  Visit this site to get your code
http://www.craftcult.com/shop_widget.php?ref=sw_get

Etsy Mini (will display in your side bar using an html gadgett)
step 1
Go to your Etsy shop
Step 2
Step 3
You will see this below

Step 4 
Copy your code and place it in a HTML/Java Script Gadgett
Don't know how to do that??
Watch my video here.



****************************************************
Photo Bucket






****************************************************

Grab my Button Generator 





****************************************************



Pinterest Button code



Below is an image you can download for your button, just click and chose "save as"



You will need to upload the button to an image hosting site, I used Photobucket, because it was free.  Here is a link to Photobucket.



http://beta.photobucket.com





<a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());" style="margin-left: 1em; margin-right: 1em;"><img alt="Pin It!" src="Paste your photo url here"></a>



Here is the Youtube video showing you how to add a "PIN IT" button to your blog.

****************************************************



Adding a Link in your Comment HTML code



<a href="http://yourblogaddress.blogspot.com/">What you want your link to say goes here</a>


Here is a Youtube video of how to add a link in your comment on someone's blog post.



**************************************************** 

Center Blog Header CSS Code





#header-inner {text-align: center ;}
.header-outer {
margin-left:130px;
}





(Remember after adding the code to hit enter).

****************************************************

Get rid of the "Posted by in the footer of your blog post

paste the following code into the 
Advanced section of the template designer
Make sure you hit enter after you paste

.publish-info {
    display: none!important;
}


6 comments:

  1. Thank you for the information Heather. I was planning on doing research on the pin it button and instead I saw your video on adding a link in a comment and saw that you had the info here. You've killed two birds with one stone for me. I really appreciate it. Love your creations and visiting here is always inspiring!

    ReplyDelete
  2. Hey Heather

    Thanks loads for your you tube vid about adding gadgets to blogger, I only set up my blog last monday (18th feb 2013) and I didn't know about adding the gadgets until I watched your vid - I'm so pleased thank you!

    Do you know how to permanently stop the view count from couting our own views please?

    I'am at www.notodiets.com/

    Cheers, Leanne

    ReplyDelete
  3. Thank you Heather. I have been trying to find information on this and having no luck. I going to try all your tips. Thanks again!

    ReplyDelete
  4. Thanks a lot Heather! You made my day ;)

    ReplyDelete
  5. thanks for this informations and great work App Buzz

    ReplyDelete
  6. just used the code for the hover Pinterest pin! it worked!!! Thank you so much. I enjoyed the utube video. very clear instructions!

    ReplyDelete

Thanks for Visiting my blog today! Hope you found some inspiration...Have a great day! Hugs....Heather