Showing posts with label background. Show all posts

cara letak border,background dan scroll pada widget

Dalam artikel cara letak border pada widget sebelum ini terdapat masaalah dimana border ini juga mengelilingi pada tajuk widget.Ia hanya sesuai digunakan pada widget widget tertentu sahaja(yang tidak memerlukan tajuk widget).Bila terjadi begini nampak janggal terutamanya pada yang telah menghias tajuk widget dengan begitu cantik,tapi border pula berada disampingnya. Selain dari border,background dan scroll juga dimasukkan sekali pada kod ini.Jadi untuk artikel kali ini saya akan tunjukkan cara bagi mengatasinya:

Sebagai contoh untuk tutorial ini saya pilih widget Archives:

Masuk ke dashboard--template--pilih edit html--

kemudian gunakan fungsi carian Ctrl+F (klik didalam template dan tekan butang ctrl+f) dan taipkan perkataan archive

tekan butang enter sehingga jumpa kod seperti ini:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

letakkan setelah kod: <div class='widget-content'>
dan sesetengah widget seperti ini

kemudian letakkan kod ini dibawahnya:

kemudian scroll perlahan lahan lagi kebawah hingga jumpa kod

<b:include name='quickedit'/>

dan letakkan kod dibawah ini selepasnya:

</div>

kalau nak letak background gantikan url imej pada teks berwarna merah.Ubahkan lebar dan tinggi yang bersesuaian pada teks berwarna hijau.
kemudian preview dan save template .

Saya juga telah cuba untuk widget bloglist ,categories dan berhasil.Untuk widget yang lain rasanya tiada masaalah.Untuk widget lain cuma kenal pasti tajuk widget dan cari kod pada template seperti contoh yang diatas

Contoh kod yang dibuat untuk widget bloglist:

klik untuk besarkan gambar

Selamat mencuba

update 14/5/2013

cara letak background atau warna pada entri

Tutorial kali ini ialah cara bagi meletakkan warna atau background pada posting.Mungkin kita ingin highlightkan bahagian tertentu atau keseluruhan paparan pada posting dengan warna dan juga berlatarbelakang dengan imej.

Caranya:
Selepas membuat posting masukkan kod seperti dibawah:
(dengan meletakkan dipermulaan diakhir teks pada posting yang hendak diletak background)
seperti dibawah

<div style="background:#33CCFF; padding:4px 7px 4px 7px;">
Masukkan kandungan teks artikel disini
</div>

Bahagian teks berwarna merah diletakkan pada permulaan posting
Bahagian warna hijau pula diletakkan pada penghabisan posting
dan dimasukkan pada mode edit HTML
contoh seperti imej dibawah yang bertulisan warna biru

Untuk meletakkan background pada posting:

<div style="background:url(Letakkan url imej disini) no-repeat;">
Masukkan kandungan teks artikel disini
</div>

# gantikan dengan url imej yang telah diupload ke photobucket,tinypic dan sebagainya seperti contoh dibawah.
Jika menggunakan latarbelakang dengan corak/pattern yang kecil gantikan no-repeat kepada repeat.

KOD DAN BENTUK

Masukkan kandungan teks artikel disini</div>

Background dengan border
#Tukarkan warna kod background dan border mengikut kesesuaian

Masukkan kandungan teks artikel disini</div>

Masukkan kandungan teks artikel disini</div>

Masukkan kandungan teks artikel disini</div>

Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; padding: 5px 8px;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;">
Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; padding: 5px 8px;-webkit-border-radius: 36px 12px;

-moz-border-radius: 26px 8px;

border-radius: 26px 8px;">
Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; padding: 5px 8px;-webkit-border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 10px;

border-top-left-radius: 10px;

border-top-right-radius: 10px;">

Masukkan kandungan teks artikel disini</div>

Background dengan imej

Masukkan kandungan teks artikel disini

</div>

Masukkan kandungan teks artikel disini

</div>

Untuk meletak imej pada sudut tertentu masukkan kod background-position:right bottom.seperti contoh diatas gambar bunga diletakkan dibahagian hujung bawah
background position yang lain:

left top

left center

left bottom

right top

right center

center top

center center

center bottom

selamat mencuba..

cara letak background dan border pada sidebar

Kebiasaanya warna ruangan posting dan sidebar pada template adalah sama.Mungkin ada yang inginkan kelainan dengan meletakkan border dan background yang berbeza pada sidebar.

Berikut adalah caranya:

Masuk ke dashboard-pilih layout dan klik Edit HTML
cari kod ini:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
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 */

background-image: url(letakkan url imej disini);

border:12 px dashed #0000FF;

}

jika tiada kod seperti diatas cari kod ini:
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);

background:url(letakkan url imej disini)repeat;

border:12 px dashed #0000FF;

}
background imej perlu diupload dan dapatkan url utk dimasukkan pada kod diatas
#cuma tambah kod warna merah.Untuk border selain dari dashed boleh juga ditukar dengan solid,dotted,ridge,groove.Begitu juga dengan kod warna bagi border juga boleh ditukar mengikut kesesuaian.

Cara letak background pada tajuk posting

Menghias blog tentunya menjadi kemestian kerana semua org nak cantikkan blog.Tujuan blog ini pun adalah bagi membolehkan rakan rakan mendapat sumber rujukan bagi membuat berbagai bagai perubahan pada template asal dari blogger yang kita ketahui cuma dengan paparan yang terhad sahaja.Perubahan yang dibuat tentunya perlu mengambil kira keselesaan pengunjung.Kalau ada komen yang dibuat kita perlu ambil perhatian,kerana apa yang kita suka belum tentu org lain suka.

Untuk meletakkan background pada tajuk posting,tentunya seperti biasa kita perlu sediakan imej terlebih dahulu.sesudah diupload dan dapat url untuk imej:

masuk ke dashboard-pilih template,Klik edit HTML
dan cari kod ini

.post h3 {

atau sesetengah template kodnya begini

h3.post-title, .comments h4 {

contoh kod asal pada template (sesetengah template berbeza)

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:150%;
font-weight:normal;
line-height:1.4em;
}

tambahkan kod seperti dibawah

.post h3 {
background: url(letak url imej disini);
-moz-border-radius: 10px 10px;
border-radius: 10px 10px;
height:55px;
text-align:center;
margin:.25em 0 0;
padding:0 0 4px;
font-size:150%;
font-weight:normal;
line-height:1.4em;
}

#kod warna hijau jika hendak bahagian hujung background melengkung.Jika hendakkan lengkung hanya pada bahagian tertentu ubah saja nilainya disini.
ketinggian imej boleh diubah pada height:55px,tukarkan kepada nilai yang bersesuaian

kemudian preview dan akhir sekali save template .

Cara letak tajuk widget ditengah dan letak warna latarbelakang

Entri saya kali ini adalah cara bagaimana hendak meletakkan tajuk pada widget sidebar ditengah tengah ,kebiasaannya berada disebelah kiri dan juga meletak warna latar belakang agar nampak lebih mantap dan ceria.Selalunya template dari blogger warna latar belakang title adalah sama dengan background lainlah kalau template yang didownload dari web yang dah siap diwarnakan.Untuk meletak warna pada latar belakang widget pula boleh dirujuk pada artikel ini.

Untuk tajuk pada template biasanya bermula dengan kod h1,h2…dan sebagainya.untuk meletak warna latar belakang dan teks agar berada ditengah(center) kita cuma perlu tambah kod dibawahnya:

Masuk kedesign—edit HTML cari kod h2 ditemplate seperti dibawah:
Gunakan Ctrl+F untuk find

h2 {
background-color:#AEB404;
text-align: center;
}

*teks berwarna merah adalah kod yang ditambah
kod warna dengan teks hijau boleh ditukar dengan kod yang dinginkan.

kemudian seperti biasa preview dan save template.

Cara menukar warna background pada widget

Mungkin korang ingin menukar warna background pada widget disidebar atau pun hendak mempelbagaikan warna latarbelakang yang ada pada widget.Sebagai menunaikan permintaaan dari rakan kita yang meminta saya membuat tutorial menukar warna background,jadi tutorial saya kali akan memuatkan cara bagaimana membuatnya.Pada mula nya saya bercadang hendak memasukkan sekali cara menukar warna pada tajuk widget dan meletakkan teks yang kebiasaanya berada disebelah kiri ketengah,tapi akhirnya saya ambil keputusan untuk mengasingkan agar tidak mengelirukan dan memudahkan pencarian artikel dan juga nak letak tajuk pada posting pun agak panjang.

Untuk membuatnya:

1.Log in dan pilih design—Klik pada edit HTML
Dapatkan dulu widget id terlebih dahulu untuk widget yang hendak dtukar warna.Sebelum ini saya ada juga menunjukan cara hendak mendapatkan widget id boleh dirujuk disini
contoh kod untuk widget id ditemplate seperti dibawah ini:

</b:widget>
<b:widget id='BlogArchive2' locked='false' title='Archives' type='BlogArchive'>

2.Seterusnya masukkan kod seperti ini:
Kod hendaklah diletakkan diatas kod ]]></b:template-skin>

#BlogArchive2{
background-color:#7401DF;
}

Jika hendak memasukkan widget yang lain hanya tambah dibawahnya seperti ini:

#BlogArchive2{
background-color:#7401DF;
}
#linklist2{
background-color:#7401DF;
}

3.Kemudian preview dan save template setelah tiada apa apa error.

Cara letak border disekeliling posting

Membuat border disekeliling posting ini selain dari menambahkan seri pada posting juga sebagai pemisah diantara posting.Pada kebanyakan template sekarang sudah ada border ini.Bagaimanapun template yang berwarna putih jarang jarang menggunakan border terpisah ini.Untuk contohnya boleh dilihat garisan biru disekeliling posting pada blog ini.

Cara membuatnya:

1.Log in ke blogger
2.pilih Design--->>Edit HTML

3.Cari kod ini:

.post {

Lebih mudah gunakan Ctrl + F untuk mencari kod

* diatas adalah kod yang telah ditambah pada template saya.

Kemudian letak kod berikut dibawahnya:

border: 1px solid #000000;

jika inginkan border yang berlainan gunakan kod ini:

border-top: 1px solid #000000; border-bottom: 2px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000;

Border boleh ditukar dari solid kepada dotted,dashed,outset,inset,groove,double dan ridge
Kod: #000000 adalah untuk warna hitam,boleh tukarkan dengan warna yang diinginkan.Begitu juga dengan ketebalan border .
Jika hendak letak warna latar belakang pada posting tambah kan kod berikut pada bahagian bawah kod tadi:

background: #000000;

atau nak letak imej sebagai background masukkan kod ini:

background:url (url image anda disini);

Cuma tukarkan kod warna yang sesuai supaya tampilan lebih menarik

Kemudian save template anda
Selamat mencuba.

Meletakkan warna background berbeza pada komen

Selalunya komen antara pemilik blog dan pengunjung mempunyai paparan yang sama. Oleh itu agak sukar untuk melihat yang mana satu komen oleh pengunjung dan komen oleh admin sesuatu blog.Disebabkan itu biasanya pemilik blog meletakkan paparan warna background yang berbeza bagi jawapan untuk pengunjung. Oleh sekiranya anda ingin meletakkan paparan kotak komen berbeza dan belum tahu caranya, ikutilah langkah dibawah ini.

Pada blog anda pilih Layout
Klik edit html.
Klik pada Expand template widget.
Cari kod yang seakan di bawah ini, kemudian tambahkan kod yang berwarna merah.

/* Comments ----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em; text-transform:uppercase;
letter-spacing:.2em;
color: #999999;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
.admin-comments{
background:#00CC33;(tukarkan kod warna background disini jika ingin mengubah warna)
border:3px solid #FF9966;
padding:5px;
}
kod berwarna merah diatas ini adalah yang perlu anda tambahkan.Boleh juga diletakkan diatas kod
]]></b:skin>

Kemudian cari kod dibawah ini dan tambahkan juga kod yang berwarna merah.
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='admin-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>

Nota:Kod yang berwarna merah perlu anda tambah
Kemudian klik preview,jika tiada masaalah ,jangan lupa klik butang save

Masuk gambar pada background blog

Mungkin anda ingin supaya background blog anda lebih menarik dengan memasukkan imej kedalamnya,tetapi belum tahu bagaimana hendak membuatnya.Berikut adalah cara untuk membuatnya:

Login ke blogger, klikDesign, setelah masuk ke halaman template, klik sub menu Edit HTML, kemudian cari kod/tag CSS body { }, biasanya seperti dibawah ini:

body {
font: $bodyFont;
color: $textColor;
background: $bgColor;
}

kemudian tambahkan kod untuk background dengan gambar seperti ini:

body {
font: $bodyFont;
color: $textColor;
background: $bgColor;

background-image: url(http://www.domain.com/gambar.jpg);

}

Gantikan http://www.domain.com/gambar.jpg dengan url dimana anda upload gambar/imej untuk background . Untuk upload gambar, anda boleh boleh gunakan imageshack atau di Tinypic

update:

Jika kod diatas tiada atau tidak berfungsi letakkan pada bahagian kod ini:

.main-outer {
border-top: $(main.border.width) solid $(body.rule.color);
background-image: url(http://www.domain.com/gambar.jpg);
}


HOME	SITE MAP	KOD WARNA	LINK EXCHANGE

cara letak border,background dan scroll pada widget

cara letak background atau warna pada entri

cara letak background dan border pada sidebar

Cara letak background pada tajuk posting

Cara letak tajuk widget ditengah dan letak warna latarbelakang

Cara menukar warna background pada widget

Cara letak border disekeliling posting

Meletakkan warna background berbeza pada komen

Masuk gambar pada background blog

Subscribe

Banner

Kategori

Pelawat

SHOUT

Bloglist