Vabrose: Cara Membuat Widget About the Author tentang Penulis Blogger 2

Thursday, November 24, 2016

Cara Membuat Widget About the Author tentang Penulis Blogger 2

Bloggingpasuruan - Widget "Abaut Me" atau About the Author blogger ini memiliki latar belakang profil berupa foto, nama dan deskripsi tentang penulis blog. 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. Kali ini Bloggingpasuruan akan share 4 model widget "About Me" yang mudah digunakan, keren dan ada tambahan 4 tombol jaringan sosial di dalam widget yang. Saya harap Anda menyukai widget ini. Untuk menambahkan widdget ini ke blog ikuti langkah-langkah di bawah ini

Baca juga : WidgetAbout the Author ( profesional ) dengan 4 model pilihan widget

Cara membuatnya silahkan ikuti langkanya berikut ini, karena widget ini akan kita tempatkan atau pasang dibawah posting artikel blog.

1. Masuk Blogger Dashboard >> Layout >> Blog Posts, kemudian klik "Edit"

2. Pada halaman berikut ini, scroll ke bawah, cari "Tampilkan Penulis Profil di bawah posting" pilihan-kotak dan klik "Simpan" tombol untuk menyimpan pengaturan Anda.

Bagaimana Menambahkan Author Box Widget di Blogger

1. Masuk ke Dashboard >> Template >> Edit / HTML

2. Sekarang cari kode seperti dibawah ini ( Tip untuk mencari: Ctrl + F )

<div class=post-footer-line post-footer-line-1>

3. Anda akan menemukan dua atau lebih kode yang mirip atau sama ( kode di bawah ini jangan diletakkan pada kode yang pertama ), sekarang salin kode dibawah ini ( kode CSS ) dan paste tepat di bawah kode yang ke kedua.

}.wc-aboutpic{float:right;margin:0 0 0 10px;}.wc-aboutpic img{border:1px solid #999999;-webkit-transition:-webkit-transform .15s linear;-moz-transition:-moz-transform .15s linear;-o-transition:-o-transform .15s linear;transition:transform .15s linear;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.27);-moz-box-shadow:0 3px 6px rgba(0,0,0,.27);box-shadow:0 3px 6px rgba(0,0,0,.27);padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;}.wc-aboutpic img:hover{background:#FFFFFF;-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .5);-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .5);box-shadow:0px 0px 10px rgba(0, 0, 0, .5);-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-ms-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg);}.wc-aboutsoc img{height:35px;margin-bottom:-13px;}.wc-aboutsoc p{font:16px georgia;color:#ffffff;background:#b6e026;display:inline;border-radius:6px;padding:6px;margin-right:30px;}</style><b:if cond=data:blog.pageType == "item"><div class=wc-aboutauthor><div class=wc-aboutpic><img alt=Author image height=150 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWeeWG8J6TUpEyi3jKLiF2JnSMWQ0unyJT6dEcyu5KjzN2hGKMM9eWMa_RH9gENjUfgYF5QyMkBUjs2V2icnkryI8jtF2iG9eA_Mw-gpvXCACp-z6blEOAGqpwrni8HOLKFD-by40vtLo/s1600/icon.png width=150/></div><span style="font-family: Verdana, sans-serif; font-size: large;"><b>Tentang Penulis</b></span><div style="text-align: justify;"><p>Tuliskan diskripsi Anda sebagai seorang penulis disini</p></div><div class=wc-aboutsoc><p> Follow me on: </p><a href=link ID Facebook Anda><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1KzOAc1eGIE4WjdZDfertPF2wAxDELdNHIn2oiD3IZsS9hVnlKVlXCVCu0ZK2wO7VfEpGMcsjiR_V25Qj8aTydQePgxR9ry9ZqxaP5IzPEGmd7EPa0rewlErIi6PbWbXmU3WyFX5sDEw/s1600/facebook.png title=Facebook/></a> <a href= link ID Twitter Anda> <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1hrV_zufMlF8YNtfm_SWbCb5fbNAsIstTcuD3M__p25PqN1PB2qbB5k9I4oxWJwtM8cTPnPPQgolmwwdIsLI57UMdftiFbqAxmPeGz-hzZ3ZpVarVdM0RbwPujlsL8ZTOIW47DEzxnmE/s1600/twitter.png title=Twitter/></a> <a href= link ID Plus Page Anda > <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Vj0fPWkinIF6kkaHwtIxEjRvb382tx6PH3TejuSZMF7aCMCv9cQhLOsfEXHBNF3M9VxC60CM6HCScwWQP_KdKWerm0bPLibr2N_26Ix3lPo0MqK9GscIjh83Wkh3xgnikjpqqETRY1E/s1600/gplus.png title=Google plus/></a> <a href= link ID LinkedIn User Anda ><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqX-C4HA5wjTaz3w35Ll-0VjJ1kFhigVZjh6p3W926b_UXMXC0fUqJNIVqq5-ycLFK_L318QPWxO-RkKOooGoGoXiVami1S2jV0kK7cNoinMRqEnI2sSfJ9atdu3rT_glYboPxXejJGNk/s1600/linkedin.png title=LinkedIn/></a></div></div></b:if>

4. Sekarang klik pada "Simpan template"

Jika ada masalah dengan widget diatas, silahkan tinggalkan komentar anda di kotak komentar di bawah ini.

Semoga bermanfaat….

Available link for download