How To Make Spoiler In Second

Spoiler is a facility installed in a post (articles, blogs, forums, or in the comments) that serves to hide pictures or text/writing. Visitors can click on the button that provided, if  they want to see the hiding picture or text. The spoiler works similar as a scroll bar.

The main function of the spoiler is a space-saving, especially if you have lots of large image display on your posts. and the most important is to save your web page loading time.

We can easily make a  spoiler into our post, just add this simple Script right on the place where you want to put your spoiler images or text.

<div style="margin-bottom: 2px;">Your Spoiler Title
<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div>
<div style="border: 1px inset ; margi : 0px; padding: 6px;"><div style="display: none;">YOU CAN PUT YOUR SPOILER IMAGES OR TEXTS IN HERE</div></div></div>

Just copy and paste the Script above into your post, replace the Your Spoiler Title with your title, and your images or text into YOU CAN PUT YOUR SPOILER IMAGES OR TEXTS IN HERE .

Here is the display of the Script above

Your Spoiler Title

YOU CAN PUT YOUR SPOILER IMAGES OR TEXT IN HERE

You can also set the spoiler display as you like by changing the "Display Setting"

It's quite easy isn't it...??? Well... happy spoiler..

Add to: | blinklist | del.cio.us | digg | yahoo! | furl | rawsugar | shadows | netvouz

technorati tags: HTML Code Spoiler
del.icio.us tags: HTML Code Spoiler
icerocket tags: HTML Code Spoiler
keotag tags: HTML Code Spoiler

How To Make a Sticky Post in Your Blogger With a Simple Trick.

Because of the specific goals, sometimes we want every guest who visited our blog, read or see: pictures, messages, or a particular post on all of our blog pages they were visited, it's call a sticky post.
Usually we put the sticky post above the blog post.

In blogger post rule, a new post will be shown on the top, while the older one place below/after it or become archive (depending on your post setting), but with this very simple trick you can remain your post sticky at the top.

Actually this trick is very simple, The key is add the "Add a Gadget" widget above Blog Post in Page Element

By default this widget isn't there, we must doing a little trick first to get that widget. If you do not have Add a Gadget Widget yet, please follow this link http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html

The rest step is just to add our Sticky Post (or you can put picture, message, HTML/JavaScript ) by Add a Gadget Widget above the blog post.

If you want to add a "post form" exactly like your post, then you can add a "Text" gadget.
Please not to write your post title in Title Column because it will show up as a "Gadget Title" not as a Post Title, you better write it in Content. and set the display as a Post Title.

The Problem is: to do this trick, we must use HTML code to make up the text... But don't worry, if you are not capable with HTML Codes, there are simple and fast way to make your sticky post without learn it. Use your "New Post" to make a sample of your sticky post, set the display as close as your real post, use the Preview to check your sticky post display then copy-paste into your content collumn text add gadget.

Open your Blogger Dashboard >> New Post. Write your sticky post.

Use Preview to check your final displal, Block your Sticky Post text.

Open your Dashboard in a new Tab >> Layout >> Page Element >> Add a Gadget (above your blogpost) >> Click Text >> Paste your Sticky Post into content column. and Save it.

And this is the final example...

How To Make Image Link Menu Navigation Bars (Navigation Menu Bar on Blogspot III)

In a previous posts, we have discuss about "How To Make The Navigation Menu Bar I" as a simple HTML script and "How To Make The Navigation Menu Bar II" for make it more attractive with CSS..
In this post we will discuss How To Make Image Link Menu Navigation Bars so that we can change the Menu Navigation Bar with images or buttons.

Images Link Menu Navigation Bars.

Of course our first step is to have some images that each picture will represent each link of our menu navigation bar. You can search from the net for "free downloadable images/picture" , edit and resize it or even create a new ones for your own with image editor like Picasa
After finished these images/pictures, keep/host on the server and note the URL of your files images. There are so many free server that allowed us to keep our images on them, just  search "free image server". or you can look at  Using Google Group or Google Site as Web Storage.

The basic methode is similar to the way of making a Simple Navigation Bar . the differences is Simple Navigation Bar base on text link, while this one base on image link.

