Membuat tanda peringatan di postingan

Membuat tanda peringatan di postingan

Jalak Ikal 15 October 0 komentar
Cara mudah membuat tanda peringatan di postingan blog - Sobat blogger infotrens mungkin anda pernah melihat di suatu blog yang menggunakan tanda peringatan ini,atau juga menyimpan satu pesan yang penting untuk para pengunjung blog


Untuk membuat tanda peringatan di blog ini tidak lah susah karena anda hanya tinggal menyimpan salah satu kode di postingan anda dan juga kode yang di simpan nya tidak begitu banyak dengan begitu akan mmpercepat kerja anda dalam membuat postingan

ada dua cara untuk membuat tanda peringatan ini
1- Anda bisa menyimpan langsung kode nya di template Html anda melalui edit html dan menyimpan nya langsung di bawah <data:post.body/>
2 - Cara yang kedua anda bisa menyimpan secara manual di postingan anda ketika anda membuat salah satu postingan dengan begitu anda bisa menempatkan tanda peringatan tersebut di salah satu postingan yang menurut anda memang perlu di beri tanda peringatan atau pesan lain nya,sehingga dengan begitu para pengunjung blog dapat mengetahui atau melihat langsung pesan tersebut

Cara Membuat tanda peringatan di bawah postingan

Tanda peringatan atau tanda pesan ini ada lima macam antara lain,box-info,box-warning,box-list dan juga box-download,anda bisa memilih salah satu box yang menurut anda penting untuk di terapkan di blog atau di dalam postingan sobat blogger

Dari ke lima box tersebut mempunyai warna tersendiri yang membedakan sehingga akan membuat pesan anda lebih menarik lagi selain warna yang menarik dari kelima box tersebut juga mempunyai gambar yang berbeda beda maka akan lebih unik lagi pesan yang anda tulis di dalam box tersebut

Tetapi jika anda kurang menyukai dengan warna atupun anda mempunyai gambar yang anda sukai untuk di simpan di box tersebut anda juga bisa mengganti nya melalui Css yang sudah ada,ataupun anda bisa kreasikan sendiri box tersebut sesuai dengan ke inginan anda agar lebih menarik

Namun jika anda lebih menyukai dengan tampilan box yang saya share disini lihat pada contoh gambar di atas,anda bisa mengikuti langkah langkah untuk pembuatan nya di bawah ini tidak begitu sulit anda hanya perlu menyisipkan kode di bawah ini sebelum kode </b:skin> dan untuk memudahkan anda dalam pencarian silahkan anda tekan Ctrl+F secara bersamaan
/* Warning message */
.box-info,.box-tips,.box-warning, .box-list, 
.box-download{ border: 1px solid #eee;clear:both; display: 
block;line-height: 22px; min-height: 38px; padding: 10px 12px 12px 68px;
 margin: 15px 0;}
.box-info{ background: #F8F8F8 
url('https://dl.dropboxusercontent.com/u/58902557/typography/info.png') 
no-repeat 12px 8px; color: #222}
.box-tips{ background: #7CADDE 
url('https://dl.dropboxusercontent.com/u/58902557/typography/tips.png') 
no-repeat 12px 8px; color: #fff;}
.box-warning{ background: #db6161 
url('https://dl.dropboxusercontent.com/u/58902557/typography/warning.png')
 no-repeat 12px 8px; color: #fff;}
.box-list { background: #F7FCF9 
url(https://dl.dropboxusercontent.com/u/58902557/typography/sticky-big.png)
 no-repeat 16px 14px;}
.box-download { background: #F8F8F8 
url(https://dl.dropboxusercontent.com/u/58902557/typography/download-big.png)
 no-repeat 16px 14px;}
.box1 { margin: 15px 0; padding: 10px 15px !important; background-color: #329579; color: #fff}
.box2 { margin: 15px 0; padding: 10px 15px !important; background-color: #ffffdd; color: #006699;}

Setelah itu untuk membuat pesan silahkan anda tulis pesan di dalam box berikut
<p class="box-info"> pesan disini.</p>
<p class="box-tips"> Pesan disini.</p>
<p class="box-warning"> Pesan disini</p>
<p class="box-list">Pesan disini</p> 
<p class="box-download">pesan disni</p>

dan untuk melihat hasil nya silahkan anda lihat pada postingan anda.
Nah itulah cara membuat peringatan di dalam postingan semoga artikel nya bisa membantu sobat blogger semua semoga bermanfaat dan salam blogger

loading...
Ratings: 
Posted by Jalak Ikal, Published at 15 October and have 0 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi