The Code of Blogging

Favorite Blogs Award from CodeofBlogging

Here are new a form of back links builder that is spreading like wildfire across the Blogosphere.

Begin Copy

This seal is called “Favorite Blogs”

This award is given by http://codeofblogging.blogspot.com Blogger who gave you the award.

This “Favorite Blogs” is awarded to http://yourblogname.blogspot.com Put your blog URL here.

This is the easy way and the fastest way to :
1. Make your Authority Technorati explode.
2. Increase your Google Page Rank.
3. Get more traffic to your blog.
4. Makes more new friends.

The rules is very simple as follows :
1. Start copy from “Begin Copy” until “End Copy” to your blog.
2. Put your own blog name and link.
3. Tag your friends as much as you can.

Below is the list of my favorite blogs I gave this award because I find their content interesting. (Type in your favorite blogs)

Please also feel free to grab this Award and pass it to anyone even if they've already received it.

Thanks,

AgentPX Your name

End Copy

Start copying by highlighting from Start Copy up to End Copy then press ctrl+A followed by ctrl+C

I first saw this at http://dedeandro.blogspot.com/ The first one is called “Friend Chain Award” When I trace the chain I landed at http://lilyarbee.blogspot.com

And the banner is here.

The second one is called “Kreativ Blogger” which is first seen at http://unboredme.blogspot.com which were originally given by http://ladyinpurple-jazzie.blogspot.com

And the banner is here.

There are rules for both back links builder.

I haven’t receive the two awards above so I created a brand new seal.

Read the full article->

Top 10 Blogger tools you can count on

As a Blogger we all need tools to create our Articles in an easy and the quickest way possible.

These free tools are the utilities I personally use when writing an article. I hope you find it all useful. The list are presented in a sequential manner from preparing your materials up to publishing your article.

1) Screen Hunter

lets you capture desktop screenshots for your articles. This Software is very easy to use. Upon Installation you just need to setup two options (HotKey and the location to save images) then you are ready to go.

2) Page Saver

If you need a Screenshot of a Web page, you can also use Screen Hunter to capture portion of the web page you wish to save. But how about when you want to capture the whole page including those that are not visible? Then Page Saver lets you to save an Image of Visible portion, an Entire page or even a Frame of a Web page you are currently viewing.

3) Paint.Net

After you completed saving Images, You’re going to need some graphics editor like Paint.Net. This utility resemble Photoshop’s functionality in a simplified and easy to use manner. If you just need to crop or resize an Image, Spare yourself from using time consuming and memory expensive Graphics editor specially when loading.

4) Windows Live Writer

When all of your materials are ready. Instead of using a Web Designer of any kind, Windows Live Writer is specifically designed for Bloggers like us. The ease of use and publishing of this utility is totally awesome.

One feature I love most with this document writer is the retrieving of your published articles in a snap. You can also manage multiple blog site all on this software. Many blog services are supported including Wordpress, Blogger, TypePad and others.

5) NotePad++

When you started to enjoy Windows Live Writer, You’ll notice that the writer’s source view editor is not purely an HTML editor as oppose to real Web Designer’s tool. When I want to tweak some Gadget’s or HTML/Javascript, I just save it to an HTML or XML format then view and edit the file instantly with NotePad++. This utility support different formats like HTML, XML, CSS and many more.

6) ColorZilla

Have you encountered the need to find out the color of an area of a cool website you are currently viewing? Well, in ColorZilla, Color Picking is a snap. You can say goodbye to something like Color Chart. Because once installed, this utility can pick colors instantly. The software comes as a plug-in in Firefox and install a button on the leftmost bottom of the browser’s window. All you need is click that and point to the section of a webpage to which color you are interested of.

7) TubeChop

What if you find a Video that is good for your article but you only need a portion of it? Then by the sound of TubeChop you should know what I mean.

8) Woopra

Woopra (BETA) for me is one of the best Web Analytics around the internet. I currently have six of my Blog site registered on their site.

The registration is by approval. I was lucky enough to have my sites approve in just 3 days. If ever, you have to wait for the next batch approval when you sign-up. But If you are in a hurry try GetClicky.which give you only one site to monitor for a free account.

9) DropBox

Of course when you already published your article, saving your documents in your desktop is not 100% safe. Who knows when your hard disk crashes. So If you prefer to have a backup online I suggest you sign-up an account with DropBox which are giving free 2GB online storage.

10) TrueCrypt

