Blog Khusus Tutorial

5 Show ads PageEar style (PagePeel) V.O-OM.COM

PagePeel or usual also called the term PageEar, Magic Corner, PeelAd, peel away ad or name, is one way to show ads with the style (style) is different. Does not look like banner ads in general, if your mouse over the area PagePeel this, the page will be visible to defeat the withdrawal sheet you open the paper and found another page otherwise. The main purpose PagePeel install of course want to get more attention from visitors to click on that.

An example of a popular blog is Johnchow.com PagePeel apply. Be pitied, but he is even selling its own services PagePeel (peel away ad) is worth $ 37.00. I do not have to pay .. and do not lose heart to remove your paypal funds to buy them. PagePeel the name of all that I say above, there is plainly only one service that the free, namely PageEar.

Although free .. PageEar not lose the paid version PagePeel, one of the features main namely the ability to run PageEar image and sound simultaneously. Because PageEar executed via JavaScript and Flash-based, so you can use it on the platform (blog / site) anything, including bloggers certainly do:)

Some interesting features of PageEar:

NEW! Pageear is now scalable. You can change the peel size 100 × 100 and 500 × 500 Pixel by your own.
Plays MP3-Files on startup, open and close of Pagepeel.
Possibility to leave peel open and wait for userklick to close. Close the text is editable.
Place it on the left or right upper corner
Open and close automaticly after X seconds
Speed of the small pageear could be changed
Flashcheck (Adobe © Flash Detection)
Reflecting on corner image
Color of the pagecorner
Link target on external side or own (self, new)
Downwardcompatibly up to Flashversion 6
Runs on nearly all browsers (FireFox, InternetExplorer, Opera, Safari, etc.).

Tutorial How to Install (Installation):

1. Download the file first PageEar v1.4

2. Then Extrack at pageear_v14.zip file your folder.

3. Please pageear.js the Edit File (using notepad for instance)

Note: File pageear.js in this configuration all you need. So you are not dizzy seven roving, I include only a few examples from the possibility that you need to edit. See the code edited by the color red.

var pagearSmallImg = 'http://alamat-server-anda.com/pageear_s.jpg';

var pagearSmallSwf = 'http://alamat-server-anda.com/pageear_s.swf';

var pagearBigImg = 'http://alamat-server-anda.com/pageear_b.jpg';

var pagearBigSwf = 'http://alamat-server-anda.com/pageear_b.swf';

var jumpTo = 'http://alamatbloganda.com/'

In fact many configurasi the other, the rest I just read on manualnya.

4. Upload all the files in the folder pageear_v14/pageear / server belong to you (eg pages.google.com)

5. Do the final step javascript, or from the slaphappy aja direct copy and paste the code below. do not forget to change the url address below marked with a red under.

For blogger users please laying down in the above script code <title><data:blog.pageTitle/></title> on the Edit HTML page.

How do I change the image suit you?

The first image with a size of 100x100 pixels, and save with the name pageear_s.jpg later in the same way, make the image again with the size of 500x500 pixels, and save with the name pageear_b.jpg If you have made a second image above, please re-upload to a server owned by you.

If you enjoyed this post, make sure you subscribe to my RSS feed!

1 Showing Recent Comments (Comments)

Showing recent comments, or comments about its function is so that we can easily find out who is just to comment on our blog and post in which they commented. Recent Comments can we plug in our blog's main page.
Here's how to create Recent Comments (Comments) :

1. Login to blogger ago select menu "Layout", tambah Page Element, click Menu HTML / Javascript.
2. Then copy script following, then paste in menu HTML / javascript yesteryear :

- The number 8 is the number of comments that would show.
- Change the name http://yasin-marine.blogspot.com with blogging.

3. To install the sidebar then select "Add a Gadget -> HTML / Javascript" Then enter into the box above script you provided.

If you enjoyed this post, make sure you subscribe to my RSS feed!

1 way create Dropdown Menu (acordion)

Here's how to make the dropdown menu (acordion) :

1. You must first login at Blogger.com / Blogspot.com
2. You Choose Layout -> Edit HTML
3. Copy the script below continue to paste the code between <head> </head> put them up to you, try deh find the code at the beginning of the script and template code before <body> .

<script src='http://www.hotlinkfiles.com/files/2096147_8gjww/jquery-1.2.6.pack.js]jquery-1.2.6.pack.js' type='text/javascript'/>
<script src='http://www.hotlinkfiles.com/files/2096146_3tpwj/ddaccordion.js]ddaccordion.js' type='text/javascript'/>

<script type='text/javascript'>
ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>

I suggest to save the file into this JavaSript hosting your own, but if ya do not want fuss, copy the above

4. Then copy the code below .... CSS ago paste the code before ]]></b:skin>

