Kali ini saya akan membagikan cara memasang pop up about us di blog dengan mudah dan tampilan yang menarik. widget ini saya dapat dari arlinadezign. widget pop us about ini berguna untuk menunjukkan info ringkas mengenai blog dan deskripsi blog anda, pop up ini juga dilengkapi dengan tombol social media dan juga menampilkan jumlah posting yang telah dipublish serta menggunakan warna flat design sehingga menarik untuk dilihat, pasti anda tertarik untuk membuatnya kan ?
Oke langsung saja ke tutorialnya, ikuti cara berikut ini :
Karena widget ini menggunakan font awesome jadi tambahkan kode berikut ini, namun jika pada template yang sobat gunakan sudah ada css awesome maka tidak perlu lagi mengikuti langkah ini :
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
1. Masuk ke Blogger.com -> Template - > klik edit HTML lalu pastekan kode berikut diatas kode ]]></B:skin> atau </style>
/* About Us */
.boxinner{z-index:99;width:100%;height:575px;position:absolute;left:50%;margin-left:-310px;top:70px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
headbanger{background:#ff675c;height:70px;width:100%;position:inherit}
#textlogo{background:rgba(0,0,0,0.1);color:#fff;line-height:70px;text-align:center;font-size:200%;position:inherit;width:68.5%;box-sizing:initial}
#left{background:#fff;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:200px;position:inherit}
#left a{color:#888;transition:initial;}#left a:hover{color:#fff;}
#left i {margin:0 10px 0 0}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer; padding:15px;color:#888;}
.taber1:hover{background:#ff6733;color:#fff}.taber2:hover{background: #e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4: hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0; color:#fff}
.taber6:hover{background:#383838;color:#fff}.taber7:hover{background: #f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a, #left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a, #left .taber7:hover a{color:#fff}
#aboutus{background:#fafafa;width:62.2%;padding:20px 20px 40px 20px;color:#444;text-align:left;position:inherit;float:left; line-height:normal}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin:55px 0 0 0}
.scrollbarbox .innerone{height:480px;overflow:auto}
#popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1) ;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275), opacity .3s,visibility .3s}
#popup:target{display:block;position:fixed;top:0;left:0;right:0; bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:50px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(0,0,0,0.2);font-family:fontawesome}
a.popup-close:hover{color:rgba(0,0,0,0.6);}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#aaa}
.totalposts .totallabel{display:block;color:#aaa;font-weight:700}
li.infoarlina{border:0;}
li.infoarlina a{background:#ff675c;color:#fff;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}
li.infoarlina a:hover{background:#e4554b;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
2. Lalu tambahkan kode berikut dibawah kode <body> atau <body
<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='contentbox'>
<headbanger><span id='textlogo'>Arlina Design</span>
<a class='popup-close' href='#closed' title='Close'><i class='fa fa-times'/></a>
</headbanger>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='Arlina Design' height='140' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6LelfqfpcDrkxocE2tlwLAs_jVMLxkuDGMHoU2R91-pg-xI7GjUu4aohwSdTHJr18Ienrdc-BIPb9FFF1LTNoazvnWLs7xx9hKuQ9X2ASHhTglGuw-sMxya6gIZErxFh8KR7OroCm-kSZ/s1600/Arlina.png' title='Arlina Design' width='140'/><br/>
<script src='http://Link Blog/feeds/posts/default?alt=json-in-script&callback=getposts'/><br/><br/>
Deskripsi</div></div></div>
<div id='left'>
<div class='taber1'><a href='#' target='_blank' title='Soundcloud'><i class='fa fa-soundcloud fa-fw'/> Soundcloud</a></div>
<div class='taber2'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus fa-fw'/> Google Plus</a></div>
<div class='taber3'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook fa-fw'/> Facebook</a></div>
<div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter fa-fw'/> Twitter</a></div>
<div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen fa-fw'/> Codepen</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow-blog.g?blogID=7342017194742683056' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-users fa-fw'/> Join this blog</a></div>
</div></div></div></div></div>
Silahkan ganti kode yang ditandai sesuai dengan blog sobat, lalu simpan dan lihat hasilnya.
Itulah dia cara memasang widget pop up about us di blog, semoga bermanfaat
Tag :
Blog
0 Komentar untuk "Cara Memasang widget pop up about us di blog"
Silakan Tinggalkan Kritik dan Saran