Iklan

Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #2

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



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"

Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #2


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.

Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #2



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.


<style>.wc-aboutauthor{float:left;width:500px;padding:15px;border:1px solid #ccc;margin-bottom:15px;margin-top:15px;background:url('http://1.bp.blogspot.com/-4cKFALDMxtQ/VNEiq0Ws6VI/AAAAAAAABiY/sOSqd8foMgc/s1600/backgrounds.png');color:#444444;-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);}.wc-aboutauthor h2{color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:-6px;
    }.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='http://3.bp.blogspot.com/--2FmI9RMkW4/VDTNgYR912I/AAAAAAAAAM8/ICpzR0rLqAE/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='http://3.bp.blogspot.com/-5oS7W0FoXy4/VNEgxvOpBFI/AAAAAAAABhs/Mq1bTk7KYlk/s1600/facebook.png' title='Facebook'/></a>    <a href=' link ID Twitter Anda '> <img src='http://3.bp.blogspot.com/-iVx64pbJ9h4/VNEgyemIsjI/AAAAAAAABiA/oEBQ2d5RgQE/s1600/twitter.png' title='Twitter'/></a> <a href=' link ID Plus Page Anda ' > <img src='http://1.bp.blogspot.com/-BPUzyOT0PwA/VNEgxqAdgmI/AAAAAAAABh4/afA-X5lnuog/s1600/gplus.png' title='Google plus'/></a> <a href=' link  ID LinkedIn User Anda '><img src='http://4.bp.blogspot.com/-33_nuF6Poiw/VNEgxzWqBSI/AAAAAAAABhw/BGa3A0z8Sgo/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….

Next
Prev Post
Previous
Next Post
Buka Komentar