Tampilkan Text, Images atau link di bawah Posting dengan CSS3

Teks, gambar atau image dan link bisa sampeyan tampilkan di bawah posting tanpa setiap kali menuliskan kode HTML-nya, atau dengan istilah lain membuat sebuah box yang secara permanen akan terlihat di bawah posting. Tentu saja sampeyan dapat mengembangkan menjadi fungsi lain seperti menampilkan profil pribadi (author), emak sampeyan atau mungkin wajah nenek supaya bisa mejeng di blog.

Membuat desain ini supaya mampu disuguhkan secara menarik, cantik dan membuat air ludah mengalir sederas "air terjun" sudah menjadi kewajiban. CSS3 kita manfaatkan dengan melibatkan CSS3 drop shadow, CSS3 text shadow, CSS3 border-radius, CSS3 background gradient dan CSS3 transition. Untuk mengoptimalkan tampilan agar terlihat "jreng" dan bisa dipadukan dengan berbagai background blog, kita juga berusaha mensuportnya dengan pemanfaatan warna yang "mudah padu" di semua blog. Sampeyan bisa melihat "wajah" desain menarik ini dengan membuka link di bawah (DEMO). Setelah terbuka, meluncurlah ke bawah posting. Di sana akan sampeyan jumpai "barang" itu!

D E M O

Kode CSS

#sigilabox {
      margin: 10px auto;
      background: #aaa;
      padding: 5px;
      float: left;
      border: 1px solid #333;
      border-radius: 8px;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      text-shadow: 1px 1px 1px #000;
      -o-transition: all 2s ease-in;
      -moz-transition: all 2s ease-in;
      -webkit-transition: all 2s ease-in;
}
#sigilabox:hover {
      box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000;
      -moz-box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000;
      -webkit-box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000;
}
#sigilabox h3 {
      font-size: 18px;
      font-weight: bold;
      color: #00CCFF; 
      margin: 0;
}
.sigila {
      height: 100px;
      overflow: auto;
      margin : 10px 0 10px 0;
      padding :10px;
      box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000;
      -moz-box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000;
      -webkit-box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000;
      border-radius: 10px;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      background : #eee;
      background: -moz-linear-gradient(top, #aaa, #eee);
      background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#eee)); 
      font-size: 14px;
      font-family: Arial;
      font-weight: normal;
      color: #000000;
      text-shadow: 1px 1px 1px #eee;
}
.sigila a {
      font-weight: bold;
      font-family: Times;
      color: #FFCC99;
      text-shadow: 1px 1px 1px #000;
      text-decoration: none;
}
.sigila a:hover {
      color: #FF0000;
}
.sigila img {
      float: left;
      width: 90px;
      border: 3px solid #fff;
      border-radius: 8px;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      padding: 2px;
      background: #ddd;
      opacity: 0.5;
      margin: 0 10px 2px 0;
      -o-transition: all 2s ease-in;
      -moz-transition: all 2s ease-in;
      -webkit-transition: all 2s ease-in;
}
.sigila img:hover {
       opacity: 1.0;
      -o-transform: scale(1.2) rotate(-30deg);
      -moz-transform: scale(1.2) rotate(-30deg);
      -webkit-transform: scale(1.2) rotate(-30deg);
}

xHTML

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="sigilabox">
<h3>Salam buat sobat blogger ... ...</h3>
<div class='sigila'> <img src="http://h1.ripway.com/gubhugreyot/GRimages/joged.gif" title="bocah kenthir"/>Aku hanyalah seorang blogger yang kebetulan suka nulis, suka ngenet dan terutama suka uothak-uathik template blogspot. Bila sampeyan menyukai semua yang telah aku coba tulis dan terbitkan, aku hanya berharap bahwa semuanya bisa memberi manfaat dan mungkin juga bisa memberi dorongan untuk terus nglembur, nulis dan selalu memeras otak menuangkan hal-hal baru yang bermanfaat bagi pembaca. O, ....ya ..., Orang-orang atau tetangga sebelah biasa memanggil ku dengan sebutan si gubhug reyo gila, "yang suka melek malam dengan asap lintingan tak pernah telat". Yah ... moga-moga saja sampeyan semua nggak ikutan memanggil ku seperti para tetangga sebelah! Makacih, ya, atas kunjungannya. Maap nggak bisa kasih wedang kopi ma roti bolu!<br/><br/>Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:<br /><a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Tutorial Blogger">http://gubhugreyot.blogspot.com</a></div></div>
</b:if>

xHTML - di atas silahkan di coba dulu baru kemudian teks dan link serta gambarnya diganti yang sesuai dengan blog sampeyan! Akan lebih aman jika sampeyan menggunakan blog khusus percobaan (buat dulu!) untuk melakukan berbagai experimen desain HTML.

Cara Membuat

• Login : Login to Blogger. Gunakan User Name atau Email Address serta Password. Setelah data tersebut dituliskan dengan benar, KLIK "Login".
• Dasboard (Dasbor) : Ini halaman yang akan dijumpai setelah login. Akan terlihat beberapa buah link di dalamnya. Cari dan KLIK "Design (Rancangan)". Tunggu beberapa saat!
• Design (Rancangan) : KLIK link "Edit HTML".
• Edit HTML : Setelah halaman ini terbuka, maka akan terlihat kode html penyusun blog. Silahkan cari kode ]]></b:skin>.
• Copy - Paste : Copy kode CSS di atas dan pastekan tepat di atas kode ]]></b:skin>.
• SAVE Templates (Simpan Template) : KLIK "SAVE Templates".
• Tunggu hingga proses penyimpanan selesai, kemudian lanjutkan dengan KLIK Expand Widget Templates.
• Cari kode <data:post.body/>. Copy xHTML-nya tepat di bawah kode tersebut, kemudian KLIK "SAVE/Simpan Templates".
• Bukalah blog sampeyan yang sudah ada postingannya. Tarik halaman ke bawah hingga di bawah posting atau di atas kolom komentar. Akan terlihat sebuah box menarik yang dapat dimanfaatkan untuk banyak hal.

Catatan

Apabila sampeyan bingung selama proses modifikasi untuk membuat berbagai tutorial yang ada, bukalah "Special Tutorials" di sidebar kiri yang di dalamnya berisi beberapa tutorial dasar yang sangat penting seperti misalnya "cara cepat mencari kode HTML.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «