Blogging tips and tricks

Adding Borders to Blog Content in Blogger

By goldenworks on 4/20/2013

As you visit some blogs that there are borders that surround the post body and sidebar title. Adding borders to blog different parts somehow adds beauty on it. I will show very simple steps on how to do it. But before you will jump to the tutorial please click this link to be aquainted with the different border styles and its uses.

Adding Outside Main Borders to Blog Content in Blogger

Step 1. Got to Blogger Dashboard >> Template >> Edit HTML

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

.content-inner {
border-top: 1px dashed #242424;
border-right:1px dashed #242424;
border-bottom:1px dashed #242424;

border-left:1px dashed #242424;

}

Adding Borders To Post- Outer

Copy and paste the code below above ]]></b:skin>

.post-outer {

border-top: 1px dashed #242424;

border-right: 1px dashed #242424;

border-bottom: 1px dashed #242424;

border-left: 1px dashed #242424;

}

Adding Borders to Sidebar Title

#Your Sidebar Title ID h2 {
border-top: 1px dashed #242424;
border-right: 1px dashed #242424;
border-bottom:1px dashed #242424;
border-left: 1px dashed #242424;
}

Short Customizations:

1. To change the size of the border, you can replace 1px in every border side(top,right,bottom,left)
2. To change the border style, replace dashed with your own. You can select/choose it here.
3. To change the color of your border, replace 242424 with your own hexadecimal color, you can select it with our color code generator.
Step 3. Save your Template. Enjoy!

Hiding or Removing "subscribe to Post Atom Link" in Blogger

By goldenworks on 4/20/2013

With the help of Feedburner, readers can easily subscribe to your blog posts by simply entering their email address at box provided, but we know already that in the template that we are using, blogger had already installed a "Subscibe to Post Atom" link so that visitors could subscribe through to Atom feeds which has the same function. Furthermore, this occupies additional space in your blog template bottom and it doesn't look good. In this scenario, you have two options, it's either to hide it temporarily or to remove it completely.

Hiding or Removing "Subscribe to Post Atom" Link in Blogger

Hiding "Subscribe to Post Atom" Link

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML,

Step 2. Search for the code ]]></b:skin> and just above it paste the code below,

.feed-links { display:none; }

Step 3. Save your template. Enjoy!

Removing "Subscribe to Post Atom" Link

Always back -up your template if in case things go wrong.

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML,

Step 2. Look for the code below, and delete it,

<b:include name='feedLinks'/>

Step 3. Save your template and you can now smile! Enjoy!
Credits goes to Blogbulk.com with little modification from me.

How to Get Your Feedburner Email Feedlink

By goldenworks on 4/18/2013

In order to have an Email Subscription Widget in your blogger blog, you must have get first a Feedburner Email Feedlink. In this article, I will show very simple steps in getting your Feedburner Email Feedlink.

How to Get Your Feedburner Email Feedlink

Step 1. Log in To Blogger account
Step 2. Go to feedburner.com
Step 3. Type your blog url in blank box as shown in the screenshot below, then click next

Step 4. After clicking Next, you will be taken to this page and click again the next button as shown in the image below,

Step 5. After identifying your feed source, feedburner will give your feed title and feed address, then simply click next

Step 6. After clicking next, you will be brought to your Feedburner Account Dashboard, hit Publicize and click Email Subscriptions. The image below may help elaborate this particular step

Step 7. It is now time to get your HTML inside the box. (Don't forget to click the code to be used in blogger if you want the code to be inserted directly to your Add Page Element in blogger). Please observe the photo below

In my case the set of codes are

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/meETl', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="blogspot/meETl" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

The highlighted text in blue is the feedburner Email Feedlink and the pink highlighted text is the feed burner tiltle ( you can find this feedburner title also at the end of your feedburner Email feedlink)

Click here to add a beautiful Email Subscription Widget to blogger

Thank you for patience and Enjoy!

Adding Email Subscription Widget to Blogger/Blogspot

By goldenworks on 4/18/2013

In customizing our sidebar, we should not forget to add an email subscription widget on it, not only to add spice to your sidebar but also it enhances your visitor to follow your blog's up to date post. This tutorial will show you not only adding email subscription widget but you can also customize it with your preferences.
Before proceeding to the tutorial, please get first your Feedburner Email Feedlink here. You can use our tutorial for your guide.

Adding Email Subscription Widget to Blogger/Blogspot

Step 1. Go to Blogger Dashboard,
Step 2. Click Lay out,
Step 3. Click Add Gadget,
Step 4. In the Pop-up window, scroll down and select HTML/Javascript (click the plus sign),
Step 5. In the blank box, paste the code below,

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLbkrOD3VzqK6e2HkX3lFNAUmNAbKBD4MMA2SMlLRX46Y6TZLO2RKlPLqtIvMkthLSXURMsz4KQ3uJTRlDsq6KNs6bK8PsLO1Kg1nX7rdwjdImhy5ofP3IEDdjnyxTAoCuq36SMonuGgSs/s1600/email.png) no-repeat 0px 12px ;
width:250px;
padding:10px 0 0 55px;
float:left;
font-size:.7 em;
font-weight:normal;
margin:-15 0 1px -5;
color:#000000;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:1px normal;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#158aee;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:12px;
width:170px;
color:#666;}
</style>
<div class="mbt-email">
Receive LATEST TUTORIALS via email by submitting your Email address below <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/meETl', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter your email here...";}" onfocus="if (this.value == "Enter your Email here...") {this.value = "";}" value="Enter your Email here..." type="text" />
<input type="hidden" value=" blogspot/meETI " name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="OK" type="SUBMIT" />
</form>
</div>

Short customization: Optional

First part (.mbt-email)

1. To change the font size of the text "Receive LATEST TUTORIALS via email by submitting your Email address below", change .7 (increase numerical value will also increase its size and lower value will also decrease its size)

2. To change the color of the text "Receive LATEST TUTORIALS.........." replace the hexadecimal color #000000. You can choose it here.

Second part (.mbt-emailsubmit)

1. To change the border style of the box that encloses the text "OK", change 1px solid #ccc, you can choose it here
2. To change the font size of the text " OK", change 12 px (increase numerical value will also increase its size and lower value will also decrease its size)

Third part (.mbt-emailsubmit:hover)
1. To change the color of the box that bears the text "OK", change the hexadecimal color 158aee with your own color preferences. You can choose it through our color code generator

Fourth part (.textarea)

1. To increase the size of the text area, change 170px with own text area size (it depends upon the length of the texts that you want to put inside the box)

Fifth Part (div class="mbt-email")

1.To change the text above the text area,change "Receive LATEST TUTORIALS via email by submitting your Email address below" with your own
2. Replace http://feedburner.google.com/fb/a/mailverify?uri=blogspot/JHOLw with your own Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
3. Replace blogspot/JHOLw with your own, you can find it in your feedburner account after the equal sign, in my case blogspot/JHOLw is the last code.

Step 6. Click Save Arrangement and Enjoy!
Thanks for your patience.

The credits goes to Allbloging tips and to the author of this blog.

How to Customize Sidebar Header in Blogger

By goldenworks on 4/16/2013

One of the things that a blogger should not forget is to customize his/her sidebar header according to his/her likeness. In this tutorial, I will show on how to add background image or color to your blogger sidebar header.

adding background image to sidebar header

How to Customize Sidebar Header in Blogger

Step 1. Identify first the ID of your widgets/gadgets that you have put in your sidebar section,

Steps in identifying your individual widget Id in your blogger template.
1.1 In the other window, Log- in to your Blogger Account go to Blogger Dashboard, click Template, hit Edit HTML button,

1.2 Click Jump to Widget then click the name of your widget or if you can't find your widget's name in the Jump Widget Menu, you can Press Control F and Type the name of your widget inside the search box then click Enter in your keyboard,

1.3 After finding the name of your widget, for example you are looking for the Popular Post Widget, you can find this set of code below,

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

The bolded text in red above is the ID of your Popular Post Widget. Repeat step no. 1.3 to find the ID of your other widgets.

There is also another way of locating or knowing the ID of your widget. Here are the steps.

Go to your Blogger Lay-out page
Find the symbol below or the text edit ( in blue color)

