Posts

Showing posts from December, 2012

Create a Dynamic Social Network Buttons

Image
Social Network buttons have been very useful for a website/blog to be known more. I guess having a social network button is a "must" in a blog/website. It helps a lot, and placing it correctly should be consider.

The easiest way to add social network buttons is through addthis.  <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_pinterest_pinit"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50e02cc9537237fb"></script> <!-- AddThis Button END -->
You can copy the code above or just go to their site and choose a different style. Before doing this, v…

Use textarea Element when Posting Codes

Sometimes when we want to post a code in a certain posts, we used blockquote. As you notice my past posts with codes are posted using the blockquote tag. And it doesn't look nice! Honestly, I want to change my posts with codes using textarea tag instead of blockquote but I'm too lazy to do it. :P

The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.-W3Schools
Anyway, this is a convenient way for your reader to copy the code by using <textarea> tag instead of just the blockquote. Here's the demo:
Click Me For Demo

Add Breadcrumb navigation to your Blog

Image
Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.-Wikipedia The method that we will use here is the label of your posts. First, let's set our blog and allow label to show.
Then, from Dashboard > Template > Edit HTML > Find "]]></b:skin>" and paste the code above it
#labelstyle{color:#666666;font-size:12px;font-family:Arial, serif;padding-top:3px} #labelstyle a{color:#538cd6} #labelstyle a:hover{text-decoration:none;color:#000}

Learn more about ID and Class Selector

Image
This should be a "must" learn in HTML and CSS. It helps you to beautify a specific element in your  HTML body.
SELECTOR ID CLASS CHARACTERISTICS unique
single usage style many elements
can be use several times DEFINE WITH "#" "." It works like this, let's say for example in your HTML body

<div id="header-wrapper"> <p class="txtbody"> This is a sample paragraph text using class selector</p> <p> This has no class</p> <p class="txtbody"> This is a another sample paragraph text using class selector</p> </div>

You can style the id named header-wrapper and the class named txtbody by using CSS, define them by

Create a Gadget with Posts from a Specific Label

Image
This is the scenario here, you want to have a gadget/widget containing the posts of a specific label. Let's say, you have 10 posts having an "ABC" label and you want to create a gadget containing those posts. Sounds confusing but it's simple to achieve using Feedburner and it's BuzzBoost service.

Before proceeding, you may take a look on how to create a feed out of your blog posts here.

Add Related Posts with Thumbnail and Summary

Image
The related posts widget appears if one of your post has the same label with others. You need to label your posts first.

This tutorial will teach you on how to add related posts widget below your every posts. Don't worry this is simple, just copy and paste. All you need to do is follow the steps and learn to customize it by CSS. It has three parts.

Validate and Optimize Your CSS

Image
Upon reading this, I believed you have knowledge on how CSS works.
CSS (Cascading Style Sheet) in layman's term is the one responsible for dressing-up your web page. It adds colors your dull web page. Without CSS, by default the body background is white, links are blue, all text were align in left, font is in Times New Roman with size 12px, etc.

Too much for the intro...

5 Reasons Not To Apply Google Adsense

Image
You have a blog, you want to earn money from it but there are things that you must consider before monetizing it. Some bloggers were hasty getting money from their blog but failed to earn a considerable amount. Then they got bored, stop blogging. It doesn't have to end  with that. All you need is patience and some pointers, motivation and lots of ideas which are original and not "copy-paste".

Here are some pointers, which I believe that should be consider before applying Google Adsense.

To Do: Before and After Creating a Blog

Image
Blogging is available for all but there are some pointers that must be taken out. It's not just about writing and publishing an article but also following ethics, standards, respecting contents and opinions.

That was for the introduction! :D Before Creating a Blogger Blog
1. Think of your Blog Title of course, it should be precise and describes your blog content.
2. Think of your Blog Domain.  Please do not use numbers on it like for example "123loveonline" unless it tells about your blog like this one: "54Blogger: List 5 things about blogging". And do not come up with this idea,