Recent Posting

Image And Texts Slider

This writing explains about how to fill the content of Slider in Creative Press Blogger Template

Short Info



Slider with Teaser Text is a link with thumbnails picture and short text as teaser. The Image and texts can automatically move to left or right. In the same time, it could manually slide by pressing the Up-Down panel button. Slider could attract your blog visitors to read your article which you’ve been featured.
Please, see the screenshot below.






HTML Structure for Image Slide




Every content in Image Slide Gadget is using HTML combination. Below is the HTML of one content in slider gadget.

<li>
<a href="ARTICLE-LINK" rel="bookmark"> <img src="IMAGE-ADDRESS" alt=""/> </a>
</li>

  • IMAGE-ADDRESS with the address of your image. The image size is 357 pixels width and 220 pixels height.
  • ARTICLE-LINK with the link of your blog article. Try to find the most interesting information or news, and it will be a good content for the slider content.
You can edit those HTML in notepad or word processor
To make another content, please copy-paste another one before or after the previous content.





HTML Structure for Texts Slide



Below is the HTML combination for Texts Slider.

<li>
<h2><a href="ARTICLE-LINK" rel="bookmark" title="Permanent Link to HOVER-TITLE">ARTICLE-TITLE</a></h2>
<p>TEASER TEXTS... <a href='ARTICLE-LINK'>Read→</a></p>
</li>

Please change the words,

  • ARTICLE-LINK with the link of your blog article. Try to find the most interesting information or news, and it will be a good content for the slider content.
  • ARTICLE-TITLE with the title of your blog article.
  • HOVER-TITLE with title of the article. Hover title means that the text or short description will show when your mouse put over the text.
  • TEASER-TEXT with some texts, maybe about 20 – 50 words as a teaser for your reader. Or, you could copy-paste some paragraph from your article.
You can edit those HTML in notepad or word processor
To make another content, please copy-paste another one before or after the previous content.





After make Customization

After make customization, please read this:
  1. Go to LAYOUT – Page element
  2. In that page you will see Image Slider gadget, please press edit button
  3. Copy-paste your customization Of Image slide into the box
  4. Save it
  5. Afterward, In that page you will see Text Slider gadget, please press edit button
  6. Copy-paste the customization of Texts Slider into the box
  7. Save it

16 comments:

Anonymous said...

how to place that 720*90 ads

JOSE MENA said...

HOLA SOY JOSE MENA Muuucho I LIKE THIS TEMPLATE.
BUT I HAVE A PROBLEM WITH THE javascrip
AND ALSO WITH THE SLIDER TEXT NOT HOW It Works PLANTILLLA SAMPLE ..
THANKS. EXELENTE TAN FOR THIS WORK.
A GREETING FROM SWITZERLAND

saidba said...

tienes que agregar antes del /head (donde estan los 3 scripts)un script mas ya q o esta..




hostingdelscript/slider.js


descarga el slider desde aqui


http://riverauaslp.googlepages.com/slider.js

jose mnea said...

hello my brother
thanks for answering the message
very good your work .. god bless

but I do not work
a question?
you can send me the scrip and ready to install please fumcione well for me as does your blog, very nice wao ...

Horus said...

if i use a blogspot.com domain then any images i put in there from a different self hosted url dont work..the image location comes up as www.buddistamulets.blogspot.com/siamfoundation.orgimages/creativepress/jatukam.gif
whereas i want - http://siamfoundation.orgimages/creativepress/jatukam.gif to be the location.. how do i take out the automatic assumption that the domain url where the blog is located is inserted?
if this wasnt automatic then we can use blogspot adresses and use images from abnother location, such as picasaweb etc

Horus said...

gracias mucho mucho a saidba! que bueno que eres hombre!!!!
me agradece mucho pero aun no funciona - tengo el blog en el blogspot.com pero llevo los imagenes y los .js scripts desde www.siamfoundation.org
y no funciona.

Horus said...

also the width is what you say height is and the height is what you say width is.. gosh what a mess for what i thought is a nice looking template.. it just doesnt work

The image size is 357 width and 220 height - not what you state above

Horus said...

here it is even in your code on the template
#gallerycover{width:357px; height:220px;

get your facts right amigo.. how can you spend so much time designing this and then can't even make sure you make a decent explanation on your page?
no veas tio que asco

Cahaya Biru said...

@Horus; About the width and height of the slider, I must say that is my fault. I am so sorry. No one perfect. I am just a human who can do wrong.
Updated, done. :)

And about your problem,
Your image should be :
http://siamfoundation.org/images/creativepress/jatukam.gif

and not this
http://siamfoundation.orgimages/creativepress/jatukam.gif

please look at orgimages < --
it should be -- > org/images/

Moreover, Also, be careful about quote symbol.... So that you'll get a right HTML.
OK have a nice blogging... :)

Horus said...

thank you so much
and yes we are all human i myself as you pointed out in the codeing mistake above, have made a mistake
As we both know sometimes when we are lost in code with multitasking too then sometimes we just overlook a tiny little thing and then spend hours tryiing to figure out what is wrong. In the end it is usually something stupid that is the cause.
What matters at least is that with this communication method, in the end we learn more and find the answers to our problems.
Your themse are so great by the way i am using them on quite a few of my blogs
suerte!

Horus said...

by the way my above post was wrongly written; my locations were
http://siamfoundation.org/images/creativepress/jatukam.gif (this is where the image is)
but when i try to view on blogspot, it converts it to
www.buddistamulets.blogspot.com/siamfoundation.org/images/creativepress/jatukam.gif
i am going to fiddle around tomorrow and see if i can make it work as i notice that some php on some servers will do wierd things if i write www. instead of http://
ill let you know of any developments, causes or solutions i may find.

Ibor said...
This comment has been removed by the author.
Ibor said...
This comment has been removed by the author.
Ibor said...
This comment has been removed by the author.
Robi said...

Hello!

I have a problem with slider image. When I click on next or previous button, in my adress appear this: #. Should I change in this code this #?

<a class='next' href='#' etc.

Regards

Susanto Diantoro said...

hay cahaya, saya ingin bertanya tentang :
Apakah slide ini bisa ditambahkan beberapa jenis gatget, dan dapat digeser kebawah atau keatas??? Mohon berikan jawaban anda....

Post a Comment

Calculate Blog Weight


type your web or blog address (max 10)
 
(example: cahayabiru.com)  
 

Powered by iWEBTOOL


Return to Top