Membuat Halaman Blog Dinamis, bag kedua

Ini kasus lama yang pernah saya posting pada tahun 2007 lalu. Dan akhir-akhir ini mulai di pergunakan lagi semenjak banyak template blogcepot nyadur dari theme wordpress, terutama untuk layout berinisial “ M “.

Kalau dulu trik ini untuk menyembunyikan atau mengontrol gadget dari halaman depan dan halaman content page, maka perkembangan selanjutnya trik ini di gunakan untuk menyembunyikan atau mengontrol ukuran kolom dan sifatnya.

teorinya yang saya hapal dan pahami begini.

Pada dasarnya blogcepot itu terdiri dari beberapa halaman.

1. Halaman Depan  Atau FrontPage

2. Halaman Index Label

3. Halaman Archives Page

4. Halaman Postingan atau Item Pages ( red. readmore mengunakan hal ini ).

contoh :

A . Kolom, ukuran kolom  atau widget, di tampilkan pada  halaman depan namun disembunyikan atau ( berubah ) pada halaman Item Pages – Postingan. scriptnya mengunakan ini.

<b:if cond="data:blog.url == data:blog.homepageUrl"> di tutup dengan </b:if>

B. kolom atau elemen yang tampil pada halaman depan dan indek label, namun tidak tampil atau ( berubah ) pada halaman Item Pages – Postingan.

<b:if cond='data:blog.pageType != &quot;item&quot;'> dan di tutup dengan </b:if>

C. Pada halaman depan,  kolom atau elemen widget-nya tidak tampil namun akan tampil atau ( berubah ) pada halaman Item-Pages – Postingan.

<b:if cond='data:blog.pageType == "item"'> dan di tutup dengan </b:if>

Note :

Untuk kasus gadget atau widget dinamis pernah saya bahas pada bikin-blog-lebih-dinamis

Sekarang yang akan saya bicarakan adalah merubah ukuran kolom atau menyembunyikan kolom.

Ilustrasi halaman content.

Ilustrasi halaman depan atau front page

Yang perlu kita lakukan adalah menambah script untuk  ukuran kolom yang akan di tampilkan pada halaman depan , dan menyembunyikan untuk kolom Sidebar 1.

caranya.

Setelah script  ]]></b:skin> 

Tambahkan di antaranya ( kira-kira ) , script seperti ini.

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-wrapper {
width:400px;
}
.post-body img{
width:….px;
}
.post-body {text-align:justify;}
.main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 .5em 1.5em 0;
  padding:0 0 1.5em;
}
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#Sidebar 1 { display:none;}
</b:if>
</style>

 

Yang artinya kira-kira begini.

Pertama : Hai kolom content ( main-wrapper ) saya tahu di Css –nya ( red. css atas ), ente sudah saya beri ukuran lebarnya 600 px, namun saya kepingin untuk halaman depanya ente tampil lebarnya 400 px.

Kedua : Hai Sidebar 1, ente cuman tampil pada halaman depan saja, untuk halaman content ente mesti sembunyi.. kacihan deh lu.

kalau kurang puas bisa  baca juga artikel dari  : ahn-bidikcom

[..]

Freemium-Theme

Template lagi. kali ini seperti janji kemarin, saya coba belajar mengconvert dari theme wordpress ke blogcepot. walaupun  belum tahu atau mencari  via abah google, apakah Theme freemium dari freebiesdock yang saya convert dan sedikit saya modifikasi ini sudah ada dan tersedia untuk kelamin blogcepot.

Special thank buat Bcom yang telah mengajari saya cara membuat page dinamis ala magazine, dan juga untuk tante amanda fazany yang template hack scriptnya saya copy paste :) dan modifikasi.

View : Freemium-Theme.

[..]

Bagaimana membedakan ukuran antara Main Post Dan Mini Post pada template species baru

Kena dech akhirnya saya dapat PR jugaxx  dari Bcom …  tadinya sempat males  ngerjain-nya..hihihihi. but karena sudah pesan via comment box beberapa kale, mau tidak mau harus membalasnya juga.

Inilah pere yang harus saya balas.

Bang jawaban tentang membuat width posting dihalaman depan dengan halaman sub berbeda tolong dijawab, ya.

Makasih

Kalau ngga salah tebak mungkin pertanyaaan dari bcom ini, tentang layout mangga-cigazine . view : demo.

Benarkah ? Kalau benar tebakan saya . maka saya perlu jelaskan di sini,  bahwa layout itu sumber  source codenya sebagian saya ambil dari template “ Cellar Heat “ – mas Agus MU. Jadi jika  ingin template minima postinganya seperti yang di miliki “ Cellar Heat “ maka  donlot dulu template “ cellar heat “ tersebut. di sini.

