Pasang kode css di bawah ini di atas kode ]]></b:skin> atau di bawah <style>
#ribbon {
position : absolute;
top : 30px !important ;
right : 30.4%;
z-index : 10;
width : 108px;
background-color : #352e2a;
color : #999;
font : normal normal 11px Verdana, Arial, Sans-Serif;
box-shadow : 0 1px 1px rgba(0, 0, 0, 0.7);
border-radius : 0 0 5px 5px;
transition : right 0.15s linear;
border : #444 solid 1px;
border-color : #444 #333 #333 #444;
padding : 10px;
}
#ribbon:after {
content : "";
display : block;
width : 0;
height : 0;
position : absolute;
top : 100%;
right : 20px;border : transparent solid 15px;
border-top-color : #352e2a;
}
#ribbon .img-container {
width : 80px;
height : 60px;
border : #6b6044 double 3px;
background : #26211f;
box-shadow : 0 0 2px rgba(0, 0, 0, 0.4) inset;
display : block;
margin : 0 0 4px;
padding : 10px;
}
#ribbon .img-container img {
display : block;
background-color : #6b6044;
padding : 0;
}
#ribbons {
width : 108px;
display : block;
margin : 0 0 0 auto;padding:0px;
}
#ribbons li {
display : block;
margin : 0 0 2px;
list-style : none;
}
#ribbons li a {
display : block;
background-color : #26211f;
color : #ccc;
font : normal normal 8px Arial, Sans-Serif;
text-transform : uppercase;
position : relative;
transition : all 0.26s ease-out;
padding : 6px 10px;
}
#ribbons li a:before {
content : "";
width : 0;
height : 0;
position : absolute;
right : 0;
top : 0;
display : block;
border : transparent solid 11px;
border-right-color : #6b6044;
}
#ribbons li a:hover {
transition-duration : 0s;
color : white;
text-decoration : none;
padding : 6px 0 6px 15px;
}
#ribbons li.satu a:hover,
#ribbons li.dua a:hover,
#ribbons li.tiga a:hover,
#ribbons li.empat a:hover {
background-color : #2b2521;
}
#ribbons li.current a {
border-left : 2px solid #39f;
}Kode html di pasang di bawah kode <body>
<div id='ribbon'>
<div class='img-container center'>
<a href='/' rel='nofollow' target='_blank'>
<img alt='Jamjami Cell' height='60' src='http://i1055.photobucket.com/albums/s509/Guteng/RSS17_zpsf346c517.png' title='Jamjami Cell' width='80'/>
</a>
</div>
<ul id='ribbons'>
<li class='satu'><a href='#'>Facebook</a></li>
<li class='dua'><a href='#'>Google +</a></li>
<li class='tiga'><a href='#'>Twitter</a></li>
</ul>
</div>Kode di atas sangat mudah untuk di edit ulang dan sesuaikan dengan warna blog biar serasi
Itulah cara bikin dan pasang ribbon di blog semoga bermanfaat
maaf om barubisa berkunjung soalnya saya sendiri nyari2 alamat blognya baru ketemu om...
BalasHapusternyata pengen tampil beda sangat banyak rintangan nya...
Hapusoh, ini yang mirip DTE itu ya mas taufik. oh ya bagaimana cara membuat efek ADMIN timbul gitu kang dikomentar ?
BalasHapusini css nya
Hapus[code].comments .comments-content .blog-author {
font-family:Electrolize, Arial, Sana-Serif;
border:1px solid #555;
padding:1px 6px;
box-shadow:0 1px 2px #000;
border-radius:15px;
text-shadow:0 1px #111;
}
.comments .comments-content .blog-author:hover {
box-shadow:0 1px 2px #000 inset;
}
.comments .comments-content .icon.blog-author {
display:none;
}[/code]
jangan ter fokus dengan kode di atas karena tiap template berbeda kode nya atau cari kode yang mirip dengan .blog-author
semoga ulasan singkat ini dapat di pahami
tengyu ya, cocok ternyata blog-author hehehe..jadi gak ribet cari-cari kodenya \o/
Hapusthanks gan :)
BalasHapuseh ada mas nandar... gimana kabar ?
HapusKeren, gimmana caranya Mas kalau cuma di postingan saja kelihatan ?
BalasHapusmas, klw bikin kyk punya mas di blog ini gmna, donk.. pliss
BalasHapuskalau yang ribbon di pasang ini pake jquery, bukan murni css
Hapustrmz.. ksih tutorial utuk buat search kyk di blog ini yg bsa mmanjang..
Hapushttp://penjagahatinya.blogspot.com/
sama ko mas kotak search juga pake jquery yang mana javasript dari semua fitur di jadiin satu... maaf saya tidak memberikan tutorialnya mas
Hapustapi sayang ya mas, dak responsifhttp://oi39.tinypic.com/29kyxc6.jpg
BalasHapuskalau bisa jadi responsive, caranya gimana ya mas?
Hapuskalau riboon di bikin responsif kayany,a ga bisa mas, untuk solusi lain yaitu pada leba yang di tentukan ribbon display:none saja,
Hapusowh, gitu ya mas, hehehe, :D
Hapus