Show Hide Author Box Dengan Anchor Point

Show Hide Author Box Dengan Anchor Point

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

51 Comments Add Comment

mantap gan ,baru nih :)

Balas

bagus kang bisa di praktekkan di blog baru nanti
ijin copy ya kang... :)

Balas

Silahkan mas dicoba dulu hehehe :)

Balas

Silahkan mas mudah-mudahan bisa dimengerti :)

Balas

Ko redict ke web canadalltax ya kang? :/

Balas

wah keren nih mas adhy.. model baru nih sepertinya. dan belum banyak yang menggunakan hehehehe :D

Balas

maksudnya mas? kalau yang saya baca di Google itu dari ekstensi Chrome atau Firefox yang mas Firman gunakan.
Coba baca di sini https://answers.yahoo.com/question/index?qid=20140324165026AA0uQZt

Balas

Heheheeh iya mas biar berbeda dengan orang lain :)

Balas

xsperimen trs ni mas adhy... keren2...

mau tny mas :
klo di kamus ellipsis "pembuangan kata". klo di css mksdnya "text-overflow: ellipsis;" gmn tu?

thx

Balas

artinya jika text melebihi kotak atau text area maka kalimat tersebut akan dipotong sesuai lebar kotak dan karakter terakhir akan diganti dengan titik-titik (...)

Balas

Oooo...
siiiip.. mas adhy..

matur nuwun..

Balas

Keren nih Mas.. Di Coba Dulu :D

Balas

Sama-sama mbak Tari :) ini digunakan juga oleh Google di halaman hasil pencarian untuk judul postingan. Jika judulnya terlalu panjang maka akan dipotong dan karakter terakhir akan berupa 3 buah titik.

Balas

Silahkan mas Rendi :)

Balas

wah manten nih.. test dulu..

Balas

uedane show hide authornya keren pisan banget banget kang...berbeda dan saya mah baru liat...pasang ah :p

Balas

ngoprek setengah malemam, akhirnya bisa juga.

Balas

............198a3b97-5ed9-4798-adb9-48e5d18d8a67.png' title='author' width='100px'/>
ngga valid html5 disini

Balas

Silahkan mas Cahya :)

Balas

Siip kang :-bd

Balas

Hadeeeuuuhhh betul kang Lembu, saya lupa.
Hapus satuan px pada width dan height nya jadi width='104' dan height='104' (tanpa satuan px) makasih koreksinya kang Lembu :)

Balas

bisa kepikiran membuat seperti ini ya mas, benar2 ajaib deh :-d

Balas

yang mastah azh juga lupa...apalagi sayah coba =(
siip lah

Balas

Hehehehe biar ada variasinya sis :)

Balas

Ah kang Lembu mah heheeh :D sayah mah bukan mastah hehehe hanya orang biasa, kan saya tulis di author box-nya hehehe :D

Balas

masih tinggal 1 lagi yang belum valid, diutak atik ngga ketemu. disini nih kang :
<span itemprop='name'><data:post.author/></span>
</a></span>

Balas

punya akang mah disini :
<meta content='03e6d7df81e6f4d42c83b05f6eddb512' name='h12-site-verification'/>

Balas

Oh...yang itu kode verifikasi iklan H12 kang, sementara biarin aja lah nunggu hasilnya kalau kurang bagus iklannya nanti saya copot.

Kalau punya kang Lembu coba hapus aja kode itemprop='name'

Balas

siip kang...udah okeh. tuh

Balas

Siipp kang :-bd tambah ganteng aja tuh...keren deskripsi author-nya hehehe :)

Balas

Keren atuh ini mah kang mantapzz pisan hehe

Balas

mangtap kang, :)

komentar di demo nya juga keren, lazisss abiss :-d

Balas

keren kang hihih, saya coba terapkan dulu di blog pribadi saya dan teman2 saya mau ajak main2 kesini hihihi

Balas

Ah biasa aja kang Ruly hehehee :) saking kehabisan bahan postingan jadi apa aja dibikin hehehe...

Balas

Hehehehe makasih mas :) silahkan dicoba

Balas

Hehehhe silahkan sis dicoba :) mudah2an bisa dimengerti :)

Balas

memang kreatif nih kang adhy, selalu membagikan sesuatu yang berbeda dan menarik tentu-nya. mantap kang, terus berkarya. ^_^

Balas

TOP begete kang hehe.. :)

Balas

Keren bang, kreatif pisan. boleh dah di coba :)

Balas

Cakep kreasinya mas :D

Balas

Aku senang tampilan template dcm dark tapi kode htmlnya banyak yang error.
Bagaimana yah untuk membuatnya bagus??
Apakah anda bisa membantu saya??

Balas

Keren nih idenya.. Saya coba bikin dulu, trims mas

Balas

kalau auhornya ada beberapa bisa di bedain ga gan?? kaya wordpress

Balas

Makasih mas :)

Balas

Hehehehe makasih mas :) silahkan dicoba

Balas

Makasih mas :) silahkan dicoba mudah2an bisa dimengerti.

Balas

Lumayan kang :) buat ngisi postingan

Balas

Cob dulu cari solusinya, cari tutorialnya di Google sesuai dengan errornya biar kita tambah ilmunya mas :)

Balas

Silahkan mas :) silahkan dikembangkan lagi :)

Balas

Saya belum nyoba :) namun sepertinya bisa mas.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×