If it’s not in your preference to save your documents online. Your documents will also be safe by downloading TrueCrypt. This utility lets you create an encrypted sub-directory or mount a folder as a drive.

The main purpose of this utility is to help keep your documents safe from frying eyes. Even saving your documents at work is also secure as TrueCrypt features an alternative folder to mount as an extra hidden folder that contains your real documents or files. In case you were forced by your office to reveal your password for your encrypted data the first dummy folder’s content will be shown instead.

With that, this article is completed with ease using the tools above. Have a nice day.

Read the full article->

Make your Blog/Site Socialize via Google Friend Connect

If you would notice, I just incorporated Google’s friend connect above the status bar of the browser. That bar is called “Social Bar”.

Many of us follow fellow Bloggers via the “Followers widget” provided by the BlogSpot template. But this widget serves nothing than just collect and display list of your friends.

Now to put that widget more useable, Make it alive via “Social Bar”. All you have to do is go to “Google Friend Connect” and sign-in using your Google account. After signing in you will see Blog/web sites you added as well as your followers for each.

To Install the Bar, select “Social Bar” under the Blog/Site you wish to have Friend Connect gadgets. Then follow the simple instruction and modify options that suite your needs. There is a button to generate HTML code for pasting into your sites. One thing worth mentioning here is that there is no instruction where to put that code. So I advise that you put the code just above your template’s </body> Tag.

There is an option to put the “Social bar” on the entire site or a selected page. I opted to put the Bar across my site.

Another exciting widget that you can add is the “Add a Sign in gadget” under “Members Gadgets”. This gadget enable visitors to sign in to your site without the hassle of managing a database. If you’re a BlogSpot user, just add an “HTML/JavaScript widget” and paste the code provided in “generate code” button.

Website owners will now be able to use the “Followers widget” which is native to BlogSpot. As BlogSpot user, You may retain the widget already installed on your template or use the version from Friend Connect. I myself replaced the default widget for added control.

The next widget is “Social gadgets” which showcase individual widget functionality of the “Social Bar” plus more.

I’d like to emphasize the use of “Recommend It” button above. If users recommended an Article in your site, that article will also appear on the “Social Bar” of the site’s where users opted to be a member of. Friends Connect is it?

So common friends lets put the bottom “Social Bar” on this blog into good use.

Google Friend Connect Awaken and strengthen your community. Let’s Socialize!

Note: For future reference. I created a central page for charts/tables/links at this location

Build your community
Anyone can join your site and discover other members by using information from a variety of services, including Google, Yahoo, Twitter, AOL, orkut, and Plaxo, strengthening your community as visitors become members.

Increase engagement
Choose social features from a catalog of gadgets created by Google and the OpenSocial developer community to keep your visitors more deeply engaged with your site and with each other.

No programming required
Simply copy and paste a few snippets of code into your site, and Friend Connect does the rest. Or use the Friend Connect APIs to integrate with existing login systems, social flows, and more.

Read the full article->

HTML Escape Code/Characters

If you need to display HTML CODE / TAGS within your HTML document. Here is a complete list of HTML Escape codes / Embed Code you can use to display an HTML TAGS properly.

Note: For future reference. I created a central page for similar charts/tables at this location