Dan seperti kata-kata bcon sendiri trik yang saya gunakan ini adalah pake ilmu  CSS ( contek sana sini )  atau SEO ( Sistem Edit Obrak-abrik ).

Install source code Cella Heart Ke Minima Template

Setelah beres mendonlot, buat blog baru  dan pilih template minima untuk kita jadikan kelinci percobaan-nya. kemudian buat postingan sebanyak 3 (tiga )  postingan.

Buka tab edit html  ( biarkan saja kosong atau jangan di tandai kotak kecil di samping tulisan Expand Template Widget.)

ganti ukuran Outer-wrapper menjadi 730px.

#outer-wrapper {
  width: 730px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

 

kemdian cari kode html ini.

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
      </div>

 

Setelah itu ganti kode di atas dengan kode html dari template “ Cellar Heat “ yang di mulai dari .

<div class='column01'>

dan berakhir sampai tag penutupnya

</b:includable>
</b:widget>
</b:section>
</div>

* red . atau berakhir di atas  kode html :   <div id='column02'>

Langkah selanjutnya menganti kode Css :  #main-wrapper dari template minima yakni.

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

dengan kode css untuk main-post dari “ Cellar Heat “  yaitu. di mulai dari.

/* first post home page */
#post-one {
    padding:30px 0 30px 4px;
    width:700px;
    color:#c0c0b4;
    font-size:11px;
    line-height:16px;
}

dan berakhir di

/* search results */ .search-results {
    color:#fff;
    font-size:12px;
    padding:12px 0;
}
.search-results .bigger {
    color:#fff;
    font-size:14px;
}

Kemudian silahkan Pratinjau/Preview. jika melihat sidebarnya melorot kebawah, jangan khawatir biarkan saja dulu.

Sekarang kita telah mempunyai template minima bergaya ala “ Cellar Heat “. 

* Trik yang sama saya pernah meng-install template karya kang “ Hackshopere Ramani “ . dengan cara seperti itu.

Membedakan Ukuran Antara Main-Post dan Mini-Post.

Sekarang bagaimana membedakan ukuran lebar  posting dihalaman depan dengan halaman sub ? seperti kasus layout mangga-cigazine.

Beginilah trik Seo-nya ( Sistem Edit Obrak-abrik ).

Dalam template cella heart untuk  main-postingan dan mini-post.  (  atau istilah mas agus recent-post )  merupakan bagian  dari syntak ini : column01.

maka trik yang saya gunakan menghapus ukuran pada selector .Columm 01. yakni width:720px;

.column01 {
   width:720px; / ukuran lebar ini di hapus.
    overflow:hidden;
    float:left;
}

Kemudian skenario yang dua, saya menyembunyikan elemen sidebar pada halaman depan.  Contohnya saya menambahkan widget “ Text “ . kemudian saya sembunyikan dengan cara menambahkan beberapa kode di antara widget- text seperti tulisan yang saya pertebal di bawah .

<b:widget id="Text1" locked="false" title="" type="Text">
<b:includable id="main">
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>
<div class="widget-content">
<data:content>
</data:content>
</div>
<b:include name="quickedit">
</b:if>
</b:includable>
</b:widget>

red. ( untuk menampikan keseluruhan kode html elemen di atas mesti di tandai kotak kecil di samping Expand Template Widget )

tentang menyembunyikan widget atau elemen,  lebih jelasnya bisa di baca di sini :  bikin-blog-lebih-dinamis.

dan lakukan untuk elemen sidebar lainnya seperti itu.

Setelah itu , Selanjutnya saya merubah ukuran untuk main-post-nya ( agar sidebar nantinya tidak melorot ke bawah ) . dengan cara menganti   ukuran width:700px;  menjadi 490px; pada selector #post-one .

#post-one {
    padding:30px 0 30px 4px;
    width:700px; / ganti ukuran ini menjadi 490px;
    color:#c0c0b4;
    font-size:11px;
    line-height:16px;
}

Penutup

Sebenarnya masih banyak pere yang mesti di kerjakan agar templatenya optimal dan sesuai dengan yang kita inginkan. dan saya percaya mas bcon ini tahu apa yang mesti di lakukan selanjutnya. lawong kerjaanya bikin template. xixiixixi…

Akan tetapi sebagai tanda terima kasih dan penghormatan atas kerja kerasnya Mas Agus Mu - dalam membuat template blogspot berbeda dari biasanya ( seperti template “ cellar heat ini ) , ada baiknya kita harus menyertakan link pada blog beliau, semacam special thank gitulah.

yuu met berpusing ria mas.

