Membuat Widget About Me Dengan Tombol Pop Up
Demo silahkan klik tombol About Me pada menu navigasi di atas Blog Ini , maka akan terlihat hasilnya,
jika sobat ingin mencobanya silahkan ikuti tutorail di bawah ini.
1. Pertama, tambahkan CSS font awesome di Blog sobat, jika sudah ada lewati saja
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>]]></b:skin> atau </style>.boxinner{z-index:999999;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#34393D;border-radius:3px;text-align:middle;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;border-bottom-left-radius:3px;border-bottom-right-radius:3px;box-shadow:0 3px 5px rgba(0,0,0,.3)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child{background:#555}
.circle:nth-child(2){background:#555}
.circle:nth-child(3){background:#555}
kepala{background:#E38202;height:50px;width:100%;position:inherit}
#textlogo{color:#FFF;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;background:#f88c00;height:70%;width:60.6%}
#left{background:#333;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#999;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6{font-size:15px;padding:15px 25px;font-family:'Roboto Slab',Arial,sans-serif;color:#999;border-bottom:1px solid #444;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out}
.taber1:hover{background:#f88c00;color:#fff}
.taber2:hover{background:#D92121;color:#fff}
.taber3:hover{background:#0B76B9;color:#fff}
.taber4:hover{background:#27C9E9;color:#fff}
.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#FFD100;color:#fff}
div i{margin-right:10px}
#aboutme{position:absolute;border-radius:50%;background-size:100%;width:30px;height:30px;margin-top:8px;right:5px;border:2px solid #FFCC89;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMUez8mTZ9bItHZfP6A6g0AHtGKVPHgATvFgqn1eybHcqw7jtQ3v5DYKmb2lQJf-p73N4UQft2Fe-Z07_qoy0xChswJWZYWbQq1RVwy0y7fSZd9a1Ze_cl7x58enSO8u6XeEjVhyphenhyphenhIC0E/s1600/Favicon.png")}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:justify;position:inherit;float:left;font-size:11px}
#aboutus img{width:98%;border:3px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.3);margin-bottom:5px}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{visibility:hidden;opacity:0}
#popup:target{visibility:visible;opacity:1;background-color:rgba(0,0,0,0.8);position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:99999999999;-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
.popup-container{position:relative;margin:0 auto;padding:5px 15px;}
a.popup-close{position:relative;top:18px;border-radius:50px;left:5px;margin:0 auto;padding:4px 7px;font-size:13px;text-decoration:none;line-height:1;color:#fff}<body>
<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'/>
<div class='circle'/>
<div class='circle'/>
<div class='contentbox'>
<kepala><span id='textlogo'>SlideSeo</span>
<span id='aboutme'/>
<a class='popup-close' href='#closed' title='Close'><i class="fa fa-power-off"></i></a>
</span></kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img src='https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/13627079_1023400734423344_7144242920748348366_n.jpg?oh=417812c78dbb723593cfa3c27120cd95&oe=581E5D9E'/><br/>
<center><b style="font-size: 17px;">About Admin</b></center>
<br/>
I am just an ordinary man who just might share the knowledge that I know in front of you , There is no more perfect . Always continue to learn and share knowledge , only the Self and become unique that makes them know who you are....
</div>
</div>
</div>
<div id='left'>
<div class='taber1'><a href='http://www.slideseo.blogspot.com' target='_blank' title='www.slideseo.blogspot.com'><i class="fa fa-child"></i> Blog SlideSeo </a></div>
<div class='taber2'><a href='https://plus.google.com/108383348633561410942' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus'/> Google Plus</i></a></div>
<div class='taber3'><a href='https://www.facebook.com/declined.payment' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'/> Facebook</i></a></div>
<div class='taber4'><a href='https://twitter.com/' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/> Twitter</a> </div>
<div class='taber5'><i class='fa fa-phone'/> Phone: 085830910591</i></div>
<div class='taber6'><a href='/' target='_blank' title='email'><i class='fa fa-envelope-o'/> rms.brandalz3@gmail.com</i></a></div>
</div>
</div>
</div>
</div></div></div></div></div>
Keterangan< : Ganti masing-masing ID Sosial Media di atas dengan ID Social Media sobat dan untuk yang lainnya saya rasa Sobat sudah mengerti.
3. Simpan tombol Pop Up berikut, di Navigasi atau terserah sobat mau diletakkan di mana
<li><a class='popup-link' href='#popup'><i class='fa fa-user-secret'></i>About Me</a></li>
Comments
Post a Comment
-Berkomentarlah yang baik dan rapi.
-Menggunakan link aktif akan dihapus.