Blogging tips and tricks

Adding adsense, search box or any gadget beside header

By goldenworks on 6/07/2013

Make puzzled on how to put adsense code, search box, banner or any gadget beside your header image? You are not wrong in landing this page because I will tell you the steps on how to make it. Having a gadget beside your header adds professionality to your blog and have a big impact on your blog traffic as well.
So, let us now jump to the tutorial.

Adding Adsense, Search Box or any Gadget Beside Header

Step 1. Go to Blogger Dashboard
Step 2. Click Template
Step 3. Hit the Edit HTML button
Step 4. Look for the code below

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR OWN HEADER TITLE/IMAGE' type='Header'/>
</b:section>

Step 5. Add the following code below right after the code above

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

So, your final code will be:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR OWN HEADER TITLE/IMAGE' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Now you are halfway done in putting another section beside your blog title section.
Step 6. We will add css to your existing header and to the new section that you had just add recently. Copy the code below and paste it above ]]></b:skin>

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

Step 7. Save your Template.

Installing the Widget

It is now time to add the widget beside your header (it may be in form of banner, adsense code or any gadgets). Do it as you normally do in putting gadget or widget in your blogger lay -out.

Step 1. Go to Blogger Dashboard
Step 2. Click Lay -out
Step 3. Hit the Add a Gadget button and paste inside it your widget codes.

Note: Drag or place your new gadget below your blog header-title in order to appear it beside the image header by the time you save it.

Step 4. And finally, click the Save Arrangement button. Enjoy!

HTML Encoder Widget Generator For Blogger

By goldenworks on 6/01/2013

In order for a blogger/web designer to have an HTML Encoder widget in one of his pages, he must install special javascript code in order to parse properly the encoded texts. Please follow the steps below in installing this tool in your template.

Live Demo

HTML Encoder Widget Generator For Blogger

Installing the Javascript and CSS code in your Template
Step 1. Go to your Blogger Dashboard
Step 2. Click Template
Step 3. Hit the Edit HTML button
Step 4. Look for the code </head> and just above it paste the code below,

