Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Mengganti Teks Link "Posting Baru" - "Posting Lama" dengan Image Gambar Animasi

Panduan BloGGeR dan Tutorial BloGGeR Modifikasi Blog - Animasi :

Bagaimana menggunakan gambar animasi yang berisi teks untuk mengganti teks link "Posting Baru" ("New Post"), "Posting Lama" ("Older Posts""), dan "Beranda" ("Front Page") yang terletak di bawah kolom komentar (seperti di blog ini)?

Dalam Panduan dan Tutorial BloGGeR ini kita akan bahas cara menngganti ketiga teks link di atas. Ke tiga teks link yang berfungsi untuk membuka halaman blog di posting yang lebih baru, halaman muka blog dan posting sebelumnya itu dapat kita rubah menjadi sebuah image atau gambar animasi teks supaya penampilan blog menjadi lebih cantik, indah dan membuat jemari gatal untuk mencobanya. Untuk merubah kode html-nya kita harus kembali membongkar desain blog di halaman "Edit HTML".

Panduan BloGGeR Langkah Merubah Teks Link Posting Baru - Posting Lama :

  1. Ikuti Panduan BloGGeR dan Tutorial BloGGeR ini dengan cermat : Mengikuti Panduan BloGGer maupun Tutorial Blogger secara cermat dan teliti merupakan kunci sukses untuk melakukan perubahan desain blog. Jangan lupa bertanya apabila mengalami kesulitan juga menjadi salah satu kunci utama. Gagalnya perubahan akibat dipendam sendiri akan mengakibatkan rasa emosi atau jengkel sehingga sering timbul desakan mau kencing! Kesimpulannya : Malu bertanya akhirnya gagal melakukan perubahan desain blog sehingga justru menjadi kebelet pipis.
  2. Login : Lakukan login dengan menuliskan "User Name/alamat email" dan "Password (Sandi)".
  3. Dasboard (Dasbor) : KLIK link "Layout (Tata Letak)".
  4. Layout (Tata Letak) : KLIK link "Edit HTML".
  5. Edit HTML : KLIK link "Download Template Lengkap (Download Full Template)", kemudian "simpan (SAVE)" di "Folder PC". Bila ingin mengetahui cara dan kegunaan mengamankan template (backup), silahkan sampeyan KLIK.
  6. Tetap di Edit HTML : KLIK link "Expand Template Widget".
  7. Tetap di Edit HTML : Cari KODE :
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
    Gunakan "Ctrl+F" untuk mencari kode html di atas. Apabila belum tahu cara mencarinya, silahkan sampeyan KLIK .
  8. Ada tiga KODE HTML harus diganti : Lihat KODE html di bawah ini, yang akan sama dengan kode milik template sampeyan, terutama tiga KODE HTML yang nantinya akan dirubah. Tiga kode HTML yang berwarna bitu tebal (geser scroller supaya terlihat) adalah kode yang harus diganti:
  9. <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
    <b:includable id='nextprev'>
    <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
    <span id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
    </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
    <span id='blog-pager-older-link'>
    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
    </span>
    </b:if>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
  10. Ganti KODE : Ganti seluruh kode HTML yang berwarna biru tebal dengan kode di bawah ini. Penggantian dilakukan berurutan dari yang paling atas.

    Kode HTML pertama (paling atas) :

    <img src='http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/PostingBaru-B.gif' style='height:28px;width:133px;margin-left:10px;border:2px solid #555;padding:3px'/>

    Kode HTML ke dua (tengah) :

    <img src='http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/Posting-Lama-Anima-B.gif' style='height:28px;width:140px;margin-right:10px;border:2px solid #555;padding:3px'/>

    Kode HTML ke tiga (paling bawah) :

    <img align="center"  src='http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/HalamanMukaAnima.gif' style='height:28px;width:188px; border:2px solid #555;padding:3px'/>
  11. SAVE Template/Simpan Template : KLIK "Simpan Template" dan buka blog untuk melihat hasilnya.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

2 komentar:

  1. Assalamualaikum... Bang, kok di kode html saya tidak ada seperti kode html di atas ya?

    yang ada :


    #blog-pager-newer-link{float:left;margin-left:13px;

    #blog-pager-older-link{float:right;margin-right:13px}

    #blog-pager{text-align:center}.feed-links{clear:both;line-height:2.5em;margin-left:13px}/**/


    Bagaimana cara menggantinya? trims.. Zai

    BalasHapus
  2. thx info yg sangat bermanfaat ini :)



    #Semoga sehat selalu

    BalasHapus

 
GR | Edited by | gubhug reyot