Show Hide Author Box Dengan Anchor Point

Mengembangkan ide kreatif adalah salah satu cara untuk terus mengasah otak. Membuat sesuatu yang telah ada menjadi lebih berbeda adalah 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 efek smooth scroll pada anchor point hastag-nya.

Seperti yang saya katakan tadi, ini adalah pengembangan dari Author Box yang sudah biasa kita lihat, kemudian pada show hide-nya kita menambahkan anchor point pada tombolnya dengan hastag unik id-nya untuk mendapatkan efek scroll yang halus seperti pada animasi gif di bawah ini.

Show Hide Author Box Dengan Anchor Point


Atau live demonya bisa And lihat di blog ini jika saya 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 kemudian ganti URL imagenya pada id #authoricon

Untuk tombol show hide-nya id #authoricon sebenarnya bisa disimpan di mana saja atau bisa 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 berbagi pengalaman dengan yang lain tentang blogging dan SEO. Semoga bisa 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 kode di atas. Dan silahkan ganti tanda # dengan URL profil Facebook, Twitter, dan Google+ Anda pada class author-follow

Kemudian tambahkan kode javascript berikut di atas kode </body> untuk memberikan efek 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 target = jQuery(this).attr(&quot;href&quot;).replace(&#39;/&#39;, &#39;&#39;);
   }else{
       var target = 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.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments