I use any and all of these tips when setting up a blog on the Blogger platform.
## How to Add a Permalink of your Post URL to the Post Itself ##
You can place the following under the <data:post.body/> tag in your theme template to include the post's permalink at the bottom of the post itself:<div class='permalinktag'><center><small>You are reading the article <strong><u><data:blog.pageName/></u></strong> The url of the article is <strong><data:post.url/></strong></small></center><center><small> Permalink is <u> <a href='data:post.url'><data:blog.pageName/></a></u>.</small></center></div>If instead you want a simple permalink with a bare url below your posts, then place this under your <data:post.body/> tag:
<div class='permalinktag'><center><small>Permalink: <strong> <a href='data:post.url'><data:post.url/></a> </strong></small></center> </div>
Including Adsense in Your Blogger Posts & Template
If you are in the Compose window of writing a new post, you can add <!-- adsense --> anywhere to insert Adsense at that spot.## Adsense block Right Below Header ## Create a new ad unit in your Adsense control panel. I use a wide leaderboard (728x90) Paste this just before <data:post.body/> tag in your template: (make sure to tick on expand widgets first to display it)
<b:if cond='data:blog.pageType == "item"'> Place your encoded adsense code here </b:if>You should also use paragraph tags around your Adsense code. Otherwise it will be too tight next to the beginning of your content.
## Adsense block at bottom of post ## I also use a wide leaderboard (728x90) here. Paste this just after <data:post.body/>:
<b:if cond='data:blog.pageType == "item"'> Place your encoded adsense code here </b:if>You'll notice the conditional statements in the template code above. That tells the template that we just want the adsense code to appear only on single posts.
Blogger Template Tweaks
## How to Widen a Blogger Template ##
My template is too narrow as some photos wouldn't fit in main body area. So my settings are:
The photo above would've been truncated if I stuck with Blogger's default 960 width.
Pic shows 1100px wide, 310 px for right sidebar.
While you're adjusting the width of your blog, you might also want to think about adding an Adsense leaderboard to your header area. A good tutorial for how to create an ad gadget that shares space with your header is at http://helplogger.blogspot.com/2012/03/how-to-add-gadgetwidget-inside-your.html.
##1## Hide Navbar To hide the Blogger Navbar, navigate to ==> (Layout / Navbar (Upper Right) - Edit)
##2## Tighten Up the Header Area w/ Top & Bottom Margins
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
margin-top:0px;
margin-bottom:0px;
}
.header-inner .Header .descriptionwrapper {
margin-bottom: 5px;
}
##3## More Tightening Up - Remove Blog Description in Blogger I don't use blog description as it just adds superflous text, so I don't include a blog description in the Layout settings. In addition, you should decrease the top padding for it in your Blogger template (I've set it to 5px):
.header-inner .Header .titlewrapper {
padding: 5px $(header.padding);
}
##4## Move Entire Blogger Blog Up the Page After removing navbar, bring the entire body/header up towards top of page (note the negative margin):
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
margin-top: -40px;
$(body.background.override)
}
Using a Logo in the Header
If you're going to be using a small logo image, situate the image on the left and save it to stretch the full width of the header (usually 960-310= 650 pixels). The majority of the area will be transparent and your site title and description will be superimposed on top of it. For more on how to upload your transparent Blogger logo, see http://tricks-for-new-bloggers.blogspot.com/2007/08/header-image-beside-blog-title.html. What's important to note is that you will have to use CSS to move your site title and description further to the right so it doesn't interfere with your logo:
.header-inner .Header .titlewrapper {
padding-left: 100px;
padding-top: 50px; // to push the title down
}
.header-inner .Header .descriptionwrapper {
padding-left: 100px;
##5## Adjust Header Height and Width #header-wrapper { (if you are using not default template, this parameter can have different name, for example : #header). For the theme I was working on, it was header-outer:
#header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
width:1100px;
height:80px;
margin-right: 40px; /* this should be useful to move it right & left
margin 0 auto; /* should work to center .. didn't work */
margin-left: -10px !important; /* this is what finally worked */
}
## Good info if you want to put 2 widgets in your header: http://www.jsblogstop.com/2011/01/blogger-filling-wasted-header-space.html
## Good general info on Blogspot headers: http://www.blogdoctor.me/search/label/Blog%20Header
## Free Blogger Templates ## http://www.deluxetemplates.net/category/blogger-template
If you want to include a contact form page (but hide the Blogger contact form widget): http://www.bloggerplugins.org/2013/05/create-separate-contact-page-for-blogger.html
## If you can't login to Blogjet, Macjournal, Windows Live Writer, MarsEdit into Blogger, it may have to do with 2-factor authentication. http://support.google.com/accounts/bin/answer.py?hl=en&answer=185833
## By tagging an item in an RSS feed, automatically send it to your Blogger blog: https://ifttt.com/recipes/66562 Note that the RSS Feed is in the form ofblogname.blogspot.com/feeds/posts/default?alt=rssFor example, http://digital-cave.blogspot.com/feeds/posts/default?alt=rss
## Parse Blogger for Images and submit to Tumblr
http://ifttt.com/recipes/29677
#Turn on nRelate Very simple - just follow instructions. You can sign up to display ads, but I wouldn't recommend it. CTR is a little under 1%, and cpc is about .04. Just use nRelate for linking to posts on your own blog. Also keep in mind that nRelate can also be used on Tumblr as well as your self-hosted WordPress blogs all under the same nRelate account. 2015 EDIT: nRelate is out of business.
## Add Viglink to Your Blogger Blog ## How to Install Viglink on Blogger
- Open your blogger dashboard, log in, and click "Design".
- Under the design tab, make sure you're on the "Page Elements" page.
- Click the "Add a Gadget" link that's closest to the bottom of the page.
- From the gadget list, under "basics", select the HTML/JavaScript gadget.
- Copy the provided VigLink code to your clipboard
- Back on Blogger's HTML/JavaScript gadget page, paste the VigLink code under "content". (Leave the title empty.) Click "save".
- You're finished. You can use the installation checker to make sure VigLink is working on your blog.
The Viglink service can also installed on other types of sites. For WordPress there is a plugin that makes the install very simple. Just search for the plugin by name from the plugin menu in the backend of your WordPress site. You'll need to insert a code from the Viglink site once you have the plugin installed.
Viglink Disclosure FCC rules require bloggers to disclose connections to advertisers. If you do not do this already, grab one of the buttons from the site and install it (a little piece of code). As a bonus, anyone that joins the service by following the disclosure link gets credited as a referral from your site. You can find these badges on the FTC Disclosure link at the very bottom of the page once you have an account.
Optionally Add Your Blogger Blog Google and Bing Webmaster Tools
Submit Blogger Blog to Bing Webmaster Tools To add your Blogger Blog to Bing Webmaster Tools, first add your site to your Bing Webmaster's account. You will also need to verify ownership of your blog. After your blog is added, it's a good idea to ping Bing regularly (maybe using IFTTT.com).
