Cara Membuat Text, Images atau link di bawah Posting dengan CSS3

Baiklah sobat blogger mania, apakabar? tentunya baik baik saja bukan? dan tentunya tetap terus bersemangat dan terus berkreasi. Nah pada kesempatan ini EFA akan memposting sebuah artikel lagi yang tentunnya artikel ini adalah kepanjangan tangan dari GR. Apa itu artikelnya yaitu tentang Cara Membuat Text,  Images atau link di bawah Posting dengan CSS3   Teks, gambar atau image dan link bisa sobat blogger mania 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. Nah untuk membuatnya pun cukup mudah dan simple cukup mengikuti langkah langkah berikut ini:

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.

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. !<br/><br/>Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:<br /><a href="http://usahafanatstic.blogspot.com/" target="_blank" title="Tutorial Blogger">http://usahafanatstic.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 sobat blogger mania! Akan lebih aman jika sobat blogger mania menggunakan blog khusus percobaan (buat dulu!) untuk melakukan berbagai experimen desain HTML. 

Source : GR
 

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «