Monday, November 9, 2015

Centering Post Title, Tabs (Pages), Date Header & Sidebar Gadget Titles

To center you post title, tabs, date header and gadget headers, go to Customize>Advanced>Add CSS, and type the following. Hit Space key after each addition...
Code to center post title in Blogger:

.post-title {
text-align:center;
}



 Code to center your Tabs in Blogger:


.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}


Code to center date header in Blogger:

.date-header {
text-align:center;


Code to center Gadget Title in Blogger:
.section-columns h2, #sidebar-right-1 h2, #sidebar-left-1  {text-align: center;}

If it all looks right, remember to Save.

That's it!

Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »

Reducing Space Between Post Title & Post

If you want to reduce the white space between your blog post title and your blog post, go to Template>Customize>Advanced>Add CSS, and add this...

.post-title.entry-title{

margin-bottom: -20px !important; }


Hit the space key and see if it works.

If it looks right, Save.

I ended up changing my number to -15px. You can play with the numbers till you have it how you want it. 

That's it!


Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »

Thursday, November 5, 2015

Adding A "Box" Around Sidebar Gadget Titles

I wanted to "draw" a line around my sidebar gadget titles. In other words, I wanted a solid line that created the look of a box, with the inside remaining white. 

Here is what I did: Go to Headings in your blog HTML.

If you have trouble finding it, put your cursor up in the far right-hand corner where there is empty space. Click CTRL and F.

A box will open up. Type Headings in there and you will find everything in your HTML that has that word in it.

Somewhere under Headings, type this...

font: $(widget.title.font);
color: $(widget.title.text.color);
border:
1px solid #dddddd;
}

For some reason some of these tips don't work until you hit the space bar. Click Preview and see if it's as you want it. If it is, click Save.

I wanted a light grayish color. Which is the #dddddd. You can Google color hex codes to find other colors to use. Dark black is #000000. White is #FFFFFF.

That's it!


Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »

Saturday, August 15, 2015

Adding Space Between Read More & Post Footer

Once I added the CSS customized Read More link, as I just posted about, I found that my Read More link was just too close to my footer. So I decided to figure out how to change that. 

I went into HTML and found .post-footer

You can click up in the right hand corner on white space, and hit CTRL and F. It will open up a box. In that box, put .post-footer.

I looked at the padding and where it now says 20px at the very beginning, (which I have highlighted in gray) it did say 0px. You can play with the numbers. Preview, and see if it's where you want it. When it is, click Save.

