Yuk Kita Bedah Isi Template (part 2)

Apa kabar sobat sharelikers dimanapun berada??. Semoga dalam keadaan sehat walafiat.Hufth setelah 1 minggu disibukkan dengan tugas kuliah akhirnya saya bisa juga untuk ngeblog ria bareng sahabat.Tapi kayaknya gak seperti dulu.Hehehe,tapi saya janji deh akan ngeblog lagi secara rutin.Janji seorang blogger hahaha.

Oh ya kali ini saya mau ngelanjutin bedah template part kedua,hemmm membedah template part 1 nya udah saya bahas sebelumnya monggoo law belum dibaca dibaca dulu hehehe,biar tahu kejelasan dari isi postingan ini.

Pada episode kali ini (ceilahh episode wkwkwk), kita akan membahas yang namanya ada wraper-wrapper -an. bagian header, outer-wrapper, main-wrapper dan sidebar-wrapper. Untuk mempersingkat postingan dan ngga usah panjang lebar dikali tinggi, langsung saja ke TEKAPE …hehehehehehe…


/* Header
-----------------------------------------------
*/

Header berawal di sini

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Header ini terdapat pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog. Selain teks, header juga bisa kita ganti dengan gambar.Sobat bisa mengganti $bordercolor dengan kode warna sobat sendiri misal #ffffff (putih atau yang lainnya)

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

Kode CSS ini mengubah tampilan header bagian dalam.Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan.Sobat bisa mengganti center dengan posisi lain yang sobat kehendaki (misalnya right,left,justify)

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

Mengubah tampilan judul dan deskripsi blog tingkat 1 atau h1 (title blog biasanya).Sobat bisa mengganti $pagetitlefont dengan kode font sobat sendiri misal Helvetica,trebuchet,dll)

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

Mengubah tampilan link yang terdapat pada header

#header a:hover {

color:$pagetitlecolor;

}

Mengubah tampilan link pada header jika pointer mouse berada di atas link. Sobat bisa mengganti $pagetitlecolor dengan kode warna sobat sendiri misal #ffffff (putih atau yang lainnya)

#header .description {

margin:0 5px 5px;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}

Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya pada tingkat 2 yaitu h2

#header img {

margin-$startSide: auto;

margin-$endSide: auto;

}

Mengubah tampilan gambar header

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Outer wrapper adalah tempat dimana bagian-bagian dasar seperti header, main wrapper, sidebar dan footer tersusun diatas bagian ini.Sobat bisa mengganti $bodyfont dengan kode font sobat sendiri.sobat juga bisa menyesuaikan ukuran outer wrapper sobat sendiri dengan mengganti 660 px dengan ukuran bagian lainnya

#main-wrapper {

width: 410px;

float: $startSide;

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 */

}

Main-Wrapper sering disebut juga posting area karena main wrapper adalah area postingan pada suatu Blog.sobat juga bisa menyesuaikan ukuran main wrapper sobat sendiri dengan mengganti 410 px dengan ukuran bagian lainnya

#sidebar-wrapper {

width: 220px;

float: $endSide;

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 ini berfungsi sebagai tempat penyimpanan gadget/widget.
Misalnya gadget yang telah disediakan oleh pihak blogger seperti label, arsip, profile maupun luar blogger seperti widget alexa rank yang tempatnya disamping posting area/main wrapper.Sobat juga bisa berkreasi dengan sidebar sesuai kemampuan sobat mengolah template.dan juga bisa menyesuaikan ukuran sidebar wrapper sobat sendiri dengan mengganti 220 px sesuai ukuran template sobat

/* Headings

----------------------------------------------- */

h2 {

margin:1.5em 0 .75em;

font:$headerfont;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:$sidebarcolor;

}

Kode CSS ini mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar, dll

Sampai di sini dulu ya Sob.Saya harap Sobat tidak bosan berkunjung ke blog saya. Yah meskipun saya jarang update hehehe.Terima kasih untuk Sobat yang sudah berkunjung, berkomentar dan membaca artikel di blog saya.Ditunggu lanjutannya yaaaa.Salam sharelikers ^^.

Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854

Beda Deklarasi Strict dan Transitional Bikin kita Geleng kepala

Assalamualaikum wr.wb

Sepertinya judul diatas benar adanya.Jika kita membicarakan masalah Web Standard, maka kita harus mengetahui tentang XHTML (Silahkan baca artikel mengenai dasar XHTML terlebih dahulu). XHTML sendiri dibagi menjadi 3 model, Yaitu  XHTML Transitional ,XHTML Strict, Dan XHTML Frameset.dan 2 diantaranya yang paling banyak digunakan adalah XHTML Transitional dan XHTML Strict.Ibarat mendirikan suatu negara,Blog kitapun wajib dideklarasikan Bentuknya.

Awalnya Kang YPS sangat Bingung apa sih beda antara Xhtml transitional ama Strict  (sampai sekarang pun masih garuk-garuk kepala). Tetapi keinginan saya untuk ngerti tentang deklarasi file xhtml (dipaksain ) membuat saya menulis artikel Ini. saya pun mulai mencari banyak referensi,dari yang bule sampai lokal,isinya rata-rata memiliki Point sama. Mau tahukan bedanya ? Nih kang YPS share untuk sobat. Bila ada para master ada yang baca mohon diperbaiki tulisan Newbie ini ^^

Bagi sobat yang ingin beralih ke teknologi XHTML, cara yang paling mudah adalah dengan beralih ke XHTML Transitional terlebih dahulu. Karena jika sobat langsung beralih ke XHTML Strict sobat  akan kaget ketika mengecek validasi website anda, karena akan terdapat banyak error. saya punn mengalaminya.Kenapa bisa begitu? hal ini dikarenakan semua bagian untuk mempresentasikan / layout website diatur oleh CSS.
Berikut ini tiga Jenis deklarasi file Xhtml

1.XHTML 1.0 STRICT

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.XHTML 1.0 TRANSITIONAL

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3.XHTML 1.0 FRAMESET

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Yang pertama-tama perlu diketahui adalah, kita mendeklarasikan apakah file kita XHTML Transitional atau XHTML Strict. Dengan mendeklarasikan file kita, maka Search Engine, browser dan validator dapat mengetahui jenis dokumen kita termasuk tipe apa. saya Pernah menulis tentang cara mengurangi kesalahan error pada templatedan ternyata benar Untuk Mencapai valid Xhtml Strict itu sangat sulit (padahal kebanyakan template blogger menggunakan strict).

Dalam deklarasi file Xhtml Strict ada banyak tag-tag Html yang tidak lagi digunakan dengan alasan sudah digantikan Oleh CSS seperti :

1. Elemen yang tidak digunakan lagi
   • Tag di template seperti <u>, <center> dan <font> tidak lagi digunakan. Tag <u> yaitu tag untuk membuat garis bawah sudah tidak dipakai lagi, karena pada CSS kita bisa menggunakan text-decoration:underline;. Demikian pula untuk <font> yang didalam CSS bisa kita ubah sesuka hati, serta <center> yang bisa digantikan dengan text-align:center; di CSS.
   
   
2. Atribut Tag Html yang sudah tergantikan Fungsinya
   
   • Ada lagi tag-tag HTML yang dihilangkan tetapi diganti dengan tag lainnya yaitu <i> yang diganti dengan <em> dan <b> yang diganti dengan <strong> Ada lagi tag HTML penting yang tidak digunakan lagi yaitu <iframe>. Jadi bagi anda pengguna frames maka berhati-hatilah anda tidak bisa membuat web anda menjadi standard. Alasan W3C untuk tidak menggunakan <iframe> karena <iframe> mengambil halaman lain, dan jika halaman lain tersebut tidak standard, maka keseluruhan website akan menjadi kacau. Belum lagi kenyataan bahwa kebanyakan ponsel ataupun PDA tidak bisa menampilkan <iframe>. Karena W3C membuang <iframe>. Tetapi W3C berbaik hati, apabila sobat tetap ingin menggunakan frames maka anda dapat menggunakan XHTML Frameset.(lihat bentuk contoh deklarasinya diatas )
     
     Ada banyak Lagi atribut yang tidak digunakan lagi, dan Menurut sumber yang saya baca yang paling penting saja dan paling banyak digunakan. Yang pertama-tama adalah align, yang hanya boleh digunakan untuk mengatur table. Bgcolor dan background juga sudah dibuang jauh-jauh oleh W3C serta pengguaan noshade pada <br>..
     
     Yang terpenting dan paling menyebalkan adalah target pada tag <a>. Ya atribut target sudah tidak diijinkan lagi. Hal ini menyebabkan kita tidak bisa membuat link yang jik diklik aan memunculkan jendela baru target="_blank". Alasannya adalah, semua browser (hampir semua) sudah menggunakan model tab-tab didalam browsernya. Dan satu lagi alasan dari W3C adalah ponsel dan PDA anda tidak bisa memunculkan jendela browser baru. Karena itu atribut target sudah dibuang oleh W3C.
   
   
   
3. Perbedaan struktur content Dengan Transitional
   
   • Dalam XHTML strict kita harus berhati-hati dalam menyusun dokumen HTML kita. Harus terstruktur dengan baik. Berikut ini adalah contoh yang salah
     
     

     <!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html>
     <head>
     <title>Judul Halaman Web/blog</title>
     </head>
     <body>
     Isi halaman Web<br />
     <img src="images.jpg" width="100" height="100" alt="Gambarmu" />
     </body>
     </html>

     
     Penggunaan struktur seperti itu salah, anda harus meletakkan text dan images didalam <p> atau <div>. Jadi yang benar menurut W3C adalah seperti ini:
     
     

     <!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html>
     <head>
     <title>Judul Halaman Web/blog</title>
     </head>
     <body>
     <p>Isi halaman Web<br />
     <img src="images.jpg" width="100" height="100" alt="Gambarmu" /><p/>
     </body>
     </html>

     Demikian pula untuk tag-tag lain seperti <input> dan <label> yang wajib anda letakkan didalam tag <p>. Karena itu didalam membuat website yang standard anda harus sering-sering mengecek apakah website anda standard menggunakan XHTML Validator .
     

Tapi sobat tidak perlu khawatir,bila sobat menemukan Keerroran pada Blog sobat saat Mengecek Valid Html di W3C masih banyak ditemukan error.Hal ini masih tidak berpengaruh,blog sobat masih bisa diakses,alasannya ya mungkin karena kita masih "numpang" sama Blogspot. Semua yang di Blogspot rata-rata tidak Valid Xhtml 100% (susah bro/sista kalau mau valid sampe 100%). 

Saya pun sudah berusaha mati-matian untuk mendapatkan kevalidan itu masih saja mendapatkan cap 89 error 76 warning dari Validator w3c,sekarang saya biarkan saja,toh emang template dari blogger kayak begitu.(kecuali hosting sendiri saya tidak tahu).Mungkin kita bisa mengambil langkah perbaikan perlahan-lahan walaupun tidak sampai 100% . Adakah Blog sobat yang valid 100%?Hem jika ada,mohon share tipsnya biar saya gak geleng -geleng kepala lagi.^^

Eits tulisan diatas bukan asal copas Nih dia sumbernya kalau mau lihat :

• http://24ways.org/2005/transitional-vs-strict-markup
• http://www.dhimasronggobramantyo.com/artikel/Perbedaan_antara_XHTML_Transitional_dan_XHTML_Strict
• http://fanari-id.com/103-xhtml-dtd-antara-transitional-dengan-strict/

Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854

Yuk Kita Bedah Isi Template (part 1)

يسميللاهيرروهمانيرروهيم

Bicara tentang template sesungguhnya betul saya tidak lah tahu apa-apa,saya buta tentang template,Tetapi keinginan saya untuk belajar dan sharing bareng sahabat,membuat saya ingin menulis artikel Bedah template ini. Jujur,artikel ini bukan murni ilmu saya.Sumpah deh wkwkwk. Ini cuma sekedar share,dan juga sebagai catatan saya,siapa tahu kelak saya jadi Template desainer (amin ya robb) dan mungkin juga sobat yang baca artikel ini juga kecantol minat buat belajar bersama Yang Penting Share.

Artikel Bedah template Ini bakal dibuat Bersambung -sambung sampe season keberapa yah??.yang penting gak bakal lebih panjang dari Sinetron cinta fitri deh akwkwkw. Nah untuk yang pertama ini kita bakal bedah dari bagian yang paling amat dasar,Dari atas (deklarasi file Xhtml) sampai pengaturan CSS body

----------------------------------------

<?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">

penjelasan:

Ini merupakan deklarasi file XHTML Default pada template Blogger dengan jenis Strict. XHTML jenis Strict digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuh oleh CSS. Pada deklarasi ini tidak menggunakan tag font dan table.(lihat perbedaan antara Strict dan Transitional)

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

penjelasan:
Bagian head template blog yang berisi judul blog dan awal dari kode CSS. Biasanya, di sini digunakan untuk meta tag keyword dan meta tag yang lainnya.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

penjelasan:
Body adalah bagian paling dasar dari bagian-bagian template lainnya, body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainnya.(lihat penjelasan sebelumnya tentang tata letak template)

a:link {
color:$linkcolor;
text-decoration:none;
}

penjelasan:
Kode ini untuk mengubah tampilan link pada template blog Anda.Baik itu warna untukk anchor link text ataupun decorationnya

a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}

penjelasan:Nah kalau Ini untuk mengubah tampilan link yang pernah dikunjungi.misal udah pernah diklik,maka linknya berubah warna

a:hover {
color:$titlecolor;
text-decoration:underline;
}

penjelasan:Kalau ketemu css diatasitu fungsinya mengubah tampilan link jika pointer mouse berada di atas link.

a img {
border-width:0;
}

penjelasan:kalau yang Ini Fungsinya mengubah tampilan link bergambar

Nah untuk Ayo bersama kita Membedah  Isi Template kali ini saya rasa cukup sekian,karena saya udah capek juga ngetiknya dan mata juga udah lima watt.Oh ya,artikel ini terbitnya siang mungkin saya sekarang lagi ngorok (baca:tidur/molor).saya terbitkan menggunakan draft post jadi jika sobat comment dan tidak ada respons jangan banting kompi nya yah,sayang mahal akwkwkw. Nanti malam saya Online lagi. Buat para mastah Blogger ampun bila saya sok master disini,saya cuma share apa yang saya tahu.Kan blog saya judulnya yang penting share ^^

