Cara Membuat Widget Author Responsive di Blog
DuniaKita - 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.
Baca juga:
Cara Membuat Widget Author Keren di Blog
1. Masuk Blogger Dashboard >> Templete >> Edit HTML, kemudian letakkan kode di bawah ini sebelum kode </style>
@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("URL FOTO KAMU") 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 kamu.
2. Simpan Templete
3. Kemudian masuk ke Tata Letak >> Tambah Gadget >> HTML javascript dan masukkan kode di bawah ini didalam kotak HTML javascript
<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...
No comments:
Post a Comment