Tutorial to Create Blogger Template

This tutorial is to create simple blogger template, with simple methods. The easiest way to create blogger template is by edit a template. But don't worry, althought this is a simple methods but it can produce a beautifull template, it depend on how you design it. This tutorial is not to create blogger template from beginning but this is to create template by editing a template. Ok lets begin.
Before we begin I suggest you to create a new blog,weI don't wont to destroy your blog.
To follow this tutorial you have to download this template first. downlad template.


We will create a template that contain four main elements, (Bakground, Header, Main and Footer) Like the image :



So you have to create the four elements, You can use Image editor software like Adobe Photoshop, Corel Draw, Paint, etc.
Here's the detail to design it:
1. Create a design like above image.
2. On the backgroun part it should be a Pattern/Tile.
3. Cut for every part (Background, Header, Main and Footer)
it should be like this :

background
header
main
footer

4. Upload your part image on the webhosting like geocities or on the image hosting like photobucket.

Alll right, now we will arrange these part to the HTML.
1. Go to blogger then go to "EDIT HTML" menu.
2. Click on the "Brows" button to upload above template or this template
3. Find this code

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://blogoholic.info/files/bg.jpg') repeat-x top left; }

4. Change the bold text with your image location
5. Then find this code, and change the blod text with your image location :

#center {background: #ffffff url('http://blogoholic.info/files/body.jpg') repeat-y top center;}

6. Find the code below and change the bold text with your image location:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; }

7. Find the code below and change the bold text with your image location:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') repeat-y top center; }


8. Now find the code below

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

this code width: 898px it's the widht of your blog, change it according to your image.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

This code width: 445px; is size/widht of main, you can change it.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }


This code width: 153px; is widht of your right sidebar. and this code width: 195px; is widht your left sidebar. And this code padding-right: 50px; is gap of text on the right sidebar with right line. And this code padding-left: 10px; is gap of text on the left sidebar with left line.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; }

This code height:196px; width:898; is height and widht of your header, Change it according to your Header Image.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') no-repeat top center; }

This code width: 898px; height:80px; is widht and height of your footer.

9. Try to modify and preview it until looks good.
10. If it looks good you can save it.

GOOOD LUCK!!!!!!

0 komentar:

Posting Komentar

Sale! $7.49.com domains at GoDaddy.com - 468x60
o o

Label

