HOMEPAGE

Create something.

January 12, 2016

How To Add A Border To Your Blog


In today's #TutorialTuesday we are going to go over the CSS magic of borders. :)


Where to put the CSS 

  1. Go to your blogger dashboard and select the blog you'd like to add a border to.
  2. Next, go to Template >>> Customize >>> Advanced >>> Add CSS.
  3. Paste the code below into the box.

.content-outer { border: solid 5px black; }

How to customize this code:


Fushia: To change where you are applying your border, put a different declaration or div name here.

Red: Replace this with dotted, dashed, or double to see the different border types.

Blue: Insert a larger number to thicken the border.

Green: Replace this with any color code.


Don't forget to save your changes!

If you have any questions, comment below. :)

xx Nicole Rose

December 29, 2015

How To Add A Custom Pin It Button On Image Hover


Hello! In today's #TutorialTuesday I am going to do a requested tutorial on how to add a custom pin it button on image hover. :)

Instructions:

1. Log in to your blogging account and select the blog you'd like to add your pin it button to.

2. Go to Template >> Edit HTML and locate the </body> tag.

3. Copy the code below, and place it directly above the tag.

+ + +

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/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>

+ + +

To reposition your pin it button, replace center with:

+ topleft
+ topright
+ bottomleft
+ bottomright


4. Save your template and tada! You've got a hovering pinterest button. To customize this, change the image URL in the code (I've colored it red), and replace it with one of your choice.


Comments? Questions? Concerns? Connect with me below!

December 22, 2015

Remove Those Pesky Dots From Your Blogger Template



I'm sure we all know of the dots I'm talking about. But if not, here's an example:


Do you see those dots? Personally, those little suckers annoy me so I am going to rid the world of them. Single-handedly. But with help.

Note: I believe these dots show up if you are using the Simple template on Blogger. So if you are not using that template for your blog, congrats! You probably don't have to do this tutorial. ;)

Alright. Now. Here are the instructions:

1. Log into Blogger and select the blog you'd like to rid of the "dots disease".

2. Go to Template >>> Customize >>> Add CSS.

3. In the box, insert this code:

.blog-pager { background: transparent; }


4. Save your changes and voila! You are done! :)

BONUS CODE: Since we're here, let's make those links pretty. ;) Plug this code into the CSS box:

.blog-pager { background: transparent;
text-transform: uppercase; }

This will make the links uppercase. If you'd like to make them lowercase instead, just change that underlined bit to "lowercase".

Need help? Have a suggestion? Like telling people random bits of information? Then just comment below! I'd love to hear from you! :)

Thanks for reading.