Referensi andalan : 

• Kumpulan Tutorial Ngeblog
• dan masukkan dari para mastah yg tidak
  bisa disebutkan satu persatu

Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854

Apa sih Isi dari template itu sebenarnya?

   يسميللاهيرروهمانيرروهيم

Pertanyaan diatas yang merupakan judul posting itu tentu mengawang-awang di benak kita.Apa sih sebenarnya template itu ?. ya bagi saya yang newbie,awalnya juga enggak tahu.Iya toh? kan setiap blogger itu dasarnya dari newbie,dan kemudian tentu ingin setingkat lebih tinggi (meskipun cuma setengah anak tangga naik dari tingkat newbie) untuk lebih jauh mengenal seluk beluk dunia persilatan eh,maksudnya dunia perbloggeran.

Template adalah Tata letak /LAyout halaman web /blog yang menggambarkan susunan bagian -bagian ISi blog dengan menggunakan kode-kode script  dan juga HTML,yang fungsinay menggambarkan penyajian suatu blog kepada para visitor

Salah satu kendala yang mereka hadapi adalah Mengenal Tempe,ehh salah lagi,maksud saya tuh Template. Ehmm,bicara soal template,jujur sampai saat ini saya baru sebatas mengenal belum menyayangi wkwkw,maksudnya belum mengerti betul bagaimana cara membuat tempe,eh template. saat ini baru sebatas menggunakan,memakai,mengkonsumsi atau apalah,yang intinya sudah jadi hasil buatan tangan para master blogger yang terampil dan cakap tentunya.Akan tetapi,seharusnya kita sebagai konsumen tidak hanya sebatas memakai,tapi sebisanya mengenalilah isi dari dompet eh template mu itu,jangan sebatas mengkonsumsi. Ibarat sobat makan obat,sobat harus tahu dulu isi kandungan dan kegunaan dari obat itu,iya toh?.

Sebetulnya gimana sih isi dari template itu sebenarnya?.Apa kah isinya seperti buah durian?oh bukan,atau seperti isi roti?oh bukan juga.Nah,sebetulnya isi template itu jika dilihat dari sisi letak (Bukan kode htmlnya ya),ada beberapa bagian yang harus sobat Ketahui.Perhatikan gambar letak dari bagian-bagian template secara default Berikut ini :

Struktur Template itu berdasrkan letaknya dari yang terluar

1. Body, bagian paling dasar dan terluar  dari bagian-bagian lainya, body pada blog biasanya memenuhi halaman dari browser Anda baru setelah itu barulah tersusun bagian-bagian lainya.
2. Outer-wrapper,Bagian ini adalah tempat dimana bagian-bagian dasar seperti header,main wrapper, sidebar dan footer tersusun diatas bagian ini
3. Header adalah ini tempatnya pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog. Pada Umumnya di header ini ada beberapa bagian lagi :
   
   • Navbar, merupakan kolom navigasi yang secara default disediakan oleh blogspot.
   • Title -wrapper ( header h1),adalah kolom tempat Area title Blog
   • Header (header h2),tidak semua template memiliki header h2,letaknya disebelah title wrapper,sering digunakan untuk meletakkan banner
   • croscol,atau kolom yang terletak antara Header dan main-wrapper,Contohnya pada blog ini adalah pada banner yang letaknya diantara menu dan bagian posting ini
4. Main-wrapper atau Sering disebut juga  area Postingan karena pada main wrapper adalah area postingan pada suatu Blog.
5. Sidebar-wrapper,adalah kolom yang letaknya disamping (baik kanan maupun kiri) dari main-wrapper dan jumlah nya beragam berfungsi sebagai tempat penyimpanan gadget/widget misalnya gadget yang telah disediakan oleh pihak blogger maupun luar blogger . dari asal namanya saja kita sudah tahu yaitu     side + bar,yang artinya kurang lebih kotak yang letaknya disamping
6. Footer-wrapper , ini sama halnya seperti sidebar yaitu tempat penyimpanan gadget/widget pada blog kita namun footer tempatnya dibagian layout paling bawah yaitu dibawah main wrapper dan sidebar. Tapi selain template penyimpanan gadget,footer juga berisi data penting berupa copyright serta perancang dan desain template loh

Sekian dulu pengenalan tata letak bagian-bagian template,selanjutnya akan dibahas stu persatu mengenai Isi atau kode dari Template itu sendiri.Maka dari itu simak selalu Yang penting share.jangan lupa dibookmark yah!

referensi  : http://cahyosite.blogspot.com/2010/06/ini-sering-boogle-alami-saat-menambah.html

Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854