Cara Membuat kotak author seperti Google Plus
Cara Membuat kotak author seperti Google Plus | Setelah sebelumnya saya membagikan cara mengambil url javascript di google drive, sekarang saya akan membagikan cara membuat kotak author seperti Google Plus. Terus terang ini adalah tutorial pertama yang murni buatan saya sendiri, hahahaha... :DSeperti yang kita tahu google plus merupakan media sosial yang dipunyai oleh raksasa internet Google dan mempunyai kegunaan pun sangat hebat, saya sering kali meng-share-kan postingan saya di google plus dan alhasil backlink yang didapat pun juga lumayan, walaupun tidak sebesar dari stumbleupon atau linkedin. Apalagi jika menggunakan platform blogger yang mana setiap selesai memposting pasti dilayar akan muncul bagikan posting di google plus.
Menurut pengalaman saya jika kita memasang kotak google plus yang asli, akan memperlambat loading blog kita. Makanya saya menggunakan modifikasi kotak author ini dengan link tetap ke google plus.
Cara Membuat kotak author seperti Google Plus
Baiklah, bagi yang tertarik silakan mencoba, yang tidak ya,, lupakan saja, hehehhee... ^_^Perlu diingat agar template kita error di validator HTML maka dalam tutorial ini saya akan menaruh CSS ke dalam edit HTML.
1. Langkah pertama yaitu buka blogger.com >> Template >> edit HTML
2. Cari </b:skin> atau biasanya kalau kita menggunakan template valid HTML5 cari </style>
3. Taruh kode dibawah ini diatas </b:skin> atau </style>
/*** Custom Author ***/
.sidebar_about_author {
box-shadow: 0px 0px 5px #eee;
}
.aboutme-img {
position: relative;
height: 150px;
background: url(http://img12.deviantart.net/7649/i/2012/284/9/8/fantasi_belakang_sekolah_by_wacko27-d5hjnys.jpg) no-repeat top;
}
.aboutme-img img {
width: 100px;
height: 100px;
display: block;
border-radius: 50%;
margin: 0 auto;
position: relative;
top: 100px;
}
.aboutme-info {
font-size: 13px;
padding: 66px 20px 10px;
text-align: center;
}
.aboutme-info h4 {
margin-bottom: 10px;
text-align: center;
font-size: 16px;
text-transform: uppercase;
color: #202020;
font-weight: 700;
}
.aboutme-wrapicon {
display: block;
margin: 0 auto;
padding: 10px 10px 20px;
position: relative;
}
.aboutme-wrapicon .extender {
width: 100%;
display: block;
text-align: center;
}
.extender .aboutme-icon a {
font-family:fontawesome;
font-weight:400;
color:#222;
}
.extender .aboutme-icon, .extender .fb, .extender .twt, .extender .tmbl, .extender .ggl, .extender .pin {
border-radius: 3px;
background: #f6f6f6;
height: 42px;
width: 42px;
line-height: 42px;
display: inline-block;
border: 0;
margin: 0;
padding: 0;
}
.extender li.fb:hover, .extender li.fb:hover a {
color: #fff;
background-color: #3b5998;
}
.extender li.twt:hover, .extender li.twt:hover a {
color: #fff;
background-color: #00aced;
}
.extender li.tmbl:hover, .extender li.tmbl:hover a {
color: #fff;
background-color: #393763;
}
.extender li.ggl:hover, .extender li.ggl:hover a {
color: #fff;
background-color: #dd4b39;
}
.extender li.pin:hover, .extender li.pin:hover a {
color: #fff;
background-color: #cb2027;
}
4. Simpan template anda.
5. Buka Tata Letak lalu buat widget baru >> HTML/Javascript
<div class="sidebar_about_author">
<div class="inner_wrapper">
<div class="aboutme-img">
<a href="https://plus.google.com/u/0/+ID-GooglePlusAnda" rel="nofollow" target="_blank"><img alt="Author" src="screen gambar profil google plus anda" title="Author"></a>
</div>
</div>
<div class="aboutme-info">
<h4><a href="https://UrlBlogAnda.blogspot.com" target="_blank">Agung Jaka Nugraha</a></h4>
<p>google.com/+NamaGooglePlusAnda</p><br/>
<p>Hanyalah seorang Blogger yang baru belajar. Blog ini adalah dokumentasi dan perpustakaan sekaligus berbagi ilmu yang pernah saya dapat. Saya ucapkan terima kasih telah membaca blog ini.</p>
</div>
<div class="aboutme-wrapicon">
<ul class="extender">
<li class="fb"><a href="AlamatUrlfacebookPageAnda" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li class="twt"><a href="AlamatUrltwitterAnda" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li class="tmbl"><a href="UrltumblrAnda" rel="nofollow" target="_blank" title="Tumblr"><i class="fa fa-tumblr"></i></a></li>
<li class="ggl"><a href="https://plus.google.com/u/0/+IDGooglePlusAnda" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></i></a></li>
<li class="pin"><a href="UrlPinterestAnda" rel="nofollow" target="_blank" title="Pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>
</div>
</div>
Nb : Untuk screen gambar profil google plus, tidak perlu repot-repot, cukup buka google plus anda lalu cari gambar profil yang dimaksud, klik kanan pilih "Salin Url Gambar" lalu pastekan pada kode screen gambar profil google plus anda.
7. Setelah selesai simpan widget anda. Dibawah ini adalah contoh hasil Kotak Author Google Plus, akan tetapi saya memodifikasinya dengan dropcap :D
