Widget Author Box berisi foto sampul, foto profil author, dan juga deskripsi singkat mengenai author atau admin blog, juga widget ini sudah saya buat ala ala flat design backgroundnya, dan tidak lupa juga terdapat 3 tombol social media, yakni Google+, Facebook, dan Instagram, sobat bisa mengganti atau menambah social medianya dengan mengatur icon font awesomenya.
Membuat Widget Author Box Dengan Social Media Di Blog
Pertama silahkan masuk terlebih dahulu ke Template > Edit HTML di blog sobat
Sebelumnya jika di blog sobat belum terpasang font awesome, sebaiknya di pasang dulu agar social media di widget ini tampil dengan sempurna, letakkan kode font awesome di bawah ini tepat di atas kode </head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
Lalu cari kode </style> dan letakkan kode CSS Author Box di bawah ini tepat di atasnya
.card{padding-top:20px;margin:10px 0 -5px 0;background-color:rgba(214,224,226,0.2);border-top-width:0;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card .card-heading{padding:0 20px;margin:0}
.card .card-heading.simple{font-size:20px;font-weight:300;color:#777;border-bottom:1px solid #e5e5e5}
.card .card-heading.image img{display:inline-block;width:46px;height:46px;margin-right:15px;vertical-align:top;border:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.card .card-heading.image .card-heading-header{display:inline-block;vertical-align:top}
.card .card-heading.image .card-heading-header h3{margin:0;font-size:14px;line-height:16px;color:#262626}
.card .card-heading.image .card-heading-header span{font-size:12px;color:#999999}
.card .card-body{padding:0 20px;margin-top:20px}
.card .card-media{padding:0 20px;margin:0 -14px}
.card .card-media img{max-width:100%;max-height:100%}
.card .card-actions{min-height:30px;padding:0 20px 20px 20px;margin:20px 0 0 0}
.card .card-comments{padding:20px;margin:0;background-color:#f8f8f8}
.card .card-comments .comments-collapse-toggle{padding:0;margin:0 20px 12px 20px}
.card .card-comments .comments-collapse-toggle a,.card .card-comments .comments-collapse-toggle span{padding-right:5px;overflow:hidden;font-size:12px;color:#999;text-overflow:ellipsis;white-space:nowrap}
.card-comments .media-heading{font-size:13px;font-weight:bold}
.card.people{position:relative;display:inline-block;width:170px;height:300px;padding-top:0;margin-left:20px;overflow:hidden;vertical-align:top}
.card.people:first-child{margin-left:0}
.card.people .card-top{position:absolute;top:0;left:0;display:inline-block;width:170px;height:150px;background-color:#ffffff}
.card.people .card-top.green{background-color:#53a93f}
.card.people .card-top.blue{background-color:#427fed}
.card.people .card-info{position:absolute;top:150px;display:inline-block;width:100%;height:101px;overflow:hidden;background:#ffffff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card.people .card-info .title{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:16px;font-weight:bold;line-height:18px;color:#404040}
.card.people .card-info .desc{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:12px;line-height:16px;color:#737373;text-overflow:ellipsis}
.card.people .card-bottom{position:absolute;bottom:0;left:0;display:inline-block;width:100%;padding:10px 20px;line-height:29px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card.hovercard{position:relative;padding-top:0;overflow:hidden;text-align:center;background-color:rgb(248, 252, 253)}
.card.hovercard .cardheader{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74xNETs3MX8W0VqldfAV3VUsbV0qQMbwovDoonY0VT-YAWq-BfDePSahh2xCMsEn5J-sJluiAVK_Ymhglf70WwkKoZVSEC3E_PmOcF9zvR_dLiT8imou49JQYdyg83B0NfrflDO9mc3a2/s1600/clouds+bg+musafus.web.id.jpg");background-size:cover;height:135px}
.card.hovercard .avatar{position:relative;top:-50px;margin-bottom:-50px}
.card.hovercard .avatar img{width:100px;height:100px;max-width:100px;max-height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid rgba(255,255,255,0.5)}
.card.hovercard .info{padding:4px 8px 10px}
.card.hovercard .info .title{margin-bottom:4px;font-size:24px;line-height:1;color:#262626;vertical-align:middle}
.card.hovercard .info .desc{overflow:hidden;font-size:12px;line-height:20px;color:#737373;text-overflow:ellipsis}
.card.hovercard .bottom{padding:0 20px;margin-bottom:17px}
.btn{border-radius:50%;width:32px;height:32px;line-height:18px}
Lalu klik tombol Simpan Template
Selanjutnya menuju ke Tata Letak > Tambah Gadget > Pilih HTML/Javascript, lalu masukkan kode HTML Author Box di bawah ini ke dalamnya
<div class="container"> <div class="row"> <div class="col-lg-3 col-sm-6"> <div class="card hovercard"> <div class="cardheader"> </div> <div class="avatar"> <img alt="" src="https://lh3.googleusercontent.com/-jao-ErpTrgw/AAAAAAAAAAI/AAAAAAAAA4g/zgAFjaiUZNU/s80-c/photo.jpg" /> </div> <div class="info"> <div class="title"> <a href="http://www.musafus.web.id/p/about.html">M. Safryan N.F</a> </div> <div class="desc">Newbie Blogger, Blog Design</div> <div class="desc"><i class="fa fa-map-marker"></i> Kalimantan Tengah - Indonesia</div> </div> <div class="bottom"> <a class="btn btn-primary btn-twitter btn-sm" href="https://www.facebook.com/safryannoor" rel='nofollow' target'blank'> <i class="fa fa-facebook"></i> </a> <a class="btn btn-danger btn-sm" rel="publisher" href="https://plus.google.com/113664237872154000215" rel='nofollow' target='blank'> <i class="fa fa-google-plus"></i> </a> <a class="btn btn-primary btn-sm" rel="publisher" href="https://www.instagram.com/safryannoor/" rel='nofollow' target='blank'> <i class="fa fa-instagram"></i> </a> </div> </div> </div> </div> </div>
Ganti tulisan yang berwarna merah dengan link Foto sobat, gunakan foto berukuran 100x100 pixel
Ganti tulisan yang berwarna oren dengan nama sobat dan juga lokasi sobat, sobat juga bisa menggantinya dengan tulisan deskripsi singkat tentang sobat
Ganti tulisan yang berwarna biru dengan link social media sobat, silahkan disesuaikan
Ganti tulisan yang berwarna oren dengan nama sobat dan juga lokasi sobat, sobat juga bisa menggantinya dengan tulisan deskripsi singkat tentang sobat
Ganti tulisan yang berwarna biru dengan link social media sobat, silahkan disesuaikan
Lalu klik tombol Simpan
Silahkan di cek tampilannya pada sidebar blog sobat, jika ada pertanyaan silahkan bertanya melalui kotak komentar atau link kontak, selamat mencoba dan semoga berhasil 😉.