Cari Artikel Blog Ini

Total Tayangan Laman

POSTINGAN TAMPIL DALAM BENTUK KOTAK

Bukan hanya sidebar saja yang bisa tampil dalam bentuk kotak-kotak, postinganpun tidak mau kalah, ingin tampil dam bentuk kotak juga. Untuk contoh cobalah anda buka link ini. Jelaskan kan...setiap artikel dari postingan ada didalam sebuah kotak.
Anda mau memiliki postingan dalam kotak seperti itu...? Simak langkah-langkahnya :
  1. Sign ke Blogger.
  2. Pilih Rancangan.
  3. Pilih Edit HTML
  4. Cari kode ini

    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }
  5. Ganti kode diatas dengan kode dibawah ini.
    .post {
    padding:10px; /* Jarak antara text post dengan garis pinggir */
    Border-top: 3px solid #C3D9FF; /* warna garis pinggir atas */
    Border-bottom: 3px solid #C3D9FF; /* warna garis pinggir bawah */
    Border-left: 3px solid #C3D9FF; /* warna garis pinggir kiri */
    Border-right: 3px solid #C3D9FF; /* warna garis pinggir kanan */
    Margin-bottom: 15px; /* jarak antara post yang satu dengan yang lainnya */
    }


    Kode #C3D9FF merupakan kode dari warna biru muda . Anda bisa mengganti kode warna tersebut dengan kode warna yang anda sukai.
  6. Klik tombol Simpan Tempate ...lihat blog anda yang baru.


Jika ingin menamplkan border melengkung pada keempat sudut seperti pada contoh tadi buatlah seperti kode dibawah ini :

.post {
padding:10px; /* Jarak antara text post dengan garis pinggir */
Border-top: 3px solid #C3D9FF; /* warna garis pinggir atas */
Border-bottom: 3px solid #C3D9FF; /* warna garis pinggir bawah */
Border-left: 3px solid #C3D9FF; /* warna garis pinggir kiri */
Border-right: 3px solid #C3D9FF; /* warna garis pinggir kanan */
Margin-bottom: 15px; /* jarak antara post yang satu dengan yang lainnya */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

}



Postingan ini telah berhasil dicoba pada blog pergobaan EPG Sudio

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
13 Comments

13 komentar :

Mamanya Zaheer mengatakan...

Lam kenal. Aku tertarik sama kotak-kotak ini.
Tapi pas mo ngrubah, di Edit HTML blog aku adanya kode seperti ini:
.post {
background:url(http://4.bp.blogspot.com/_6pbSFKC8YH4/Sa05b5YNT8I/AAAAAAAAAV0/Unk97GpcQxw/s1600/post.png) top left no-repeat;
float: left;
width: 590px;
margin: 0 0 10px;
padding: 10px;

}
.post h3 {
color: #e82c81;
font-size: 22px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0 0 5px;
padding: 25px 10px 10px 30px;
border-bottom:1px dashed #46d0fe;
}
.post h3 a, #content h1 a:visited {
color: #e82c81;
font-size: 22px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 20px 0 5px;
padding: 10px 10px 10px 0px;
}
.post h3 a:hover {
color: #ff92c3;
text-decoration: none;
}
.post-body {
margin: 1em 0 .75em;
line-height: 1.6em;
border-bottom:1px dashed #46d0fe;
}
.post-body blockquote {
line-height: 1em;
}
Aku agak keder juga, yang diubah yang mananya yaa? Thanks jawabannya. Ditunggu yaa.

febri mengatakan...

Bagaimana cara membuat halaman blog jadi lebar kayak blog epg?? thanks by fabrie.blogspot.com

Prasetyo Nugroho mengatakan...

HALO EPG, NIH PRAS MAU NANYA GIMANA YA, ITU KAN SAYA LAGI COBA-COBA IKUTAN LOMBA BIKIN BLOG TUH KAYAK EGP, DAPAT TIKET TAPI GIMANA NGRUBAH UBAH TIKETNYA, SOALNYA BESAR, PLEASE KASIH TAU YA... SOALNYA SCRIPT YG DITERIMA TIDAK ADA WIDHT DAN LENGHT- NYA, TOLOOONG BANGET. JAWABANNYA DITUNGGU DI EMAIL: nprasetyo@rocketmail.com

AS Mulyana mengatakan...
Komentar ini telah dihapus oleh pengarang.
AS Mulyana mengatakan...

Hallo EPG...salam kenal, blognya dijadikan referensi buat ngutak-ngatik template abdi. Hatur nuhun pisan....salam kenal, zi-oemars.blogspot.com