[..]

Minima Mangga cigazine

Penyakit lama mulai kambuh lagi, nyenut-nyenut di kepala seperti  gumpalan awan yang melayang-layang dan tak mungkin sembuh dengan obat apa pun,  apalagi obat warungan ataupun generik.  Penyakit ini mulai meredang menerjang saat tak saya temukan lagi coretan di langit-langit kamar , di dingding-dingding, di sudut-sudut ruang hampa dan imaginasi.

Penyakit tetaplah penyakit demikian dalam satu bait puisinya Pa Rt di kampung saya.

Namun penyakit ini justru selalu menolong saya dari rasa kejenuhan dan kebosan, dari rasa tak berdaya dan sia-sia. Penyakit ini hadir  saat  tertarik dengan hasil karya mas Agus Mu dengan Blogger Templatenya “ Cellar Heat “. Kemudian setelah itu saya teringat dalam menu bookmark ,  saya menyimpan blognya paman tyo atau yang lebih di kenal dengan bloggombal.org.

( red. penyakit gila ku yang ke 14, ialah  selalu menyimpan desain web/blog yang menurut saya unik dan bagus. salah satunya blognya paman tyo ini. bukan lantaran yang mendesainya seorang profesioanl web sekakap  didast, tapi grid kolom dan penataan content pada setiap kolomnya yang saya suka ).

Yang akhirnya… karena penyakit saya ini ngga bisa di tahan-tahan  lagi, dengan semangat  bermodalkan nekad seperti pejuang bandung lautan api tempoe doloe. saya bikin dah template blogger yang desainnya mirip layout paman tyo atau didast , sedangkan  script-script di tubuhnya milik template “ Cellar Heat “, dan juga ada beberapa  sebagian scriptnya yang saya copas dari free template.

Tiga malam saya meriang karena ulah penyakit ini. walaupun sudah kelar namun ada beberapa bagian yang perlu di sempurnakan lagi. terutama untuk bagian content dan footernya yang jaraknya kurang dekat.  Begitu juga untuk bagian form comment-nya, agar berada posisinya  di samping postingan seperti miliknya bloggombal, hingga tulisan ini di buat belum juga dapat pencerahan.

View Demo : mangga-magazine     

Untuk sahabat boleh menilai sesuka anda. (usul, saran atau  mencacipun boleh tapi jangan sara yach :D )

@ saya publis postingan ini, karena sekedar untuk narsis dan sedang baca novel “ Maryamah Karpov “ xixiixixiixixiix  :).

 

Download Minima Cigazine Template

Makacih atas kunjugan dan supportnya selama ini

[..]

Blogger Layout

Layout ini bagi penguna blogger sudah tak asing lagi, karena setiap log'in dan logout dari blogger,  pasti kita akan melihatnya. dan kalau ngga salah, saya pernah  melihat juga free template yang tampilanya mirip dengan halaman  login blogger ini.

So.. untuk Utak-atik template kali ini, kita akan mencoba menjiblak tampilan halaman  log'in blogger ini untuk di jadikan sebuah template blog. dan mungkin juga nantinya kita pun bisa menjiblak layout web yang lainnya. kekekekek.  

- Ups !!! sorry bukan sy ngajarin phishing atau menjiblak hasil karya orang lain lo. Namun menurut saya sebuah ide itu tidak berdiri tunggal atau berdiri sendiri , seperti halnya Edison menemukan lampu pijar berangkat dari melihat, menjiblak kemudian berkembang menjadi sebuah karya yang Original.

Ok deh dari pada semakin melantur tulisannya mari kita mulai menjiblak halaman log'in blogger tersebut.

View Demo Preview

 

Capture.

