Kustomisasi Sidebar Title

Apakah title sidebar Anda biasa-biasa aja? Dan ingin merubahnya agar terlihat menarik.Tepat sekali Anda perlu mekustomisasi title sidebar Anda.
Kustomisasi ini sebenarnya dapat membuat keseragaman dalam sidebar title. Disini kita dapat memberikan garis batas serupa kotak, atau dengan background warna, dan background gambar.
Baiklah kita mulai:

1. Masuk ke 'Tata Letak'
2. Klik 'Edit HTML'
3. Jangan lupa back up dulu templatenya
4. Cari kode ini:

.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:2em;
}

5. Kalau belum tersedia, silahkan copas kode diatas dan tempatkan persih dibawah kode berikut:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

Tepatnya akan seperti ini:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:2em;
}

6. Nah, sekarang kita pelajari dulu dengan model border. Caranya tambahkan kode berikut
border:1px solid #kode warna; tepat dibawah .sidebar h2 {
Sebelumnya pilih kode warna yang ingin Anda masukan. Contohnya seperti ini:

.sidebar h2 {
border:1px solid #190101;
margin:0;
padding:0 0.2em;
line-height:2em;
}

7. Untuk model background warna. Tambahkan kode berikut background:#kode warna; tepat dibawah .sidebar h2 {
Sebelumnya pilih kode warna yang ingin Anda masukan. Contohnya seperti ini:

.sidebar h2 {
background:#f3172c;
margin:0;
padding:0 0.2em;
line-height:2em;
}

8. Penggabungan Antara model border dengan background warna.

.sidebar h2 {
border:1px solid #190101;
background:#f3172c;
margin:0;
padding:0 0.2em;
line-height:2em;
}

9. Dan untuk model gambar. Tambahkan kode berikut background:url(URL OF THE PICTURE)no-repeat; tepat dibawah .sidebar h2 {
Tepatnya seperti ini:

.sidebar h2 {
background:url(URL OF THE PICTURE)no-repeat;
margin:0;
padding:0 0.2em;
line-height:2em;
}

10. Jangan lupa Save Template

Ok sekian dulu dan selamat mencoba....

Readmore »»

Kustomisasi Sidebar Title

Cara Membuat Box Pemisah Pada Sidebar

Kalau tadi kita membahas tentang membuat box pemisah pada postingan, sekarang mari belajar membuat box pada sidebar. Lansung saja, simak baik-baik:

1. Masuk ke 'Tata Letak'
2. Klik 'Edit HTML'
3. Jangan lupa setiap melakukan perubahan pada edit HTML, selalu back up template.
4. Cari kode berikut:

#sidebar-wrapper {
background:#d8d7d6;
border: 1px solid #d8d7d6;
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 */
}

5. Kemudian hilangkan kode yang berwarna merah. Dan hasilnya akan seperti ini:

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

6. Sesudah itu, cari kode berikut

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

7. Gantikan kode diatas dengan kode dibawah ini

.sidebar .widget {
background:#d8d7d6;
border: 1px solid #d8d7d6;
margin:0 -5px 1.5em -5px;
padding:5px 7px 5px 7px;
}

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

8. Selesai, dan Save Template

Selamat Mencoba

Readmore »»

Cara Membuat Box Pemisah Pada Sidebar

Membuat Box Pemisah Pada Postingan

Kalau Anda melihat Blog saya maka Anda akan melihat bagaimana adanya Box pemisah pada postingan, seperti gambar dibawah ini.

Cara untuk membuat box pemisah pada postingan, sebagai berikut:

1. Masuk ke 'Tata Letak'
2. Klik 'Edit HTML'
3. cari kode berikut:

#main-wrapper {

4. Taruh kode berikut persih dibawah kode #main-wrapper {

/*background:#a8a7a8;
border: 1px solid #d8d7d6;
padding-right:7px;
padding-left:7px;*/

{Seperti biasa ganti kode warna dengan pilihan Anda}

5. Lalu cari kode

h2.date-header {
margin:1.5em 0 .5em;

{Ubah kode warna hijau menjadi margin:0 0 .5em;}
Tak hanya itu, tetapi juga tambahkan kode yang sama seperti pada main-wrapper. Tetapi Hilangkan /* */. Maksudnya seperti ini:

background:#a8a7a8;
border: 1px solid #d8d7d6;
padding-right:7px;
padding-left:7px;

Dan hasilnya akan seperti ini:

h2.date-header {
margin:0 0 .5em;
background:#a8a7a8;
border: 1px solid #d8d7d6;
padding-right:7px;
padding-left:7px;
}

6. Terakhir cari kode

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;

7. Lalu taruh kode yang sama seperti pada h2.date-header {

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
h2.date-header {
margin:0 0 .5em;
background:#a8a7a8;
border: 1px solid #d8d7d6;
padding-right:7px;
padding-left:7px;
}

8. Selesai, kemudian Save Template

Selamat Mencoba

Readmore »»

Membuat Box Pemisah Pada Postingan

Cara Menambah Kolom Pada Footer Blog

Sebenarnya banyak free template yang sudah menyediakan 3 kolom pada footer-column. Namun kalau Anda merasa penasaran dan lebih puas untuk membuatnya sendiri, silahkan coba cara yang satu ini.

1. Masuk ke 'Tata Letak'
2. Klik 'Edit HTML'
3. Jangan Lupa Back up dulu template'nya
4. Cari kode seperti ini:

]]></b:skin>
</head>

