Sunday, February 28, 2010

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:

del.icio.us tags:

icerocket tags:

keotag tags:

Friday, February 26, 2010

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...



 


Disclaimer:We does not host any of the templates available on this blog. This blog merely indexes other sites contents.