Diberdayakan oleh Blogger.

  • Membuat Tampilan Slide Di atas Posting

    Posted by : ZraIlyas 22 April 2011

    Seperti biasa

    1. Masuk dulu ke akun blog sobat dengan www.blogger.com [KLIK]
    2.  Klik tulisan " Design[Rancangan]",
    3. Kemudian Klik Edit HTML
    4. Tandai centang Expand Template Widget
    5. Cari Code JavaScript di bawah nii
    ====================================
    "<div id='main-wrapper'>"
    ================================ 
         6.  Kemudian Copy Javascript di bawah nii
    ================================
    "<!-- Featured Content Slider Started --> 
    <div id='slidearea'> 
    <div class='widgets' id='tabzine'> 
    <div class='tabdiv'> 
    <div id='feature-56'> 
    <div class='inpost'> 
    <h3>Slide 1 Title Here</h3> 
    <p>Replace these slide 1 sentences with your own featured slide descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions...</p> 
    </div> 
    <a href='Slide-1-Link-Here'> 
    <img alt='' class='slidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9SuNINKWbJSouHfR8jofBlayU2TA5uM34SUxH1UYMz8Y5qM6O3eLP1EueMZio10HpHNPaGxDVZSgDpUzELs_kpJDIEmIGbkce1Y5NPgCtOq52ACmibb9zVftOOnTMypRNZIwnOgk8JD-r/s0/1-big.jpeg'/> 
    </a> 
    </div> 
    <div id='feature-54'> 
    <div class='inpost'> 
    <h3>Slide 2 Title Here</h3> 
    <p>Replace these slide 2 sentences with your own featured slide descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions...</p> 
    </div> 
    <a href='Slide-2-Link-Here'> 
    <img alt='' class='slidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMNn_FsATF4nzMX3ni0KZMJspIXKZstwbNIGq9Wnj75GCceHpY9mp7NeUo_J0PQhOavyjEWOVa8E2lF0NeNT2iD6ga-tLHCWv-d5fUfZoSAJCpJ-Fmtbiv6RndUEZb-0gH5qX5zH4GlGd1/s0/2-big.jpeg'/> 
    </a> 
    </div> 
    <div id='feature-50'> 
    <div class='inpost'> 
    <h3>Slide 3 Title Here</h3> 
    <p>Replace these slide 3 sentences with your own featured slide descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions...</p> 
    </div> 
    <a href='Slide-3-Link-Here'> 
    <img alt='' class='slidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0MEKvWLO0wHe1YbR_bXPGSFRhdLsWDMB4bssW37pM7pqK4Q-OUN_nhgga2lx4__I0ltOlSiOZdX1MkXQqGb0dodSBG5taeRZVZqBYhrJQwTES4AahzAo-gVgPUzk5TejB66C5iM-_Otaa/s0/3-big.jpeg'/> 
    </a> 
    </div> 
    <div id='feature-18'> 
    <div class='inpost'> 
    <h3>Slide 4 Title Here</h3> 
    <p>Replace these slide 4 sentences with your own featured slide descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions...</p> 
    </div> 
    <a href='Slide-4-Link-Here'> 
    <img alt='' class='slidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixwDovWuWQg-eoUrELChfbxg3mZALw_SP4sGwf2sYKhpoVnzoL7ltoIygh7l0qr5bdXsbt3RA7voHPRtU3VZWqiUlqqx3duOC3OUABEOt7b0eHEU4dmK_k8CSi9EpjGqHJGPGrqpveDtOY/s0/4-big.jpeg'/> 
    </a> 
    </div> 
    <div id='feature-16'> 
    <div class='inpost'> 
    <h3>Slide 5 Title Here</h3> 
    <p>Replace these slide 5 sentences with your own featured slide descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions...</p> 
    </div> 
    <a href='Slide-5-Link-Here'> 
    <img alt='' class='slidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcFtLIWPATFPJ3ipBx3T_J469x_dmleKsLJ5I0MOvs-BMOqiwMiWMWNp-9dMy71XphR2WkmdkdbGsRl3ruTdaG_55g6s6Y1og24P6Iu2gFm9tnycd2MHYxfvU92Jk_ZWj4kFiC5tpxyrZ-/s0/5-big.jpeg'/> 
    </a> 
    </div> 
    </div> 
    <ul id='tabnav'> 
    <li> 
    <a class='listab' href='#feature-56'> 
    <img alt='' class='boximage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBX_9BFHbqj2bJBFzeJVWoMmZmkpqC2f-lEhq7atBZ3KSdX7axxJepY7B0PemYFPW6BkjGBTwWi5RzWwLCEJGdPQzQ9FgK5dgL3b_5wW0eMMWbPnAgIJd5rXLmQ4-eyQQHphYfHg2pRGy/s0/1-small.jpeg'/> 
    </a> 
    </li> 
    <li> 
    <a class='listab' href='#feature-54'> 
    <img alt='' class='boximage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTE94afy1VZt9MowsBydqmukjiHvo-LSAR2MZ2r7Fzhq3XGZWMt0PcYKiMRBsHW-4fZNwhCJuItgNBq3SVQAZaD_NNWWEuSxsR5G75_7NSZVREcTKmRWiaAYQSOZbH6zgSizi3yJMsJqlZ/s0/2-small.jpeg'/> 
    </a> 
    </li> 
    <li> 
    <a class='listab' href='#feature-50'> 
    <img alt='' class='boximage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7sxBpBOKurI2MapZ1DcN7Rp48ifSKeiBP0X2TcI5iNsjL2tRq7jAgCEPucnkD2b5P8rCwwG91nHrdgsi-ennVw5xc7S52Pfs-_7SikCu-_lZvxtQayIObJNui8of4dfIgVRbFpHqlgLFN/s0/3-small.jpeg'/> 
    </a> 
    </li> 
    <li> 
    <a class='listab' href='#feature-18'> 
    <img alt='' class='boximage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lMN8Vy-gS1Xr4fMkWuyI5meiHnFEEz4_G53TKhVMURF8jF_qPITfsc-jmlnntavPRPDhUlfqXYeS0DSNyozSNPEPmniGbHFRIMcewc-p2eNAcZd05IsDc8ZI1kmHH9NaFKNaSphcXW4J/s0/4-small.jpeg'/> 
    </a> 
    </li> 
    <li> 
    <a class='listab' href='#feature-16'> 
    <img alt='' class='boximage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyApYcBiyNXkgR0HmvzVg7rfc_0TtAEj89HnewfqT_Fgtyh-d69XnKGkLgOzV6Dee2YAtqTI9zz7foAKJSaITXJs63X9wgb1P0HnOd8OZuUJNv63jV4bvRJ09tLOmoABGl8EI3oEaMQf_0/s0/5-small.jpeg'/> 
    </a> 
    </li> 
    </ul> 
    </div> 
    </div> 
    <!-- Featured Content Slider End --> "
    ==========================================
         7. Paste code JavaScript di atas, di bawah code  "<div id='main-wrapper'>"

    Lakukan pratinjau untuk melihat  hasilnya. Kalau suka, kembali ke Edit HTML lalu klik "Simpan Template"
    Selesai.

    Keterangan

    Code JavaScript yg berwarna merah ganti dengan alamat gambar kalian

    Tag :

    0 komentar

    Silakan isi Komentar sobat
    dan gunakan kata-kata yang sopan.
    Jangan nyepam ya n_n

    • Langganan: Posting Komentar (Atom)

    Copyright © 2013 - Nisekoi - All Right Reserved

    Blog Z.r.a Powered by Blogger - Template by Johanes Djogan

    Unborn 8.0 Red Pointer