Symbol	Code	Alias	Symbol	Code	Alias
€		€	à	à	à
Space			á	á	á
!	!		â	â	â
"	"	"	ã	ã	ã
#	#		ä	ä	ä
$	$		å	å	å
%	%		æ	æ	æ
&	&	&	ç	ç	ç
'	'		è	è	è
(	(		é	é	é
)	)		ê	ê	ê
*	*		ë	ë	ë
+	+		ì	ì	ì
,	,		í	&#237	í
-	-		î	î	î
.	.		ï	ï	ï
/	/		ð	ð	ð
0	0		ñ	ñ	ñ
1	1		ò	ò	ò
2	2		ó	ó	ó
3	3		ô	ô	ô
4	4		õ	õ	õ
5	5		ö	ö	ö
6	6		÷	÷	÷
7	7		ø	ø	ø
8	8		ù	ù	ù
9	9		ú	ú	ú
:	:		û	û	û
;	;		ü	ü	ü
<	<	<	ý	ý	ý
=	=		þ	þ	þ
>	>	>	ÿ	ÿ
?	?		Ā	Ā
@	@		ā	ā
A	A		Ă	Ă
B	B		ă	ă
C	C		Ą	Ą
D	D		ą	ą
E	E		Ć	Ć
F	F		ć	ć
G	G		Ĉ	Ĉ
H	H		ĉ	ĉ
I	I		Ċ	Ċ
J	J		ċ	ċ
K	K		Č	Č
L	L		č	č
M	M		Ď	Ď
N	N		ď	ď
O	O		Đ	Đ
P	P		đ	đ
Q	Q		Ē	Ē
R	R		ē	ē
S	S		Ĕ	Ĕ
T	T		ĕ	&#277
U	U		Ė	Ė
V	V		ė	ė
W	W		Ę	Ę
X	X		ę	ę
Y	Y		Ě	Ě
Z	Z		ě	ě
[	[		Ĝ	Ĝ
\	\		ĝ	ĝ
]	]		Ğ	Ğ
^	^		ğ	ğ
_	_		Ġ	Ġ
`	`		ġ	ġ
a	a		Ģ	Ģ
b	b		ģ	ģ
c	c		Ĥ	Ĥ
d	d		ĥ	ĥ
e	e		Ħ	Ħ
f	f		ħ	ħ
g	g		Ĩ	Ĩ
h	h		ĩ	ĩ
i	i		Ī	Ī
j	j		ī	ī
k	k		Ĭ	Ĭ
l	l		ĭ	ĭ
m	m		Į	Į
n	n		į	į
o	o		İ	İ
p	p		ı	ı
q	q		Ĳ	Ĳ
r	r		ĳ	ĳ
s	s		Ĵ	Ĵ
t	t		ĵ	ĵ
u	u		Ķ	Ķ
v	v		ķ	ķ
w	w		ĸ	ĸ
x	x		Ĺ	Ĺ
y	y		ĺ	ĺ
z	z		Ļ	Ļ
{	{		ļ	ļ
\|	\|		Ľ	&#317
}	}		ľ	ľ
~	~		Ŀ	Ŀ
Non-breaking space			ŀ	ŀ
¡	¡	¡	Ł	Ł
¢	¢	¢	ł	ł
£	£	£	Ń	Ń
¤	¤	¤	ń	ń
¥	¥	¥	Ņ	Ņ
¦	¦	¦	ņ	ņ
§	§	§	Ň	Ň
¨	¨	¨	ň	ň
©	©	©	ŉ	ŉ
ª	ª	ª	Ŋ	Ŋ
«	«		ŋ	ŋ
¬	¬	¬	Ō	Ō
			ō	ō
®	®	®	Ŏ	Ŏ
¯	¯	¯	ŏ	ŏ
°	°	°	Ő	Ő
±	±	±	ő	ő
²	²	²	Œ	Œ
³	³	³	œ	œ
´	´	´	Ŕ	Ŕ
µ	µ	µ	ŕ	ŕ
¶	¶	¶	Ŗ	Ŗ
·	·	·	ŗ	ŗ
¸	¸	¸	Ř	Ř
¹	¹	¹	ř	ř
º	º	º	Ś	Ś
»	»	»	ś	ś
¼	¼	¼	Ŝ	Ŝ
½	½	½	ŝ	ŝ
¾	¾	¾	Ş	Ş
¿	¿	¿	ş	ş
À	À	À	Š	Š
Á	Á	Á	š	š
Â	Â	Â	Ţ	Ţ
Ã	Ã	Ã	ţ	ţ
Ä	Ä	Ä	Ť	Ť
Å	&#197	Å	ť	Ɂ
Æ	Æ	Æ	Ŧ	Ŧ
Ç	Ç	Ç	ŧ	ŧ
È	È	È	Ũ	Ũ
É	É	É	ũ	ũ
Ê	Ê	Ê	Ū	Ū
Ë	Ë	Ë	ū	ū
Ì	Ì	Ì	Ŭ	Ŭ
Í	Í	Í	ŭ	ŭ
Î	Î	Î	Ů	Ů
Ï	Ï	Ï	ů	ů
Ð	Ð	Ð	Ű	Ű
Ñ	Ñ	Ñ	ű	ű
Ò	Ò	Ò	Ų	Ų
Ó	Ó	Ó	ų	ų
Ô	Ô	Ô	Ŵ	Ŵ
Õ	Õ	Õ	ŵ	ŵ
Ö	Ö	Ö	Ŷ	Ŷ
×	×	×	ŷ	ŷ
Ø	Ø	Ø	Ÿ	Ÿ
Ù	Ù	Ù	Ź	&#377
Ú	Ú	Ú	ź	ź
Û	Û	Û	Ż	Ż
Ü	Ü	Ü	ż	ż
Ý	Ý	Ý	Ž	Ž
Þ	Þ	Þ	ž	ž
ß	ß	ß	ſ	ſ

