Friday, July 4, 2014

Hacks

OK, it's about time that I devote a page and a section to "hacks." By hacks I mean tweaks and adjustments to your Blogger template that are not otherwise apparent, or are not an option through the dashboard, not outright hacking, that is illegal and violates many of my ethics and morals. 

However, on this I proceed with caution. You should really know a little about HTML and CSS and what they do before you wantonly add or remove code, which can have adverse reactions. Before you get over your head into something involving your code, I suggest backing it up.

In this post I am going to provide the links and/or code to customize and personalize you blog or website in Blogger.

Fun fact:  with my first blog, it took me a few weeks to figure out all the cool tweaks to make my blog look less "Blogger." I set up my second (gshirschsafety.blogspot.com) in about an hour. So the learning curve is pretty short.


THE BASICS

Once you start to learn the basics of the dashboard, things start to move pretty quickly. I advise you to explore. Depending on the template you chose, you can change the font and color and background and stuff right in dashboard. And Google is a huge help. Everything I've learned, every trick, every tutorial has been via a basic search on Google. So anything that you can do through the dashboard is pretty straightforward. What I'm going to cover is the trickier, not so obvious stuff. And everything I'm about to do is free. I strongly recommend trying things for free before you buy something you might not like later.


External Links

First up, how to make external links open in another window. Whenever you add a link to a post or a page, Blogger allows you to choose whether that link opens in the active window, or opens a new window. However, links you put in gadgets default to opening in the active window. That's not good because you don't want to boot your reader off your site, especially if you plan to do business with your blog.

There are a couple of ways to get around this, but this is the best one I've found. This is a template hack. Go to Template>Edit HTML then post the following CSS code right after the <head> tag.

<!-- start of external links new window -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
 <script type='text/javascript'>
  
$(document).ready(function () {          

                $(&quot;a[href*=&#39;http://&#39;]:not([href*=&#39;&quot;+location.hostname+&quot;&#39;]),[href*=&#39;https://&#39;]:not([href*=&#39;&quot;+location.hostname+&quot;&#39;])&quot;).attr(&quot;target&quot;,&quot;_blank&quot;).attr(&quot;title&quot;,&quot;Opens new window&quot;).addClass(&quot;external&quot;);

    });

    </script>

<!-- end of external links new window -->


Music

When I first started my blog, I thought it would be cool to have it automatically play a song, one time, when you first pull up the site. I later decided against it playing automatically, but I left the player on the page and even added more music to it later.

There are a number of ways you can do this. I tried a bunch that didn't work for me, but I then I found SCM Player (scmplayer.net). This is a free widget that is extremely simple and easy to use. Setup takes only a few minutes. Adding it to your code will put a very thin control bar at the top of your page near the navigation bar, if you have one. Very unobtrusive, though sometimes easily overlooked. But where does the music come from? That's the trick. There are a number of methods of getting the music to SCM. The one I used was YouTube. The application will allow you to use the audio from a YouTube video. Not 100%, but works most of the time. So find your audio on YouTube, and SCM will explain how to incorporate it.

You could also use a number of music apps like Spotify or SoundHound, but you have to subscribe to, so you if your reader doesn't subscribe to them, they may not be able to hear your audio.

You can use this to hack your CSS template code, or put it into a custom HTML gadget. Works exactly the same way.


Video

The Blogger dashboard allows you to easily insert video into post or page. Unfortunately it comes out as a tiny square and half the time looks like shit. An alternative is to embed the code into the HTML of your post/page. Piece of cake, but sounds complicated.

Find your video on YouTube>click share>click embed>copy the code. Go to the HTML editor of your post/page and drop it where you want it. I also suggest adding the tags <center> and </center> to center it nicely and adjust the dimensions to fit to your template. It looks really tight. And again, keeps your reader on your page.


Embedding

Segue to embedding in general. There are many, many different applications which allow you to embed code directly into your HTML. Personally, I have found that this is the most professional way to add content IF you know how set it properly; center it, scale it, etc.


Here are some links for other CSS hacks. These are things you can add to your code in the Advanced section under Customize in the Template section.

Remove the Post Footer
Remove "Home" Under Blog Post
OK, I understand the point of putting a Home link under each post, but it's just inconveniently placed. So it's gotta go.

How to Change the Font Color of the Post Title
For whatever reason, some templates won't let you change the font color of various things. So I found a hack that will fix this. This link however, is a bit difficult to understand. For example, I combed over my code several times and never found this bit. So I just copied it and plopped it right down in the CSS section. You can customize the size and color manually from there.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#333333;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#000000;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color: #000000;
}


For me, all I need to know is:  font size; weight; and color. I don't know that much about CSS, but I know what the codes are for color and I just experimented.