Pertama kita capture dulu  halaman  blogger ini, - ( jika anda sedang log'in coba logout dulu ). untuk capture-nya kita bisa mengunakan tombol Print Screen di keyboard atau bisa mengistall program capture seperti SnagIt. atau  juga untuk  penguna browser FireFox bisa  install Add ons FireShot Atau  ScreenGrab .

 

Photoshop.

Kemudian hasil capture-nya kita olah dan edit dalam program photoshop.

1. Setelah terbuka photoshop na.  yang pertama saya pilih bagian atas ini dengan mengunakan marquee tool

 

 

kemudian  saya gunakan Eyedropper tool untuk menyesuaikan warna . Setelah palet warna SetForeground Color na berubah menjadi biru seperti warna background layout blogger , kemudian gunakan Paint Bucket Tool untuk menutup bagian tersebut.

 

3. Buat New layer - Kemudian saya tutup juga bagian form loginya, dengan mengunakan marquee tool, dan saya beri modify smoot sample radius 10 px. setelah itu saya tutup megunakan gradient tool. warnanya #134578 dan #003366.

 

Hasil Penutupan.

 

4. New layer - kemudian tutup juga untuk bagian content, beri smoot sample radius 10px. - warnanya sesuaikan dengan warna content ini.

 

Hasil Penutupan :

 

5. New Layer - kemudian masih dengan marquee tool dan smoot sample radius 10 px. buat juga gambar untuk bagian footernya.

 

 

 

6.  hasilnya akhirnya seperti ini.

 

 

7. Gunakan sebuah Guides, kemudian potong dengan Crop tool untuk bagian-bagian

-  Untuk bagiab background

-  Untuk bagian header

-  Untuk Bagian header dua

-  Untuk bagian  Navigasi .

- Untuk bagian Outer-Wrap

-  Untuk bagian footer.

 

 

Image File dan Psd File

 

Tadinya Saya telah mengupload cara memotong-motong gambar-nya ke eazy share, cuman sayangnya anda mesti sabar menunggu.

 

Download screnshot video

Namun untuk file gambar yang telah saya potong-potong berikut  file Psd-nya saudara  bisa donlot di mediafire.

 

Download file Image & Psd

 

 

Coding Layout.

 

Sekarang buat blog baru kemudian pilih Template Minima untuk membuat layout ini.

Setelah itu buka Tab Edit Html.

/*  tambahkan selector dan ganti properti yang di tandai dengan tulisan yang di pertebal atau di beri warna.

 

Menganti warna body background dalam variable definitions.

 

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#E1D4C0">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#58a" value="#5588aa">

 

/* Silahkan klik tulisan PRATINJAU  untuk mengetahu perubahannya */

 

Tambahkan kode di bawah  untuk menghilangkan Navbar Blogger karena kita tidak memerlukannya.

 

/* Use this with templates/template-twocol.html */

#navbar-iframe {
display : none;
height : 0;
visibility : hidden;
}

 

/* Silahkan klik tulisan PRATINJAU  untuk mengetahu perubahannya */

 

Kemudian tambahkan juga di bawahnya ( bisa juga di atasnya ) kode ini.

 

* {
  margin:0px;
  padding:0px;
  outline:0px;
  }

 

Dalam file donlot ada folder image yang di sertakan, upload semua gambar tersebut ke  image hosting ( photobucket, googlepages dll ). gambar yang pertama di tambahkan  untuk body. file gambarnya " bg.gif "

 

body {
  background:$bgcolor url(http://alamat gambar kamu/bg.gif) repeat-x left top;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

 

/* Silahkan klik tulisan PRATINJAU  untuk mengetahui perubahannya */

 

Selanjutnya menambahkan gambar untuk bagian header-wrapper . file gambarnya " hd.gif "  .

Selain itu  mengubah ukuran lebar header, nilai margin dan  menghilangkan border.

 

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

#header-wrapper {
  background: url(http://alamat gambar kamu/hd.gif) no-repeat center top;
  width:788px;     /* mengubah ukuran lebar bagian header */
  height:175px;    /*dekclarasi nilai tinggi ukuran gam header */
  margin:0 auto; 
  border:none;   /* atau hilangkan saja properti ini */
  }

 

kemudian hilangkan juga properti border di kode header ini.

 

#header {
  margin: 0px;
  border: none; /* atau hilangkan saja */
  text-align: center;
  color:$pagetitlecolor;
}

 

#header h1 {
  margin:0px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

 

Di akhir kode untuk header yakni.

 

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

 

tambahkan di bawahnya kode  ini.

#navigasi{
position:relative;
height:64px;
background:url(http://alamat gambar kamu/nav4.gif) no-repeat;
padding:0px 20px;
}

 

karena kode di atas merupakan tag Id  baru, maka dalam html-nya kita perlu menambahkan tag/elemen html baru pula.

jadi cari kode di bawah  dalam tag  Html. dan  lihat penambahan di antaranya.

 

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='game (Header)' type='Header'/>
</b:section>
    </div>

<div id="navigasi">

</div>
    <div id='content-wrapper'>

 

/* nantinya di antara <div id="navigasi"> ... <.div> kita bisa menambahkan tab menu, feed ajax.js dll */

 

Balik lagi pada kode Css. sekarang kita menambahkan gambar untuk bagian Outer-wrapper .  file gambarnya  " content02.gif " .

begitu juga ada perubahan untuk ukuran lebar, margin, padding dll.

 

/* Outer-Wrapper
----------------------------------------------- */

#outer-wrapper {
  background:url(http://alamat gambar kamu/content02.gif) repeat-y center top;
  width: 788px;  /* nilai lebar outer-wrapper */
  margin:0 auto;
  padding:0px;  /* padding menjadi 0px */
  text-align:$startSide;
  font: $bodyfont;
  }

 

/* Silahkan klik tulisan PRATINJAU  untuk mengetahui perubahannya */

upss !!! tulisan untuk post dan sidebarnya ternyata mengikuti ukuran outer-wrapper.pada hal yang kita inginkan  isi post dan sidebar mengikuti content-wrapper.  Untuk itu kita perlu menambahkan selecktor Id dan properti dari content-wrapper . yaitu.

 

#content-wrapper {
clear: both; width: 650px;
margin: 5px auto;
padding: 0;
}

 