In your HTML Template (Dashboard > Layout > Edit HTML) insert this CSS between ..., I suggest to put in under /*Header*/ or ]]> to make it easy to remember.

#navbarmenu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

The next step is create the menu links list (as we did in How To Make The Navigation Menu Bar on Blogspot (I)  but in a LIST form).

On your Dashboard >> Layout >> Page Elements, and click Add a Gadget on Header. and choose to add HTML/JavaScript.

 

(Note : If you want to add "Add a Gadget" Widget on your Page Elements Please visit  http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html .)

If the previous steps are very similar with making a Simple Navigation Bar . The next following steps is to distinguish between text and images navigation bars. The key is the Script below

Next step leave the Title Column empty, Copy the Script below and insert in the column content

<div id='navbarmenu'>
<ul>
<li><a href="URL of Home page"><img src="URL of Home image"></a></li>
<li><a href="URL of Music page"><img src="URL of Music image"></a></li>
<li><a href="URL of Books page"><img src="URL of Books image"></a></li>
<li><a href="URL of Video page"><img src="URL of Links image"></a></li>
<li><a href="URL of Profile page"><img src="URL of Profile image"></a></li>
<li><a href="mailto:EMAIL ADDRESS"><img src="URL of Email image"></a></li>
</ul></div>

Change the URL Link Page with the address where you want your guess directed to, and URL Link Image.with the address of your URL images from your server.

To make the display of your NavBar more attractive, You can combine with Hover effect, and  Visited Link by CSS. 
The following CSS Script is a sample of it.

#navbarmenu ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}

#navbarmenu li a img{
height:30px;
width:30px;
}

#navbarmenu li a:hover img{
height:40px;
width:40px;
background: #ff0000;
}

#navbarmenu li a:visited img{
height:40px;
width:40px;
background: #0000ff;
}

While text link Nav Bar change the color text display after visited or hover mouse on it. In this sample Image Link Nav Bar, The skenario is : The navigation bar image link was set to 30 x 30 px and there is no border surround it, when the mouse cursor hover on it, the image size will raise to 40 x 40 px.with a red background. Any visited link will have a blue background behind.image.

You can also create reverse effect, that the images became smaller when mouse hover on it and for the visited link.
Please change the setting of the script according to your creatifity, just play for a while, explore and found your best setting...

In the next post we will discuss how to make Button Menu Navigation Bar.

How To Make Drop Capital Letter (Drop Cap) In Blogger Post

I n MS Word, there are facilities that can be used to create Drop Cap "formats the first character in the first paragraph as a drop capital letter", we often seen at the beginning of the novels, where the top of the first letter of the first word lines up with the top of the first sentence and drops down to the four or fifth sentence.

In this post we will learn how to create a drop cap in blogger post. exactly like the first sentence of this post.

1. Go to Dashboard >> Layout >> Edit HTML  and ensure you have checked the "Expand widget templates" box..
2. Then using your browser's search fuction, locate this CSS Code

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

3. Add this CSS code right after it

.dropcaps {

float: left;

color: #000000;

font-size: 100px;

line-height: 80px;

padding-top: 1px;

padding-right: 5px;

}

So it will look like :

 

4. Don't forget to SAVE TEMPLATE 

5. If you want to create a drop cap in your post, then in the beginning word of your post, you  must type

<span class="dropcaps">Your First Letter</span>...second letter and so on

The following example is what I do on this post.

 

And you can see for yourself the Drop Cap display of this post.

6.  We can easily set/adjust the display of our Drop Cap by change the setting of .dropcaps.

You can change the color by change value #000000 (Black) with "yours". You can also change the setting of the font (size, height, weight, padding etc).

If you confuse about your HTML color code, then you can visit

http://doit2us.blogspot.com/search/label/change header color

Hope works for you and.. Good luck..!!

Technorati Verify Claim Code RTT5DY6YKYZX (How To Get Technorati Indexing)

RTT5DY6YKYZX 

RTT5DY6YKYZX  is a sample of my unique code, that I must put on my new Blog Posts and Publish it to get index by Technorati 

 

