Membuat Block Pada Posting
Wah lagi-lagi tips buat blog nih..!!! Pernah gak lihat blog yang di tengah-tengah postingnya terdapat 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
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 <p class=”warning”> …. </p>
2. Block untuk Info / tips
Contoh block jenis info / tips
- Login ke blogger
- Click Layout
- Click Edit HTML
Copy dan pastekan kode berikut
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 <p class=”hint”> …. </p>
3. Kode Block Standard
Sama seperti cara-cara diatas yaitu login ke blog, pilih layout, HTML. Copy dan pastekan code dibawah ini:
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 <div class=”codeview”> …. </div>
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 {
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 <blockquote> …. </blockquote>
5. Download block
Block download
- Login ke blogger
- Click Layout
- Click Edit HTML
- Copy dan pastekan kode dibawah ini
.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 <p class=”download”> …. </p>
6. Alert block
Block download
- Login ke blogger
- Click Layout
- Click Edit HTML
- Copy dan pastekan kode dibawah ini
.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 <p class=”alert”> …. </p>
Bagaimana Mudah bukan..??? Oh ya hampir lupa..!!! Semua kode diatas simpan sebelum kode ]]></b:skin> Jadi jangan lupa ya..!!
Mungkin anda Suka
Filed Under: Blogger