* simpan kodenya di bawah kode #outer-wrapper .

/* Sekarang silahkan kita coba klik lagi  tulisan PRATINJAU  untuk mengetahui perubahannya */

 

Kemudian menambahkan gambar untuk  kolom footer. file gambarnya " footer.gif " . 

 

/* Footer
----------------------------------------------- */

#footer {
   background: #caced1   url(http://alamat gambar kamu/footer.gif) no-repeat center top;
  width:788px;  /* ukuran labar kolom */
  height:101px;  /* ukuran tinggi kolom dan gambar */
  clear:both;
  margin:0 auto;
  padding:0px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

 

Untuk mengatur content atau isi kolom footer ini, kita bisa menambahkan selector Id dan properti-nya  seperti ini.

 

#footer .widget { 
  margin: 0px auto 0;
  padding:35px 40px 0px  35px;
  font-size: 12px;
  text-align: center;
}

/* ini ukuran padding ie 6 */

* html #footer .widget {
    padding:35px 45px 0px  35px;
}

 

/* Sekarang silahkan kita coba klik lagi  tulisan PRATINJAU  untuk mengetahui perubahannya */

* kolom footer ini hanya bisa untuk satu widget yang tidak terlalu tinggi. contohnya bisa di lihat pada halaman footer log'in blogger .

 

Seperti kita lihat dalam layout  blogger pada bagian headernya ada form untuk log'in.

 

 

Untuk itu  bagusnya kita belah bagian header menjadi dua kolom. kolom pertama posisinya di kiri untuk logo atau judul blog dan kolom ke dua posisinya di kanan,  untuk penambahan elemen kotak search, subcriber dari feedburner dll.

jadi yang kita lakukan sekarang kosentrasi pada Css bagian header . untuk itu ganti kode Css header di bawah  ini .

 

#header {
  margin: 0px;
  border: none; /* atau hilangkan saja */
  text-align: center;
  color:$pagetitlecolor;
}

 

menjadi seperti ini.

 

#header {
  width:300px;
  float:left;
  margin: 5px;
  text-align: center;
  color:$pagetitlecolor;
}

 

kemudian  di bawahnya tambahkan selector Id dan properti untuk header kolom  kanan. gambar filenya  " log.jpg ". 

 

#header-right {
background: url(http://alamat gambar kamu/log.jpg) no-repeat top center;
width: 350px;
float: right;
color: #FFF;
margin-top: 25px;
margin-right:25px;
padding:0 5px;
line-height:1.4em;
font-weight:bold;
}

#header-right .widget-content {
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 5px;
    margin-left: 20px;
}

 

Setelah itu  loncat pada  Html bagian header. kemudian  tambahkan kode seperti berikut ini.

 

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='game (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' showaddelement='yes'/>
    </div>

 

* Jika kita klik Pratinjau,  tidak ada perubahan apapun.  Namun jika  kita Klik Simpan Perubahan kemudian menambahkan sebuah widget baru maka akan telihat penambahan untuk header kolom  kanan ini.

 

 

seperti ilustrasi gambar di bawah  ( saya menambahkan widget subcriber dari feedburber).

 

 

Namun sayangnya penambahan header ini, jika kita melihat tampilanya pada Internet Explorer  6 , tata letaknya akan terlihat kacau. untuk mengakalinya , kita tambahkan sebuah hack kode di antara tag  ]]></b:skin> dan  tag penutup  kode </head>.  seperti ini

 

]]></b:skin>

 

  <!--[if IE 6]>
<style type="text/css">
#header-right{
margin-right: 12px;
margin-top:25px; 
}
</style>
<![endif]-->

 

  </head>

 

Yang terakhir. karena adanya class elemen yang di tata melayang ke kanan dan ke kiri ( float: left dan float:right ). maka perlu di tambahkan sebuah deklarasi pembatas yakni Clear:both.

secara general deklarasinya seperti ini.

 

/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }

/* display and additional classes */
.clear { clear: both; }

 

