Membuat Profil Google Plus Di Sidebar Blog

Membuat Profil Google Plus Di Sidebar Blog - Widget profil google plus pada blog defaultnya akan deberi judul "about me" yang biasanya diberi link dengan teks "lihat profil lengkapku" atau "mengenai saya" pada tampilan yang kurang menarik seperti itu, kali ini SAHABAT BLOGGER 77 akan merubah tampilannya dengan membuat profil google plus terbaru dan pastinya akan mempercantik tampilan sidebar blog Anda.

Tampilan yang sama pernah saya desain saat membuat profil author box dengan model blockquote pada artikel sebelumnya, yang detailnya bisa Anda baca - Membuat Widget Author Box Dengan Blockquote sedangkan untuk tampilan profil google plus di sidebar blog kali ini saya menempatkan foto profil diatas teks descripsi seperti tampilan gambar berikut ini

Artikel Terbaru - Desain Tampilan Daftar Isi Model Tab

.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;}

Bentuk CSS diatas sifatnya acak, singkatnya tampilan widget profil google plus belum sempurna pada tata letak lay-out, agar tampilannya terlihat rapi tambahkan format CSS berikut untuk mengatur posisi widget

CSS Widget Lay-out Responsive Input

@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;}

DEMO SHOW


Setelah semuanya sudah benar, saatnya penerapan widget profil google plus ke sidebar blog dengan kode pemanggil HTML berikut

<div class="mb-wrap mb-googleplus">
<div class="mb-thumb">
</div>
<sahabatblogger77 cite="http://sahabatblogger77.blogspot.com">
<p>Your Teks In Here...</p>
</sahabatblogger77>
<div class="mb-attribution">
<p class="mb-author">
Your Name</p>
<cite><a href="/">Lihat Profil Lengkapku</a></cite>
</div>
</div>