Click it and you will see the codes that you have inserted before,click the link at the top portion

The last code being underline with the red arrow above (HTML12) is the ID of the widget

Step 2. After getting your Individual Widget ID, save that for you will use that in the next step,
Step 3. In the other window, go to Blogger Dashboard, click Template and hit Edit HTML button,

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

#PopularPosts1 h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWWVeUagGB8oTT3qgwmKu3bxPANo8HT51EGgiUmsvoCpP3E6bB0JIRczfsd_mtfkuFj-zTx2Satf_MzWAAJMyfhEU-G1QHu8Salsf9Mk1LjDd7l4t37kJtc3Wfi7PuM2oOogtS2Ty5uWA/s1600/photo++for+sidebar.jpg);
height:30px;
width: 248px;
margin-left: 0px;
padding-top:0px;
font-family: Sans-serif, Arial, Helvetica;
font-size: 25px;
text-align: center;
}

Short Customizations:

Replace the text in red with your own sidebar widget ID that you have save in Step 2.
To change the image background,Replace URL image in (orange color) with your own image (image size is width=248 px by height= 41px) or depending upon the width lay-out of your sidebar.
Adjust the height and width of your image by replacing the numerical value in yellow highlighted text
Adjust the margin and depending upon the placement of the image background in your side bar
Adjust placement of the title of the widget inside the image background. You can also place that in left or in the right corner of the background image.

Step 5. Save your template and Enjoy.

How to Add Recent Comment Widget With Thumbnails

By goldenworks on 4/15/2013

Having a problem on how to invite your readers to post creditable comments from your post? Posting a comment takes time for your readers to think of what will be their comment to be posted in your comment box area and sometimes they just leave and go for another blog to search for the answer of their questions. But when they leaved a short comment, it means that they are interested with the topic or they want to ask another thing which you did not include in your article. Consequently, in the long run you as a blogger could established a regular readers in your blog. In order for you to that, we will put a widget in your sidebar that would invite them to leave their comments below your post because as they leave comments it will automatically be found in your Recent Comment widget in your sidebar.

How to Add Recent Comment Widget With Thumbnails

Step 1. Go to Blogger Dashboard, click Lay-out and hit Add Gadget,

Step 2. After clicking the Add Gadget, a pop-up window will appear. Scroll down and select
HTML/Javascript (click the plus sign)

Step 3. Write a title of your widget and place the code below inside the empty box

<style type="text/css">

ul.w2b_recent_comments {

list-style: none;

margin: 0;

padding: 0;

}

.w2b_recent_comments li {

background: none !important;

margin: 0 0 6px !important;

padding: 0 0 6px 0 !important;

display: block;

clear: both;

overflow: hidden;

list-style: none;

}

.w2b_recent_comments li .avatarImage {

padding: 3px;

background: #fefefe;

-webkit-box-shadow: 0 1px 1px #ccc;

-moz-box-shadow: 0 1px 1px #ccc;

box-shadow: 0 1px 1px #ccc;

float: left;

margin: 0 6px 0 0;

position: relative;

overflow: hidden;

}

.avatarRound {

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;

}

.w2b_recent_comments li img {

padding: 0px;

position: relative;

overflow: hidden;

display: block;

}

.w2b_recent_comments li span {

margin-top: 4px;

color: #666;

display: block;

font-size: 12px;

font-style: italic;

line-height: 1.4;

}

</style>

<script type="text/javascript">

//<![CDATA[

// Recent Comments Settings

var

numComments = 5,

showAvatar = true,

avatarSize = 60,

roundAvatar = true,

characters = 40,

showMorelink = false,

moreLinktext = "More »",

defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",

hideCredits = true;

//]]>

</script>

<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>

<script type="text/javascript" src="http://name of your blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Short Customization:

1.To change the number of comments to appear in the widget, replace the value of 5 in numComments= 5 and max-results=5"
2. Change the bold text in red name of your blog with your own blog's name
3. Change the thumbnail size (avatar) 60 with your own

Step 4. Hit Save Template and enjoy!
Credits goes to helplogger with some modification from me.

Subscribe to: Posts ( Atom )