/* untuk memgetahui dan mempelajari tentang float, kita bisa lihat di

Bagusnya simpan di akhir kode Css (di bawah kode #footter ).

 

Penutup

 

Jika anda mempunyai trick dan informasi yang  lebih mendetail  lagi tentang desain layout web or blog , dengan senang hati saya menerima masukan dan sarannya.. yup all for indonesia ..... wassalam.  

 

Technorati tags: blogger layout, utak-Atik Template

[..]

Blog In A Bottel bag 3

Memasang Tab Menu

Postingan Sebelumnya : Bag 1 | Bag 2

Yok ! kita lanjutkan lagi meredesain layout " Blog In A Bottel ". pada bagian yang ketiga ini kita akan menambah atau memasang Tab Menu di bagian tutup botolya.

Kode Tab Menunya sendiri  kita beri yang simple dulu.

Yok kita mulai.

Langkah Pertama :

cari tag top header ini.

#topheader {
  css..kode......
  bla..bla..bla
}

setelah ketemu di bawahnya

letakan atau simpan kode berikut ini.

#tophed {
float:left;
width:100%;
background:transparent;
font-size:93%;
}

#tophed ul {
margin:20px 0 0 160px;
padding:1px 10px 0px 23px;
list-style:none;
}

#tophed li {
display:inline;
margin:0;
padding:0;
}

#tophed a {
float:left;margin:0;
padding:5px 15px 4px 9px;
text-decoration:none;
color:#000;
}

#tophed a:hover {
background-position:0% -42px;
color:#999;
}

 

Langkah Kedua :

cari kode ini.

<div id='topheader'/>

kemudian ganti dengan kode di bawah ini.

<div id='topheader'><div id='tophed'>
<ul>
<li><a href='#' target='_blank'>sotoshop</a></li>
<li><a href='#' target='_blank'>Css html</a></li>
<li><a href='#' target='_blank'>skectup</a></li>
<li><a href='#' target='_blank'>login</a></li>
<li><a href='#' target='_blank'>about</a></li>
</ul>
</div></div>

 

# = tanda tersebut ganti dengan alamat / lokasi link tujuan.

Ok !

sampe sini dulu  membuat " Blog In A Bottel ". dan sampai ketemu lagi pada artikel " Utak Atik Template Blogspot " berikutnya.

Jika ada kekeliruan atau kekurangan, silahkan beri  komentar atau sarannya.

Postingan Sebelumnya :

1. Utak Atik Template Blogspot " Blog In A Bottel " bag 1

2. Utak Atik Template Blogspot " Blog In A  Bottel" bag 2

 

Technorati tags: Utak-Atik Template, Tutorial Blogger

[..]

Blog In A Bottel bag 1

Message In A Bottle

......

I'll send an S.O.S. to the world
I'll send an S.O.S. to the world
I hope that someone gets my
I hope that someone gets my
I hope that someone gets my
Message in a bottle,
Message in a bottle,  
..........  ( The Police - Sting. ) 

Seperti yang telah saya tulis kemarin, saya ingin sharing sedikit pengetahuan saya tentang meredesain layout blogspot. Namun binggungnya minta ampun karena saya tidak tahu harus memulai dari mana.

Akhirnya setelah melewati komtemplasi di kamar mandi, saya memutuskan untuk mengawali tulisan ini dengan praktek langsung membuat sebuah blog, dengan asumsi praktek langsung biasanya lebih semangat untuk di kerjakan.

Blog yang akan kita buat ini sangat sederhana , layout-nya saya bikin seperti sebuah botol. Jika group band the police mempunyai syair lagu " Massage In A Bottel " maka nantinya kita mempunyai " Blog In A Bottel" .

Untuk melihat hasil saudara bisa lihat di SINI.

Install Minima Template

Template yang akan kita  redesain layoutnya adalah template minima yang  sudah tersedia dalam blogspot.

Jadi yang pertama  sekali buatlah sekarang sebuah blog baru  !
menurut tata cara dan upacara seperti biasanya kita membuat blog baru  dengan memilih layout template minima, atau saudara bisa mendonlotnya xml minima di sini.

Setelah beres membuat blog baru sekarang kita mulai mengedit-editnya.

Memulai Mengedit.

kurang lebih seperti gambar Inilah struktur kolom template minima. 

BODY

OUTER WRAPPER

- header

  - Main Colum ( content )

- Sidebar

  - Footer

Dengan struktur seperti di atas, maka  kolom header, main colum, sidebar dan footer ukurannya tergantung dari Outer Wrapper.

tidak mungkin kita merubah lebar header atau footer tampa merubah dulu lebar Outer Wrapper-nya.

Nah dalam kasus membuat layout " Blog In A Bottel ", saya kepingin header dan footer-nya merupakan kolom yang independen tampa di pengaruhi oleh ukuran Outer Wrapper-nya.

Outer Wrapper hanya membingkai bagian main colum dan sidebar seperti gambar di bawah.

 

Caranya :

Dalam halaman Template buka Edit Html, kemudian tambahkan dalam tag Outer Wrappernya - kode seperti tulisan yang berwarna merah. ganti juga nilai paddingnya. 

 

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:0px;
  text-align:$startSide;
  font: $bodyfont;
  word-wrap: break-word;
  overflow: hidden;
  }

 

Setelah itu pada bagian Html ( setelah tag  <body> )  pindahkan kode  ini.

<div id='outer-wrapper'><div id='wrap2'>

 

di  bawah tag  <div header-wrapper> 

yaitu  menjadi seperti ini.

 

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Big Small (Header)' type='Header'/>
</b:section>
    </div>

<div id='outer-wrapper'><div id='wrap2'>

 

begitu juga untuk bagian penutup dari outer-wrapper ini yakni.

</div></div> <!-- end outer-wrapper -->

 

pindahkan di atas <div id='footer-wrapper'> yaitu menjadi seperti ini.

 

</div></div> <!-- end outer-wrapper -->

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>

</body>

 

Dengan demikian kolom header dan footer sekarang telah keluar dari bingkai Outer-Wrapper..

Setelah beres dengan pekerjaan di atas sekarang kita menambahkan gambar-gambarnya untuk kolom header, outer-wrapper dan footer.

bersambung

• «Jaloee Blog
• 1
• 2
• 3

 

[..]

Blog In A Bottel bag 2

Inilah gambar-gambar yang akan kita pasang pada template minima.

1. TopHeader. ( ukuran gam 673 px lebar ,  53 px tinggi )

 

2 Header-Wrapper ( ukuran gam 673 px lebar, 153 px tinggi )

 

Artinya saya ingin membagi bagian header menjadi dua bagian yang pertama Top Header ( header bagian atas ) dan yang kedua header-wrapper ( header bagian bawah ). - ini mungkin solusi  untuk membagi gambar header yang terlalu besar, atau bisa juga untuk  kepentingan lainnya. ( nanti anda juga mengalaminya. red )

caranya : - biar cepat cari kode css ini.

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

ganti dengan kode ini.

#topheader {
  background: url(http://i120.photobucket.com/albums/o190/jaloewig/bottel/tophead-bottel4.jpg) no-repeat center;
  width:670px;
  height:59px;
  margin:0 auto; 
}

#header-wrapper {
  background: url(http://i120.photobucket.com/albums/o190/jaloewig/bottel/bothead-bottel4.jpg) no-repeat center;
  width:670px;
  height:152px;
  margin:0 auto; 
  }

 

kemudian ganti nilai padding atau margin pada kode-kode dibawah seperti perubahannya saya tulis dengan warna.

#header {
  margin:0px 5px;
  border: none;  /* atau buang saja */
  text-align: center;
  color:$pagetitlecolor;
}

