Saat Ini Orang Sedang Online

Cara Membuat Back To Top Di Bawah Halaman Posting




Kali ini kita akan membuat link Back to Top di posting. Link Back to Top ini akan muncul pada bagian bawah posting. Linknya dapat berupa tulisan atau dapat diganti dengan gambar seperti yang terlihat pada tabel di bawah ini.

Back to Top tulisanBack to Top gambar

Untuk membuat 'Back to Top' di posting, Anda dapat menyimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-backup template.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode yang seperti di bawah ini atau kode untuk icon email. Untuk mempercepat pencarian, tekan Ctrl + F, kemudian ketikkan kode yang akan dicari.


<b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>



6. Untuk membuat link Back to Top, silakan tambahkan kode <a href='#'>Back to Top</a> setelah kode sumber gambar icon email sehingga kodenya menjadi seperti di bawah ini :

<b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
          </a><a href='#'>Back to Top</a>
          </span>
        </b:if>

  •  Tulisan Back to Top dapat Anda ganti sesuai keinginan Anda, misalnya Kembali ke Atas.

7. Jika ingin mengganti tulisan Back to Top dengan gambar, silakan tambahkan kode di atas dengan kode URL gambar Anda.

Contoh :

<b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
          </a><a href='#' title='Kembali ke Atas'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidvTHuDXbVxVy8PawYN31V3YtjklMF9dqwd1xVpGI11-fSs_A8sfORKdmxQXFbBw1JRm-yvc47kuMszZHiLukFCgnlT7v5LwSsYNZKFwWc4lKCen2fOr-CQXzpElttmy_JrtezVET4MSU0/s1600/Up.jpg'/></a>
          </span>
        </b:if>


  • Anda dapat mengganti judul Kembali ke Atas sesuai keinginan Anda dan ganti URL gambar-nya dengan URL gambar Anda sendiri.
8. Klik tombol SIMPAN TEMPLATE.



Sumber : Klik Munadi

Anda telah membaca artikel tentang Cara Membuat Back To Top Di Bawah Halaman Posting dan anda bisa menemukan artikel ini dengan url http://binhakim.blogspot.com/2011/08/cara-mebuat-back-to-top-di-bawah.html, anda boleh menyebarluaskannya atau mengcopy paste-nya jika artikel Cara Membuat Back To Top Di Bawah Halaman Posting ini dirasa bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat Back To Top Di Bawah Halaman Posting sebagai sumbernya.
Terima Kasih

Artikel Yang Berhubungan :



3 Komentar:

royansableng mengatakan...

nice sob..saya praktikin dan lihat hasilnya di blog saya ya
tukeran link yuk sob..jika berminat konfim ke aku ya

Terimakasih royansableng Atas Kunjungan Dan Komentar Anda Pada Artikel Ini.
by Bin Hakim
AcerNoval mengatakan...

waduh gan thanks banget infonya, langsung saya coba :DD

Terimakasih AcerNoval Atas Kunjungan Dan Komentar Anda Pada Artikel Ini.
by Bin Hakim
PGSableng mengatakan...

Aku gak bisa pak, katanya htmlnya gak bisa, span span gitu! tolong pak!

Terimakasih PGSableng Atas Kunjungan Dan Komentar Anda Pada Artikel Ini.
by Bin Hakim

Posting Komentar

Terima Kasih Atas Komentar Anda !!!!!

Related Posts Plugin for WordPress, Blogger...

Artikel Pilihan Lainnya

TOKO BUKU :

Silakan diklik mana buku yang akan anda dapatkan