angkatan 87 : SMA 1 DEMAK: Blogger Template 4 columns

Saya mencoba belajar membagikan template blog lewat postingan. Apakah bisa atau tida..., yah saya ingin mempraktekkan dari yang saya baca. Mudah mudahan yang membaca dan mampir ke sini mencobanya, dan memberi masukan ke saya ; bisa atau tidak dipraktekkan. Template ini saya ambil dari web yang menyediakan template gratis. Tampilan templatenya seperti berikut...

Untuk mengambil tampilan seperti gambar tersebut, langkah yang harus dijalankan adalah. Kalau yang sudah punya blog, masuk ke menu customisasi, pilih layout, kemudian pilih edit HTML. Klik tombol "pilih berkas", ini artinya memilih file template yang akan diupload dari komputer yang kita gunakan. File yang akan kita upload dalam bentuk xml. File xml-nya dicopy dari kolom text berikut :

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="'http://www.w3.org/1999/xhtml'" b="'http://www.google.com/2005/gml/b'" data="'http://www.google.com/2005/gml/data'" expr="'http://www.google.com/2005/gml/expr'"> <head> <b:include data="'blog'" name="'all-head-content'/"> <title><data:blog.pagetitle/></title> <b:skin><![CDATA[ /* --- * Blogger Template Style---- * Name: Lexus----- *Designer: J.aghili ----- * URL: www.finalsense.com ------ * Date: January 2008 ----- */ /* Variable definitions ==================== <variable name="textcolor" description="Text Color" type="color" default="#555"> <variable name="PageBgColor" description="Page Background Color" type="color" default="#fff"> <variable name="pagetitlecolor" description="Page Header Color" type="color" default="#e4b181"> <variable name="datecolor" description="Date Header Color" type="color" default="#699"> <variable name="titlecolor" description="Post Title Color" type="color" default="#f90"> <variable name="titlehovercolor" description="Post Title Hover Color" type="color" default="#f63"> <variable name="footercolor" description="Post Footer Color" type="color" default="#80aad5"> <variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#369"> <variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#c93129"> <variable name="sidebarlink" description="Sidebar Link Color" type="color" default="#369"> <variable name="sidebarhover" description="Sidebar Hover Color" type="color" default="#f90"> <variable name="linkcolor" description="Link Color" type="color" default="#80aad5"> <variable name="linkhover" description="Link Hover Color" type="color" default="#f93"> <variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#80aad5"> <variable name="descriptioncolor" description="Description Color" type="color" default="#808080"> <variable name="Commentscolor" description="Comments Text Color" type="color" default="#666"> <variable name="bodyfont" description="Text Font" type="font" default="normal normal 83% Verdana, sans-serif"> <variable name="pagetitlefont" description="Page Header Font" type="font" default="normal bold 340% 'Times New Roman','Georgia'"> <variable name="titlefont" description="Post Title Font" type="font" default="normal bold 105% 'Times New Roman','Georgia'"> <variable name="sidebarheaderfont" description="Sidebar Title Font" type="font" default="normal bold 135% 'Times New Roman','Georgia'"> <variable name="sidebarfont" description="Sidebar Text Font" type="font" default="normal normal 91% 'Verdana','Arial'"> <variable name="descriptionfont" description="Description Font" type="font" default="normal normal 86% 'Verdana','Arial'"> */ /* ---( page defaults )--- */ body {margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background:$PageBgColor} blockquote {margin: 0 0 0 30px; padding: 10px 0 0 20px; font-size: 88%; line-height: 1.5em;} blockquote p { margin-top: 0;} abbr, acronym { cursor: help; font-style: normal;} code {color: #f63;} hr {display: none;} img {border: none;} /* unordered list style */ ul {list-style: none; margin-left: 5px; padding: 0;} li {list-style: none; padding-left: 7px; margin-bottom: 3px;} /* links */ a:link {color: $linkcolor; text-decoration: none;} a:visited {color: $visitedlinkcolor; text-decoration: none;} a:hover {color: $linkhover; text-decoration: none;} a:active {color: $visitedlinkcolor; text-decoration: none;} /* ---( layout structure )---*/ #outer-wrapper {width: 1000px; margin: 0px auto 0; text-align: justify;} #content-wrapper {margin-left: 0px; /* to avoid the border image */ width: 100%;} #main { float: left; width:445px; padding:8px; margin-right:5px; line-height: 1.5em; border: 1px solid #ccc; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar { float: right; width:153px; margin-left: 5px; background: #ddd; color: $sidebartextcolor;border: 1px solid #ccc; line-height: 1.4em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #side-2 {padding: 0px} #ads-bar { padding: 0px } #ads-wrapper {float:right; width:170px; color: $sidebartextcolor; border: 1px solid #ccc; background: #f9f9f9; break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */} #menu-wrapper {float: right; width: 360px;} #sidebar2-wrapper {float:left; width:175px; padding: 0 5px; background: #eaeaea; color: $sidebartextcolor; margin-left:5px; border: 1px solid #ccc; break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */} #center {background:#fff; margin: 10px 0px} /* ---( header and site name )--- */ #header-wrapper { margin: 0; } #header { margin:0; height:300px; width:1000px; color: $pagetitlecolor; background: url('http://lh4.google.com/jvdmds/R5l_tVTh4oI/AAAAAAAABLU/uJFeRDYwWvA/lexus.jpg') no-repeat top left; border: 1px solid #ccc; overflow: hidden} #header h1 { width:450px; font: $pagetitlefont; margin:90px 40px 5px 20px; padding:5px; filter: glow(color=#000000,Strength=5); text-align:left;} #header h1 a { text-decoration: none; color: $pagetitlecolor; } #header h1 a:hover { color: $descriptioncolor; } #header .description {display: block; margin:-10px 5px 5px 20px; width:420px; text-align:left; font: $descriptionfont; color: $descriptioncolor; } /* ---( main column )--- */ h2.date-header {font-size: 73%; color: $datecolor; margin:0px; text-align: left; } .post h3 { text-align: left; margin: 0px; font: $titlefont; color: $titlecolor; border-top: 1px solid #fc6; border-bottom: 1px solid #fc6; } .post {padding:0px;} .post h3 a {color: $titlecolor; text-decoration: none;} .post h3 a:hover {color: $titlehovercolor; text-decoration: none;} .post-footer {line-height:20px; margin:0px; text-align: right; font-size: 88%; color:$footercolor; } .post img {padding: 6px; border-top: 1px solid #ddd; border-left: 1px solid #ccc; border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; } .feed-links {clear: both; line-height: 2.5em; color:$footercolor; border-top: 1px solid #fc6; } .blog-feeds {text-align: right; color:$footercolor;} #blog-pager-newer-link {float: left;} #blog-pager-older-link {float: right;} #blog-pager {text-align: center;} /* comment styles */ #comments { padding-top: 10px; font-size: 95%; line-height: 1.5em; color: $Commentscolor; } #comments h4 { margin: 5px 0px; padding: 2px 0 0 20px; font-family: "Lucida Grande", "Trebuchet MS"; font-size: 110%; color: $Commentscolor; height: 30px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ } #comments ul { margin-left: 0; } #comments li { background: none; padding-left: 0; } .comment-body { padding: 0 10px 0 25px; } .comment-body p { margin-bottom: 0; } .comment-author { margin: 4px 0 0 0; padding: 0 10px 0 60px; color: #999; } .comment-footer { border-bottom: 1px solid #ddd; padding-bottom: 1em;} .deleted-comment { font-style:italic; color:gray; } /* ---( sidebar )--- */ .sidebar h2 {font: $sidebarheaderfont; color: $sidebarcolor;} .sidebar .widget {padding:0 3px;} .sidebar a {color: $sidebarlink; text-decoration: none;} .sidebar a:hover {color: $sidebarhover; } .sidebar li { background: 0 5px; } .profile-textblock {margin-left: 3px;} .profile-img {float:right; margin:5px; border: 1px solid #ddd; padding: 4px;} /* ---( footer )--- */ .clear { /* to fix IE6 padding-top issue */ clear: both;} #footer-wrapper {margin: 0px; padding:0px; font-size: 77%; clear: both;} #footer {margin: 0; width:920px; height:116px; text-align:center; color: #999} #footer-wrapper a {color: #999; text-decoration: none; line-height:62px} #footer-wrapper a:hover{color: #f93; text-decoration: none;} /** Page structure tweaks for layout editor wireframe */ body#layout #outer-wrapper, body#layout #main, body#layout #sidebar { padding-top: 0; margin-top: 0;} body#layout #outer-wrapper,body#layout #content-wrapper { padding:0px} body#layout #sidebar { margin-right: 0; margin-bottom: 1em; } body#layout #header,body#layout #footer, body#layout #main { padding: 0; } body#layout #content-wrapper { margin: 0px; } #navbar-iframe {height:0px; visibility:hidden; display:none} ]]></b:skin> </head> <body> <div id="'outer-wrapper'"> <div id="'wrap2'">  <a href="'#main'" shape="'rect'">skip to main</a> | <a href="'#sidebar'" shape="'rect'">skip to sidebar</a> <div id="'header-wrapper'"> <b:section class="'header'" id="'header'" maxwidgets="'1'" showaddelement="'no'"> <b:widget id="'Header1'" locked="'true'" title="'Take" type="'Header'/"> </b:section> </div> <div id="'center'"> <div id="'content-wrapper'"> <div id="'main-wrapper'"> <b:section class="'main'" id="'main'" showaddelement="'yes'"> <b:widget id="'Blog1'" locked="'false'" title="'Blog" type="'Blog'/"> </b:section> </div> <div id="'menu-wrapper'"> <div id="'sidebar-wrapper'"> <b:section class="'sidebar'" id="'sidebar'" preferred="'yes'"> <b:widget id="'Profile1'" locked="'false'" title="'About" type="'Profile'/"> <b:widget id="'LinkList1'" locked="'false'" title="'Links'" type="'LinkList'/"> <b:widget id="'Poll1'" locked="'false'" title="'Rate" type="'Poll'/"> </b:section> </div> <div id="'sidebar2-wrapper'"> <b:section class="'sidebar'" id="'side2'" preferred="'yes'"> <b:widget id="'BlogArchive1'" locked="'false'" title="'Blog" type="'BlogArchive'/"> <b:widget id="'Feed1'" locked="'false'" title="'Feed" type="'Feed'/"> </b:section> </div> </div> <div id="'ads-wrapper'"> <b:section class="'sidebar'" id="'ads-bar'" preferred="'yes'"> <b:widget id="'HTML1'" locked="'false'" title="'Ads" type="'HTML'/"> <b:widget id="'Label1'" locked="'false'" title="'Ads'" type="'Label'/"> </b:section> </div>  <div class="'clear'"> </div> </div>  </div>  <div class="'footer" id="'footer'"><div id="'footer-wrapper'"> Design by: <a href="'http://www.finalsense.com/services/blog_templates/'" shape="'rect'" title="'Blogger">FinalSense</a> </div> </div> </div> </div> </body> </html>

Setelah upload file xml-nya selesai, pilih replace template. selesai.

Thursday, February 5, 2009

Blogger Template 4 columns

0 comments:

Post a Comment

The Pure of Wisdom

My Facebook

Kompas Entertainment - Gossip

Internasional News

NEWS

Liga Inggris

HOT NEWS

Recent Post

Artikel Design Interior

Blog Alumni SMA 1 Demak

My Demak City Logo

Enjoy with MP3 Playlist

Radio Dakwah

Translate Blog

Blog Archive

Terimakasih Atas Kunjungannya

Followers

Last Comments

Bookmark & Share

Recent Post

Gabung yook ...

Thursday, February 5, 2009

Blogger Template 4 columns

0 comments:

Post a Comment

The Pure of Wisdom

My Facebook

Kompas Entertainment - Gossip

Internasional News

NEWS

Liga Inggris

HOT NEWS

Recent Post

Artikel Design Interior

Blog Alumni SMA 1 Demak

My Demak City Logo

Enjoy with MP3 Playlist

Radio Dakwah

Translate Blog

Blog Archive

Terimakasih Atas Kunjungannya

Followers

Last Comments

Bookmark & Share

Recent Post

Subscribe To

Gabung yook ...