5. Kalau sudah, taruh kode dibawah ini tepat diatasnya,

#footer-columns {
background:#afa7a7;
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}

6. Kemudian cari kode ini:

<b:section class='footer' id='footer'/>

7. Dan ganti kode diatas dengan kode berikut ini:

<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>

8. Dan terakhir Save Template

Selamat mencoba

Readmore »»

Cara Menambah Kolom Pada Footer Blog

Cara Mengganti Link Blog Pager Dengan Icon

Link Blog Pager biasanya terletak dibawah letak comment. Yang biasanya bertuliskan 'Posting lebih baru - Halaman Muka - posting lama'. Karena semua link berupa tulisan, kadanga kita ingin menggantinya dengan sebuah Icon, yang menggambarkan maksud dari link tulisan tersebut.

Model Blog Pager link - yang lama




Model Blog Pager Link - yang menggunakan Icon

Caranya sebagai berikut:

1. Masuk ke 'Tata Letak'
2. Klik Tab 'Edit HTML'
3. Cari kode berikut:

<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>

{Untuk kode warna merah ganti dengan URL ICON ANDA, untuk icon 'posting baru'; untuk kode warna kuning ganti dengan URL ICON ANDA, untuk icon 'posting lama'; untuk kode warna hijau ganti dengan URL ICON ANDA, untuk icon 'halaman muka'. }

Setelah itu SAVE TEMPLATE

selamat mencoba

Readmore »»

Cara Mengganti Link Blog Pager Dengan Icon

Memasang Icon Pada Post Footer Element

Disini kita akan belajar mengganti icon pada post footer element, yang terdiri dari 'posted by', 'label', 'comment link', 'email this post'. Kalau Anda tertarik silahkan coba.
1. Masuk ke 'Tata Letak'
2. Pilih 'Elemen Halaman'
3. klik edit Post, lalu akan keluar gambar seperti dibawah ini.Centang seperti yang sudah saya lingkari pada gambar diatas.
4. Sesudah itu atur sendiri letak Post body.
5. Save

Sekarang kita masuk ke Edit HTML, disini ada 4Tahap. Namun sebelumnya jangan lupa back up your template dan centang Expand template Widget.

Tahap1:
cari kode seperti berikut

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

{Ganti 1.4em dengan 2em (untuk icon 16X16px), dan untuk icon yang lebih besar lagi silahkan tambah nilainya. }

NB: "Ingat, bila Anda kesusahan mencari kode tersebut, silahkan gunakan CTRL+F"

Tahap2:
Cari kode berikut:

.comment-link {
margin-$startSide:.6em;
}

Kemudian ganti kode diatas dengan kode dibawah ini:

.post-author {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 20px;
}
.post-labels {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 20px;
}

.comment-link1 {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 20px;
margin-right: 5px;
}

.comment-link2 {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 23px;
margin-right: 5px;
}

.post-icons {
margin-right: 5px;
}

Sebelumnya siapkan dulu icon yang hendak Anda pasangkan. Sebagai referensi Anda dapat mengunjungi situs ini www.freeiconsweb.com

Setelah itu ganti tulisan warna-warni didalam kode diatas dengan alamat URL ICON ANDA.
Keterangan:
Untuk warna merah URL ADDRESS OF THE ICON , icon ini akan muncul disamping posted by
Untuk warnabiru URL ADDRESS OF THE ICON , icon ini akan muncul disamping label
Untuk warna kuning URL ADDRESS OF THE ICON , icon ini akan muncul disamping comment link
Untuk warna hijau URL ADDRESS OF THE ICON , icon ini akan muncul di samping link to this post

Tahap 3:

Cari kode ini post-comment-link atau tepatnya keseluruhan kode sebagai berikut:

<span class="post-comment-link">
<b:if cond="data:blog.pageType != &quot;item&quot;">
<b:if cond="data:post.allowComments">
<a class="comment-link" href="data:post.addCommentUrl" onclick="data:post.addCommentOnclick"><b:if cond="data:post.numComments == 1">1 <data:top.commentlabel><b:else><data:post.numcomments> <data:top.commentlabelplural></data:top.commentlabelplural></data:post.numcomments></b:else></data:top.commentlabel></b:if></a>
</b:if>
</b:if>
</span>

(Lihat baik-baik, tulisan berwarna merah. Tambahkan angka 1 tepat dibelakang comment-link)
hasilnya seperti ini: <a class="comment-link1"

Kemudian cari kode <span class='post-backlinks post-comment-link'> dan keseluruhannya sebagai berikut:

span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

(Tambahkan huruf 2, dibelakang kode <a class='comment-link'. Hasilnya seperti ini <a class='comment-link2' )

Tahap 4:
Cari kode berikut ini:

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>Email Post ini
</a>
</span>
</b:if>

(Ganti link biru dengan Alamat URL ICON KAMU; warna merah ganti dengan angka menurut besar kecil icon Anda; dan terakhir warna hijau ganti dengan teks yang Anda mau.)

Dan setelah semua selesai, silahkan SAVE.

Selamat mencoba

Readmore »»

Memasang Icon Pada Post Footer Element

Kode Warna

HITAM	#000000
PUTIH	#fbfcfc
MERAH	# fe0012
PINK	#f86693
KUNING	# f5fe00
BIRU	# 1800fe
biru**	# 05f0ff
BIRU MUDA	# 00adfe
HIJAU	#00fe0c
HIJAU*	# bbff05
HIJAU*	# 05ff86
ORANGE	#ff9205

Readmore »»

Kode Warna