Berikut ini akan diuraikan langkah-langkah cara membuat ( Profil Google Plus Di Sidebar Blog ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Profil Google Plus Di Sidebar Blog ) sebagai berikut :
DAFTAR ISI CODE
[Tampilkan][Sembunyikan]
CSS Kode
.mb-googleplus{
background: #363738 url(http://URL-Gambar Anda.jpg) repeat top left;
margin-top: 100px;
padding-top: 100px;
width: 400px;color: #fff;
border-top: 10px solid #080;}
.mb-googleplus .mb-thumb {
display: block;
width: 180px;height: 180px;
border: 10px solid rgba(255,255,255,0.5);
border-radius: 50%;
background: url(http://URL-Gambar Anda.jpg) no-repeat center center;
position: absolute;
left: 50%;top: -90px;
margin: 0 0 0 -90px;
box-shadow: inset
1px 1px 4px rgba(45,5,123,0.5),
0 2px 3px rgba(24,15,172,0.6);}
.mb-googleplus sahabatblogger77 p {
font-family: Cambria, Georgia, serif;
font-style: italic;
font-size: 16px;
border-bottom: 3px double rgba(0,0,0,0.5);
box-shadow: 0 1px 0 rgba(255,255,255,0.1);
padding: 5px;text-align: center;
margin: 85px 0 20px 0;}
.mb-googleplus .mb-attribution {text-align: right;}
.mb-googleplus .mb-author{
text-transform: uppercase;
font-size: 20px;font-weight: bold;
color: pink;
text-shadow: 0 1px 1px rgba(255,255,255,0.1);}
.mb-googleplus cite a{
color: #f0f0f0;font-style: italic;
font-family: Cambria, Georgia, serif;
text-shadow: 1px 1px 1px rgba(0,0,0,0.7)}
.mb-googleplus cite a:hover{
background: #080;padding:4px;
border-radius: 20px;
-webkit-border-radius: 20px;}
Tambahan Agar lebih Responsiv
@widget-style {
css-design: 'format-css3';
widget-show: 'profil-show,googleplus';
design: 'by. devy indriyani';
url-file: 'http://sahabatblogger77.blogspot.com';
ex-date: 'may 11, 2014';}
.mb-wrap {
width: 300px;margin: 20px auto;
padding: 20px;position: relative;}
.mb-wrap p{margin: 0;padding: 0;}
.mb-wrap blockquote {margin: 0;padding: 0;position: relative;}
.mb-wrap cite {font-style: normal;}
HTML Kode
<div class="mb-wrap mb-googleplus">
<div class="mb-thumb">
</div>
<sbtm77 cite="http://sbtm77.blogspot.com">
<p>Your Teks In Here...</p>
</SBTM77>
<div class="mb-attribution">
<p class="mb-author">
Your Name</p>
<cite><a href="/">Lihat Profil Lengkapku</a></cite>
</div>
</div>
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 Google Plus Di Sidebar Blog ) semoga bermanfaat terima kasih.
CONTOHNYA
Tidak ada komentar
Posting Komentar