.arrowlistmenu{
width: 320px; /*ukuran lebar dari menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(http://img84.imageshack.us/img84/7623/ocimtitlebarpr5.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(http://img515.imageshack.us/img515/6545/ocimtitlebaractivekj3.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(http://img227.imageshack.us/img227/2667/ocimarrowbulletqk9.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

code printed red width: 300px width to determine the menu, get it customized with your blog template.
Then save your template. not finished ... first patient, there's more that you have to do ...

5. go to pageElement edit and enter the code below :

<div class="arrowlistmenu">
<h3 class="menuheader expandable">Judul Menu</h3>
<ul class="categoryitems">
<li><a href="http://yasin-marine.blogspot.com/">Isi Menu</a></li>
<li><a href="http://yasin-marine.blogspot.com/">Ocim</a></li>
</ul>

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">
<li><a href="http://yasin-marine.blogspot.com/">isi</a></li>
<li><a href="http://yasin-marine.blogspot.com/">Ocim</a></li>
</ul>
</div>

note:
- The number of menu can be as much as you like a copy .. red .. then paste the above

If you enjoyed this post, make sure you subscribe to my RSS feed!

0 Showing comments with Grazr

Installation Comments Grazr

Step 1
Log in to Blogger
Step 2
Go to the Layout menu -> Add Element -> Add Gadget -> HTML / Javascript
Step 3
Enter the code below on the content :

<center><div style="height:150px;width:99%;"><a href="http://grazr.com/read?view=s&theme=default&file=http://Name-Blog.blogspot.com/feeds/comments/default"><img alt="Grazr" style="border:none" src="http://static.grazr.com/images/grazrbadge.png"/></a><script src="http://static.grazr.com/gzloader.js?view=o&theme=default&addbar=on&file=http://NAMA-BLOG.blogspot.com/feeds/comments/default" defer="defer" type="text/javascript"></script><br/><a href="http://modification-blog.blogspot.com/2008/11/menampilkan-komentar-dengan-grazr.html" target="_blank">Grab this widget</a></div></center>

Description :
Change BLOG-NAME with the name / url address of your blog
Change the height: 150px to determine high-widget
Change the width: 99% to determine the width of the widgets or modify 99% with px
Change the view = o s a 3P or to determine how content eruption; outline = o, s = slider and 3P = 3pane
= Change the default theme to determine the theme, there are about 14 theme
Dispose of the code = addbar on if we do not want to link our blog url comment

Theme Komentar Grazr :

Default = default
Default Big Title = default_big_title
Gloss Black = gloss_black
Gloss Blue = gloss_blue
Gloss Red = gloss_red
Gloss Silver = gloss_silver
Home Silver = home_silver
Milk Coco = milk_coco
Milk Pink = milk_pink
Milk White = milk_white
Sateen Black = sateen_black
Sateen Blue = sateen_blue
Sateen Green = sateen_green
Sateen Red = sateen_red

1 Changing Background Tips Blog

previous you must have site storage of files such as imageshack or photobucket.com. But remember before you save, you must first register for free . after registration, has continued to upload the image used as background,now focus attention to the blog.

Log in to Blogger.
Select the menu layout ago edit HTML
Do not you sign on the checklist column EXPAND widget templates.
Search code css body, for example, more or less like this :

body {

background:#FFF;

margin: 0px auto 0px;
}

If the facts, such as Add the code below between (and) signs :

background: # fff url (URL FILE YOUR PICTURES) Repeat-x;
note: this means your image will widen kesamping appropriate width, for example

body (
background: url (URL FILE YOUR PICTURES) Repeat-y;
width: 1000px;
margin: 0px auto 0px;
)
background: # fff url (URL FILE YOUR PICTURES) Repeat-y;
note: this means you will widen the image of the appropriate level, for example

body (
background: # fff url (URL FILE YOUR PICTURES) Repeat-y;
height: 1000px;
margin: 0px auto 0px;
)

But if we suppose there is a word background, live Opera's code blue it. and do not forget to always closed with a ";".

Note:
Writing the URL FILE YOUR PICTURES, replace the image url you save.

It has, click Preview and you try to see the results. lalau store and safe to try

If you enjoyed this post, make sure you subscribe to my RSS feed!

0 Feedburner - Headline Animator ( V-Roger 2211)

In my previous posting, I shared about: Signing up to feedburner and taking E-mail subscription widget from feedburner. Now, I would like to share about Headline animator which is also from feedburner. What is Headline animator? It is an animated banner that shows five recent feed from a blog or site that are registered to feedburner.

Headline animator can be a good media to promote the blog content. If you want to add headline animator, you can read the simple steps below;

1. I assume that you have signed up in feedburner. If you haven’t sign up to feedburner, click here. But if you have signed up, you can continue reading.

2. Read this posting from number 1 until 6. To make HA, I just continue from step 7. When you are in PUBLICIZE YOUR FEED page, click Headline Animator.

3. Here, you will create a New Headline Animator. Please choose the form of HA, color, theme, font text. After that click Activate.

4. Look at the red circle below. That is the result of your blog headline animator. Click SAVE (2nd picture at the bottom).

5. In order to place HA in our blog, we can transfer it directly into our blog. How can we do that? well, see the picture below;

6. In (+) Add to Myspace, TypePad, ect, choose blogger blog (picture above) or as you see at the picture below, then click NEXT.

7. In Add Headline Animator to Blogger page, click Add To Blogger (red circle).

8. In Add Page Element page, choose the blog you want to add HA (select a blog) and Title of HA (title), then click Add A Widget.

9. After clicking Add A Widget, the HA widget will automatically be added in your blog ( usually in header), see the picture below. from header, you can move it into sidebar or footer.

9. Done and congratulation. Now your blog has Headline Animator.

Good Luck and wait for next posting, abotu some Chicklet Choosers (stiil in feedburner).

If you enjoyed this post, make sure you subscribe to my RSS feed!

1 Make a Table Of Content

There is 2 steps to make a Table Of content at the blog :

Step #1

Login to blogger with your ID.
After entering the dashboard page , click Layout.
Then click edit HTML tab.
Click the Download full template link. Save your template.
Please mark the little box beside Expand Widget Templates. Wait for a moment.

Go to your template code, and find the code like this :

<b:include data='post' name='post'/>

Delete above code, and replace with the following code :

Click Save Template button
Done.

Step #2

Click at Page Element tab.
Click at Add a Page element.
After emerging pop up window , Klik add to blog button for the things HTML/JavaScript.
Copy and paste the code below into available column :

YourBlogName.blogspot.com/search?max-results=200">Show all post »»

Alter YourBlogName with your blog name. Example : my blog name is rohman-freeblogtemplate. Alter 200 with other number, because this is the sum of how much post want to show.
Click
Finish. Please see the result.