Membuat About Us dengan tombol Pop Up, Halaman about adalah halaman yang paling banyak diklik oleh pengunjung saat pertama kali mengakses sebuah blog dan merupakan sebuah halaman blog yang tidak kalah pentingnya dengan discalimer, privacy policy atau yang lainnya, jadi bukan hanya sekedar untuk mempermanis dari tampilan blog namun about me juga merupakan sebuah halaman yang menjelasakan dari biodata si pemilik dan tujuan-tujuan dari blog tersebut, dan apabila kita Membuat Halaman About Me Blog maka blog tersebut menunjukan keseriusan dan menujukan ke propesional dari pemilik blog tersebut.
Pada umumnya halaman ini diletakan di bagian navigasi agar mudah dilihat. Halaman about berperan penting bagi sebuah blog karena melalui halaman inilah pengunjung akan mempelajari apa yang bisa mereka dapatkan dari blog yang sedang mereka kunjungi.
Disini saya akan membagikan pada sobat halaman About Us dengan tampilan yang berbeda, jika pada umum halaman ini sobat klik akan mengarah pada halaman statik maupun halaman postage lainnya halnya dengan about yang telah saya buat ini. Halaman About Us yang satu ini menggunakan tombol Pop Up jadi pada saat pengunjung mengklik halaman tersebut maka secara otomatis akan langsung terbuka tanpak meninggal halaman utama, penasaran lihat screenshot berikut.
Demo silahkan klik tombol about pada menu navigasi di atas atau silahkan klik tombol About pada navigasi
lagioke.com, 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"/>
2. Selanjutnya simpan CSS berikut sebelum
]]></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/AVvXsEimlHrfawN_ByqZOtiAau1kDXhFo9XATgqua0iMH7xnEKxosI52AQAUVekzSt_eIySA5oOJxq_VmssoDa51fKgZU9sBNih_IELlTe6c8yC_aeujuIL1V-oZODEO49hvb_1KobyNVirH7CQ/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}
2. Kemudian simpan HTML berikut, tepat di bawah code
<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'>BUNGFIAN</span>
<span id='aboutme'/>
<a class='popup-close' href='#closed' title='Close'><i class='fa fa-toggle-on'/></a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img src='//2.bp.blogspot.com/-qfcCjNtkIVo/VYFlPpF-VPI/AAAAAAAABRM/zN83Shk7YWI/s1600/me.jpg'/><br/>
<b>LAGIOKE.COM</b><br/><br/>
Situs lagioke.com didirikan pada tanggal 12 Desember 2014.<br/>
Awalnya situs ini menggunakan subdomain Blogspot 2011 silam, namun setelah banyak pertimbangan akhirnya ditahun 2014 berubah menjadi domain TLD.<br/><br/>
Situs lagioke.com awalnya membahas tentang tutorial Blog, namun karena sudah banyak Blog-blog berbau tutorial maka situs ini beralih topik tentang informasi unik, menarik, dll.<br/><br/>
<b>SITUS LAINNYA</b><br/>
Admin lagioke.com, aktif juga dibeberapa Blog antara lain : blog.lagioke.com dan theme.lagioke.com<br/>
</div>
</div>
</div>
<div id='left'>
<div class='taber1'><a href='http://www.lagioke.com' target='_blank' title='lagioke.com'><i class='fontawesome-home'/> www.lagioke.com</a></div>
<div class='taber2'><a href='https://plus.google.com/u/0/+Lagiokecom' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus'/> Google Plus</a></div>
<div class='taber3'><a href='https://www.facebook.com/sitelagioke' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'/> Facebook</a></div>
<div class='taber4'><a href='https://twitter.com/lagiokecom' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/> Twitter</a> </div>
<div class='taber5'><i class='fa fa-phone'/> Phone: 081266632xxx</div>
<div class='taber6'><a href='/' target='_blank' title='email'><i class='fa fa-envelope-o'/> lagiokecom@gmail.com</a></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'/> About</a></li>
4. Save dan lihat hasilnya
ADS HERE !!!