Hello. What do you think about adding a responsive scrolling tumbnails to your blog?
You could use it to promote a product your are selling, or promote a particular post in your blog. The best part is, it's free, it customizable, and it look cool...
This is a example from my Anime Blog, promoting anime merchandise from Amazon:
Try to hover your mouse on it, see how cool it stop for you? It can show you the description of the thumbnails, and if you click on it, it will take you to that specific thumbnails location.
This is how you can add it to your blog...
1. Log in to your Blogger account.
2. Go to Template.
3. Select Add a Gadget.
4. Select HTML / Javacsript.
5. Copy and paste the code below:
<marquee behavior="scroll" direction="right" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2">
<a href="YOUR TARGET URL" target="_blank" title="TITLE OF YOUR ITEM">
<img alt="TITLE FOR IMG ALT" height="80" src="YOUR THUMBNAILS URL" width="64" /></a>
<a href="YOUR TARGET URL" target="_blank" title="TITLE OF YOUR ITEM">
<img alt="TITLE FOR IMG ALT" height="80" src="YOUR THUMBNAILS URL" width="64" /></a>
<a href="YOUR TARGET URL" target="_blank" title="TITLE OF YOUR ITEM">
<img alt="TITLE FOR IMG ALT" height="80" src="YOUR THUMBNAILS URL" width="64" /></a>
</marquee>
6. The code above only show up to 3 thumbnails. You can add more simply by copy and
paste the code that I highlight with the blue colour.
7. Let's tweaking the codes to your preference:
direction="right"
This control the direction of your scrolling thumbnails.
If you want it to go left: direction="left"
If you want it to go up: direction="up"
If you want it to go down: direction="down"
* Please note that if you choose the direction to go left or down, it will show the last
thumbnails in the code instead of the first one.
* If you choose the direction of up or down, you need to adjust the size of your thumbnails
to become bigger than the size that I set. If not, It will show up to 3 thumbnails in a row
and it look kinda funny.
8. scrollamount="2"
This control the speed of your scrolling thumbnails.
To make it scroll faster: scrollamount="1"
To make it scroll slower: scrollamount="3"
* Try setting it to "6" to see it become really really slow... ^_^
9. <a href="YOUR TARGET URL"
Change it to the URL address that you want your reader to go when they click on it.
10. title="TITLE OF YOUR ITEM">
Put the title of the thumbnails here. It will show when your reader hover a mouse on
top of the thumbnails.
11. <img alt="TITLE FOR IMG ALT"
Put the title of the img alt here. It is a good practise to named your picture img alt,
for the purpose of Search Engine Optimization.
12. height="80"
width="64"
This is the size I set for my thumbnails. If you want to include a bigger thumbnails,
just adjust the height and width setting here. Just remember to upload a thumbnails
image with the exact size or it will look kinda funny if the size don't match.
13. src="YOUR THUMBNAILS URL"
Change it to the URL address of your thumbnails.
I usually upload a bunch of thumbnails image in a draft post, then click on the HTML
button next to the COMPOSE. Later, I copied the thumbnails URL into a Notepad
program. It makes it easier to modify the codes when you have a lot of thumbnails to
include.
14. Click on Save when your are done, and enjoy the view....
p/s - I'm still searching for a way to make it scroll infinitely, but have not found the codes
yet. If you have a better code, why not share it with me?
By Khairul Nizam
You could use it to promote a product your are selling, or promote a particular post in your blog. The best part is, it's free, it customizable, and it look cool...
This is a example from my Anime Blog, promoting anime merchandise from Amazon:
Try to hover your mouse on it, see how cool it stop for you? It can show you the description of the thumbnails, and if you click on it, it will take you to that specific thumbnails location.
This is how you can add it to your blog...
1. Log in to your Blogger account.
2. Go to Template.
3. Select Add a Gadget.
4. Select HTML / Javacsript.
5. Copy and paste the code below:
<marquee behavior="scroll" direction="right" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2">
<a href="YOUR TARGET URL" target="_blank" title="TITLE OF YOUR ITEM">
<img alt="TITLE FOR IMG ALT" height="80" src="YOUR THUMBNAILS URL" width="64" /></a>
<a href="YOUR TARGET URL" target="_blank" title="TITLE OF YOUR ITEM">
<img alt="TITLE FOR IMG ALT" height="80" src="YOUR THUMBNAILS URL" width="64" /></a>
<a href="YOUR TARGET URL" target="_blank" title="TITLE OF YOUR ITEM">
<img alt="TITLE FOR IMG ALT" height="80" src="YOUR THUMBNAILS URL" width="64" /></a>
</marquee>
6. The code above only show up to 3 thumbnails. You can add more simply by copy and
paste the code that I highlight with the blue colour.
7. Let's tweaking the codes to your preference:
direction="right"
This control the direction of your scrolling thumbnails.
If you want it to go left: direction="left"
If you want it to go up: direction="up"
If you want it to go down: direction="down"
* Please note that if you choose the direction to go left or down, it will show the last
thumbnails in the code instead of the first one.
* If you choose the direction of up or down, you need to adjust the size of your thumbnails
to become bigger than the size that I set. If not, It will show up to 3 thumbnails in a row
and it look kinda funny.
8. scrollamount="2"
This control the speed of your scrolling thumbnails.
To make it scroll faster: scrollamount="1"
To make it scroll slower: scrollamount="3"
* Try setting it to "6" to see it become really really slow... ^_^
9. <a href="YOUR TARGET URL"
Change it to the URL address that you want your reader to go when they click on it.
10. title="TITLE OF YOUR ITEM">
Put the title of the thumbnails here. It will show when your reader hover a mouse on
top of the thumbnails.
11. <img alt="TITLE FOR IMG ALT"
Put the title of the img alt here. It is a good practise to named your picture img alt,
for the purpose of Search Engine Optimization.
12. height="80"
width="64"
This is the size I set for my thumbnails. If you want to include a bigger thumbnails,
just adjust the height and width setting here. Just remember to upload a thumbnails
image with the exact size or it will look kinda funny if the size don't match.
13. src="YOUR THUMBNAILS URL"
Change it to the URL address of your thumbnails.
I usually upload a bunch of thumbnails image in a draft post, then click on the HTML
button next to the COMPOSE. Later, I copied the thumbnails URL into a Notepad
program. It makes it easier to modify the codes when you have a lot of thumbnails to
include.
14. Click on Save when your are done, and enjoy the view....
p/s - I'm still searching for a way to make it scroll infinitely, but have not found the codes
yet. If you have a better code, why not share it with me?
By Khairul Nizam
No comments:
Post a Comment