.post-footer {
  margin: 10px 0px 20px 0px;
  color: $(post.footer.text.color);
  line-height: 1.6;
  padding: 20px 0 20px 0px;
  border-bottom: 0px solid #808080;
  background-image: url();
  background-repeat: no-repeat;
  background-position: bottom center;

That's it!

Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »

An Easy Customized Read More Link

The read more link provided by Blogger, is, shall we say, slightly boring. I like mine inside a very visible box. So here is a simple way to add it without going into HTML. 

Go to Customize>Advanced>Add CSS...

Put the below code into the box. (Sometimes you have to hit the space key to get it to work. Who knows why?) Save.

.jump-link { text-align: center;background: transparent;} 
.jump-link { position:relative; top: 8px; } 
.jump-link a { background: #ce0000; color: #ffffff;padding: 5px;border-radius: 7px;} 
.jump-link a:hover { background: #dddddd;color: #000000;text-decoration: none;} 

Now of course mine is red. And my text is white. You can change that to your own preferred colors. 

And to change what your Read More says, go into Layout, click on Blog Posts, where you put your content. The second thing you will see is how to configure your text. You can write "Read More", "Continue Reading", whatever you want. And Save. 

That's it!

Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »

Monday, July 13, 2015

Minimize Space Between Header & Ad Above Header

To change the distance between the Header and the Ad go to your Blog Dashboard > Template > Customise > Advanced > scroll to "Add CSS" and copy and paste the following code in the box:

#HTML16 {
margin-top: 15px !important;
margin-bottom: 0px !important;
}
#header-inner img {
margin-top: 15px !important;
margin-bottom: 0px !important;
}

Hit "Enter" on your keyboard and click the "Apply to Blog" button. You will see the changes, but if you still don't like the result you can change the numbers in red color until you like the space distance. Also in blue color is the code for the adsense gadget and in purple is for the header.

That's it!
Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »

Thursday, June 4, 2015

Add Border Line Around Content Margin

Click Design>Edit HTML
Click CTRL & F to get a search box
In empty box, type:
.content-outer 
Click Enter to find .content-outer
Underneath .content-outer, type:
border: 5px solid #000000;
You can adjust the number up or down as desired.
Click Preview to check it.
If you like it, click Save.

That's it!


Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »

Decrease Space Between Post Title & Content

Find h3.post-title in HTML by clicking on empty space and clicking CTRL and F. Put h3.post-title in the open box and hit enter to search the HTML.

Add below the above code: margin-bottom: -25px !important;
You can increase or decrease this number by looking at your blog in Preview and seeing if it's where you want it. 

Save.

That's it!


Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »

Wednesday, May 13, 2015

Make Your Own Customized Hovering Pin It Button


I wanted my own customized Pin It button to match my font and color. So I fetched code from another site. But it has their Pin It button code, not my customized one. I'll explain what to do about that. First, let's make a Pin It Button of our very own.  

First I went to Picmonkey, went to Overlays, and chose a round circle. Theirs is black, so I put my own orange color, which is #F98F45. You just erase their code next to the color box, and put yours in. 

By no means does yours have to be round or anything like mine, I might add. It can be anything you want.

I then opened Design in Picmonkey. Make sure you click Transparent for your Canvas. This is where you're going to bring your shape for your button. Then you will go to Fonts and choose a font. Then you will crop fairly closely around your Pin It Button.

You will then go to Resize. I believe my button is 85 px.

Here it is again...



Save. I save mine to my Desktop. Usually in the Save box, I would put something like 85PinIt, so I'd know what to fetch from my Desktop when I'm ready for it.

Then I went to a New Page in Blogger, and typed My Pin It Button HTML in the post title, so I'd have a permanent place for my HTML code. You're never going to publish this. It's just there for safekeeping. Says the woman who accidentally published a very private post in 2011, and the rest is, shall we say, history. 

Anyway, once you have your empty new page in Blogger, click Image, just like when you add a photo to your page. Then fetch your customized Pin It Button. 

Now, where it says: Compose, on the far left, right next to it is HTML. Click HTML. Your Pin It Button will disappear for the moment (though you're going to save it, and you will then see the gibberish that is HTML.) 

Then you will have the code for your Pin It Button.

This is how I figured out how to host my own images, which I put in an earlier post on this blog. Look in Tips & Tricks.

However, I found that the HTML I fetched from my Pin It Button had more code than I needed. 

So I looked at the code I copied below from another hovering Pin It tutorial and found where their src started, and patched what I needed in.

I simply erased some of their code and replaced it with mine. Here's mine:
"http://1.bp.blogspot.com/-D65VNj-1zYs/VVPUR47DVYI/AAAAAAABBi8/rLG0ewS9GUo/s1600/85pinit.png"

This is my code for the customized Pin It Button, where I only erased and inserted what you see highlighted below.

 <script>
//<![CDATA[
var custom_pinit_button = "http://1.bp.blogspot.com/-D65VNj-1zYs/VVPUR47DVYI/AAAAAAABBi8/rLG0ewS9GUo/s1600/85pinit.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'> 
// Visit helplogger.blogspot.com for more widgets and tricks.
</script>

This is Helpblogger's HTML for a Pin It Button.

 <script>
//<![CDATA[
var custom_pinit_button = "http://1.bp.blogspot.com/-D65VNj-1zYs/VVPUR47DVYI/AAAAAAABBi8/rLG0ewS9GUo/s1600/85pinit.png" ;
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'> 
// Visit helplogger.blogspot.com for more widgets and tricks.
</script>

You will then go to the Edit HTML portion of your blog, which is 

right next to Customize when you click on Design. For some 

reason, my words now are being formatted like Helpblogger's, so 

I'm having to add a space in between sentences, so that words are 

not partly covering other words. A mere technicality. I don't want

to stop and fuss with it.


Copy your code. You will be taking it for a short ride.


You will click on an empty space in your HTML page, and then 

click CTRL and F. Now you have an empty box in which to type  

</body>. This is where you will be putting the code. Just above

</body>, paste the code you have saved. Then hit Save.


***

I don't know if I've explained this well. Someone try it and get back to me please. You simply use the code I fetched from Helpblogger, and inserted my own button source, and used my own image I created.

If you don't understand, send me an email and I'll try to clarify.

That's it!

Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »

Saturday, April 18, 2015

Changing Label Names

I found this in Blogger Help. If you want to change the name of a label you have in your posts, read on....

Change the name of a label

Let's say you have a number of posts with the label Hawaii but you've decided that you'd rather call it Vacation instead. You can't edit the name of a label directly, but there's a simple workaround to accomplish your goal:
  1. Go to the Posts tab for your blog.
  2. Click on the "All labels" drop-down on top-right and select "Hawaii." This will filter the posts, so you'll only see those with the "Hawaii" label.
  3. Click the check box at the top of the list of posts to select all the posts.
  4. Then, click the Label icon and select "Hawaii" to remove the label "Hawaii" from all the posts that are selected.
  5. While the posts are still selected, click the Label icon again and select "Add new label." Then, type in "Vacation."


Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »