What makes this list so special?
- We have gone around the web, browsed nearly a 1000+ templates and handpicked the best blogger templates
- All of the links provided are working and you will be able to download and apply the template
- Wherever possible, we have reviewed the comments and chosen the templates that are working for most of the people
- The best part is that all of these are free
- We have tried to put the different varieties of blogger templates, so different kind of blogs will be able to take advantage of this list
- 140+ Brilliant Free Wordpress Themes Around
- 104 Free Fonts for Web Designers and Logo Artists
- 40+ Sources To Download High-Quality Royalty Free Stock Images
- 26 Essential Firefox Add-ons for Web Designers
Best Free Blogger Templates Around
01.WP-Polaroid
Features Demo Link Download Link
02.Ads Theme
Features Demo Link Download Link
03.Natural Essence
Features Demo Link Download Link
04.Aspire Blogger
Features Demo Link Download Link
05.WP Premium
Features Demo Link Download Link
06.Vinery
Features Demo Link Download Link
07.Daya Earth
Features Demo Link Download Link
08.iTheme
Features Demo Link Download Link
09.iWork
Features Demo Link Download Link
10.Langit
Features Demo Link Download Link
11.Frozen Age
Features Demo Link Download Link
12.Parchment
Features Demo Link Download Link
13.Mush Blue
Features Demo Link Download Link
14.Japanese Fleur
Features Demo Link Download Link
15.Art Imagination
Features Demo Link Download Link
16.Astro
Features Demo Link Download Link
17.Lemon Twist
Features Demo Link Download Link
18.Agenda 03
Features Demo Link Download Link
19.Agenda 04
Features Demo Link Download Link
20.Made in Spain
Features Demo Link Download Link
21.capungdikembang
Features Demo Link Download Link
22.cairo concept
Features Demo Link Download Link
23.Assassins
Features Demo Link Download Link
24.Funky Zine
Features Demo Link Download Link
25.Zanblue
Features Demo Link Download Link
26.Blogy Dead
Features Demo Link Download Link
27.Keep It Simple
Features Demo Link Download Link
28.Widgetlike
Features Demo Link Download Link
29.Google Chrome
Features Demo Link Download Link
30.Grunge Superstar
Features Demo Link Download Link
31.Outdoor
Features Demo Link Download Link
32.UrbanArtist
Features Demo Link Download Link
33.Colourise
Features Demo Link Download Link
34.Blogy O2
Features Demo Link Download Link
35.Mosaico
Features Demo Link Download Link
36.Blogy Minyx
Features Demo Link Download Link
37.Dilectio
Features Click Here Download Link
38.Bloggin’ Out Loud
Features Demo Link Download Link
39.DFire
Features Demo Link Download Link
40.Florascent
Features Demo Link Download Link
41.Jeans
Features Demo Link Download Link
42.Classic ProBlogger
Features Demo Link Download Link
43.Modified Blackout
Features Demo Link Download Link
44.Basic Black Youtube
Features Demo Link Download Link
45.Dark Ritual
Features Demo Link Download Link
46.The Hobbit
Features Demo Link Download Link
47.Andreas02
Features Demo Link Download Link
48.Andreas07
Features Demo Link Download Link
49.OneColumn
Features Demo Link Download Link
50.Lightbox
Features Demo Link Download Link
51.The Other Eden
Features Demo Link Download Link
52.Binary Bonsai
Features Demo Link Download Link
53.softlight
Features Demo Link Download Link
54.Underground
Features Demo Link Download Link
55.Solipsus
Features Demo Link Download Link
56.Retro Mac OS
Features Demo Link Download Link
57.Pink Flower
Features Demo Link Download Link
58.Business Blog
Features Demo Link Download Link
59.Café Blog XML
Features Demo Link Download Link
60.Luxury Car
Features Demo Link Download Link
61.Café Blog
Features Demo Link Download Link
62.Cheetah
Features Demo Link Download Link
63.Blogy Puerto
Features Demo Link Download Link
64.Blogy Portfolio
Features Demo Link Download Link
65.Blogy Cajas
Features Demo Link Download Link
66.Blogy Neosapien
Features Demo Link Download Link
67.Blogy – Hada negra
Features Demo Link Download Link
68.Hemingway
Features Demo Link Download Link
69.hello wiki
Features Demo Link Download Link
70.Black Minimalism
Features Demo Link Download Link
71.Spiderman
Features Demo Link Download Link
72.The Road to October
Features Demo Link Download Link
73.Peaceful Rush
Features Demo Link Download Link
74.Top Secret
Features Demo Link Download Link
75.The Late Show
Features Demo Link Download Link
76.Charcoal 2
Features Demo Link Download Link
77.Graffiti Art
Features Demo Link Download Link
78.Nite Life
Features Demo Link Download Link
79.Communist
Features Demo Link Download Link
80.Connexion
Features Demo Link Download Link
81.Nice Day
Features Demo Link Download Link
82.Simpress 2
Features Demo Link Download Link
83.Business Blue
Features Demo Link Download Link
84.Color Paper
Features Demo Link Download Link
85.Japan Style
Features Demo Link Download Link
86.Forte
Features Demo Link Download Link
87.Zinmag Primus
Features Demo Link Download Link
88.Codigo Geek
Features Demo Link Download Link
89.Gramophonica
Features Demo Link Download Link
90.Zinmag Remedy
Features Demo Link Download Link
91.Revolution Church
Features Demo Link Download Link
92.Brownline
Features Demo Link Download Link
93.Template Ice
Features Demo Link Download Link
94.The Missing Piece
Features Demo Link Download Link
95.My World
Features Demo Link Download Link
96.Pensieri
Features Demo Link Download Link
97.Inspiration
Features Demo Link Download Link
98.City Scape
Features Demo Link Download Link
99.Net Spiel
Features Demo Link Download Link
100.Midnight
Features Demo Link Download Link
101.Comp2
Features Demo Link Download Link
102.CremaA1
Features Demo Link Download Link
103.Photoblog
Features Demo Link Download Link
104.Blogy O2
Features Demo Link Download Link
105.Blogy Curved
Features Demo Link Download Link
106.Balloon
Features Demo Link Download Link
107.Gumball Special
Features Demo Link Download Link
108.Zinepress
Features Demo Link Download Link
109.Sea Breeze
Features Demo Link Download Link
110.Torn Paper
Features Demo Link Download Link
111.Angel
Features Demo Link Download Link
112.Transparency
Features Demo Link Download Link
113.Blackberry
Features Demo Link Download Link
114.Outdoorsy
Features Demo Link Download Link
115.Blogger Notes
Features Demo Link Download Link
116.History Channel
Features Demo Link Download Link
117.Toughpress
Features Demo Link Download Link
118.Maple Leaf
Features Demo Link Download Link
119.Dark News
Features Demo Link Download Link
120.Secret Garden
Features Demo Link Download Link
Theme Dilectio Blogger Templates XML Web 2.0
Theme Dilectio Blogger Templates XML Web 2.0
Here’s a nice three column modern artistic Blogger template with some nice bells and whistles. It has a cool search box and “About You” section with a red/orange background along with a custom date/time stamp for each post. This template is only the second one ever to include javascript tabs within the sidebar. That means instead of the page reloading each time you click on a tab, it dynamically clicks over! Check out the live demo to see it in action.
This free Blogger template is also setup for you to easily add Google AdSense and make money from your blog. If you don’t already have Google AdSense, you should read more about how to make money from Blogger and sign-up. The ad format and colors you should use to best match this template are illustrated below. The 300 x 250 rectangle with #fff3e2 for the border and background, #cc0000 for the text, and #856d65 for the title and url. This will make your ad block blend in nicely with the light pink second column.
You’ll also need to setup the header tabs before they appear. Just edit the “top tabs” widget and create the tabs you want. The “Home” tab automatically appears once you create your first tab.
To setup the recent posts and comments cool dynamic tab section you’ll need to paste in your rss feeds. Read this article on setting up your Blogger recent comments and posts section.
The rest of the configuration is pretty straight forward. If your individual blog post date stamp doesn’t show up, you’ll need to make one more change. Go into your Blogger’s “Settings” tab and then click on “Formatting”. Next, change the “Timestamp Format” (it’s the 4th one down) to this format => “Wednesday, February, 2008″. Make sure you change the “Timestamp Format” and NOT the “Date Header Format”. Many people in the past have told me it didn’t work only to find out they were changing the wrong field.
This template was originally designed by Design Disease for WordPress and was converted into Blogger by Blog and Web. eBlog Templates decided to take it one step further and enhance it to include the dynamic header tabs and javascript recent posts and comments tab section.
Source:eblogtemplates.com
Theme Dilectio Blogger Templates XML Web 2.0 Read More...
May
21
Theme Blogging Pro Blogger Templates XML Web 2.0
Theme Blogging Pro Blogger Templates XML Web 2.0
Theme Blogging Pro Blogger Templates XML Web 2.0
Read More...
Theme Blogging Pro Blogger Templates XML Web 2.0
Read More...
May
20
Theme Ads Theme Blogger Templates XML Web 2.0
Theme Ads Theme Blogger Templates XML Web 2.0
Theme Ads Theme Blogger Templates XML Web 2.0
If you’re looking for a new Blogger template, you came at the right time. Hands down, this is the best template we’ve converted here at eBlog Templates. It’s a wonderful web 2.0 popular blog layout with some great built in ad spots (hence the template name) and features.
It’s either a two or 3 column template (you can change it on the fly) so you get the best of both worlds. This Blogger template is what I call a “powerhouse” template since almost all the features you need are already built in. On top of that, it’s quite easy to setup and makes your blog look like a professional site without much effort.
I predict this template will be a top template on this site within a few months, if not weeks. With the amount of effort that went into converting this template and attention to details, I sure hope you appreciate this free amazing new xml Blogger/Blogspot template.
Features Include
You can see from this screenshot that the actual editor is nicely setup so you don’t need to scroll or try and figure out how to click on the “edit” widget links. Most templates that you download make it tough to edit — not this one!
This template does require some configuration in order to get it working as designed. Please follow the steps below if you’d like it to work properly. I also recommend backing up your existing template before changing just in case you run into any problems. You could also setup a new Blogger blog as a test area and try installing it there first.
Top Tabs Setup
When you first install this template the top tabs will not be visible which is normal. You’ll need to go into the Blogger page element layout editor and edit the “Top Tabs” widget. It’s a link list so just add whatever tabs you want. Don’t add a “Home” tab since it will automatically appear once you create and save the tab widget.
Header Ad Banner
The default banner is hardcoded into the template but will disappear when you add anything to this widget. It’s an HTML widget so you can put the banner ad code straight into this box. This widget can also be deleted if you don’t have a 468 x 60 and you’ll just be left with the black header. Here’s the default ad code if you want to use it as a model:
FeedBurner RSS and Email Links
To get this section working you’ll first need to have a FeedBurner account. If you don’t already have one, please read the “How to Setup FeedBurner on Blogger” article and then come back. Another option is to just delete this widget if you’re not interested in knowing your subscriber count or allowing your readers an easy way to subscribe.
Once you’ve got your FeedBurner account, you’ll need to edit this template code and replace a few parts. Search your template code for the following line <!-- Replace Your RSS, RSS Email Subscription, and Technorati --> and then look right below that for the rss feed link.
http://feeds.feedburner.com/<strong>YOUR-FEED-NAME-HERE</strong> Replace the text in red with your FeedBurner name (i.e. eBlogTemplates is ours)
Next we’ll need to update the subscribe via email link with your feed id. You’ll need to make sure to enable subscribe via email within FeedBurner otherwise this part won’t work.
http://www.feedburner.com/fb/a/emailverifySubmit?feedId=YOUR-FEED-ID-HERE&loc=en_US
After you’ve changed both of these areas save your template and check to see if it works. If you’re having trouble finding your feed name or id, please read our article above or see FeedBurner’s help section to locate it.
125 x 125 Ad Section
These are the three ads in the right sidebar which you need to edit the template code to change. Search the template code for and then look right below that for the three lines of ad code which are:
If you’ve got ads to place in here, then just paste the code into the template. I recommend signing up for your own Text Link Ads account and using them. Each referral you convert, you get $20 (or $25 I forget). If you don’t have ads to use, you can either leave our default ads or delete this widget altogether.
Recent Posts and Comments Widgets
This one is easy to setup since we’ve already written an entire article dedicated to this. Please see “How to Setup Recent Comments and Posts Widgets” to configure these two widgets.
Recent Readers Widget
You’ll need to have MyBlogLog and BlogCatalog accounts if you want to use this widget. The default widget will show the original author’s pictures so please either delete this widget or change the account ids to your own. Once you’ve setup these up, then edit the template code and search for <!-- Replace "2007112507294841" with your your mybloglog id --> and then replace the account numbers with yours.
Live Traffic Feed Widget
This is a really cool feature within this template and the best part is you don’t need to do anything to setup it up! There are some further options if you click on “options >>” on your actual blog page under the widget but that’s it.
You should now have the template all setup and ready to go. I hope you enjoy this beauty and please make sure to keep the footer links intact since numerous hours of my time and the original designer were put into making it. That’s all we ask for giving away this template! Enjoy!
Special thanks to Eric over at Blogging Secret for designing this wonderful template originally for WordPress.
Revision History
Update (3/3/08) - Per a couple requests and to make this template even more flexible, I’ve changed how underlined links are handled. You can now edit the underlined color via the Blogger “Fonts and Colors” section along with 10+ additional other color variables. Less work for you having to mess with the .css template code now.
Update (3/5/08) - Added in post author tags so you can toggle the “By Author Name” within the posts. Also compressed the css so the file is much slimmer and cleaner.
Update (3/14/08) - The individual posts Google AdSense code block was missing and has now been added to the template code.
Update (4/18/08) - Fixed layout screen so the two widgets aren’t overlapping.
Source:eblogtemplates.com
Theme Ads Theme Blogger Templates XML Web 2.0
Read More...
Theme Ads Theme Blogger Templates XML Web 2.0
If you’re looking for a new Blogger template, you came at the right time. Hands down, this is the best template we’ve converted here at eBlog Templates. It’s a wonderful web 2.0 popular blog layout with some great built in ad spots (hence the template name) and features.
It’s either a two or 3 column template (you can change it on the fly) so you get the best of both worlds. This Blogger template is what I call a “powerhouse” template since almost all the features you need are already built in. On top of that, it’s quite easy to setup and makes your blog look like a professional site without much effort.
I predict this template will be a top template on this site within a few months, if not weeks. With the amount of effort that went into converting this template and attention to details, I sure hope you appreciate this free amazing new xml Blogger/Blogspot template.
Features Include
- Two or Three right side columns which are easy to switch (default is three)
- Three great location ad spots (header banner 468 x 60, three 125 x 125 buttons in sidebar, and a 468 x 60 AdSense banner above the first post)
- Integrated Feedburner rss and subscribe via email sidebar module (also includes “add to favorites” Technorati link)
- Built-in live traffic feed widget from FEEDJIT
- Built-in MyBlogLog and BlogCatalog recent reader widgets
- Dynamic tabs easily created by editing the link list widget
- Search box without the need for a “go” button
- Recent posts and comments widgets
- Nicely designed individual blog post comments section
- Properly setup Blogger layout editor
You can see from this screenshot that the actual editor is nicely setup so you don’t need to scroll or try and figure out how to click on the “edit” widget links. Most templates that you download make it tough to edit — not this one!
This template does require some configuration in order to get it working as designed. Please follow the steps below if you’d like it to work properly. I also recommend backing up your existing template before changing just in case you run into any problems. You could also setup a new Blogger blog as a test area and try installing it there first.
Top Tabs Setup
When you first install this template the top tabs will not be visible which is normal. You’ll need to go into the Blogger page element layout editor and edit the “Top Tabs” widget. It’s a link list so just add whatever tabs you want. Don’t add a “Home” tab since it will automatically appear once you create and save the tab widget.
Header Ad Banner
The default banner is hardcoded into the template but will disappear when you add anything to this widget. It’s an HTML widget so you can put the banner ad code straight into this box. This widget can also be deleted if you don’t have a 468 x 60 and you’ll just be left with the black header. Here’s the default ad code if you want to use it as a model:
<a href="http://www.linkworth.com?a=10230" target="_blank"> <img src="http://www.linkworth.com/adm/affiliate_manager/affiliate_banners/bann-36.gif" border="0" /> </a>
FeedBurner RSS and Email Links
To get this section working you’ll first need to have a FeedBurner account. If you don’t already have one, please read the “How to Setup FeedBurner on Blogger” article and then come back. Another option is to just delete this widget if you’re not interested in knowing your subscriber count or allowing your readers an easy way to subscribe.
Once you’ve got your FeedBurner account, you’ll need to edit this template code and replace a few parts. Search your template code for the following line <!-- Replace Your RSS, RSS Email Subscription, and Technorati --> and then look right below that for the rss feed link.
http://feeds.feedburner.com/<strong>YOUR-FEED-NAME-HERE</strong> Replace the text in red with your FeedBurner name (i.e. eBlogTemplates is ours)
Next we’ll need to update the subscribe via email link with your feed id. You’ll need to make sure to enable subscribe via email within FeedBurner otherwise this part won’t work.
http://www.feedburner.com/fb/a/emailverifySubmit?feedId=YOUR-FEED-ID-HERE&loc=en_US
After you’ve changed both of these areas save your template and check to see if it works. If you’re having trouble finding your feed name or id, please read our article above or see FeedBurner’s help section to locate it.
125 x 125 Ad Section
These are the three ads in the right sidebar which you need to edit the template code to change. Search the template code for and then look right below that for the three lines of ad code which are:
<a href="http://www.widgetbucks.com/home.page?referrer=7116002"> <img src="http://i254.photobucket.com/albums/hh92/eblogtemplates/adstheme/banner-widgetbucks.gif" border="0px" /></a> <a href="http://www.linkworth.com/?a=10230"> <img src="http://i254.photobucket.com/albums/hh92/eblogtemplates/adstheme/banner-linkworth2.gif" border="0px" /></a> <a href="http://www.text-link-ads.com/?ref=2164"> <img src="http://i254.photobucket.com/albums/hh92/eblogtemplates/ads/text_link_ads_F_125x125.gif" border="0px" /></a>
If you’ve got ads to place in here, then just paste the code into the template. I recommend signing up for your own Text Link Ads account and using them. Each referral you convert, you get $20 (or $25 I forget). If you don’t have ads to use, you can either leave our default ads or delete this widget altogether.
Recent Posts and Comments Widgets
This one is easy to setup since we’ve already written an entire article dedicated to this. Please see “How to Setup Recent Comments and Posts Widgets” to configure these two widgets.
Recent Readers Widget
You’ll need to have MyBlogLog and BlogCatalog accounts if you want to use this widget. The default widget will show the original author’s pictures so please either delete this widget or change the account ids to your own. Once you’ve setup these up, then edit the template code and search for <!-- Replace "2007112507294841" with your your mybloglog id --> and then replace the account numbers with yours.
Live Traffic Feed Widget
This is a really cool feature within this template and the best part is you don’t need to do anything to setup it up! There are some further options if you click on “options >>” on your actual blog page under the widget but that’s it.
You should now have the template all setup and ready to go. I hope you enjoy this beauty and please make sure to keep the footer links intact since numerous hours of my time and the original designer were put into making it. That’s all we ask for giving away this template! Enjoy!
Special thanks to Eric over at Blogging Secret for designing this wonderful template originally for WordPress.
Revision History
Update (3/3/08) - Per a couple requests and to make this template even more flexible, I’ve changed how underlined links are handled. You can now edit the underlined color via the Blogger “Fonts and Colors” section along with 10+ additional other color variables. Less work for you having to mess with the .css template code now.
Update (3/5/08) - Added in post author tags so you can toggle the “By Author Name” within the posts. Also compressed the css so the file is much slimmer and cleaner.
Update (3/14/08) - The individual posts Google AdSense code block was missing and has now been added to the template code.
Update (4/18/08) - Fixed layout screen so the two widgets aren’t overlapping.
Source:eblogtemplates.com
Theme Ads Theme Blogger Templates XML Web 2.0
Read More...
May
19
Theme Frozen Age Blogger Templates XML Web 2.0
Theme Frozen Age Blogger Templates XML Web 2.0
Theme Frozen Age Blogger Templates XML Web 2.0
This template gets it’s chilly name from the snow covered mountain header image. It’s a nice looking new Blogger template with two columns and several sidebar widgets already built in. You get the recent comments and recent posts widget (you’ll need to enter your blog feeds in order to make it work).
It also comes installed with header tabs which need to be setup within your Blogger template layout screen. Please note, the search box will NOT be aligned properly when you first load up this template. Once you add at least one new top tab via the link list, everything will show up properly. Please don’t post a comment below telling us that the template is broken.
The header image can also be changed but you’ll need to edit the template code. Whatever new image you decide to use, make sure the corners are rounded otherwise it won’t match the existing layout and design. You’ll need some photo editing experience to do this. The image file img04.jpg is 960px x 147px.
This template was originally designed by Free CSS Templates and then ported over to Blogger by Template Go Down. eBlog Templates then took the template one step further and enhanced it with easy to setup header tabs, extra sidebar widgets, and a clean template layout interface.
Source:eblogtemplates.com
Theme Frozen Age Blogger Templates XML Web 2.0
Read More...
Theme Frozen Age Blogger Templates XML Web 2.0
This template gets it’s chilly name from the snow covered mountain header image. It’s a nice looking new Blogger template with two columns and several sidebar widgets already built in. You get the recent comments and recent posts widget (you’ll need to enter your blog feeds in order to make it work).
It also comes installed with header tabs which need to be setup within your Blogger template layout screen. Please note, the search box will NOT be aligned properly when you first load up this template. Once you add at least one new top tab via the link list, everything will show up properly. Please don’t post a comment below telling us that the template is broken.
The header image can also be changed but you’ll need to edit the template code. Whatever new image you decide to use, make sure the corners are rounded otherwise it won’t match the existing layout and design. You’ll need some photo editing experience to do this. The image file img04.jpg is 960px x 147px.
This template was originally designed by Free CSS Templates and then ported over to Blogger by Template Go Down. eBlog Templates then took the template one step further and enhanced it with easy to setup header tabs, extra sidebar widgets, and a clean template layout interface.
Source:eblogtemplates.com
Theme Frozen Age Blogger Templates XML Web 2.0
Read More...
May
18
Theme WP Premium Blogger Templates XML Web 2.0
Theme WP Premium Blogger Templates XML Web 2.0
This Blogspot template includes all the features of the original WordPress theme (even the javascript side bar tabs!) and all you need to do is configure them.
Features include:
- RSS feed
- Feedburner subscribe to email
- Three 125×125 ad spots
- Dynamically created header tabs
- Search bar
- Very cool sidebar tab switching without the page reloading (Never used on a Blogger template before!
- Recent comments and posts widgets
- Topics and Blogroll widgets
- Footer link widget
Lim dette in forann det innleget du vill ha Html scrollbox i.
Deretter drar du bare inn texten du vil ha i boksen.
For å endre bredde og høyden så kan du se under her. Jeg bruker som regel <"height: 650px;
og width:450px;">
<div style="font: 16px/26px Georgia, Garamond, Serif; height: 300px; overflow: scroll; width: 450px;">
For å marke alt er hurtigtasten ctrl + a
¤ kopiere ctrl + c ¤ lime inn ctrl + v ¤
________________________________________________________
<!-- HTML Codes by Quackit.com -->
<div style="height:120px;width:250px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.
</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/html_scroll_box.cfm">HTML scrollbox</a></p>
<div style="height:120px;width:250px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.
</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/html_scroll_box.cfm">HTML scrollbox</a></p>
displaying all blogger templates
friday, september 7, 2007
Cat Crazy: 3 Column Blogger Template XML
- Click here to view Demo
- Original design by Sosuechtig.de
- Converted to Blogger by Dafool
- <<Download Template>>
- How to install an XML Template
Klikk på linene for å legge dette til på bloggen din"!
Jeg har hentet dette her ifra "denne linken"
Det er mye rart du kan gjøre det er også javascript koder der, og PHP koder. Nettsiden der gjør resultater av hvor bra nettside du kan lage..
- Romantic hearts following mouse cursor
- Search box to find texts on the pages
- Snow on the page
- Rain on page
- Today's date on website on a nice calendar
- A user mouse follower analog clock
- Sparkles around mouse
- Change color of the scrollbar and make it colorful
- Put password on your website to protect your pages
- Show welcome message to visitors of your website
- Set your website as the visitor's homepage
- Shake Internet Explorer
- How to print a page in HTML pages
- Calculator in your page
- Dancing status bar sliding nicely
- Background changing color effect
- Message to user by clicking a button
- Combo box link box to browse your website easily
- Redirect to another page and link automatically to other pages
- Different times of the world by the users choice from a list
[1] 2 3 4 5 Next Page
Xara Web Design 6!
En utgave som gjør det stolt over det som blir proft!
Free Full Download : http://is.gd/XaraWebDesigner6
More Free Full Download : http://is.gd/DownloadSection
+++4adobe Products Free Full Download+++
link : http://is.gd/4dobefulldownload
_______________________________________________________________________
We Schools har de beste forklaringene på html koding. kjekk linken. er det noe dere lurer på om html koding, så er det bare og spørre meg =) Good Luck!
http://www.w3schools.com/html/default.asp
______________________________________________________________________
her kan dere laste ned design og masse av html koder som dere kan bruke til bloggen dere =) "Nice to Now"
_______________________________________________________________________
Html koding : Mail: trysilgutten_il@hotmail.com
<span style="font-size: x-large;">
</span>
Noen tips til hurtigtasten på pc-en.
CTRL + A = Merk alt
CTRL + C = Kopier
CTRL + V = Lim inn
CTRL + F = Søk
For fargekart så har du nettisen her, En farge kode starter alltid med #:
http://www.myspacedev.com/color-codes/
--------------------------------------------------------------------------------
RAMME RUNDT BLOGGEN
Hvordan gjør jeg dette?
Du limer bare inn koden i Stilsettet.
Koden du skal legge inn er:
border: 2px dotted #000000; (<----- det er farge tonen)
Hvor legger jeg den inn?
Du legger den inn under #wrapper og #footer. Ca. sånn her skal det se ut:
(Du kan også legge koden inn under #header, hvis du vil ha en ramme rundt headeren også).
#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;
Hvis du ikke vil ha en 'prikkete' ramme, så skriver du solid istedenfor dotted. For å endre tykkelsen på rammen, så kan du for eks. skrive 3px eller hvis rammen skal være mindre så skrive du bare 1px.
--------------------------------------------------------------------------------
MENYEN FRA HØYRE TIL VENSTRE!
Hvordan gjør jeg dette?
Du limer bare inn koden i Stilsettet.
Koden du skal legge inn er:
}
#main {
float: right;
}
#side {
float: left;
Hvor legger jeg den inn?
Du legger den inn under #wrapper.
Slik skal det se ut sånn ca:
#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#main {
float: right;
}
#side {
float: left;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;
Hvis du vil ha menyen i en liten boks, så skal du legge inn denne koden:
border: 1px solid #000000;
background-color: #4D4D4D;
Hvor legger jeg den inn?
Hvis du ser under her så ser du hvor du skal lime den inn.
#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#main {
float: right;
}
#side {
float: left;
border: 1px solid #000000;
background-color: #4D4D4D;
}
--------------------------------------------------------------------------------
MIDTSTILLE BLOGGEN DIN
Koden du skal bruke:
margin-left: auto;
margin-right: auto;
Hvor legger jeg den inn?
Den skal du legge inn under #header, #wrapper og #footer.
Slik skal det se ut:
#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;
}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;
}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
--------------------------------------------------------------------------------
SMAL BLOGG
Koden:
width: 610px;
Hvor legger jeg den inn?
Du legger den under #header, #wrapper og #footer.
Slik skal det se ut da:
#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;
width: 700px;
}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;
width: 700px;
}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
width: 700px;
}
Nå er det bare å endre tallet til hva du måtte ønske. 600px eller kanskje 800px. Du bestemmer.
--------------------------------------------------------------------------------
BAKGRUNNSBILDE SOM "STÅR FAST"
Koden:
BODY {
background-image: url("her skal URL'en til bildet stå");
background-attachment: fixed;
background-position: right bottom;
background-repeat: repeat;
}
Hvor legger jeg den inn?
Den skal du lime inn øverst i stilsettet.
--------------------------------------------------------------------------------
ENDRE "X ANTALL KOMMENTARER"
Vil du at for eksempel at det skal stå "x søte små" istedenfor "x kommentarer", så gjør du dette:
Design -> Rediger -> Maler
- Trykk på CTRL + F tasten på tastaturet.
- Søk på "comment".
- Der skal det stå: " <a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a> "
- Det du skal gjøre er å endre litt på koden slik:
<a href="${EntryPermaLink}#comment">${EntryCommentCount} søte små</a>
--------------------------------------------------------------------------------
ENDRE BAKGRUNN FOR OVERSKRIFTER
Koden:
h2 {
cursor:default;
background-color: #000000; <- Her endrer du bakgrunnsfarge..
color: #16CC16;
font-size:9pt;
font-family:tahoma;
letter-spacing:1px;
line-height:13pt;
text-align: center;
padding: 1px;
font-weight: bold;
text-transform: uppercase;
border-bottom: 2px solid #16CC16;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
Hvor legger jeg den inn?
Den skal du lime inn nederst i stilsettet ditt.
Og så er det bare og lagre stilsettet.
--------------------------------------------------------------------------------
SLIK SER DU HVOR MANGE SOM LESER BLOGGEN DIN AKKURAT NÅ
Koden:
<!-- Start FastOnlineUsers.com --> <a href="http://www.fastonlineusers.com" mce_href="http://www.fastonlineusers.com"> <script type="text/javascript" src=http://fastonlineusers.com/on4.php?d=LINK TIL DIN BLOGG HER!!! mce_src=http://fastonlineusers.com/on4.php?d=LINK TIL DIN BLOGG HER!!!></script> </a> leser denne bloggen NÅ</a> <!-- End FastOnlineUsers.com --></div>
Hvor legger jeg den inn?
Endre profil - > Beskrivelse
I ruten for beskrivelse skal du lime inn koden, og du må huske på å legge inn linken til bloggen din. :)
--------------------------------------------------------------------------------
RAMME RUNDT HELE SIDEN
Koden:
border: 8px solid #000000;
Hvor skal jeg legge den inn?
Helt øverst i stilsettet.
Slik skal det se ut;
body {
background-color: #FFFFFF;
font-family: times new roman;
border: 8px solid #000000;
}
--------------------------------------------------------------------------------
GOOGLE OVERSETTER PÅ DIN BLOGG
Først går du inn på; http://translate.google.com/translate_tools?hl=no
Der henter du koden.
Hvor skal jeg legge den inn?
Design -> Rediger -> Maler
Når du er inne på Maler, så trykker du på CTRL + F tastene. Der skal du søke på "sidebar". Under der, skal du lime inn koden du hentet på nettsiden. Og så er det bare å lagre malen.
--------------------------------------------------------------------------------
ENDRE FOR HVA DET STÅR PÅ KOMMENTAR KNAPPEN
Slik gjør du det:
Gå inn på Design -> Rediger -> Maler.. Når du er på Maler, så ser du at det står Index (forsiden). Trykk der og velg; Enkeltinnlegg. Deretter trykker du CTRL + F på tastaturet ditt og så søker du på " Send kommentar ". Istedet for at det står 'Send kommentar', så kan du jo skrive hva du enn vil. Kanskje "Nå blir jeg glad :)" eller noe annet.
--------------------------------------------------------------------------------
HVORDAN FÅ HEADEREN(BILDE) PÅ PLASS DER OPPE
Koden du skal bruke er:
#header {
background-image: url(http://www.settinnlenkeher.jpg);
background-repeat: no-repeat;
height: 100px;
width: 800px;
}
Hvor skal jeg legge den inn?
Design -> Rediger
Så limer du bare inn koden i stilsettet ditt.
--------------------------------------------------------------------------------
SHOUTBOX PÅ DIN BLOGG :D :D
Du trykker øverst der det står: ShoutMix Chat. Da kommer det opp et nytt vindu. Nå skal du trykke på 'CREATE YOUR SHOUTBOX NOW'. Deretter skriver du inn informasjon osv, du skjønner det nok. :)
Hvor skal jeg legge inn koden?
Design -> Rediger -> Maler.
Trykk CTRL + F på tastaturet ditt, og søk på 'sidebar'. Under der legger du inn koden.
Nå er det bare å trykke på Lagre Malen og da skal den ligge på framsiden av bloggen din.
--------------------------------------------------------------------------------
STØRRE PROFILBILDE
Koden du skal bruke er:
<img src="PICTURE URL" height="100">
Forklaring:
Picture url skjønner du sikkert. Der du skal legge inn linken til bildet ditt.
100, der kan du sette inn et tall, og det bestemmer hvor stort bildet ditt blir.
Slik gjør du det:
Design -> Rediger -> Maler.
Her skal du finne: <img src="${ProfileImageUrl}" alt="${ProfileName}" />.
Så du kan for eksempel søke (CTRL + F) på 'profilename'. Du skal deretter bytte ut (<img src="${ProfileImageUrl}" alt="${ProfileName}" />) med koden; <img src="PICTURE URL" height="100">.
For å legge inn linken til bildet, så må du laste opp bildet ditt på www.tinypic.com under "Direct Link for Layouts" henter du linken som du skal legge inn i koden. Og du kan endre størrelsen for bildet ditt også hvis du vil.
Nå trykker du på Lagre Malen og da skal bildet ditt være større.
--------------------------------------------------------------------------------
STØRRE OVERSKRIFT (ARKIV, KATEGORIER osv.)
Hvordan gjør jeg dette?
Design -> Rediger -> Maler.
Søk (CTRL + F) på 'arkiv'. Når du finner denne; <h3>Arkiv</h3>. så kan du istedenfor h3, skrive h1.
Det samme gjør du med Kategorier, Arkiv, Siste innlegg, Siste kommentarer og Lenker.
Nå trykker du på Lagre Malen og da skal overskriftene være større.
--------------------------------------------------------------------------------
MINDRE/STØRRE SKRIFT PÅ INNLEGGENE DINE
Koden du skal bruke:
font-size: 10pt;
Hvor skal jeg legge den inn?
Den skal du legge inn under wrapper.
Slik for eksempel, skal det se ut;
#wrapper{
background-color: #FFFFFF;
font-size: 10pt;
}
Det eneste du trenger å gjøre nå er å endre tall, vil du ha større skrift skriver du for eksempel 12, eller kanskje du vil ha mindre skrift, så skriver du 8...
--------------------------------------------------------------------------------
FÅ BORT NAVNET OVER HEADEREN
Koden:
#header h1, #header p { display:none }
Hvor skal jeg legge den inn?
Den skal du legge nesten helt nederst i stilsettet ditt.
Slik skal det noenlunde se ut;
#header { color: #FFFFFF; }
#header h1, #header p { display:none }
h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #FFFFFF; }
--------------------------------------------------------------------------------
FÅ STØRRE SKRIFT PÅ NAVNENE I INNLEGGENE
Slik gjør du det:
Design -> Rediger -> Maler -> Enkeltinnlegg
Trykk på CTRL + F, søk på h4. Da skal du finne denne linja; <h4>${CommentAuthorLinkIf}</h4>
Istedet for at det står <h4>, endrer du 4-tallet til 1.
Slik skal det se ut:
<h1>${CommentAuthorLinkIf}</h1>
Trykk lagre malen, og da er navnene på innleggene større.
--------------------------------------------------------------------------------
FÅ BORT LINKEN (BLOGG.NO) UNDER HEADEREN DIN
Slik gjør du det:
Design -> Rediger -> Maler.
CTRL + F. Søk på blogg.no, så skal du lete etter linjen;
<div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a> » ${BlogTitle}</div>
Denne skal du fjerne altså.
Etter du har tatt bort den, så skal du lagre malen, og da skal linken under headeren være borte.
--------------------------------------------------------------------------------
RAMME RUNDT HVERT INNLEGG
Koden:
}
.entry {
border: 1px solid #708090;
background: #FFFFFF;
text-align: center;
}
Hvor skal jeg legge den inn?
Den skal du legge helt nederst i stilsettet ditt.
--------------------------------------------------------------------------------
FÅ ET LITE IKON ATTMED 'KOMMENTARER' F.EKS.
Kode:
<img src="http://i43.tinypic.com/2crm3qu.gif">
Hvor skal jeg legge den inn?
Design -> Rediger -> Maler.
Trykk på CTRL + F. Søk på Kommentarer. Når du har funnet en linje som dette; <a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
Så skal du legge inn koden bak. Slik at det ser ut som dette:
<img src="http://i43.tinypic.com/2crm3qu.gif"><a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
Trykk Lagre malen, og da skal det være et lite bilde bak "Kommentarer".
-----
Det samme gjør du, hvis du vil ha bilde attmed dato...
Du bruker da denne koden; <img src="URL-adressen til bildet">
For å finne Url-adressen til et bilde gjør du ved å høyreklikke eller laste opp bildet på tinypic.
Og så må du inn på Maler for å legge inn koden.
--------------------------------------------------------------------------------
MENY UNDER HEADEREN
Koden du skal bruke:
<a href=LINK TIL INNLEGGET><img src=URL-ADRESSEN TIL BILDET></a>
Det første du må gjøre er å lage et bilde i f.eks. paint. Du kan lage det uansett, slik som du vil, f.eks. som et hjerte, trekant eller bare en liten firkant. Og du må huske å skrive hva det gjelder, f.eks. du kan skrive på det ene bildet; Om meg. Når du har gjort det så må du laste bildet opp på en nettside. Det kan du gjøre på www.tinypic.com. Nå er det bare å legge inn koden. Og som du ser under så er det bare lagt inn en link som blir å vises under headeren. Men hvis du vil ha flere så er det bare å lage flere bilder og legge inn flere koder under den første du la inn..
Hvor skal jeg legge inn koden?
Design -> Rediger -> Maler.
Søk (CTRL + F) på " BlogDescription ". Og da skal du legge inn koden under </div> .
Slik skal de se ut:
<h1>${BlogTitle}</h1>
<p>${BlogDescription}</p>
</div>
<a href=www.dinblogg.blogg.no><img src=http://dittbilde.jpg></a>
<div id="wrapper" class="yui-gc">
Nå trykker du på Lagre Malen og da skal det være en meny under headeren din.
--------------------------------------------------------------------------------
MELLOMROM MELLOM HEADER OG SELVE BLOGGEN
Koden du skal bruke:
margin: 0px 0px 10px 0px;
Hvor skal jeg legge den inn?
Design -> Rediger
Koden skal du legge inn under header.
Det skal ca. se slik ut:
#header {
background-color: #FFFFFF;
background-image: url(url-adressen til bildet);
background-repeat: no-repeat;
height: 420px;
width: 800px;
margin: 0px 0px 10px 0px;
Hvis du vil ha større eller mindre mellomrom, så endrer du tallet der hvor det står 10.
--------------------------------------------------------------------------------
FÅ BORT RAMMEN RUNDT PROFILBILDET DITT
Koden du skal bruke:
<img style="float: left; border: 0;" src="URL-ADRESSEN TIL BILDET DITT" height="200">
Forklaring:
200 = der kan du velge hvor stort bildet skal være.
URL = Der skal du sette inn adressen for profilbildet ditt.
Hvor skal jeg legge inn koden?
Design -> Rediger -> Maler.
Søk (CTRL + F) på "profile".
Slik skal det ca. se ut:
<div id="profile" class="clearfix">
<div>
<a href="${ProfileUrl}" title="${ProfileName}">
<img style="float: left; border: 0;" src="URL-ADRESSEN TIL BILDET DITT" height="200">
</a>
</div>
________________________________________________________________________
Håper dette var til nytte for å få en fin forlkaring på hva som ligger bak av koder til HTML :)
Good luck
Kementer gjerne ved spørsmål!
Mail: trysilgutten_il@hotmail.com
0 kommentarer:
Legg inn en kommentar