Halo Sobat
Copy Paste Ide, pada kesempatan kali ini saya bagikan informasi mengenai cara
membuat widget profil pada Sidebar Blog. Hasil jadinya akan nampak seperti
dibawah ini :
Berikut cara membuat Widget Profil pada Sidebar
Blog
1.
Buka akun blogger
2.
Pilih Tata Letak
3.
Tambah Widget baru
>> Pilih HTML/JavaScript
4. Copy semua kode dibawah ini
<div class="kurauthorbox" style="margin:0 10px 10px 0;border-radius:5px">
<img alt="author" src="https://i.pinimg.com/originals/d0/73/c3/d073c3f982bb6dac9967ac46a5c49038.gif" width="120" height="120"/>
<a class="kurauthorname" href="https://copypasteide.blogspot.com/" rel="author" target="_blank" title="Get in touch">Copy Paste Ide</a><a class="kurauthorname" href="https://copypasteide.blogspot.com/" rel="author" target="_blank" title="Get in touch">Good design makes the ordinary extraordinary</a>
<div class="sosmed-author">
<ul>
<li><a href="https://www.facebook.com/profile.php?id=100085616473819&mibextid=ZbWKwL" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/CatatanGhaitsa" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://youtube.com/@CatatanGhaitsa" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.instagram.com/catatanghaitsa/" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-github-square fa-2x" aria-hidden="true"></i></a></li>
</ul>
<div class="clear"></div>
<div class="bawahsos">
<a class="butt-author" href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=5207440990696023651" target="_blank" title="Follow This Blog"><i aria-hidden="true" class="fa fa-rss"></i> Follow</a>
<a class="butt-contact" href="https://sociabuzz.com/catatan_ghaitsa" rel="nofollow" target="_blank" title="Donasi ke Admin"><i aria-hidden="true" class="fa fa-coffee"></i> Donasi</a>
</div>
</div>
</div>
<style>.sosmed-author,a.kurauthorname,h2.author-title,a.kurauthorname-url{display:block;text-align:center}
.kurauthorbox{background:url(https://img.freepik.com/free-photo/wall-wallpaper-concrete-colored-painted-textured-concept_53876-31799.jpg?size=626&ext=jpg) top center no-repeat #111;padding:25px 0 0;margin:0 auto;width:300px}
h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}
.kurauthorbox img{margin:1px auto 0;border-radius:100%;display:block;box-shadow:0 5px 5px rgba(0,0,0,0.1);border:4px solid #fff;transition:all .6s;background:#222}
.kurauthorbox img:hover{border-radius:10%;cursor:pointer;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.kurauthorbox a.kurauthorname{background:#222;display:table;margin:20px auto;padding:6px 10px;line-height:normal;border:1px solid rgba(0,0,0,0.08);color:#fff;font-weight:400;font-size:14px;border-radius:3px;letter-spacing:1px;text-decoration: none;}
.kurauthorbox a.kurauthorname:hover{background:#123;color:#fff}
.sosmed-author{margin:auto;padding:15px;background:#111;border-radius:4px;border-top:10px solid #222}
.sosmed-author li,.sosmed-author ul{list-style:none}
.sosmed-author ul{margin:0;padding:0 0 10px 0;width:100%;}
.sosmed-author li{display:inline-block;width:22%}
.sosmed-author li a{color:#bdc3c7!important;transition:all .4s ease-out;}
.sosmed-author li a:hover{color:#7f8c8d!important;}
.bawahsos{width:100%;display:block}
.bawahsos a.butt-author,.bawahsos a.butt-contact{background:#222;color:#fff;display:inline-block;width:30%;padding:10px;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s;text-decoration: none;}
.bawahsos a.butt-contact{background:#222;color:#fff;margin:0 0 0 8px}
.bawahsos a.butt-author:hover{background:#123;color:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.bawahsos a.butt-contact:hover{background:#123;color:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.bawahsos a.butt-author i,.bawahsos a.butt-contact i{margin:0 5px 0 0}
</style>
5.
Simpan Widget
Catatan
1.
Silakan kalian sesuaikan
sendiri untuk link dan foto Author
2. Apabila iklan sosmed tidak
keluar maka pasang libary fontawesome dibawah ini ke dalam template blog kalian
(letakkan di bawah kode <head>)
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Itu informasi mengenai “Cara Membuat Widget Profil Keren pada Sidebar Blog versi Copy Paste Ide”, selamat mencoba dan moga bermanfaat