Belajar Ngedesain Web Layout

Oct 31, 2007

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: ,

FRee Style Template

Oct 27, 2007

Ini merupakan free template yang ke tiga yang saya adaptasikan ke dalam New Blogger.Sedangkan template ini, awalnya saya dapatkan dari freewebtemplates.
Intinya, aku lakukan ini semua semata-mata karena ingin belajar dari para pendahulu orang-orang yang telah lama berkecimpung dalam dunia ngeblog. Lagi pula kalau tidak ada kesenangan dan ketertarikan  mengedit layout atau template blog,   mungkin sejak lama yang namanya ngeblog sudah aku tinggalkan. Bukan  mau sok gaya, atau sok-soaan yang lainnya.
Mudah-mudahan dengan belajar mengadaptasikan skin template orang lain ini, merupakan  modal dasar untuk membuat skin template sendiri.  maklum otodidak lama untuk bisanya Euuuyy..
Template ini sendiri oleh pembuatnya di namai Free Style, tapi aku lebih suka menyebutnya Che Guevara Template.. ngga tahu kenapa ! mungkin cocok saja di namai itu.

Features

1. Script Fast page loading time dari Blogger Buster.
2. Read More By Ramani ( hackosphere.blogspot.com )
3. Menu Navigasi  Sidebar
4. Unique header dan sidebar linklist layout
5. Dua kolom di bagian Footer

Install

1.Setting tanggal dalam format seperti di bawah.

2. Tambahkan script menu navigasi vertikal di bawah
ke dalam widget html/javascript. Ganti nama  serta alamat url nya sesuai dengan selera anda. contohnya :
<li><a href="http://alamaturl/">MyHome </a></li>

<ul class="nav"> <li><a href="#">home page</a></li> <li><a href="#">cool links</a></li> <li><a href="#">my artwork</a></li> <li><a href="#">calendar</a></li> <li><a href="#">contact me</a></li> </ul>

3.Tambahkan   Script atau code linklist di sini    ke dalam widget html/javascript.

View : Demo

View : Donlot

Technorati tags: ,

Membuat "Alert Message" dlm Postingan

Oct 26, 2007

Terkadang ada semacam kalimat peringatan atau sebuah kalimat penekann yang ingin kita sisipkan dalam postingan kita. Atau juga mungkin ingin menyisipkan kata-kata kiasan atau kata-kata bijak. Biasanya kalimat itu di wakili dengan di beri huruf tebal atau miring, ada juga yang di beri garis bawah dan terkadang kita tulis dengan gaya Blockquote ( tanda kutip ).

Dan di bawah ini, saya ingin menunjukan variasi lain untuk kalimat-kalimat seperti di atas.

Sungguh menyakitkan mencintai seseorang yang tidak mencintaimu, tetapi lebih menyakitkan adalah mencintai seseorang dan tidak pernah memiliki keberanian untuk mengutarakan cintamu kepadanya.

Untuk membuat alert message seperti di atas caranya sangatlah mudah,cuman dua langkah untuk melakukannya.

1. Simpan kode di bawah ini, di dalam kode Css template kita. gt;.