febri irbef mengatakan...

trimakasih gan..sangad membantu blog anda,,
msih newbie saya,,main2 ke blog sderhana saya gan,di:http://www.teknologi-sport.blogspot.com

Muhammad Hatta mengatakan...

salam kenal Gan EPG
terima kasih gan..mohon nyoba di blog saya.
semua makin kinclong ya blog nya.

Anonim mengatakan...

Kode yang di atas kurang lengkap makanya ga berhasil :D


.post {

widht: 250px; /* lebar masing-masiing post ini agan yg kurang */

padding:10px; /* Jarak antara text post dengan garis pinggir */

Border-top: 3px solid #C3D9FF; /* warna garis pinggir atas */

Border-bottom: 3px solid #C3D9FF; /* warna garis pinggir bawah */

Border-left: 3px solid #C3D9FF; /* warna garis pinggir kiri */

Border-right: 3px solid #C3D9FF; /* warna garis pinggir kanan */

Margin-bottom: 15px; /* jarak antara post yang satu dengan yang lainnya */

}

nah agan udah jadi postingan dalam kotaknya :D

kalo mau ada border melengkung seperti di epg

tambahan iini di bawahnya:

.post {
width:274px; /* lebar post ini yang ktinggalan diatas bos */
float:left;
padding:5px; /* Jarak antara text post dengan garis pinggir */
Border-top: 3px solid #2F323D; /* warna garis pinggir atas */
Border-bottom: 3px solid #2F323D; /* warna garis pinggir bawah */
Border-left: 3px solid #2F323D; /* warna garis pinggir kiri */
Border-right: 3px solid #2F323D; /* warna garis pinggir kanan */
Margin-bottom: 10px; /* jarak antara post yang satu dengan yang lainnya */
Margin-left: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
.post:hover{
-webkit-box-shadow:6px 4px 9px #FCFCFD;
-moz-box-shadow: 6px 4px 9px #FCFCFD;
box-shadow : 6px 4px 9px #FCFCFD;}
.post blockquote {
margin:1em 20px;
}


oiya setelah kita mengubah posting jadi kotak maka lebar posting akan tetap sebesar yg kita set di atas yaitu sebesar 250.. nah pas kita klik baca selengkapnya atau melihat tulisan secara penuh maka lebarnya akan tetap padahal misalnya lebar maiin-wrapper 500px nah kan ga enak bgt dilihat tuh. tambahkan kode ini agar lebarnya kembali full sebesar main-wrapper, kode ini letakkan di ats < / head > :

< style > .post {
width:500px;} /* lebar post ini atur kembali sesuai lebar main-wrapper */ < / style > < /b:if >

nah udah selesai agan....

EPG thanks ya waluupun totorialny di atas ada yg kurang dikit tp efekny bisa ga berhasil kwkwkkwk

*kode yg dalam kurung siku sengaja di beri spasi agar bisa tampil disini,,,silhkan rapikan spy berfungsi kembali

Anonim mengatakan...

o iya kode yg terkahir (untuk di atas head ilang sebagian ,, lgkpny ini:

< b : if cond= 'data:blog.pageType == "item"'>
< style > .post {
width:500px;} /* lebar post ini atur kembali sesuai lebar main-wrapper */ < / style > < /b:if >


*jangan lupa rapikan spasinya di sekitar kurung siku

Ades mengatakan...

@Anonim : terimaksih atas saran yang anda berikan.
Penambahan yang anda maksud mungkin berdasarkan tampilan EPG Studio sekarang. Sedangkan tips diatas untuk membuat postingan terdapat dalam kotak, bukan kolom.
Penambahan kode yang anda maksudkan, dibahas dalam MENAMPILKAN POSTINGAN DALAM BENTUK KOLOM
Tapi walaupun begitu, saya ucapkan terima kasih atas saran anda...
Salam Blogger

Ades mengatakan...

@Anonim Coba anda lihat pada MENAMPILKAN POSTINGAN DALAM BENTUK KOLOM
Thanks atas kritik dan sarannya...

Anonim mengatakan...

hehehe mis persepsi nih ...

coz diawal artikel di atas ada tulisan
kira2 : "coba kembali ke halama utama epg utk melihat contohny.."

pas ane klik halamanny kyk skrg..
pas di coba beda

mkanya ane komen kyk diatas :D

Ades mengatakan...

@Anonim : sekali lagi terima kasih atas kritik dan sarannya, semoga kedepan admin EPG Studio dapat membuat postingan lebih berhati-hati...

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!