Membuat Block Pada Posting

Wah lagi-lagi tips buat blog nih..!!! Pernah gak lihat blog yang di tengah-tengah postingnya terdapat seperti ini

Mau block yang seperti ini..???

Perhatian ini contoh block kode warning

Ini contoh kode lainnya lho..!!!

Mau tahu bagaimana caranya agar hal seperti itu muncul pada blog kita..??? Mau tahu..??? Ada 6 jenis block lho..!!! Jadi tetep mau tahu..??? Ya berhubung berbagi itu indah jadi apa salahnya untuk bagi-bagi..!!!
Berikut caranya..!!!

1. Block untuk peringatan

Perhatian ini contoh block kode warning

• Login ke blogger
• Click Layout
• Click Edit HTML
• Copy dan pastekan kode berikut

.warning {
border : 1px solid #ff8888;
font-size : 11px;
color : #191919;
font-family : Verdana, sans-serif, “Courier New”;
line-height : 125%;
background : #ffbfbf url(http://ebenk789.byethost12.com/warning.gif) no-repeat 5px center;
display : block;
margin : 5px 0 0;
padding : 12px 12px 12px 40px;
font-weight : 400;
width : 85%;
}

Saat anda posting Tuliskan text yang akan di block diantara kode

….

2. Block untuk Info / tips

Contoh block jenis info / tips

• Login ke blogger
• Click Layout
• Click Edit HTML

Copy dan pastekan kode berikut

.hint {
border : 1px solid #4ab7ff;
font-size : 11px;
color : #191919;
background : #bfe5ff url(http://ebenk789.byethost12.com/info.gif) no-repeat 5px center;
font-family : Verdana, sans-serif, “Courier New”;
line-height : 125%;
margin : 5px 0 0;
padding : 12px 12px 12px 40px;
display : block;
font-weight : 400;
width : 85%;
}

Saat anda posting Tuliskan text yang akan di block diantara kode

….

3. Kode Block Standard

Standartd block kode

Sama seperti cara-cara diatas yaitu login ke blog, pilih layout, HTML. Copy dan pastekan code dibawah ini:

.codeview {
margin : 15px 35px 15px 15px;
padding-top : 10px;
padding-left : 15px;
padding-right : 15px;
padding-bottom : 30px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://www.dezzain.com/wp-content/themes/dzmagz/images/cv.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}

Saat anda posting Tuliskan text yang akan di block diantara kode

….

4. Minimalis block

Sangat minimalis ya seperti blog saya ini ^_^

• Login ke blogger
• Click Layout
• Click Edit HTML
• Copy dan pastekan kode dibawah ini

/* —– BLOCKQUOTE by ebenk —– */
blockquote {
background:#F4F5F7 url(images/blockquote.gif) 3px 3px no-repeat;
margin: 0px 25px 15px 25px;
padding:8px 12px 8px 36px;
border:1px dashed #CCC;
} #content blockquote p {
margin: 0px;
padding: 15px 0px 15px 0px;
}

Saat anda posting Tuliskan text yang akan di block diantara kode

….

5. Download block

Block download

• Login ke blogger
• Click Layout
• Click Edit HTML
• Copy dan pastekan kode dibawah ini

/* —– download by ebenk —– */
.download {
border : 1px solid #c2e069;
font-size : 11px;
color : #191919;
font-family : Verdana, sans-serif, “Courier New”;
line-height : 125%;
background : #e5f2bf url(http://ebenk789.byethost12.com/download.gif) no-repeat 5px center;
display : block;
margin : 5px 0 0;
padding : 12px 12px 12px 40px;
font-weight : 400;
width : 85%;
}

Saat anda posting Tuliskan text yang akan di block diantara kode

….

6. Alert block

Block download

• Login ke blogger
• Click Layout
• Click Edit HTML
• Copy dan pastekan kode dibawah ini

/* —– Alert by ebenk —– */
.alert {
border : 1px solid #ffc875;
font-size : 11px;
color : #191919;
line-height : 125%;
background : #ffe5bf url(http://ebenk789.byethost12.com/alert.gif) no-repeat 5px 5px;
font-family : Verdana, sans-serif, “Courier New”;
display : block;
margin : 5px 0 0;
padding : 12px 12px 12px 40px;
font-weight : 400;
width : 85%;
}

Saat anda posting Tuliskan text yang akan di block diantara kode

….

Bagaimana Mudah bukan..??? Oh ya hampir lupa..!!! Semua kode diatas simpan sebelum kode ]]> Jadi jangan lupa ya..!!

Filed Under: Uncategorized