#header h1 {
  margin:0px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header .description {
  margin:0 auto 5px;
  padding:0 20px 15px;
  max-width:500px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
}

 

3. Outer-Wrapper ( ukuran gam 673 px, namun di repeat  gambarnya )

 

caranya :

cari kode dibawah . kemudian tambahkan kode background gambar. ganti juga nilai width-nya penambahnya seperti tulisan berwarna.

#outer-wrapper {
background: url(http://i120.photobucket.com/albums/o190/jaloewig/bottel/main-bottel4.jpg) repeat-y center;

  width: 670px;
  margin:0 auto;
  padding:0px;
  text-align:$startSide;
  font: $bodyfont;
  word-wrap: break-word;
  overflow: hidden;
  }

 

4.Footer ( ukuran gam 673 px, 85 px tinggi )

 

 

begitu juga untuk footer-nya.

#footer {
background: url(http://i120.photobucket.com/albums/o190/jaloewig/bottel/foot-bottel4.jpg) no-repeat center;
  width:670px;
  height:85px;
  clear:both;
  margin:0 auto;
  padding-top:0px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

 

Setelah berer masukan atau tambahkan tag

<div id = 'topheader'/> di atas tag <div id=header-wrapper>

pada bagian Html-nya. seperti terlihat pada tulisan berwarna.

 

<div id='topheader'/>

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Big Small (Header)' type='Header'/>
</b:section>
    </div>

 

Sampai saat ini pekerjaan kita sudah beres. namun bila kita tekan tombol Pratinjau maka teks pada kolom postingan keluar dari gambar. untuk membetulkanya cari kode ini.

 

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

 

pisahkan class di atas hingga seperti ini.

 

.sidebar .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 1em 1.5em;
  padding:0 0 1.5em;
}