portable Internet teaching and learning Top Great Wallpaper Portable software repair word file book reviews download free Portable software Computer others Web software portable word fix word recovery worldwide Antivirus Business Creative teaching Pentesting Windows Big Picture Indonesia Metasploit MS Word Personalized Learning Threats computer forensics Action Plans and Lessons Blog Business Success Radio Blog Talk Radio Blogger Hack change free portable Blogging Leadership free inquiry learning project based learning shortcuts tricks AntiSpam Asia Identity Safe Internet Security Rants and Raves Widgets anti-virus protection doc repair Converter Creative Schools Integrated Learning Menu Ministry NZCurric Network Online Business PDF Report android formulas game global log analysis software virtual assistant work at home Comments Compression Creative teaching Educationalists Google Image Microsoft Mp3 Player Tips Viewer charts exploits formatting gynaecology interviews national standards obstetrics paediatrics perl phishing stellar word repair AV-Test Audio Blog Service Blogger Chrome Creativity DVD Domain Facebook Features Firefox History Language Microsoft Office portable Multimedia NOD32 portable ORTHOPEDICS Online Glossary PHYSIOLOGY Portable Antivirus Portable NOD32 Reader Scan Service State Template Traceroute VPN Video Videos Viruses Vulnerability Web Design antivirus portable customizing eBay free mp3 lookup mp3 download office outlook web access owa printing proxy site rapidshare what are you missing what did they take word recovery tool word repair file 10X 2010 20800mah 2Step 3 A$AP Rocky ANATOMY Access Advanced Uninstaller Akiko Alexa America American Express Animation Anonymous Anyone Apple Safari 3.1.1 Portable Arrington BCBS of TN Backspin Backups Banshee Best Passwords Billiards Blackberry Blog Jet Blog Jet portable CD/DVD Burn Charger Chat Collection Competition Computer viruses Corel Draw X4 Portable Creepy DDoS Desktop Development Dictionary Download free Portable Downloads Drives E N T Educationalists Enable Entertainment Excel FOLLOW ME FORENSIC MEDICINE Fire TV Stick Flashget 1.8 Freeware Full Scope Testing GENERAL MEDICINE Geolocation Giveaway Graphic HEMATOLOGY HTML HTML5 Hacked I C U INTERNAL MEDICINE IPv6 Insight Intelligent Charging. 6.6A/33W. Aluminum 3 USB Car Power Adapter Internet chat messenger Linux LoveWallpapers2010 MICROBIOLOGY Maya Complete Maya Unlimited 2008 Metasploit Pro Michael Microsoft portable Microsoft word portable Mini PC Money Monitoring Most Most Power Car Charger Motivation Mozilla Mozilla Firefox v3.0 Portable Mozilla Firefox Portable Edition v3.0 NEURO MEDICINE NOD32 Norton Account ONCOLOGY Offers Office portable 2010 Online Video Other PATHOLOGY PBS Newhour PDF 2 office PDF to Office PDF2Office portable Paperback Podcasts Portable Adobe Illustrator CS5 Portable All Office Converter Pro 4.0 Portable Blog Jet v.2.0.0.7 Portable Charger Portable USB Portable USB Disk Security Portable USB Disk Security 5.0.0.80 Portable free software Power Bank PowerDVD 8 Deluxe Portable PowerDVD Portable Printer Problems Product Key Product Tutorials Programing Proxy server Quarantine Quick RADIOLOGY RECOSOFT portable Recover Recover Keys Recovery Remove Right Ripper SANS SEO SMRecorder SURGERY SVDownloader Safe Web Scam Scapy School Vision Scurity Search Selena Gomez Smarphone Smart Powe Social network Solid Solutions Space Spam TRAUMA TV Stick Talent Development ThreatCon Toolbar Total Image Converter v2.0.1.0 Traceroute Visulization Track Twitter UROLOGY Uninstall Uninstaller PRO 9.1 VIROLOGY VNC Verification Wanted Webcams Webcast Webmaster Word 2007 portable XP Repair accessdata adobe portable CS5 adware aix app arrays assassin creeds IV author interviews auxiliary modules available biochemistry blackberry enterprise server business toll free number cd burning coldfusion command corel portable corel x4 portable dashboards data crashes data validation dental download game download software drawing drive crashes efile tax extension email recovery encryption europe external drives faster federal tax return extension filing federal tax extension flashget form 4868 free download portable software free download software portable free portabale software free portable mozilla free software free software portable mozilla ftk 2 functions games graphs green ilustrator CS5 portable information theft innovation iphone jboss lft lnk files log2timeline long distance calls long-distance number love notes maya 2008 maya portable mobile broadband mobile devices more mozilla portable navigation netanalysis news nmap opinion options paid to upload password cracking pc viruses portabel games portabel maya portable ESET portable PDF to Office portable blogjet portable game Backspin Billiards portable rapidshare portable safari portable software Portable Autorun Virus Remover 2.3 portable sofware powerpoint prefetch product proxy list ps3 quick r Tri Port Car Charger record regripper repair doc file research rpcclient safari portable scammers scanning scrap files security software XP Repair Pro 2007 sofware portable free spyware system crashes telecommuter temporary files testing the weeknd times toll-free number travel consultant unicornscan update user assist v3.0.657 virtual assistant directories virtual assistant freelance virtual assistant tool virtual assistants virtual jobs virus definition list web application testing webmail website word portable word repair work from home jobs writers z|| Link Exchange
Toko Kaos Satuan

Product




SUCKSHARE.COM My Zimbio o o