As my moto Learning By Doing.. I'll write again after get claimed.

How To Get Rid Of "Read More..." In Blogger Post

Unlike the other articles that discuss how to add or create Read more.. in blogger posts, I just have a problem to get rid of.it.
After change my template and try to make modification on it (look at http://doit2us.blogspot.com/2010/02/why-my-google-adsense-suddenly.html), All of my posts have "Read more..." facilities at the end of the posts, although I don't break the page. This became odd because almost all of my articles finished in one page, no need "Read more.." anymore.

Eventually, I've found that this technique works for me...

1. Go to Dashboard >> Layout >> Edit HTML  and ensure you have checked the "Expand widget templates" box.
2. Then using your browser's search function, locate the following line of code:

<data:post.body/>

3. Depending on your individual template, you may find this enclosed between <p> or <div> tags. We need to leave these tags intact.
4. If you've added any other "Read more" hacks to your template (or have added other conditional statements to the Blog Posts section), you may discover more than one instance of . If this is the case, you need to edit the section which has  <b:if cond='data.blog.url != data:blog.homepageUrl> a line or two above this.
The following example is on my HTML Template...

5. Delete script line below this (or similar <div class='post-body'...> on yours)

<div class='post-body' expr:id='&quot;post-&quot;   data:post.id'>

and leave one of   <data:post.body/>. This is finally modification script on my mine:

6. Click Save Template and preview your changes. If this has worked properly, your test post should display normally and clear without Read more... at the end of posts.

Why My Google Adsense Suddenly Disappear / Doesn't Show Up..??

A few days ago my Google Adsense suddenly disappered from My Blog, after checked on My Adsense, I am sure that the problem did not come from "My Adsense", everthing it's ok, it wasn't disabled..

Later, I did "Googling" to get my problem solved, Although not exactly the same as my problem I founded alot of similar cases (loses their adsense). After read some forum with the same/similar problem, finnally followed the suggestion on Google Support Forum, I try to checked My HTML Script and ended so bad...

Because of my careless, I forgot to backup my HTML Template when trying to tampered it. Yup.. I made a lots of "try and error" there, and for sure always end with ERROR... So after spend 4 hour to fixed my problem (I had 2 problem now my adsense and my template) and getting worst and worst, I decided to refresh my template from beginning and then made a modification (still work on it..).

I had my template problem solved but not with my adsense. After rest for a while, I had second though "why I am not trying to opened it with another browser, maybe the problem was my Mozilla Firefox conflicted with my adsense" And it's true, when I used Opera and Internet Explorer My Adsense did Show up  there on my new template normally as it was. After comparing My Blog displayed from theese three browser, I finnally concluded that the problem is my Mozilla Firefox browser.


The conclusions of my adsense problem because of FF browser, take me to made a second mistake (fortunately just a little mistake). With full of confidently I reinstalling my Mozilla Firefox browser. Once finished reinstall Firefox and try to see My New Blogger Tips Blog, I was so surprised because My Google Adsense still didn't appear.

Full of confusion, I tied to find the problem solving with Google (AGAIN) but with new adding information. I put the phrase "Adsense not show up in firefox" and "firefox blocked my adsense". And so I finnally discovered that the real problem is not in firefox itself but the used of Adblock Plus Suddenly I remember that before the problem came, I let my Firefox update the Add-ons, and one of the Add-ons was Adblock Plus Up date into 1.13 version. and I didn't realized that this Adblock Plus 1.1.3 was blocked My Google Adsense.

After knowing the source of the problem, then I could easily show up My Google Adsense in my browser. Just disable the Adblock Plus.


Some people suggested to use the filters in Adblock Plus to manage the Ads, which one to be blocked and which one being passed. 
But I have my own thoughts, Considering that the firefox is the most populer browser right now, I wondered how many person are visiting my blog using Firefox and installing Adblock Plus...???.


There is a fact that is really absurd about the condition above. Google suggest and support the use of Firefox Browser, but Firefox responded by suggesting it users to install/use Adblock Plus to blocked Google Adsense... Ironic isn't it...???. This is the dilemma between us as a surfer or advertisers.