Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts

Nov 22, 2011

Changing Background Tips Blog

There is one thing that I consider important when my friend intended to replace the background (background) that is changing the background color or image that if the writings do not make us become difficult to read. If the texts available in dark, then choose a bright color or image, but vice versa when writing that there is light, it should be a color or image background dark. Writing difficult to read by visitors, will certainly make these visitors lazy to read the articles we write, and of course we posted an article useless if no one read.OK, let me not take up pages just on the main topic. Because the template code is very varied, which I will make an example is the original template blogger template is minimal.

Changing the Background Color


For the template minima classic:

1.Sign in

2.Click the Template menu

3.Click the Edit HTML

4.Copy the entire eighth templates, paste in notepad then save to backup data.

 
5.Change the color code color code of the original template with a buddy like (the color red is the code that should be on fox):



body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

 
Suppose if you want to be a light gray color, so code like this:


body {
background:#E7E3E3;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}


6.Click the Preview button to see the changes

7.If it is OK, click the Save Template Changes

8.Done.


Good Luck....

  

The new version Read More

Facilities Read more this time made ​​by Ramani and Hans. The surplus that is when the reader clicks on the link Read more, then the whole article can be open without having to re-loading the BT readers sometimes make rada slow internet connection (so embarrassed, but really heavy for my blog on the loading), in addition to a short article , his writings readmore be deleted so as not to disturb the scene as yuki complained some time ago my friend who was troubled because the readmore text always appears even at a short article.

But unfortunately these codes only apply to my friend who had just put on the template.

To abbreviate the writing that is not too satisfied with intermezo a bit boring, just to make this new version read more please follow the steps below:

  1. Sig in blogger with your id
  2. Click the menu layout
  3. Click the Edit HTML
  4. Click Download full template, please save the template first mate, is to prevent the risk if something goes wrong in making mistakes in the editing process template
  5. Click the small box beside Expand Widget Templates, again do not forget to check first well
  6. Wait a while until the process is complete
  7.  Copy the code below, then paste the code just above </ head>

<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' /> 


     8.Add the following code in the code template buddy, who is white is the original code of the template code and the green is the code that had been added:

<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
.... rest of template code .... 


     9.Click SAVE TEMPLATE.

The next step:

1.Click the Settings menu

2.Click the Format menu
 

3.Copy the code below and paste it into the empty box located next to Template posts  

 <span id="fullpost">


</span>
 


4.Click the Save Settings

5.Done.


How to post articles:

At the time of posting are on the menu, select the Edit HTML button do not select the Compose button, it will automatically appear before the above code is:
 

<span id="fullpost">



</span> 


Save article that would in the show in advance (summary) above id="fullpost"> <span code, and the rest of the article in the store after <span id="fullpost"> code and before the code </ span>.


For a short article, my friend stayed and later remove the code before the article appeared without any code [+/-] Read more ... and [+/-] Summary only ....

For a real example I've made a blog that already use this system, please click on [+/-] buddy Readmore ... to open the whole article, and click on [+/-] Summary only ... To see a summary of the article.



Good Luck.....   




 


How to create a category (label)

In blogger.com facility is already in prepared, but even though these facilities have been provided of course if we do not know how to use it will become useless. To create a category, at blogger.com in the know with the label term. With this facility we as blog owner just fill in the boxes labeled in sedikan on every post articles, very simple and modest.
To avoid confusion, please refer to my friend the late posting of this article. There is a paper like this: Labels: Blog tutorial, create a label. Well this post is included in two categories, namely category Blog tutorial and category labels. To view the function of this label pal please click on the label that reads Blog tutorial, then automatically all postings which I label the Blog tutorial will be displayed and ready to be read by visitors.
How do I create a label?
To create a category or a label, my friend simply fill in the blank box next to Labels for this post: (because now there are bloggers who speak Indonesian) which is under the box and make the article. Fill the box with the category
suitable about to post that we make. Example: winter holidays. One post not only pegged at only one category only, but a post can have multiple categories. to make it stay in separate them with commas (,) only, eg for posting this blog article that had no labels Blog tutorial, blog tools, blog accessory, because the post was appropriate and entered into the third category.
Is the category (label) can be displayed in the sidebar?
For users new template buddy, Label (category) can be displayed in the sidebar, and typically the label element is already available when the newly installed template. If the element has not been tersidia label, my friend can make your own, please follow the steps - these steps:


  1. Sig in blogger with your id
  2. Click the Layout menu
  3. Click the Page Elements
  4. Click on Add a Page Element
  5. Click the button labeled ADD TO BLOG located under the heading Label
  6. Labels writing next to my friend Titles can change it to Category if my friend wanted to change it
  7. Select the radio button next to your desired Sorting, Alphabetic: if you want to show categories according to the alphabetical alphabetically (from A -> Z) By frequency: if the category you want displayed in accordance with the number of labels (categories)
  8. Click the button labeled SAVE CHANGES
  9. Done.



Very easy is not it?

Text Runs in the menu bar

Because the template blogger template is divided into two classic and new template, then for how to make text run will be different, therefore the discussion would be my divided into two parts. However, I need to say, the example that I will give this result is not the same as on this blog is the text runs from left-right direction, but I'll give an example text runs from left to right direction and there is a lag time between the writing of First Instance with the second and subsequent writings.

For the classic template please follow the steps below:

  1. Sign in blogger with your id
  2. Click the Template menu
  3. click the Edit HTML
  4. Copy the entire HTML code and paste it into notepad and save. This is meant to keep the event of any errors in the process of editting the template, my friend still has the data to restore it to its original.
  5. Copy and paste the following code above the code </ head>


<script language='javascript'>
message = "
Write the first text to appear here ^" +
"
Write a second text here ^" +
"
Write a third text here ^" +
"
Write a fourth text here ^"

scrollSpeed = 130
lineDelay = 0

// Do not change the text below //

txt = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script> 


      6.Click the Save Template Changes

      7.Done.


For the new template please follow the steps below:
  1. Sign in blogger with your id
  2. Click the Layout menu
  3. Click the Edit HTML
  4. Click Download Full Template, and then save that data. This is a precaution in case of an error in editing the template code
  5. Click the small box beside Expand Widget Templates to give a check mark. Once again do not forget to click the small box beside Expand Widget Templates
  6. Wait a while until the process is complete
  7. Save the following code under the code </ body>, the code is to be located at the bottom before the code </ html>  

<script language='javascript'>
message = "
Write the first text to appear here ^" +
"
Write a second text here ^" +
"
Write a third text here ^" +
"
Write a fourth text here ^"

scrollSpeed = 130
lineDelay = 0

// Do not change the text below //

txt = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>
 

     8.Click the SAVE TEMPLATE.

     9.completed.


in the above code there is written that I made red, the text must be my friend now replace with your desired text. example: welcome to my blog. or whatever is appropriate to think my friend is written on it. the example I gave above contains four text messages or text, if my friend wants more could be done by adding a code line written as yet To improve the code -> scrollSpeed ​​= 130. the number "130" is the speed of the text goes, the smaller the value the faster the text runs, and the greater its value then the text will be slower. Please adjust to the wishes buddy.


As I said at the beginning of the article that the code I gave above results are not the same effect as the one on this blog, to see real results.


Good Luck........ 
  

User Online Status

How many people is online at your blog? or do you know that? If you do not know how many people is online at your blog, you can use a free tracker to know it. That site is much Provide this service. Once of Them is www.histats.com. If you use Them tool, you can know how many people online at your blog, how many people was visited to your blog, and any function. This is once of example:



How to get it? please following the steps:

  1. Please visit www.histats.com.
  2. If you was on the histats site, click the Register tab at the top.
  3. Content the form with your information, Such as email, password, your blog url and etc..
  4. Click Continue button.
  5. Choose the style of histats counters, click Choose a counter from this category.
  6. Please mark the radio button beside the counter style you wanted.
  7. Click Continue button at the bottom of page.
  8. Click at the drop down menu, choose the category the which to display at your counter. the choice is: visitor today, Page views today, online users, total visitors, and total page views. Choose empty if you want not to display Them.
  9. Click Continue button.
  10. Wait a moment, your counter is not updating.
  11. Until the process is done, copy your counter code and paste to the Notepad or other text editor. Save into your computer.
  12. Logout and close your internet browser.
  13. Done. Now you have a counter code has to add at your blog.
Next step is add your counter code to your blog, please following the steps:
1.Login to blogger with your ID.

2.After entering the dashboard page, click Layout.


3.Click at Page Element tab. See the picture below:


4.Click at Add a Page element.

5.After emerging pop up window, click add to blog button for the Things HTML / JavaScript. See the following picture:

 
6.Open your Counter code, copy and then paste into available column.

7.Click
.

8.Done. Please see the result.


Now you have a counter, and you will from know-how many people online at your blog.

If you do not like with this counter, you can get at the other site, this site is Several Provide the same service:

  • http://www.neoworx.net
  • http://www.webfooted.net
  • http://www.fastonlineusers.com

See you next time at my new tips. Happy blogging.












"Dozo Yoroshiku Onengaishimasu"
UMEDA TAKAHIRO © 2008 Template by:
SkinCorner