Show Hide Author Box Dengan Anchor Point

Mengembangkan wangsit kreatif ialah salah satu cara untuk terus mengasah otak. Membuat sesuatu yang telah ada menjadi lebih berbeda ialah salah satu bentuk kreatifitas. Dengan alat yang telah ada kita mencoba untuk sedikit merubah sesuatu yang telah ada tersebut menjadi lebih unik. Demikian juga dengan postingan kali ini, kita merubah sedikit Author Box yang biasanya ditampilkan statis di halaman postingan dengan menambahkan show hide dan dampak smooth scroll pada anchor point hastag-nya.

Seperti yang aku katakan tadi, ini ialah pengembangan dari Author Box yang sudah biasa kita lihat, lalu pada show hide-nya kita menambahkan anchor point pada tombolnya dengan hastag unik id-nya untuk mendapat dampak scroll yang halus ibarat pada animasi gif di bawah ini.

DEMO

Atau live demonya sanggup And lihat di blog ini jikalau aku belum mencopotnya hehehe... Nah bagi yang ingin mencobanya silahkan copy kode-kode di bawah ini.

Kode CSS

 #author-box{border:1px solid #ccc;background:#fff;padding:10px;margin:30px auto;position:relative;box-shadow:1px 1px 3px 0 #999;display:none}
 #author-box img{border:none;border-radius:3px;}
 span.author-name a{margin-left:114px;margin-top:-115px;font-size:20px;font-weight:700;color:#333;display:block}
 #author-box p{padding-left:114px;text-align:left;margin-top:5px;line-height:1.3em;font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;}
 .author-follow{padding-left:114px;margin-top:-5px;font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;}
 .author-close{position:absolute;top:0;right:8px;cursor:pointer;font-size:18px;font-weight:700;color:red;display:none}
 #author-box:hover .author-close{display:block}
 #authoricon{background:#ddd url(URL IMAGE) no-repeat; position:fixed;left:0;top:150px;height:48px;width:48px;cursor:pointer;z-index:999;transition:all .3s ease-in-out;}

Silahkan siapkan photo Anda untuk author icon sebagai tombol show hide-nya dengan dimensi 48px x 48px lalu ganti URL imagenya pada id #authoricon

Untuk tombol show hide-nya id #authoricon gotong royong sanggup disimpan di mana saja atau sanggup Anda ganti dengan icon atau tombol apa saja.

Kode HTML

Silahkan simpan di bawah postingan di edit HTML

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='author-box'>
 <img alt='author-photo' height='104' src='URL IMAGE/PHOTO' title='author photo' width='104'/>
 <span class='author-name'><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
 <span itemprop='name'><data:post.author/></span>
   </a></span>
 <p>Saya hanyalah orang biasa yang menyukai blogging dan mencoba menyebarkan pengalaman dengan yang lain wacana blogging dan SEO. Semoga sanggup bermanfaat.</p>
   <div class='author-follow'>Follow me on: <a href='#' rel='nofollow' style='font-weight:700' target='_blank' title='Facebook'>Facebook</a> | <a href='#' rel='nofollow' style='font-weight:700' target='_blank' title='Twitter'>Twitter</a> | <a href='#' rel='nofollow' style='font-weight:700' target='_blank' title='Google+'>Google+</a></div>
 <div class='author-close' onclick='document.getElementById(&apos;author-box&apos;).style.display=&apos;none&apos;;authoricon.style.left=&apos;0&apos;;' title='close'>&#215;</div>
 </div>
 <a href='#author-box' id='authoricon' onclick='document.getElementById(&apos;author-box&apos;).style.display=&apos;block&apos;;authoricon.style.left=&apos;-48px&apos;;' title='About Author'/>
 </b:if>

Silahkan siapkan photo Anda dengan ukuran 104px x 104px untuk mengganti URL IMAGE/PHOTO Author Anda pada arahan di atas. Dan silahkan ganti tanda # dengan URL profil Facebook, Twitter, dan Google+ Anda pada class author-follow

Kemudian tambahkan arahan javascript berikut di atas arahan </body> untuk menawarkan dampak smooth scroll pada anchor point. Jika ternyata ditemplate Anda sudah ada maka abaikan saja javascript ini. 

 <script type='text/javascript'> 
 var jump=function(e)
 {
     //alert(&#39;here&#39;);
    if (e){
        //e.preventDefault();
        var sasaran = jQuery(this).attr(&quot;href&quot;).replace(&#39;/&#39;, &#39;&#39;);
    }else{
        var sasaran = location.hash;
    }
 
    jQuery(&#39;html,body&#39;).animate(
    {
        scrollTop: (jQuery(target).offset().top) - 80
    },4000,function()
    {
        //location.hash = target;
    });
 }
 jQuery(document).ready(function($)
 {
     $(document).on(&#39;click&#39;, &#39;a[href*=#]&#39;, jump);
     if (location.hash){
         setTimeout(function(){
             $(&#39;html, body&#39;).scrollTop(0).show();
             jump();
         }, 0);
     }else{
         $(&#39;html, body&#39;).show();
     }
 });
 </script>

Dan pastikan template Anda sudah terdapat Jquery Library berapapun versinya. Selamat mencoba dan selamat berkreasi.

Sumber https://www.kompiajaib.com/

Share this post