Hai sobat,kali ini teman kita minta requesst lagi dengan saya,
Yaitu request membuat author BOx dengan efek ribbon ,
Nah seperti saya janjikan setiap request yg saya tau akan
Saya praktik kan ,nah author BOx ini berguna untuk
Tentang Anda,permalink dan lain2
Jika ingin contohnya silahkan lihat DEMO
Nah,bagaimana agak menarik kan ,ap lagi dengan efek ribbon
Cerah simple lagi,nah
Install Program CSS
- Login ke dashboard anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML "
- Cari code ]]></b:skin>
- Copy Code script CSS widget jquery menu horizontal dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSS widget jquery menu horizontal tepat diatas </style> template anda.
/*****************************************
Name : CSS Box Code
site : http://www.belajar-code.net/
******************************************/
.evolutions-boxauthor{ position: relative; margin: 15px auto; width:505px; padding:10px 10px 5px 10px; border:2px solid #52e052; background:#e9fbe9; color:#000; } .titlebox h3{ padding: 10px 0px 10px 25px; color:#000; font:bold 14px Georgia; background: #52e052; margin:0px 0px 0px -22px; width:524px; } .titlebox h3 a {color:#000;} .titlebox h3:before { content: ' '; position: absolute; top: 47px; left: -12px; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #55B05A transparent transparent transparent; } .titlebox h3:after { content: ' '; position: absolute; top: 47px; right: -12px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #55B05A; } .boxcontent { font:12px Trebuchet MS; text-align:justify; color:#000; float: left; margin: -95px 160px 5px 0; display: block; } .boxcontent a { color: #000; text-decoration: none; } .boxauthor_photo{ float:right; margin:-22px 0 0 10px; padding:30px 5px 5px 5px; background: #52e052; } .boxauthor_photo:before { content: ' '; position: absolute; top: -12px; right: 144px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #52A435 transparent; } .boxauthor_photo:after { content: ' '; position: absolute; top: -12px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0px 10px 10px 0; border-color: transparent transparent #52A435 transparent; } .boxauthor_photo img{ width:120px; height:120px; border:2px solid #000; } .linediv{ height:0px; clear:both; display:block; border-top:1px solid #00ff00; border-bottom:1px solid #52e052; } .email-button{ background:#52e052; border:1px solid #52e055; margin:0; color:#000; cursor:pointer; font: bold 13px Tahoma; padding:6px 10px; position:absolute; right:-20px; top:0; display:block; } .email-button:hover{ background:#00ff00; text-decoration:none !important; } .wrap-email{ clear:both; width:230px; margin:5px 0 0 0; float:left; } .email-form{ position:relative; margin:0 auto; width:98% !important; box-sizing:border-box; height:auto; } .email-input{ width:150px; height:15px; margin:0 auto; padding:8px 10px; border:1px solid #52e052; font:14px georgia; font-style:italic; color:#666; } .evolutions-social{ overflow: hidden; float: right; } .evolutions-social a{ display: block; color: #FFFFFF !important; font: bold 13px Tahoma; text-decoration: none; transition: border-radius 0.50s; border-radius: 10px 0px; } .evolutions-social a:hover{ border-radius: 0px; } .evolutions-social div{ float: left; margin: 5px 5px 0 0; width: 70px; } .evolutions-social .evolutionsfacebook a{ padding: 7px 0px; text-align: center; background: #3B5999; } .evolutions-social .evolutionsfacebook a:hover{ background: #52e052; } .evolutions-social .evolutionsgoogleplus a{ padding: 7px 0px; text-align: center; background: #D54135; } .evolutions-social .evolutionsgoogleplus a:hover{ background: #52e052; } .evolutions-social .evolutionsrss a{ padding: 7px 0px; text-align: center; background: #fb8938; } .evolutions-social .evolutionsrss a:hover{ background: #52e052; }
/*** www.belajar-code.net CSS widget box CSS style and ***/
Install Program Tag HTML
<div class='evolutions-boxauthor'>
<div class='boxauthor_photo'>
<img alt='mas andes' src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/s160x160/1450246_1450399585186320_243314667_a.jpg'/>
</div>
<div class='titlebox'>
<h3>Author : <b>BILLY GRAHAM WADU</b> </h3></div>
<div class='boxcontent'>Nama saya <b>BILLY</b> saya adalah seorang blogger,sekalian saya adalah orang yang suka CSS,saya mempunyai blog yang bernama CSS dan CSS3,dengan linknya: www.belajar-code.net , di situ berisi code style css dan lain-lain. <a href="http://www.belajar-code.net">CSS dan CSS3</a>, silahkan lihat blognya,terima kasih telah berkunjung. Semoga Tuhan Memberkati.</i></b>
</div>
<div class='linediv'></div>
<div class='wrap-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='email-form' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=masandes', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='masandes'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='email-input' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='email-button' title='' type='submit' value='Submit'/>
</form>
</div>
<div class='evolutions-social'>
<div class='evolutionsfacebook'>
<a href='https://www.facebook.com/andestyle' target='_blank' title='Join on Facebook'>Facebook</a>
</div>
<div class='evolutionsgoogleplus'>
<a href='https://plus.google.com/104093787575230359634' target='_blank' title='Join on Google+'>Google+</a>
</div>
<div class='evolutionsrss'>
<a href='http://feeds.feedburner.com/masandes' target='_blank' title='Join on RSS'>RSS</a>
</div>
</div></br>
<div style='clear:both;'></div>
</div>
Nah semoga bermanfaat,dan website Anda semoga makin bagus
Jika ada kesalahan silahkan comentar
Atau kunjungi
Qusetion CSS, disitu bukan admin aja yang bisa membantu,Kita semua bisa membantu,admin juga membuka dan tidak melarang kita semua untuk saling membantu,oke terima kasih.
Title : Author Box Keren
Description : Hai sobat,kali ini teman kita minta requesst lagi dengan saya, Yaitu request membuat author BOx dengan efek ribbon , Nah seperti saya...
