Background warna berbeza untuk Author

Tweet

Tutorial ini untuk diri sendiri. Sebenarnya saya mendapat tip Bezakan Kaler Komen Author Dengan Pelawat ini dari blog Ien lama dulu, tetapi tak pernah simpan codingnya. Setiap kali saya menukar template, saya perlu mencari semula di blognya. Nasiblah blog Ien masih dibuka untuk umum, buatnya di tutup atau hanya untuk 'jemputan' sahaja...susah juga saya.

1. Layout->Template->Edit HTML(Tick Expand Widget Templates)

2. Cari kod di bawah

.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}

tambah di bawahnya kod ini :

.comment-body-author {
margin:0;
padding:0 0 0 20px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
color:#000000;
background:#3399CC;
text-decoration:bold;
}

3. Selepas itu cari id='comments-block', dah tambah kod berwarna merah.

<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> said... </dt>

<b:if cond='data:comment.author == data:post.author'> <dd class='comment-body-author'> <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></p> </b:if> </dd>

</b:if>

<dd class='comment-footer'>

4. Save Template

Kod biru adalah kod asal dan kod merah adalah kod yang ditambah.

Hasilnya adalah seperti ini :



kredit : Ien

Buat sidebar kiri dan kanan

Tweet

Dalam minggu ini saya menerima beberapa pertanyaan mengenai menambah sidebar dari satu menjadi 2 . Kesian Abgputra yang sanggup menelefon saya dari Sri Aman, Sarawak. Saya tak pasti kenapa ramai yang gagal walaupun mengikut segala langkah yang telah diberikan kerana saya telah 'mengetes'nya dengan berjaya. Segala penerangan ini adalah untuk template minima ( original ) blogspot.

Jika anda menggunakan template lain , anda perlu faham beberapa asas penting template standard blogger yang mempunyai Header, Outer dan Footer.

Untuk Outer kita mempunyai:
Main - tempat kita menyimpan posting / entri
Sidebar - tempat kita menyimpan berbagai tools dan aksesori untuk mencantikkan blog.

Sekarang kita akan menambah sidebar original template minima blogger menjadi dua. Jangan tick pada kotak Expand widget Template

1. Mula² Dashboard > Layout > Edit HTML > cari code Outer-Wrapper seperti di bawah :

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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-wrapper {
width: 220px;
float: right;
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 */
}

Outer-Wrapper menyimpan nilai dalam pixel main-wrapper serta sidebar-wrapper. Jika ingin menambah satu lagi sidebar di belah kiri dengan nilai seperti ini :

#sidebarkiri-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Kita perlu ubah Outer- Wrapper = 410 pixel + 220 pixel + 180 pixel + 20 pixel = 830 pixel, biar ada sedikit ruang, kita tambah 10 pixel = 840 pixel.

Gantikan code Outer Wrapper dengan code seperti di bawah:

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan supaya ada jarak */
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 */

#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

2. Langkah kedua adalah memasang code id pada body. Letak code ini

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'>

</div>

di bawah code id sidebar-wrapper :

code lengkap akan jadi seperti ini :

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'>
</div>

3. Ganti juga nilai pixel bagi header

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

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

4. Ganti juga nilai pixel dalam footer

/* Footer
----------------------------------------------- */
#footer {
width:840px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Code berwarna merah adalah code yang di edit /tambah. Sekarang kita mempunyai 2 sidebar di sebelah kiri seperti berikut .


Langkah seterusnya adalah memindahkan satu sidebar ke sebelah kanan supaya kita mempunyai sidebar kiri dan kanan dan main wrapper kita di tengah².

Code sidebar baru yang kita tambah tadi, tukar code yang berwarna biru

#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Letak code ini di atas id main-wrapper

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'>
</div>

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>

Hasilnya adalah seperti berikut :

Scheduled Post Publishing on Blogger in draft

Tweet

Mungkin ada yang tahu, sekarang Blogger boleh dipost pada hari, waktu yang kita tetapkan untuk masa ke hadapan.

Dulu sekiranya saya menulis entri dan pada Post Options saya letakkan post date and time 2 hari akan datang, entri saya akan tetap keluar pada main page waktu saya publish.

Tetapi sekarang, sekiranya kita log in to draft.blogger.com instead of www.blogger, entri kita akan tersimpan di dalam scheduled dan akan keluar pada main page pada waktu yang telah kita tetapkan.

Syaratnya, kita mesti logged in to http://draft.blogger.com/. Jika melihat blueprint logo seperti di bawah ini, itulah Blogger in draft,

Selamat mencuba.