.alert { background: #fff6bf url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/alert%20message/information.png) center no-repeat; background-position: 15px 50%; /* x-pos y-pos */ text-align: left; padding: 5px 20px 5px 45px; border-top: 2px solid #ffd324; border-bottom: 2px solid #ffd324; }

contohnya saya menyimpan kode alert message tersebut di atas kode ini.

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

kemudian kita tekan SIMPAN TEMPLATE. Beres sudah pekerjaan kita. Untuk mencoba apakah tulisan bergaya Alert Message ini berjalan. buat postingan, kemudian dalam editor blogspot kita menulisnnya ke dalam bentuk Html jadi tekan tulisan EdIT HTML. Tulisan-nya seperti ini.

<p class= "alert"> DI SINILAH KITA MENULISKAN KATA-KATA MUTIARA ATAU PESAN </p>

Kalau kita mau merubah warna background atau icon-nya tinggal ganti saja kode yang bertuliskan warna putih berikut ini : Background : #FFF6BF Url (http://alamatgambarkamu/); Sedangkan untuk menganti warna border : Border-top: 2px Solid #ffd324;

conto-contoh alert message yang sempat saya masukan di blog ini.

Semua orang dapat melakukan apapun bila ia percaya dan menginginkannya.

Apa yang memberi kita kepastian dalam hidup kita adalah keberanian.

Doa memberikan kekuatan pada orang yang lemah, membuat orang tidak percaya menjadi percaya dan memberikan keberanian pada orang yang ketakutan.

Tuhan memiliki bejana di bumi. Itulah hati. Dan bejana yang paling di sukai Nya, adalah bejana yang bersih.

Jangan membeli apa yang dapat anda pergunakan, tetapi belilah apa yang mutlak diperlukan.

Tutor By : www.bioneural.net

del.icio.us tags: , ,

Memasang Gambar untuk Header

Oct 25, 2007

Sebenarnya tulisan ini sangat basi, karena di setiap blog yang ngasih tutor seputar blog dari blogspot banyak juga di bahas tentang masalah yang satu ini. Akan tetapi menimbang, memikirkan dan memutuskan akhirnya saya juga ikut-ikutan nulis tentang memajang gambar di bagian header ini.terutama sekali saya ingin   tunjukan yaitu  bagaimana membuat gambar untuk background body  yang terkesan menjadi sebuah gambar  header. lihat demo.

Untuk itu biar rada gaya dikit, tulisan tengtang memasang gambar untuk header ini saya posting ke dalam dua bagian.

1. guide step by step memasang gambar untuk header bag 1 di sini.

2. Memasang gambar untuk header bag 2. - pada bag ke 2 inilah bagaimana gambar untuk tag  body yang fungsinya di posisikan menjadi bagian dari gambar untuk header. di sini.

Baca Juga

3. Bagaimana sih menyimpan gambar yang ukuran kecil, hingga mudah di loading namun berkualitas bagus di sini .

4. Membuat Header Gold dgn Photoshop. di sini

5. Background Image Repeat. di sini

Trik Mendapat Komentar Banyak Part II

Sebenarnya trik ini hanya sebuah tipuan saja. Tukang sulap  bilang hanya sebuah ilusi alias ngga nyata, ngga sungguhan bahwa tulisan kita mendapatkan komentar banyak dari para pengemar :).

Btw jika anda termasuk orang yang suka iseng, suka jaim, suka lucu-lucuan , suka mencoba and suka parodi,  ngga ada salahnya mencoba trik  atau bahasa populernya hack tentang merubah jumlah komentar yang secara default nol menjadi jumlah tak terbatas sesuai kehendak kita.

Seperti biasa dari halaman TEMPLATE buka EDIT HTML di lanjutkan dengan menandai kotak kosong di samping kiri tulisan Expand Template Widget. Kemudian cari kode di bawah ini.

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>

Setelah ketemu ganti dengan kode di bawah ini.

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>
 10 comentario
</b:if>
<b:if cond='data:post.numComments == 1'>
 11 Comentario
</b:if>
<b:if cond='data:post.numComments > 1'>
<data:post.numComments/> 0 Comentarios
</b:if>
</a>
</b:if>

Kemudian cari juga kode ini

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

Setelah ketemu ganti dengan kode ini.

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 0'>
10 comentario
</b:if>
<b:if cond='data:post.numComments == 1'>
11 Comentario:
</b:if>
<b:if cond='data:post.numComments > 1'>
<data:post.numComments/> 0 Comentarios:
</b:if>
</h4>

Setelah beres, kemudian tekan SIMPAN TEMPLATE.

10 Comentario merupakan jumlah secara default nilai komentar postingan.jika ada yang ngasih komentar pertama maka angkanya menjadi 11 Comentario  dan jika ada yang masuk komentar yang kedua maka angkanya menjadi 20 Comentarios, ketiga jadi 30 keempat jadi 40 dst.

Dan bisa saja kita mengunakan angka secara acak. misalkan angka yang pertama 10 , jika ada komentar pertama masuk maka nilainya menjadi 5 dan jika ada komentar yang kedua maka angkanya kembali kepada aslinya komentar yang masuk. terserah sampean yang punya blog na. 

Oh ya... perlu di ketahui juga, nilai yang saya berikan merupakan inprov asli na dari saya, jadi saya ngga tahu juga apa bener ini maksud sebenarnya tutorial dari blogandweb ini.

Technorati tags: ,

Membuat Header Dgn Stripe Generator 2.0

Oct 24, 2007

KIta lanjutkan tulisan tentang header ,namun yang saya akan tulis sekarang yaitu membuat header dengan bantuan Stripe Generator 2.0. dan untuk eksekusinya saya mengunakan template dari Amanda Fazani di situsnya bloggerbuster.com.

karena secara keseluruhan aku suka dengan template ini, cuman warna headernya yang ngeping terlalu gerli bagi saya yang sangat macho.

Setelah mengalami pengeditan di headernya dan beberapa perubahan akhirnya yang ngeping itu menjadi seperti ini. lihat demo.

Jadi yang mau ikutan untuk ngerubah atau ngedit headernya silahkan donlot dulu Girl Web 2.0 Style Template di sini.

STRIPE GENERATOR 2.0

Setelah mendonlot template-nya buat blog baru dengan tata cara dan upacara seperti biasanya kita membuat blog. kemudian buka situsnya Stripe Generator 2.0.com, Setelah terbuka situsnya ganti settingan- nya semua dari mulai stripe size, spacing sampai dengan orientation seperti settingan gambar di bawah ini. ( bila kurang jelas tekan saja di atas gambarnya )

stripe_background girli

Keterangan Settingan :

Tripe Size : 8
Spacing    : 1
Stripe Color (s) : 97080E
Background Style : yang bergaris kuning ( di tengah )
Gradient Height : 200
Background Color : 404040 dan A80F0F
Stripe Orientasi : yang bergaris kuning.

Setelah beres merubah semuanya kemudian tekan tombol tulisan download, dan  simpan di hardisk.

Tambah Garis Sedikit

Sebenarnya dengan hasil settingan itu, gambarnya sudah cukup untuk di pasang, akan tetapi kita akan membuat dan menambah  aksen garis sedikit  di bawahnya dengan bantuan program Adobe Photoshop. (jika alergi dgn photoshop saya telah membuat hasilnya tenang saja ).

Sekarang file yang tadi di simpan buka di program photoshop.

Buat Kotak Kecil di bawahnya dengan Rectangular Marquee Tool dan beri warna Hitam . Kemudian simpan dengan format PNG Nilai Color 256. ( baca juga cara menyimpan gambar untuk web di sini )

hasilnya jadi seperti ini.

Tiba Saat-nya

Upload gambar di atas ke tempat kita biasa menyimpan gambar.( baca cara mengupload gambar di sini) . Setelah itu buka blog kita dan masuk ke dalam halaman pengeditan Template kemudian tekan tulisan Edit Html.

 

Cari kode di bawah ini.

body { background:$bgcolor url(http://templates.bloggerbuster.com/girly_web_20/background.jpg) repeat-x
top left;
margin:0;
color:$textcolor;
font:x-small Helvetica sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Ganti alamat gambar yang bertuliskan merah di atas yakni http://templates.bloggerbuster.com/girly_web_20/background.jpg dengan alamat gambar kita. ( baca cara mengupload gambar di sini)atau bagi yang biasa terima jadi bisa pake alamat gambar di bawah ini. http://jaloee.googlepages.com/stripe_9f.png

Setelah itu tekan tulisan SIMPAN PERUBAHAN. beres.

Oh kalau mau juga template perubahannya di donlot silahkan donlot saja di sini. ( akan tetapi perlu banyak di edit juga dink ) .

Untuk merubah Logo-nya cari kode di bawah ini. dan ganti alamat ulr-nya dengan alamat logo sendiri.

#header-inner {
background: url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Header%20Stripe%
20Generator/Internet_Search.png
) left center no-repeat;
padding: 0 0 0 80px;
margin: 0 auto;


Dan untuk menambah alamat url Tab Menu-nya cari kode di bawah ini.  ( baca cara cepat menemukan kode html )

<!-- Home Page Link -->
<a class='nav-section' expr:href='data:blog.url' style='color: #fff; text-decoration:
none;'>Home</a>
<!-- About link add your link here -->
<a class='nav-section' href='(alamat url )' style='color: #fff; text-decoration: none;'>About</a>
<!-- Contact link add your link here -->
<a class='nav-section' href='( alamat url )' style='color: #fff; text-decoration:
none;'>Contact</a></div>

Ganti Tulisan warnah merah di atas dengan link alamat yang kamu inginkan. Sedangkan keterangan yang lainnya baca di bloggerbuster.

Technorati tags: ,

Banner Button

Setelah lama tertunda karena malezzz, akhirnya tulisan tentang banner button beranimasi kelar juga.nampak sederhana, akan tetapi tulisan ini  di tunjukan bagi yang belum paham cara memainkan animasi dalam program photoshop. untuk mengikuti tutorialnya silahan anda donlot dulu file psd-nya di sini.

Step 1

Buka program photoshop, kemudian buka file Abizs.psd yang kita donlot tadi.

  

Step 2.

Untuk photoshop CS 1 ke bawah, buka menu- file edit in image ready, setelah terbuka program image ready-nya baru buka menu- windows-Animation. Sedangkan untuk photoshop Cs 2 ke atas kita tinggal buka menu-windows- animation.

Step 3.

Setelah terbuka windows animation-nya kemudian,tekan tombol Duplicates Selected Frames ( yg bergambar halaman kecil...lihat gambar. ) sebanyak lima frames.

hasil pengandaan akan terlihat seperti gambar ini.

Step 4.

Pindahkan Pemilhan pada Frame 2.

Step 5.

Pada palet layer , tandai layer penutup sehingga nampak sebuah icon mata.

 

Step 6.

Pindahkan pemilihan pada Frame 3. Kemudian pada palet layer tandai layer penutup seperti langkah ke 5. Setelah itu tekan tombol  Right Arrow , untuk mengeser layer penutup  ke samping kanan hingga menutupi hurup B. lihat gambar

Step 7.

Pindahkan pemilihan pada Frame 4. kemudian ulangi dengan menandai layer penutup. dan setelah itu tekan Right Arrow di keyborad hingga menutup hurup I. ulangi langkah 4, 5 dan 6 sampe frame 6.

Step 8.

Setelah semua frame memiliki aksi animasi, langkah selanjutnya sambil menekan tombol Shift di keyboard pilih frame pertama sampe frame terakhir ( Memilih Frame Semuanya ).

Kemudian tekan tombol Selects Frame Delay Time. Delay-nya sekitar  0.2 second. lihat gambar.

 

Step 9.

Apakah animasi yang akan kita tampilkan secara berulang, sekali atau kita sendiri yang menentukannya. untuk mensetting ini pilih satu dari tombol di samping bawah kiri palet animation.

Tombol Setting Animasi Pemilihan

 

Step 10.

Sekarang coba tekan tombol plays animation.

Step 10.

Simpan filenya ke dalam format gif.

Technorati tags: ,

Shape Kaligrafi Gratis di Adobe.com

Oct 19, 2007


Setelah cukup lama berjalan, ternyata masih ada juga peminat tentang shape kaligrafi ini. Dulu saya menyediakan tempat donlot na, karena ngga ingat  lagi sumber aslinya kustom shape ini. Namun kemarin sebelum lebaran, saya menemukan sumber asli tempat saya ngedonlot tentang shape kaligarfi ini, yaitu di www.adobe.com. Jadi buat anda yang membutuhkan shape ini  silahkan saja langsung ke sumber aslinya. Namun sebelum anda bisa ngedonlotnya, anda mesti punya  account dulu untuk login , tenang saja daftarnya gratis koq.

Setelah pendaftraan dan login, buka tab menu downloads -> exchange  -> kemudian dari bagian Exchanges by product-nya tekan link tulisan photoshop. Untuk langsung mendapatkan shape kaligrafi ini gunakan kotak pencarian dengan kata keyword " Calligraphy ".

Selain shape kaligrafi di web adobe juga banyak brush gratis, plug'in bahkan tutorial yang oke-oke, dan bisa belajar banyak semua produk yang di keluarkan Clan Adobe. jadi saran saya daftar saja langsung kalau emang berminat dengan program keluaran adobe.

Daftar : Adobe.com

del.icio.us tags:

Trik Jitu Mendapatkan Komentar Banyak

Oct 16, 2007

Ngaku saja, sebenarnya kita ingin tulisan kita mendapat komentar yang banyak ? .. atau kalaupun tidak banyak setidaknya ada satu atau dua orang yang kasih komen pada tulisan kita bukan.. ? Namun terkadang kita lupa, bagaimana tulisan kita akan di apresiasi oleh orang lain, sedangkan kita juga malas untuk kasih komen pada karya tulisan orang lain ? .. emangnya siapa kita ? .. Emha AN ? .. G Moehamad ?.. atau Putu Wijaya ? .. Awas ah hati-hati jangan kepedean ... heuheuheu.. ( Baca )

Akan tetapi kamu percaya ngga ..? ada sebuah blog yang mendapatkan komen sebanyak seribu ( 1000 ) komentar. Walaupun pun tulisan-nya nyampah bangeut.. ? Percaya ngga ? .. kalau saya percaya percaya saja karena ada bukti-nya tuh lihat gambar di bawah.

Mau tahu ngga trik-nya agar tulisan kita dapat komen sebanyak itu. Tutorialnya bisa kamu dapatkan di blog blogandweb.com ini. atau lebih lanjut baca di Komentar Banyak Part II.

Cara Cepat Menemukan Kode Css dan Html

Oct 15, 2007

Biasanya kalau ngikutin tutorial tentang tweking blogspot, kita di haruskan mencari sebuah kode yang perlu diganti, dirubah atau menyipsikan sebuah kode baru. misalnya carilah kode css bla..bla..bla ini, atau masukanlah javascrip ini di atas kode html bla..bla..bla..

Nah kalau kita mencari secara manual tak jarang kode yang di maksud ngga ketemu, bahkan karena capenya mencari kita ngga jadi men-tweking blog kita.

Solusinya, agar mudah kita mencari sebuah kode di template kita, gunakan saja menu pencarian di browser yang kita pake misalkan kalau di browse FireFox masuk ke baris menu Edit->Find in this page.

Setelah itu muncul di bagian bawah sudut kiri kotak pencarian seperti ini.

Untuk mencari kode yang di maksud masukanlah satu baris kalimat atau dua kata ke dalam kotak pencarian kemudian tekan Enter.

Technorati tags: ,

Free Donlot Indian Brush

Free Donlot Indian Acsesories Brush, dan juga kumpulan brush yang lain-nya. Mudah di gunakan sesuai kreasi kita, dan sangat cocok untuk membuat desain header dan leot. View Donlot  : http://www.brusheezy.com/brushes                        
atau di : http://www.brusheezy.com/indian

Memindahkan Komentar di bawah Judul

Oct 14, 2007

Secara default komentar Template Minima atau beberapa template lain-nya posisinya di bawah setelah artikel atau postingan. Namun kalau kita mau memindahkan ke atas dan bersebelahan dengan tanggal. seperti gambar di bawah.

Yang perlu kita lakukan pertama cari kode ini.

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments
== 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/>
<data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

 

Kemudian block semua kode di atas dan tekan Ctrl + X  ( atau klik kanan tekan cut )

Pindahkan di bawah kode ini.

<div class='post-header-line-1'/>
<b:if cond='data:post.dateHeader'>
<span class='date-header'><data:post.dateHeader/></span>
Ctrl + V atau letakan di sini
</b:if>

Dengan cara yang sama pula, bila kita ingin memindahkan judul Label ke atas.

Cari kode di bawah ini.

<p class='post-footer-line post-footer-line-2'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>
      </span>
      </p>

Letakan tulisan yang berwarna putih di bawah code komentar yang tadi telah kita eksekusi ( pindahkan ).
Kemudian untuk menghilangkan tulisan label-nya delete saja kode ini: <data:postLabelsLabel/>        

Untuk memisahkan antara tulisan tanggal | komen | label, tekan
( shift + \ ) , diantara tag  : </span> ( shift + \<spant> .

lihat demo

Sangat bijaksana sekali bila ingin mencoba, selalu backup dulu template aslinya.

del.icio.us tags: ,

Memasang Gambar utk Header bag 1

Sebelum melangkah lebih jauh tentang cara memasang gambar untuk header kita. ada beberapa hal yang kudu di perhatikan.

1. Ketahui dulu berapa ukuran lebar Header blog kita. caranya dalam halaman TEMPLATE buka Edit Html.

Setelah itu cari ukuran lebar header kita dalam tag Css. seperti ini.

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

Tulisan yang saya tebalkan dan di beri garis bawah di atas merupakan informasi ukuran lebar sebuah header. ( jika di #header-wrapper tidak menemukan ukurannya cari di tag Outer-wrapper atau Content-wrapper.)

2. Setelah mendapatkan ukuran lebar header , maka cari gambar atau buatlah gambar untuk header kita sesuai ukuran tersebut atau kurang dari ukuran tersebut.

3. Jika anda mempunyai sofware Photoshop itu lebih bagus untuk menyimpan gambar dengan resolusi kecil namun berkualitas bagus. ( tentang menyimpan gambar dgn bantuan photoshop selengkapnya baca di sini ).

Setelah gambar untuk header telah siap. tibalah saatnya memajang atau mengirim gambar header ke dalam blog kita.

Cara Pertama

Dalam halamana TEMPLATE tekan tulisan Elemen Halaman.

Kemudian tekan tulisan Edit di pojok bawah widget header blog kita.

Setelah itu, maka akan tampil halaman seperti gambar di bawah.

Tekan link tulisan Browse. kemudian cari gambar yang ada di komputer yang telah kita persiapkan untuk gambar header . setelah memilih gambarnya maka kita melangkah pada halaman berikut ini.

Keterangan :

Dibalik judul dan keterangan : jika ini yang kita pilih, maka judul dan Deskripsi/keterangan blog berada bersama gambar .

Selain Judul dan Keterangan : jika ini yang kita pilih, maka judul dan Deskripsi/keterangan blog tidak akan di ikut sertakan ke dalam gambar alias tersembunyi.

Setelah kita menentukan pemilihan, kemudian kita tekan tombol Simpan Perubahan.

Cara Kedua.

Sebelumnya simpan dulu gambar untuk header ke web tempat penyedia penyimpanan gambar misalkan di photobucket.com atau googlepages.com ( baca di sini )

Setelah itu dalam halaman TEMPLATE buka Edit Html

Kemudian dalam kode Css cari tag #header-wrapper seperti di bawah ini.

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

setelah ketemu tambahkan kode dan alamat url gambar diantara kode tersebut . penambahannya akan terlihat seperti ini.

#header-wrapper { background: url(http://i120.photobucket.com/albums/o190/jaloewig/gam-14.jpg) no-repeat left top; height:200px; width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }

ganti url ( http://i120.photobucket.com/....) dengan alamat url gambar kamu. misal url ( http://alamat gambar kamu ) . sedangkan properti dan nilai height:..px - merupakan ukuran tinggi sebuah gambar lebih baik di definisikan saja.

Setelah itu langkah selanjutnya apakah judul dan deskripsi ( judul dan keterangan ) blog ingin di ikut sertakan atau tidak ? jika tidak ingin di ikut sertakan atau ingin di sembunyikan tambahkan saja kode ini - Display: none ; ke dalam tag #header h1. hasil penambahan-nya akan terlihat seperti ini.

#header h1 { display:none; margin:5px 5px 0; padding:15px 20px .25em; bla..bla }

Begitu juga tambahkan properti dan value - Display:none; untuk tag #header .description -nya. seperti terlihat di bawah ini.

#header .description { display:none; margin:0 5px 5px; padding:0 20px 15px; bla..bla }

WARNING :

Biasanya jika judul dan descripsi blog tidak di ikut sertakan, bagian Main-Wapper dan Sidebar akan ikut naik ke atas. salah satu solusinya bisa saja kita naikan nilai margin-top dari tag #header-wrapper -nya.

#header-wrapper { background:$bgcolor; url(alamat url)no-repeat left top; width:660px; margin:50px auto 10px; border:1px solid $bordercolor; }

menambahkan (tambahkan) nilai yang lebih tinggi pada angka yang di pertebal.

lihat bag 2 trik membuat header dari gambar body background di sini.

Technorati tags: ,

Mengganti " Posted By Author"

Karena sesuatu hal mungkin kita ingin menyamarkan atau menganti nama Author dalam postingan. seperti gambar di bawah .

Menjadi seperti ini.

Untuk itu yang pertama cari kode di bawah ini:

<div class='post-footer'> <p class='post-footer-line post-footer-line-1'> <span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span>

Ganti tulisan yang berwarna putih di atas dengan alamat url atau nama kita. seperti ini : <a href="http://jaloee.blogspot.com/" class="fn n url"> by Mr Ganteng at </a>, atau langsung saja nama kita " by Mr Ganteng at ".

* ganti http://jaloee.blogspot.com dengan alamat blog anda * cara ini mungkin saja bukan satu-satunya cara *sangat bijaksana sekali sebelum anda mencobanya untuk membackup template aslinya.

del.icio.us tags: ,