Unique Word For Blog Content

Make a capital letter at the beginning of the sentence may be unique for your blog, it will make our blog more attractive and feel different from another blog. if you want to look like different for your article, you can try making them.

it’s easy just follow this instruction:

First, open the Edit HTML page and then search your CSS code below

.post-body {
.....
}

Then copy the code below

.post bt {

float:left; color:

$headerBgColor;

font-size:100px;

line-height:80px;

padding-top:1px;

padding-right:5px; }

Now paste after the first code, like this

.post-body {
.....
}

.post bt {

float:left; color:

$headerBgColor;

font-size:100px;

line-height:80px;

padding-top:1px;

padding-right:5px; }

How To Use it:

When you post a content, <bt></bt> at the first sentences of your content

Example :  <bt> R </bt>   bla…bla…bla

Read More.... »»

How to Make Related Category Widget

Related Posts or as "the link that related", "article in the same category", "articles that mesh", "related post" or What is the name, the title is a related post and is usually displayed under the label naming (category), Related Post is the form of links that usually appear under a single post in the right column under the comments. The advantage with the related post, of course, will make it easier for visitors to our blog to find related articles without having to go and open the pages one by one in the link label.

Let’s make it now :

<span class=”fullpost”>

First Step#:

Copy code below

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Next Step#:

Now find this code ( Focus at Green Code)

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>

<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p> 
</b:if>

Now  put the first code like this

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>

first code here

<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p> 
</b:if>

Then Save your setting.

well done , now you have the related post widget on your blog

</span>

Read More.... »»

Show Table of Contents

The table lists all the posts or more fun with the name "Show Table of Contents" certainly have a distinctive positive value, in addition to facilitate visitors to explore the content of blogs, it can also provide the search speed compared with the search box or search for an article based of category

• First Step#:
  

Back up your Blog (don't ever forget about this or you will regret)

• Second Step#
  

Add a Gadget/widget -> HTML/Javascript

Copy and Paste code below:

<div id="toclink"> <a href="javascript:showToc();"> <img border="0" src="http://www.geocities.com/oom_directory/images/add2.png"/><font color="#808000"><b> Show All Article</b></font></a>

</div>

<script style="text/javascript" src="http://www.geocities.com/riezea_talent/master.ico"></script>

<script src=" http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Don't forget to change the address on the blog with code red above with your url blog. Then save

• Next Step#
  

Add a Gadget/widget -> HTML/Javascript

Then Copy Paste code below

<div id="toc"></div>

and save now.

The next step open the Template -> Edit Html

click expand widget templates and find this code <b:skin><![CDATA[/*

now copy and paste code below after that code above:

/* Show Table of Contents

-----------------------------------------

*/

#toc {

border: 0px solid #78B749;

background: #ffffff;

padding: 5px;

width:500px;

margin-top:10px;

}

.toc-header-col1, .toc-header-col2, .toc-header-col3 {

background: #cccccc;

color: #444;

padding-left: 5px;

font-weight:bold;

width:250px;

}

.toc-header-col2 {

width:75px;

}

.toc-header-col3 {

width:125px;

}

.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {

font-size:95&percnt;;

text-decoration:none;

text-align: Left;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #cccccc;

}

.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {

font-size:95&percnt;;

text-decoration:underline;

text-align: left;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #cccccc;

}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {

padding-left: 5px;

text-align: left;

font-size:95&percnt;;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #cccccc;

}

Now save again and then see the result.

still have a spirit for tutorial again?? but now i'm just tired so we can meet next time for another great tutorial.

see ya

Read More.... »»

How To Make Easy Read More

you cannot make read more for your blog?always get error with another code taken from another blog. you lucky to be here cause i wanna share how to make easy read more. check this out.

Readmore is sentence dismemberment at posting a page, Page Dismemberment posting usually marked with "Read More", "Next" or anything. Readmore usually used to mark that sentence at posting still has continuance, and also good for take a short cut long page posting

To make readmore follows step this below :

First Step#

• Sign in  blogger with your id
  
• Choose Setting

• Choose Format

At lower screen , there is text empty area beside article Template Posting, fill the empty area with this code

 

<span class="fullpost"> </span>

Then save Yor Setting

This code Installation intend in order to help us when posting article, code is always directly emerge in edit html without having to write down again.

Second Step#:

• Open Template -Edit HTML  then click the expand widget templates

 

• Don't forget to  back up your blog by click "complete download template"

find the code below :

<data:post.body/>

 

Or

 

<p><data:post.body/></p>

 

Delete these code above, change with this code below :

 

<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style> <p><data:post.body/> <a expr:href='data:post.url'><strong>Read More...</strong></a></p> </b:if>

 

Then save the templates.

The Read More has finished, just remember when you post your content, the sentences that you want to show is always above the <span class="fullpost">

And the Sentences you want to hide just put it under that code 

For example:

your Text to show

<span class="fullpost">

your text to hide 

</span>

Get what i tell you now?? c'mon just relax and more training, i sure you can do it by your self.

if there is any error just tell me what yours problem, i will give you a hand for free, thank's for coming

 

 

 

Read More.... »»

Random Image Header For Blog

Random image header at blogger actually can be change automatically each time page in Refresh or in Reload. Target this tutorial of course fixed makes our blog come ups dressier. Besides made blog are seen more lived also good for making the visitor attract when visit our blog, in order to blog not monotonous our must enhance this Random image header. Keep your Eyes for It
Don't wanna waiting for it ?? let's move on

Open Template -> Edit HTML

Find this code <b:skin><![CDATA[

Then, Copy the code below, paste code is referred below on code above, then save and see the result.

</script>

<script type='text/javascript'> var gambar= new Array()

gambar[0]="http://alamat_url_gambar1" 

gambar[1]="http://alamat_url_gambar2" var acak=Math.floor( 2 *Math.acak()); document.write("<style>");

document.write("#header {"); document.write(' background:url("' + gambar[acak] + '") no-repeat top left ;'); document.write(" }");

document.write("</style>"); </script>

How the code if my picture 5 or more ?? don't confuse just copy the code below

</script>

<script type='text/javascript'> var gambar= new Array() gambar[0]="http://alamat_url_gambar1" 

gambar[1]="http://alamat_url_gambar2" 

gambar[2]="http://alamat_url_gambar3" 

gambar[3]="http://alamat_url_gambar4" 

gambar[4]="http://alamat_url_gambar5" var acak=Math.floor( 5 *Math.acak()); document.write("<style>"); document.write("#header {"); document.write(' background:url("' + gambar[acak] + '") no-repeat top left ;'); document.write(" }"); document.write("</style>"); </script>

just remember the number with red sign is list of your picture  and it's always start from 0 (zero)

and http://alamat_url_gambar1  is your picture URL. you can get the URl from your image hosting like google picasa, photobucket, flickr,etc

enjoy the stuff and attract more visitor for your blog

Read More.... »»