.main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em 1em;
  padding:0 0 1.5em;
}

 

sekarang coba kita klik Pratinjau, jika tidak ada masalah seharusnya kita sudah mempunyai blog dalam botol.

pada tulisan selanjutnya kita akan menambahkan sebuah tab menu pada bagian penutup botolnya.

bersambung

 

• «Jaloee Blog
• 1
• 2
• 3

[..]

My Work : Black Series Layout

Dalam rangka menyambut hari kebangkitan nasional,hihihihi.... kemarin saya mengisinya dengan mencoba ngutak-atik layout blog lagi , layout blog yang sempat lama tertunda karena kehabisan bahan bakar.

Walaupun hasilnya masih kurang memuaskan, tapi buat aku yang Newbie dan Cupu dalam desain mendesain blog pekerjaan ala kadarnya ini sudah cukuplah. 

Revolusioner-One

Layout ini masih mentah, dan sebenarnya saya kepingin di samping kanan dan kirinya ada semacam speaker yang di iringi lagu " One " dari Metallica... uuukhh.. keren !!  Namun apa daya karena mesti ngulik lagi adobe flash. jadinya ya mimpi dulu lah :).

silahkan Intip

Revolusioner-Two

layout ini headernya hampir sama dengan layout sebelumnya. dan 90 persen aku merasa suka dengan tampilannya. desainnya sendiri  lebih banyak mengunakan free brush.

Mungkin jika sewaktu-waktu jika saya punya wp, layout ini bisa jadi pilihan saya.

Silahkan Intip

Sang Pemimpi

Terutama header layout ini, saya membuatnya karena terinspirasi dengan buku kedua laskar pelangi yakni Sang Pemimpi - andrea hirata.

Silahkan Intip

Rajawali

Saya tidak tahu apa gambar ini elang atau rajawali ?

Boleh Intip.

Butuh Saran dan Masukan.

yup siapa pun saudara, saya menerima dengan senang hati jika anda memberikan kritik, saran atau masukan.

Technorati tags: Bikin Layout, Photoshop

[..]

Kreasi Membuat Layout Ala Yahoo

PHOTOSHOP TOTO-REAL

Kreasi Membuat Layout Ala Yahoo.
Level : Untuk semua umur ( kecuali bayi ).
Bahasa : Bisu.
Format : *.swf. ( file flash / video ).
Size : 640 x 480 px.
Ukuran File : 11 Mb.
Donlot : di sini.

File pendukung :
Install Font Yahoo dan Styles Web20layerStylesv1.
Donlot : di sini.

Atau donlot file Yahoo.psd

Technorati tags: Yahoo Layout, Photoshop Tutorial

[..]

Ngedesain Web Layout

Untuk melanjutkan postingan sebelumnya tentang penyedia gambar gratis untuk header dan tutorial membuat header dalam program photoshop (baca di sini ). Sekarang saya akan kasih informasi link tentang tutorial desain web layout dengan photoshop, cukup banyak juga sih yang saya sempat bookmarks, namun di sini saya telah memilih beberapa desain web layout yang menurut saya bagus.

Tentu saja setelah kita sudah paham cara ngedesain web layout tugas selanjutnya memotong-motong gambar ke dalam beberapa bagian yang dalam photoshop di sebut dengan teknik Slicing. jangan kawatir untuk masalah yang satu ini aku nemuin sebuah situs yang kebetulan  berbahasa indonesia, jadi kita akan lebih paham dengan teknik yang satu ini.

Selamat Belajar.

1. grungy-web-layout-2

View Web : photoshopstar.com

2. red-clan-layout

View Web : psdtutz.com

3. band-website-template

View Web : photoshopstar.com

4. Professional-Mobile-Portal-Web-Layout

View Web : adobetutorialz.com

5. Imagination-is-our-power

View Web : adobetutorialz.com

Dalam Web yang sama :

6.Modern-Web-Layout
View Image : Preview 
View Tutor : adobetutorialz.com

7.Online-Consulting-Layout

View Image : Preview
View Tutor : adobetutorialz.com

8.Gaming-source-design

View Web : avivadirectory.com

9.clean-white-business-template

View Web : photoshopbox.com

 

TEKNIK SLICING

View Tutorial : eddy.ptpci.co.id

 

Oke bro semoga sukses. kalau udah berhasil, kontek-kontek aku doank.

Technorati tags: Blog Layout, Web layout

[..]