<script type='text/javascript'>
//<![CDATA[
function html2entities(){
var re=/[(<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "<"
else if (match==">")
return ">"
else if (match=="\"")
return """
else if (match=="'")
return "'"
else if (match=="&")
return "&"
}
//]]>

</script>

Step 5. Find the code ]]></b:skin and paste the CSS stylish below just before or above this tag,

/********HTML Converter And Counters CSS*****/
input.wbt2 {
color:#333;
font: bold 14px Calibri,Rockwell,helvetica,sans-serif;
border:1px solid #a2ccdb;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3q83BalAUx-DNE5DmWBRWECgaIhse6lxVTjY-T_LWQ3i6ufPkT7fjJSG55bZkrPYFW3jwSdFYBaIp45V24llFc0BIKdMo6d6v-EaTxhy-ygQ2-er7avNk_uQRwF4NeZZ6cdLZMypjNGo/s1600/postbg.png) repeat-x scroll left top;
cursor:pointer;
}
input.wbt2hov {
border:1px solid #a2ccdb;
background:#0090ff;
color: #fff;
}
/******Text Area of All Tools*******/
textarea {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3q83BalAUx-DNE5DmWBRWECgaIhse6lxVTjY-T_LWQ3i6ufPkT7fjJSG55bZkrPYFW3jwSdFYBaIp45V24llFc0BIKdMo6d6v-EaTxhy-ygQ2-er7avNk_uQRwF4NeZZ6cdLZMypjNGo/s1600/postbg.png) repeat-x scroll left top;
width:100%;
color:#666;
font: normal 13px Georgia,Times,sans-serif, verdana;
border:1px solid #a2ccdb;
}

Step 6. Save your Template and Enjoy!

Everytime you need to use this widget in your posts or in your new post, just paste the code below in your blogger editor page (switch it to HTML mode).

<form>

<textarea name="data1" style="height: 200px; width: 590px;"></textarea> <input class="wbt2" onclick="html2entities(this.form.data1)" onmouseout="this.className='wbt2'" onmouseover="this.className='wbt2 wbt2hov'" type="button" value="Convert It" /> <input class="wbt2" onmouseout="this.className='wbt2'" onmouseover="this.className='wbt2 wbt2hov'" type="reset" value="Clear" /> </form>

HTML Free Editor Generator

By goldenworks on 5/31/2013

I was wondering why other web developers as they try to post and publish comments at the comment box and put some links on it, they just found it very easy, that is why it made me ponder for a couple of days on how to make my own HTML encoder to make my post commenters to have a guide in posting javascript and HTML codes at the comment box section. A little idea on the process.

'<' becomes '&alt;'
'>' becomes '>'
'"' (double quote) becomes '&quote;'
''' (single quote) becomes '''
'&' becomes '&'

The HTML/Javascript Encoder: Please enter your data inside the box

Click link to install this tool in your template.

Removing or Hiding Blogger Navbar In Your Blog

By goldenworks on 5/28/2013

Customizing one's template is part of our blogging activity in order that the free default template provided by us by Blogger will look attractive or beautiful before the eyes of our readers and advertisers. There are many things in the default template that we should take a look and one of that is the blogger navigation bar. Although this part is quite helpful for it allows us to sign- in to our blogger account, publish or update some posts or made costumizations on it but this navigation bar doesn't add professional looks to our blog. In this tutorial, I will show you the process on how to remove or hide Blogger navigation bar in your blog.

How to Remove or Hide Blogger Navigation Bar In your Blog

Step 1. Go to Blogger Dashboard
Step 2. Click Template
Step 3. Hit Edit HTML button
Step 4. Look for the code ]]></b:skin and just above it, paste the code below,

#navbar { height: 0px; visibility: hidden; display: none;}
#navbar-iframe { height: 0px; visibility: hidden; display: none;}

Step 5. Finally, click the Save button.
If you want to appear the blogger navigation bar in the future, just remove the above CSS and it will back to its position.

Another Way of Hiding or Removing Blogger Navigation Bar In Your Blog

Step 1. Go to Blogger Dashboard
Step 2. Click Lay-out
Step 3. Locate Navbar (navigation bar) button
Step 4. Switch it in OFF mode

Step 5. Save it.
I hope that you found this article helpful. You can leave your thoughts at the comment box below.
Happy Blogging Day!!!

How To Make Sitemap Page In Blogger

By goldenworks on 5/27/2013

Just recently I have read an email from Google Adsense that one their main criteria of a certain blog to be approved as their ad publisher is to have a sitemap page in my blog, so I was researching and keep on experimenting on how to do it. But of course not only for that reason why should I have that page in my blog but to let my readers to have an easy navigation and provide meaningful experiences on all my posts published. Having a sitemap page also increases your page rank and consequently a bigger chance to boost organic traffic. In this tutorial I will show on how to make a sitemap page that will automatically update each time you will create and publish a post(s) and the best thing is that you will not edit your blogger template anymore. Please take a look first in my blogger sitemap for a live demo.

Create A Sitemap Page In Blogger/Blogspot

Step 1. Go to Blogger Dashboard
Step 2. Click New Pages >> New page >> Blank Page
Step 3. Switch the Blogger Page Editor page in the HTML mode
Step 4. Then copy the code below and paste it in your Blogger Post Editor page ( in Step 3)

<script>
var numposts = 1000;
var showpostdate = true;
var showpostsummary = false;
var numchars = 200;
</script>
<script>
function rp(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' ' + cdyear + ' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
</script>

<script src="http://www.yourwebsitenamehere.com/atom.xml?redirect=false&start-index=1&max-results=1000&orderby=published&alt=json-in-script&callback=rp"></script>

Customization:
1. If you have published more than 1000 posts in your blog/site just change the number (1000 ) depending on your preferences.
2. If you want to hide the post date beside the post title change the text (true) with false.
3. The most important thing is you must replace the line (www.yourwebsitenamehere.com) with the URL of your blog/site to make this trick work on your blog.

Step 5. Click the Publish button and get the url and paste it in your in your sidebar or any part of your blog's body.
You are now done making a list of all posts in just a single page.

Another Version of Sitemap Page With Post Titles Separated by Month and Year

Step 1. Repeat step 1-3 above.
Step 2. Copy the code below and paste it your Blogger Post Editor page (new post).

<script>
var numposts = 1000;
var showpostdate = true;
var showpostsummary = false;
var numchars = 200;
var lastDate ="";
</script>
<script>
function rp(json) {
document.write('<ul style=list-style-type:none;>');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);

var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<S[^>]*>/g;
postcontent = postcontent.replace(re, "");

if (lastDate!=cdyear + monthnames[parseInt(cdmonth,10)])
{
document.write('<li><h4>' + monthnames[parseInt(cdmonth,10)] + ' ' +cdyear +'</h4></li>');
lastDate=cdyear + monthnames[parseInt(cdmonth,10)]
}
document.write('<li> ' + cdday +' ');
document.write(posttitle);

if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
</script>

<script src="http://www.yourwebsitenamehere.com/atom.xml?redirect=false&start-index=1&max-results=50000&orderby=published&alt=json-in-script&callback=rp"></script>

Please follow the customization above.
Step 3. Publish it in an earlier date (step 5 above)
I hope you guys like this little trick. Feel ease to drop comment/suggestions or even additional info below this article to hear your views and feedback. Enjoy!
Reference: Storiesofmaria

Customize Author's Comments Background In Blogger Comments Box

By goldenworks on 5/19/2013

Wow, I'm back in my computer's table and now it's time make another quality post that was keep bothering me anytime someone comment my posts and made some replies on it. Want to ask what is it, that is how to make my comments background different from my readers' comments. But thank God because I succeeded in customizing it and I will also acknowledge yoboy for the initial codes and I add it with another css to make it more attractive. So, let us go with the process!

Customize Author's Comments In Blogger Comments Box

Step 1. Go to blogger Dashboard >> Template >> Edit HTML
Step 2. Look for this tag </body> or (control F to be easier),
Step 3. Just above or before that tag place the code below,

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author').closest('.comment-block')
.css('border', '1px solid #FFA500')
.css('background' url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVgLxR_qCdlRknDsYjoE_QQV-v_-SZR795PuZHribqmstTpAITJ8sEl2HJWlzeuVirzjR29SGWBvJBWkMQhmFiMi80RmjZb9u1q3ys6gZlOHYPvQoDJLWf9opM2gBu5T00vgWybYFjZI/s1600/comment-author.png")')
.css('color', '#444444')
.css('font-size', '12px')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

Step 4. Look for the tag ]]></b:skin>, and just above it paste the CSS code below:

.comments .comments-content .icon.blog-author {

position: absolute;

top: -2px;

right: -2px;

margin: 0;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVgLxR_qCdlRknDsYjoE_QQV-v_-SZR795PuZHribqmstTpAITJ8sEl2HJWlzeuVirzjR29SGWBvJBWkMQhmFiMi80RmjZb9u1q3ys6gZlOHYPvQoDJLWf9opM2gBu5T00vgWybYFjZI/s1600/comment-author.png);

width: 36px;

height: 36px;

}

Note: Your URL image (bolded pink text) must match with each other

Please use our color code generator to select a wide variety of hexadecimal colors

Short Customization (Optional):
A. Border

Change 1px to increase or decrease the border size of author's comment box. Greater value increases the border size and low value decreases the border also.
Replace solid with your own border styles.
Replace FFA500 to change the border color of your (author's) comment box

B. Background

If you want to use your own background image, replace the default background url image https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVgLxR_qCdlRknDsYjoE_QQV-v_-SZR795PuZHribqmstTpAITJ8sEl2HJWlzeuVirzjR29SGWBvJBWkMQhmFiMi80RmjZb9u1q3ys6gZlOHYPvQoDJLWf9opM2gBu5T00vgWybYFjZI/s1600/comment-author.png with your's.
You may replace the background image above with image URL below:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXjsOmc7Gm41PEfrClJmEE36UU4gDT2qSdjyfAtm_EFtcaam9Ef9jO_403PtCBZurzLsA0-ErqvYrxXsN5BKY88eisWZdGE92I7ju0IHJdlalMIFrLvMNjl7fow2E64bymoridTBnFaQ/s1600/author-+comment.png

For white/transparent background

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4kKyIUmLxNwA2KPsKBp1mTtgyzc-uLBO9fGZOF1bTTuZkHtb-HqRmnxlNrftgGnGY4mBjQgyacC9aNwMzS9TI1LctBaiE0kbZw0ZNiaC-D9hVEc-cEs6x30q7cy-eGLlyw1i1ULhF8o/s1600/white-author's+comment.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2HaYcWSKGfLJbs3f3pS_eXiAQHjp6RzNn42C1oW6a7zbbrBzDpLd9iUvLoqs3Cd-i-SWD2Zz5xa9fHhKZmQnObSwb1KW2WGyvum8QHa13ijRUt-XbhhmkBxufsYiGKxauhsVsTE17js/s1600/author+comment+box.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNGdczmIIazxGGx1Wre8ylu4xkeKbJU7_fjya9DK1RPoj8weoswaIIHSg-fKn6aNO9Sd7SdXaRLuPk_Wmigcwb7iGRr33eZ5rSCuD5M6hZump8yk0vU7zvFLE3pomclmswPnvrQH-92Hc/s1600/author+comment+box+2.png

C. Font Color and Font Size

Replace 444444 with your color preference, and change 12px to adjust its font size.

Step 5. Save your template and visit your new comment box background. Enjoy!

Subscribe to: Posts ( Atom )