Info Blog News -
Widget "Abaut Me" atau About
the Author blogger ini memiliki latar belakang profil berupa foto, nama dan
deskripsi tentang penulis blog dan tombol sosial media plus counternya. Widget
About the Author ( tentang penulis ) di buat sederhana namun kesan pro masih
melekat dalam desainnya, widget hanya menunjukkan sebuah gambar dengan Google+
tombol dan link ke profil Google+ pengikut. Saya harap Anda menyukai widget
ini. Untuk menambahkan widdget ini ke blog ikuti langkah-langkah di bawah ini
Cara Membuat Widget Author
Keren di Blog
1. Masuk Blogger Dashboard
>> Templete >> Edit HTML, kemudian letakkan kode di bawah ini
sebelum kode </style>
CSS - Info Blog News
@import
url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before
{font-family: 'entypo', sans-serif;}
*{ box-sizing: border-box; }
a { text-decoration: none;
transition: all .4s; }
.container { margin: 0 auto;
}
.container:hover
.author-body { height: 70px; }
.author-body a {color:#fff}
.author2 { overflow: auto;
padding: 20px; background: #fff; border-radius: 5px 5px 0 0; font-size:12px;
color: #b9becd; }
.author2:before { content:
""; display: block; float: left; width: 80px; height: 80px;
margin-right: 20px; background: url("http://i.imgur.com/rppvYgh.jpg")
no-repeat; background-size: 80px; border-radius: 100%; }
.author2 h1 { margin: 15px 0 5px; font-weight: 100;
font-size:20px; color: #5e6d81; }
.author-body { height: 0;
background: #323a45; color: #fff; vertical-align: middle; transition: all .3s;
}
.author-body a { display:
inline-block; width: 25%; height: 100%; padding: 20px; border-right: 1px solid
rgba(255,255,255,.25); text-align: center; color: #fff; font-size: 2.5em}
.author-body a:hover {
background: #515761; }
.author-body a:last-child {
border-right: none; }
.foot { /*height: 100px;*/ }
[class^="footItem"]
{ display: inline-block; width: 33.333333%; padding: 15px 0; text-align:
center; color: rgba(255,255,255,.8); font-size: 1.1em; }
[class^="footItem"]
span { display: block; font-size: 1.6em; margin-bottom: 5px; color: #fff; }
.footItem1 { background:
#14b9d6; color: white!important;}
.footItem1:hover {
background: #5bcee2; }
.footItem2 { background:
#f27935; color: white!important; }
.footItem2:hover {
background: #f6a172; }
.footItem3 { background:
#1fbba6; color: white!important;}
.footItem3:hover {
background: #63d0c1; }
.widget-content { box-shadow: 0 0 0 1px #D3D3D3;}
.section:first-child
.widget:first-child {margin-bottom:15px}
Catatan : yang saya tandai warna biru
di atas, ganti dengan URL foto Anda.
2. Simpan Templete
3. Kemudian masuk ke Tata Letak >> Tambah Gadget >> HTML javascript dan masukkan kode di bawah ini didalam kotak HTML javascript
HTML - Info Blog News
<div class="container">
<div class="author2">
<h1>Nama
Anda</h1>
Admin Blog
</div>
<div
class="author-body">
<a
href="#Twitter-LINK"><span
class="entypo-twitter"></span></a><a
href="#Facebook-LINK"><span
class="entypo-facebook"></span></a><a
href="#Dribble-LINK"><span
class="entypo-dribbble"></span></a><a
href="#GooglePlus-LINK"><span class="entypo-gplus"></span></a>
</div>
<div
class="foot">
<a
href="#" class="footItem1"><span
class="entypo-heart"></span>102</a><a
href="#" class="footItem2"><span
class="entypo-user"></span>4,587</a><a
href="#" class="footItem3"><span class="entypo-plus"></span>84,023</a>
</div>
</div>
Catatan : Ganti yang saya tandai warna biru
dengan ID sosial media milik Anda
4.
Simpan dan lihat hasilnya
Semoga bermanfaat…