Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger

Dalam edit template sobat, perlu kita ketahui berapa ukuran atau lebar elemen-elemen yang ada di blog. Untuk mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger semilyar trik blogger ingin sharing ke teman-teman. Sharing dalam posting ini mudah-mudahan bisa membantu mengedit blog sahabat semua. Yuk mulai saja.

Landscaping company

1. Mengetahui Ukuran / Lebar header

#header-wrapper{

background: #ffffff;

width: 900px;

height: 160px;

font-size: 12px;

margin: 0px auto 0px;

padding: 0px;

overflow: hidden;

}

2. Mengetahui Ukuran / Lebar halaman Posting

#main-wrapper{

float:left;

width:590px;

margin:0px 0px 5px 0px;

padding:13px 10px 0px 10px;

overflow: hidden;

}

3. Mengetahui Ukuran / Lebar sidebar

#sidebar-wrapper{

float:left;

width:320px;

margin:13px 0px 5px 0px;

padding:0px;

line-height:19px;

display: inline;

}

Update : Banyak sekali kode sidebar yang bisa dipakai misal #rsidebar-wrapper{ atau #right-sidebar-wrapper{ dll, jadi disesuaikan saja.

4. Mengethui Ukuran / Lebar Footer

/* Footer

----------------------------------------------- */

#footer {

width:950px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

a. Untuk mengedit ukuran/lebar Halaman Blog

Cari kode di bawah ini:

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

b. Untuk mengedit ukuran/lebar Halaman Posting

Cari kode di bawah ini:

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

}

c. Untuk mengedit ukuran/lebar Sidebar Blog

Cari Code di bawah 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 */

}

d. Untuk mengedit ukuran Header Blog,

Cari Code di bawah ini:

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

e. Untuk mengedit ukuran Footer Blog

Cari Code di bawah ini:

#footer {

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

Jika sahabat tidak menemukan kode seperti di atas, untuk mengetahui element seperti header, posting, sidebar dan lebar blogger, cukup mencari kode yang mirip dan ditunjukkan dengan width: (LEBAR) dan height:(TINGGI) caranya cukup ketik apa yang dicari dalam edit HTML, setelah terbuka halamannya, Ctl+F, akan ada disudut kanan atas kotak pencarian.....Selamat mencoba.

Paling mudah membuat pagenumber navigation

Pertama,pergilah ke dashboard blogger anda,selanjutnya,pilih tata letak,dan pilih edit html.Seperti biasa,contreng option expand widget templates,selanjutnya cari kode berikut:]]>Setelah ketemu,letakkan persis diatasnya kode css dibawah ini:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Lalu,cari lagi kode seperti ini:
</body>
Jika sudah ketemu,tepat diatasnya letakkan script dibawah ini:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>



Langkah terakhir,carilah kode berikut:
'data:label.url'
Jika sudah ketemu,hapus kode tersebut dan gantilah kode berikut:
'data:label.url + &quot;?&amp;max-results=5&quot;'
Sekarang,simpan templates anda,dan anda bisa lihat hasilnya

Kode Warna

Kode warna:

Menghasilkan Warna Dari Hex Kustom ada tiga cara, bagi anda tinggal memilih cara mana yang mudah.

1. Tarik bar hitam pada pemilih "Hue" untuk menghasilkan warna dasar yang diinginkan.

2. Selanjutnya, klik ganda di dalam Brightness / grid Saturasi untuk mengaktifkan kursor. Tarik sampai kecerahan yang diinginkan tercapai.

Dalam "Swatch" bar berisi hasil akhir warna yang di inginkan.

3. Kode warna hex yang dihasilkan di bagian bawah grid di kotak "Hex". Cukup copy dan paste kode ke halaman Anda.

Setelah Anda memiliki warna hex, Anda tinggal menilai dari tabel di atas , copy dan paste ( tanpa # ) ke dalam kotak di bawah 'roda warna' dan akan menghasilkan skema warna yang cocok untuk website Anda.

Ini adalah alat untuk digunakan jika Anda mencoba dengan warna kohesif untuk navigasi, latar belakang, hyperlink, dll

 

Cara mengganti template

Bagi sebagian blogger seperti saya ganti-ganti template adalah hal yang menyenangkan. Akan tetapi masalah yang timbul dari ganti-ganti template adalah posisi serp yang tidak menentu. Belum lagi kalau kata kunci yang kita bidik sudah menjadi black list google. Seperti blog ini, nah bagi teman-teman yang sering ganti-ganti template, mulai sekarang berhentilah.

Seperti blog ini sudah berganti template sebanyak 7 kali. Dengan begitu kata kunci yang saya bidik dulu pada posisi pertama, sekarang melorot entah dimana. Apa mungkin karena update alogaritma atau bagaimana yang jelas ganti-ganti template sungguh sangat merugikan blog itu sendiri.

Nah untuk sobat yang biasa ganti-ganti template seperti saya. Semilyar trik blogger ada tips ringan yang bisa mengurungkan niat sobat-sobat untuk mengganti template dengan cara menggunakan fitur blogger yang baru.

Ok langsung saja kita view blog kita dengan tampilan bawaan blogger tapi kita tidak mengganti template blog.

1. Classic

2. Flipcard

3. Magazine

4. Mosaic

5. Sidebar

6. Snapsot

7. Timeslide

Dari pada kita ganti-ganti template, kita gunakan saja fitur baru google yaitu dinamic view. Dalam fitur barunya itu kita tidak mengganti template hanya saja kita dapat memilih layout yang kita inginkan. Memang baru sebatas 7 macam. Saya rasa sudah cukup mengobati penasaran kita untuk gonta-ganti template blogspot.

Nah untuk menjalankannya kita hanya menaruh view di belakang blog kita. Contoh

http://semilyartrik.blogspot.com/view

Dengan begitu kita bisa melihat tampilan yang menarik dari layanan blogger tersebut. Nah mudah-mudahan tips ganti-ganti template menggunakan dinamic view ini bisa mengobati rasa penasaran kita dalam ganti-ganti template.