Membuat Tips Pesan Info pada Postingan

Membuat Tips Pesan Info pada Postingan

Assalamualaikum warahmatullahi wabarakatuh.

Mengawali posting kembali setelah 2 Hari tidak bisa bikin artikel baru di blog super ancur ini. maka dengan sajian yang sederhana pula saya bagikan cara yang seadanya saja. Tetapi artikel ini semoga saja bisa berguna bagi sobat yang suka berbagi artikel, tentang tutorial, Trik Blogger, Widget atau artikel lainya juga bisa. Karena Cara membuat Tips pesan info pada postingan bisa dimana sanja, dan pada tempat postingan apa saja, yang pas untuk penempatan pesan itu sekiranya di tempatkan. Duahari yang lalu saya sempat mengucapkan : Selamat Hari Ibu 22 Desember. Pada kesempatan ini saya berbagi yang sekiranya perna saya coba dan sampai sekarang saya gunakan pada blog ini. Jadi diantara sobat saya ada yang tertarik dari bagian blog saya maka saya bagikan satu persatau. Dan trikini salah satunya pendukung atau pelengkap sarana yang ada di dalam blog Karrysta ini. Senang dan suka atau sebaliknya saya kembalikan pada anda yang menyikapinya.

Baca juga artikel lainya :  Accessories

Pesan Pelengkap Postingan :

Tanpa menggunakan box pesan info, tips, atau peringatan ini sebetulnya pada postingan blog syah sayah saja. Namun dewasa ini pada sebuah blog yang suka berbagi artikel seperti yang saya tulis diatas suka menggunakan trik ini, Demi melengkapi desaian blognya, Agar kesanya tidak monoton dan kaya akan ide dan juga sebagai pemanis pelengkap konten artikel anda. Pada blog sobat saya ada juga yang sudah posting artikel seperti ini. Namun pada blog saya baru kali ini saya akan publish post seperti ini. Jadi jika Anda tertarik jangan tunggu lama lama silahkan simak cara pemasanganya yang sangat mudah dan gampang di pahami karena sudah saya kemas sedemikian rupa agar tidak terlalu menyulitkan anda semua.

Cara Memasang Tips Pesan Info :

Bagi yang berminat dengan trik ini langsung saja cara pemasanganya pada template blog anda berikut ini :

1. Masuk Dashboard jangan lupapa sign in
2. Pilih template lalu pilih edite template
3. Tekan CTRL + F Untukmemudahkan pencarian
4. Cari kode :  ]]></b:skin>  atau kode :  </style>
5. Setelah ketemu copy kode dibawah ini dan paste tepat di atas
6. Pada kode :  ]]></b:skin>  atau kode :  </style>

/* Info Karrysta
------------------------------*/
.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #48d1cc url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8p_vrEesIGaN2CljY2s_QzY11X2_onoOFTmvdgXpOc9jPm5YTv-oGwjxP7vM2Y5iaj5HB63Z7aT7ewGFOtVn4HirdtiHaa3yHCSJ9w6Pib6vsjpuzIqW-leVYCCZkLJc82lJ-a7qDYbP/s1600/info1.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #00fa9a url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexEn_DUalJ1Lvt8gDUKDNr5s-CFnBNE7bo4lUExHAvg0atIKFOAkB5ItLAlYKpOl49rBtMntNCOn7kqOprfw8X8XSwfews-7ZnWUdkLAUE20M9yxxKrND-dAdNZ2UiEqICrTk2bFGbSS3/s1600/tips2.png') no-repeat 12px 8px;
 color: #222;
}
.warning {
 background: #ffb6c1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCp7iK88fQ0a0Bcl0xPgY1ckv41tDpgeXxBmGeHfWpFrX152OFHo3DG8ZrdA-bANcpcGCL5Aig9YFhaO8Jc9wr61xe5TcGnMOodlhddyord86cVmarO004u-sEfd7Clcm64ooRZnqBzo4H/s1600/peringatan3.png') no-repeat 12px 8px;
 color: #222;
}

Keterangan :

Jika pemasangan kode CSS diatas benar sesuai petunjuk diatas selanjutnya save/simpan template anda. Dan selanjutanya, Silahkan cara mengginakan trik ini pada halaman postingan baru blog anda sisipkan Kode HTML di bawah ini untuk keterangan yang anda ingin, Ingat memasukan kode dibawah ini harus pada halaman artikel baru pada kolom Html jangan di Composed. Dan berikut di bawah ini 4 jenis varian  kode yang bisa anda gunakan untuk menghias :

Info

<div class='info'>
TEKS DISINI
</div>

TIPS

<div class='tips'>
TEKS DISINI
</div>

PERINGATAN

<div class='warning'>
TEKS DISINI
</div>


OTHER PENULISAN INFO

<p class='info'>
TEK DISINI
</p>

DEMO

Demikianlah kiranya yang bisa saya ketengahkan untuk anda semua. Semoga sajian yang sederhana ini bisa bermanfaat untuk sobat blogging yang membutuhkanya. Jika ada kesulitan silahkan diskusikan atau tanyakan pada kolom komentar dibawah ini. Mohon jika terdapat kekeliruan dalam postingan ini. Dan jika anda dapatkan link url blog ini yang mati atau/brokenlink sudi kiranya memberitahu saya. Terima kasih atas sapa dan salam juga kunjung dan komentar anda pada post ini. Tetap semangat dan berexpresi. Salam sukses dan ceria selalu buat seluruh sahabat blogging yang terinta. Happy Blogging ....