Pada kali ini saya akan membagikan tutorial membuat widget pop up About responsive di Blogger. Widget ini yang di pakai oleh blog Arlina Design, karna dari itu saya membagikan tutorial ini. Widget ini biasa di taro di bagian menu top maupun menu navigasi, seperti yang di pasang pada blog Arlina Design, dia memasang widget ini di bagian top menu.

Sekarang - sekarang ini memang saya jarang untuk mengupdate blog, di karenakan saya sedang melaksanakan Ulangan Kenaikan Kelas (UKK) pada saat ini, jadi saya tidak memfokuskan membuat postingan di blog.

Membuat Pop Up Widget About Responsive


Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda Copy kode CSS di bawah ini, dan Anda Pastekannya di atas kode ]]></b:skin> atau </style>

/* About Us */

.boxinner{z-index:99;width:100%;height:550px;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:#3cc091;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:62.3%;box-sizing:initial}

#left{background:#fff;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:227px;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:60px;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:#888}

.totalposts .totallabel{display:block;color:#888;font-weight:700}

@media (min-width:768px){.popup-container{width:600px}}

@media (max-width:767px){.popup-container{width:100%}}

Langkah kedua :

Silakan Anda Copy kode di bawah ini tepat di bawah kode </footer>

<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'></i></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/AVvXsEgfkCWTREDRGIV_xXlDJTJ8VoXHWYHRtqdMqGC7yWkH51HE9fOni87fcY-NjfORDdnOZ92BJrxk2gW7fuetFByYqqtXrbqySNkFgpYBkzePIzXpQL6ym9jsS-d2L_ie6cKIn4ipC42EFv-L/s1600/Arlina+Design.png' title='Arlina Design' width='140'/><br/>

<script src='http://www.arlinadzgn.com/feeds/posts/default?alt=json-in-script&callback=getposts'></script><br/><br/>

Arlina Design merupakan sebuah blog pribadi tempat Saya berbagi mengenai tips seputar blogger dan template khusus blogger.<br/><br/>

Mudah-mudahan kedepannya blog ini dapat memberikan kontribusi serta informasi bermanfaat bagi Anda semua. Terima kasih.

</div></div></div>

<div id='left'>

<div class='taber2'><a href='https://plus.google.com/+ArlinadesignBlogspot' rel='nofollow' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus fa-fw'></i> Google Plus</a></div>

<div class='taber3'><a href='https://www.facebook.com/arlinadesign' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook fa-fw'></i> Facebook</a></div>

<div class='taber4'><a href='https://twitter.com/ArlinaDesign' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter fa-fw'></i> Twitter</a>

</div>

<div class='taber6'><a href='http://codepen.io/arlinadesign/' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen fa-fw'></i> 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'></i> Join this blog</a></div>

</div></div></div></div>

Cara menampilkan widget ini :

Silakan Anda taruh kode dibawah ini kedalam menu navigasi Anda

<li><a class='popup-link' href='#popup'>Info</a></li>

Jika mengalami masalah atau error ataupun tidak berfungsinya cara ini, silakan Anda berkomentar di bawah, akan saya tanggapi secepatnya bila saya sedang Online.