Gratis berlangganan artikel Zykry via mail, join sekarang!

Sabtu, 27 Maret 2010

Cara membuat/menghilangkan garis tepi atau border pada blog

sementara3
Untuk membuat garis pinggir pada posting, caranya adalah sebagai berikut:
1. Login ke Blogspot--> Tata LeTak --> Edit HTML editHTML

2. Cari kode berikut:


.post {
lalu ganti baris kode

border-bottom:1px dotted $bordercolor;
dengan baris kode

border:1px solid $bordercolor;
sehingga baris kodenya akan menjadi seperti

dibawah ini:

.post {
margin:.5em 0 1.5em;
border:1px solid $bordercolor;

padding:0 10px;/*jarak antara text dengan garis pinggir*/
padding-bottom:1.5em;
}
lalu klik tombol SIMPAN TEMPLATE

3. Jika ternyata garis pinggir yang ingin dibuat hanya pada bagian tertentu saja, disebelah atas atau bawah saja misalnya, sementara5maka baris kode yang berwarna merah tadi bisa diganti dengan baris kode berikut:

Border-top: 1px solid $bordercolor; /*garis pinggir atas */
Border-bottom: 1px solid $bordercolor; /*garis pinggir bawah */
Border-left: 1px solid $bordercolor; /*garis pinggir kiri */
Border-right: 1px solid $bordercolor; /*garis pinggir kanan */

4. Untuk membuat garis pinggir pada sidebar, maka letakan kode yang berwarna merah tadi dibawah baris kode .sidebar {

/* Sidebar Content
----------------------------------------------- */
.sidebar {
border:1px solid $bordercolor; padding:10px;/*jarak antara text dengan garis pinggir*/color: $sidebartextcolor;
line-height: 1.5em;
}


5. Bisa juga membuat garis pinggir pada kolom posting dan sidebar dibuat sekaligus, dengan menganti baris kode berikut:

.sidebar .widget, .main .widget {
Border-bottom:1.5px solid $bordercolor;
margin:0 0 1.5em;
padding:0 0 0.5em;
}
dengan baris kode berikut:

.sidebar .widget, .main .widget {
Border:1.5px solid $bordercolor;
margin:0 0 1.5em;
padding: 5px; }
dan hasil akan seperti terlihat pada gambar dibawah ini: sementara3
_________________________________
Catatan:
1. border:1px solid $bordercolor;

Variabel dengan nilai 1px menunjukan ketebalan garis pinggir tersebut. Rubahlah sesuai dengan keinginan.
Variabel dengan nilai solid menunjukan garisnya merupakan garis lurus. Rubahlah sesuai dengan keinginan, misalnya menjadi dotted (titik).
Variabel dengan nilai $bordercolor menunjukan warna garis pinggir. $bordercolor adalah warna default dari border template minima. Rubahlah dengan sesuai keinginan, misalnya biru (#0000ff), kuning (#ffff00), merah(#ff0000), hijau (#008080), hitam (#000000), atau putih (#ffffff).

2. Untuk memudahkan pencarian baris kode, tekan Ctrl + F untuk menampilkan kolom pencarian yang letaknya ada dibawah kolom Edit HTML seperti terlihat pada gambar dibawah ini, lalu ketikan atau kopi paste baris kode yang ingin dicari pada kotak pencarian. Baris kode yang sesuai akan ditunjukan dengan diberi warna hijau.
finder_thumb4


Related Post:

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di zykry-trick.blogspot.com
Thx to :
Jangan lupa add facebook Zykry Dark
print this page Print this page
Cara membuat/menghilangkan garis tepi atau border pada blogSocialTwist Tell-a-Friend

Comments :

6 komentar to “Cara membuat/menghilangkan garis tepi atau border pada blog”

blogsastra said...
on 

makasih gan atas artikelnya aku dah pasang

Nikmaya John said...
on 

Tipsnya sangat bermanfaat sob,,,,

Eggy said...
on 

Thanks sob infonya. Akhirnya jadi juga :)

Hp Terbaru | Spesifikasi Nokia C2-03 said...
on 

makasih banyak gan .. atas infonya ...

Outbound Gibasa said...
on 

makasih banyak brooow... buat informasinya..

SERIBU PERNAK PERNIK PONSEL ANDROID said...
on 

makasih gan atas artikelnya, akhirnya saya berhasil menghilangkan garis tepinya


Apa pendapat anda?

No spam and no porn yaw!!

Widget By Devils Workshop

Guest Book

Iklan

Pasang iklan anda di Zykry-trick hanya Rp.15.000 /bulan Hubungi : 087 823 177 355 - 085 759 277 896 Facebook : Zykry@programmer.net
 
twitter

Tukeran Link

Tips Dan Trick Blogging

U follow I follow

Statistik


free counters
broadband speed test
Current Events & News Blogs - Blog Rankings Blog Directory
Internet Blogs Web Design & CSS (Graphics) - TOP.ORG
Blogging Blogs - Blog Catalog Blog Directory Online Marketing - OnToplist.com
Web design blogs
The Republic of Indonesian Blogger | Garuda di Dadaku
Top 10 Award