Blogging tips and tricks

How To Add Gadget Above Header Section

By goldenworks on 6/14/2013

It has been a couple of days already when I published a post regarding on how to add adsense code or any gadgets beside the header section. Now, I am thinking to make another tutorial on adding gadget still in the neighboring parts of the header section and that is above on it.
If we try to drag some gadgets above the header area, we found it difficult because the default template of Blogger that we are using is locked, so we will try to unlock it and add widget (not to mention the navbar and favicon section).You will how, if you follow these steps.

How To Add Adsense,Banner,or any Gadget Above Your Header Section

Step 1. In your Blogger Dashboard, click the Template button,
Step 2. (Have a back-up of your Template). Hit the HTML button,
Step 3. Search for the code below,

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 4. Replace '1' with '3' or your desired number of widgets to be added at the top of your header area
Step 5. Replace 'no' with 'yes' in order to show your added gadget/element.
Step 6. Save your Template

How to Remove Moz- Border- Radius or Rounded Borders in Blogger

By goldenworks on 6/12/2013

In Blogger Template (especifically Picture Window) that I am using, I meet a small problem regarding on how to remove the moz-border-radius in my menu tabs and the surrounding corners of its body and footer area . But a big big thanks! to Google Chrome in his capability to let me see how my design looks like by adjusting the settings live on screen without going to my Blogger template editor page and to make the story short, I had succeeded in finding a solution of that problem. In this tutorial I will share you the steps on how to make it and the CSS is highly customizable according to your preferences.

INTO THIS

How to Remove Moz- Border- Radius in Menutabs, Body and Footer Section and Replace it with Straight Vertical Line

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

.tabs-inner .widget li a {
-moz-border-radius: 0;
-webkit-border-top-left-radius:0;
-webkit-border-top-right-radius: 0;
border-radius: 0 0 0 0;
border-top-left-radius:0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0;
}
.tabs-inner .widget li:first-child a {
border-top-left-radius:0px;
}
.footer-outer{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.content-outer, .region-inner {
min-height:2px ;
margin: 0 auto ;
background-color:#FAFAFA;
border-top-left-radius:0;
border-top-right-radius:0;
}

Explanation:

The first set of code ( .tabs-inner .widget li a) is responsible for removing the moz-border-radius of your menu-tabs (inner part).
The second set of code (.tabs-inner .widget li:first-child a ) is responsible in removing the moz-border-radius (border top left portion) in the first tab of your menu-tabs. In my case this the top left portion of my home tab.
The third part (.footer-outer ) works in removing those moz-border-radius in your footer area both in left and right portion of it.
And finally, the last part (.content-outer, .region-inner ) removes those moz-border-radius above your content- outer region.

Customization (Optional):
1. Click here to change the hexadecimal color (FAFAFA)

Step 5. Click preview to see the initial effect of the codes
Step 6. Finally, Save your Template and you are done. Enjoy!

How to Customize Labels in Blogger Using CSS3

By goldenworks on 6/08/2013

I've done a number of customizations in my blogger sidebar already like putting background to its sidebar title, putting background on it and for this time I will share you a trick which I've learned from helperblogger and that is customizing the label gadget using CSS3. Now, let us find out how to apply this hack to your blogger Template.

Note: Before using this tutorial, set your label in cloud style.

Customizing Blogger Labels Using CSS3

Check Also:
How to Customize Blogger Labels Using Bricks Style!
Step 1. Go to your Blogger Dashboard
Step 2. Hit the Template button (always click the back- up button before editing your template)
Step 3. Click the Edit HTML button.
Step 4. Look (control F) the code ]]></b:skin> and just above it, paste the code below:

.label-size {
float: left;
margin: 0 0 7px 20px;
position: relative;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.75em;
font-weight: bold;
text-decoration: none;
color: #996633;
text-shadow: 0px 1px 0px rgba(255,255,255,.4);
padding: 0.417em 0.417em 0.417em 0.917em;
border-top: 1px solid #d99d38;
border-right: 1px solid #d99d38;
border-bottom: 1px solid #d99d38;
-webkit-border-radius: 0 0.25em 0.25em 0;
-moz-border-radius: 0 0.25em 0.25em 0;
border-radius: 0 0.25em 0.25em 0;
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
-webkit-box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
z-index: 1;
}
.label-count {
white-space: nowrap;
display: none;
}
.label-size:before {
content: '';
width: 1.30em;
height: 1.39em;
background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
position: absolute;
left: -0.69em;
top: .2em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-left: 1px solid #d99d38;
border-bottom: 1px solid #d99d38;
-webkit-border-radius: 0 0 0 0.25em;
-moz-border-radius: 0 0 0 0.25em;
border-radius: 0 0 0 0.25em;
z-index: 1;
}

.label-size:after {
content: '';
width: 0.5em;
height: 0.5em;
background: #fff;
-webkit-border-radius: 4.167em;
-moz-border-radius: 4.167em;
border-radius: 4.167em;
border: 1px solid #d99d38;
-webkit-box-shadow: 0 1px 0 #faeaba;
-moz-box-shadow: 0 1px 0 #faeaba;
box-shadow: 0 1px 0 #faeaba;
position: absolute;
top: 0.667em;
left: -0.083em;
z-index: 9999;
}

#Label1 {
height: 210px;
}

.label-size:hover {
background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color: #e1b160;
}

.label-size:hover:before {
background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color: #e1b160;
}

Customization (Optional):

1. Simply delete the texts/code being highlighted in orange color above in order to show the number of posts bearing the name of particular label beside the label tag as shown in the screenshot below.
2. Adjust the height of the label by changing the height (in yellow text) above (210px)

Step 5. Finally, click the Save button. Enjoy!

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.

Subscribe to: Posts ( Atom )