Read the full article->

The Code of Bloggers Panel

Page has moved

Sorry but due to unlimited space on this blog. The page you are looking for has moved. The Code of Bloggers Central

Nothing follows

Read the full article->

Create a Related Post for your Blog

Do you want to put a “Related Post” (Demo) just like the one shown above at the bottom of every articles in your blog? Then follow this simple steps in adding your previous articles at the bottom of every post.

Why placing Related Posts' Important?

Get More Click Through Ratio (CTR) for your Pages
Get More CTR = More Adsense Impressions.
Gives Readers easy Navigation (about what to read next )
Makes your Posts Sticky

Please note that your articles must have Label or Tag for related topics to be displayed. Also, don’t forget to “Download Full Template” of your blog before making any changes.

The BLOGSPOT window will be opened on the box below when you click the login button in Step #1. You can always open a new browser window if you want a larger view of the BlogSpot window..

To follow the step by step procedure, Just hover your mouse on the menu provided beneath this box.

Step #1

Note: If the options to the right of the "New Post" button are "Edit Post, Settings, Template" then you are using Blogger Classic, which is currently unsupported.

Step #2

Select Edit HTML in the sub-menu at the top.

Click Expand Widget Templates on the right side of Edit HTML window

Step #3

Search for the </head> tag in your template. Select all text from the Code window #1 on the right. Right click and copy the selected text. Then paste the code just above the </head> tag you just searched.

Step #4

The next step is to locate <data:post.body/> in your template. This time, paste the code from Code Window #2 on the right just beneath the text you just searched.

Step #5

To test the code click

at the bottom of the "Edit HTML" window.

If there is no error you may now press the

Step #6

Congratulations! Please don't forget to comment. If possible include your website so I could drop your site a visit.

Code window #1

<!-- Related Post START -->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeJcy-icGRbgBspP-cT4jCOHrtG9kyhjpM7TIAfORcsRXa2tMlp3b-hMIRCoyGrtepfOaoYLCyvyD8jmzLYZcIfp38LuaSQWRnShQ1vHJ4vV8VShVCtO6-JUAKItv12nWlx974pXZBbdf/&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://www.pooxie.net/javascripts/relatedpost.js' type='text/javascript'/>
<!-- Related Post END -->

Code window #2

<!-- Related Post START -->
<b:if cond='data:blog.pageType == "item"'>
   <div id='related-posts'>
      <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'>
      <b:loop values='data:post.labels' var='label'><data:label.name/>
         <b:if cond='data:label.isLast != "true"'>,</b:if>
            <b:if cond='data:blog.pageType == "item"'>
             <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
             </b:if>
      </b:loop>
   </font>
   <script type='text/javascript'>
      removeRelatedDuplicates(); 
      printRelatedLabels();
   </script>
   </div>
</b:if>
<!-- Related Post END -->

Read the full article->

HTML Color Chart for Bloggers and Web Designers

Note: For future reference. I created a central page for similar charts/tables at this location

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
*00FF00*	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Sample Usage

<font color="#FF3366">
<td bgcolor="#FFFFFF">
<body bgcolor="#FFFF33">

Read the full article->

The Code of Blogging

Favorite Blogs Award from CodeofBlogging

Begin Copy

End Copy

Top 10 Blogger tools you can count on

1) Screen Hunter

2) Page Saver

3) Paint.Net

4) Windows Live Writer

5) NotePad++

6) ColorZilla

7) TubeChop

8) Woopra

9) DropBox

10) TrueCrypt

Make your Blog/Site Socialize via Google Friend Connect

HTML Escape Code/Characters

The Code of Bloggers Panel

Page has moved

Nothing follows

Create a Related Post for your Blog

Why placing Related Posts' Important?

HTML Color Chart for Bloggers and Web Designers

Blog Archive

Coming soon!

More links

FEEDJIT Live Traffic Feed

Circle of Friends

~~Begin Copy~~

~~End Copy~~

1) Screen Hunter

2) Page Saver

3) Paint.Net

4) Windows Live Writer

5) NotePad++

6) ColorZilla

7) TubeChop

8) Woopra

9) DropBox

10) TrueCrypt

Page has moved

***************Nothing follows***************

Why placing Related Posts' Important?

Blog Archive

Coming soon!

More links

FEEDJIT Live Traffic Feed

Circle of Friends

Begin Copy

End Copy

Nothing follows