Berikut ini akan diuraikan langkah-langkah cara membuat (
Profil Author Box Dengan CSS Kode ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : (
Profil Author Box Dengan CSS Kode ) sebagai berikut :
1. Login ke akun blogger
2. Klik tema
3. Edit html
DAFTAR ISI CODE
[Tampilkan][Sembunyikan]
Masukan CSS di bawah ini :
/*
Widget author box with css only
css design: authorbox-style="sbtm77","sahabat blogger 77"
sumber: http://sbtm77.blogspot.com/
author: devy indriyani
*/
.sbtm77-authorbox {
position: relative;margin: 15px auto;
padding: 10px;width:auto;
border: 2px solid #52e052;
background: #e9fbe9;
height:auto;overflow:auto;}
.sbtm77-avatar {
background: #52e052;
float: left; height: 145px;
width: 135px;left: -5px;
padding: 5px 5px 5px 5px;
position: relative;}
.sbtm77-avatar img {height: 135px; width: 125px; border: 2px solid #000;}
.sbtm77-authorcontent {margin-left: 150px;}
.sbtm77-titlebox {
box-shadow:7px 7px 7px rgb(174, 185, 195);
border-radius:17px 17px 17px 17px;
-webkit-border-radius:17px 17px 17px 17px;
background: #52e052;width:auto;
left: -2px;margin-bottom: 7px;
padding: 5px 0px 5px 20px;position: relative;}
.sbtm77-authorbox h3 {
font:bold 14px Verdana;
color: #000;
line-height: 20px; margin: 0;}
.sbtm77-info {font:12px Trebuchet MS; text-align:justify; color:#000;}
.sbtm77-info a {color: #000; text-decoration: none;}
.sbtm77-footerbox {padding:10px 0 0 0; font:12px Trebuchet MS;}
.sbtm77-social {overflow: hidden;}
.sbtm77-social a {
display: block;
color: #FFFFFF !important;
font-weight: 600;
font-family: "Tahoma",Verdana,Arial;
text-decoration: none;
transition: border-radius 0.50s;}
.sbtm77-social a:hover {border-radius: 10px 0px;}
.sbtm77-social div {float: left; margin-right: 6px; width: 79px;}
.sbtm77-social .sbtm77facebook a {padding: 7px 0px; text-align: center; background: #3B5999;}
.sbtm77-social .sbtm77facebook a:hover {background: #52e052;}
.sbtm77-social .sbtm77twitter a {padding: 7px 0px; text-align: center; background: #01BBF6;}
.sbtm77-social .sbtm77twitter a:hover {background: #52e052;}
.sbtm77-social .sbtm77googleplus a {padding: 7px 0px; text-align: center; background: #D54135;}
.sbtm77-social .sbtm77googleplus a:hover {background: #52e052;}
.sbtm77-social .sbtm77rss a {padding: 7px 0px; text-align: center; background: #fb8938;}
.sbtm77-social .sbtm77rss a:hover {background: #52e052;}
.sbtm77-social .sbtm77menu a {padding: 7px 0px; text-align: center; background: green;}
.sbtm77-social .sbtm77menu a:hover {background: #52e052;}
Masukan Kode HTML / Javascript di bawah ini :
<b:if cond='data:blog.pageType == "item"'>
<div class='sbtm77-authorbox'>
<div class='sbtm77-avatar'><img alt='Sahabat blogger 77' src='http://URL-Gambar.jpg' title=''/>
</div>
<div class='sbtm77-authorcontent'>
<div class='sbtm77-titlebox'>
<h3>Penulis: <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></h3>
</div>
<div class='sbtm77-info'>
Judul <a expr:href='data:post.url'><span style='color:red;font-weight:bold;'><data:post.title/></span></a><br/>Jika ingin menyalin (copy-paste) artikel ini, sertakan link dibawah ini sebagai sumbernya :
<textarea cols='55' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
</div>
<div class='sbtm77-footerbox'>
<div class='sbtm77-social'>
<div class='sbtm77facebook'>
<a href='https://URL-facebook' title='Join To Facebook'>Facebook</a>
</div>
<div class='sbtm77twitter'>
<a href='https://URL-twitter' title='Join To Twitter'>Twitter</a>
</div>
<div class='sbtm77googleplus'>
<a href='https://URL-google+' title='Join To Google+'>Google+</a>
</div>
<div class='sbtm77rss'>
<a href='http://URL-rss' title='Join To RSS'>RSS</a>
</div>
<div class='sbtm77menu'>
<a href='http://sbtm77.blogspot.com' title='Cari Artikel Klik Disini'>Menu Blog</a>
</div>
</div>
</div>
</div>
</div>
</b:if>
SAATNYA MENERAPKAN PROFIL PADA BLOG
Login ke akun blogger anda
Pada dashboard pilih Template >> EDIT Template
Copy kode CSS diatas, lalu Paste tepat diatas atau sebelum ]]></b:skin>
Selanjutnya Cari kode <data:post.body/> kemudian pastekan kode HTML setalahnya atau tepat dibawahnya
Simpan Template
KETERANGAN KODE
Agar terlihat lebih rapi, Tampilan Widget ini sudah saya setting agar sesuai dengan semua kondisi lebar pada blog, selanjutnya anda tinggal sesuaikan warna agar sesuai dengan style blog anda pada kode HTML, sudah saya beri warna Merah pada kodenya, silahkan anda ganti sesuai dengan profil blog anda,
Penempatan kode HTML ini yang sedikit sulit karena pada Template blog ada sekitar 2-3 atau lebih kode <data:post.body/>, saat melakukan demo saya menempatkan pada kode <data:post.body/> yang terakhir. Jika pada template blog anda sama seperti yang saya jelaskan tadi, silahkan tempatkan kode HTML diatas tepat dibawah kode terakhir <data:post.body/>
Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.
Demikian Cara membuat (
Profil Author Box Dengan CSS Kode ) semoga bermanfaat terima kasih.
Tidak ada komentar
Posting Komentar