Search here

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

Memuat...
English
Bru masuk angin!

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

Membuat Ticker Popular Posts Blogger Widget Plugins-2 dg Javascript

Pilihan lain untuk membuat Ticker Popular Posts Blogger Plugins Widget dapat dibuat juga dengan menggunakan javascript. Tak banyak berbeda dengan ketika kita menggunakan kode html marquee hanya jika kita menggunakan javascript tag marquee tak lagi digunakan. Javascript dalam bentuk link sudah tersedia hingga jika tak mau terlalu repot bisa langsung kalian pakai. Hanya sekedar saran, jika ingin lebih aman dan lancar javascript ini bisa kalian upload di file hosting sehingga tak ada orang lain yang menggunakan link-nya. Kode CSS dalam ticker ini sudah dilengkapi dengan kode CSS yang berkaitan dengan widget popular post hingga memungkinkan ticker popular posts blogger plugin ditampilkan lebih sempurna. Jika ingin penampilan berbeda silahkan tambah dengan css lain atau bisa juga modif dibeberapa kode css yang sudah disertakan.

D E M O

Cara membuat Ticker Widget Popular Posts Blogger Plugins

Untuk membuat special ticker Popular Posts Blogger Widget Plugins ini widget Popular Posts harus diaktifkan terlebih dahulu lewat Add a Gadget.
  1. Login ke Blogger.
  2. Dasbor/Dasboard.
  3. Rancangan/Design atau Layout (Tata Letak) untuk New Blogger Interface.
  4. Page Element (Elemen Laman).
  5. Klik Add a Gadget.
  6. Pilih widget/gadget Popular Posts/Entri Populer
  7. Klik SAVE.
  8. Anda bisa cek dulu hasil penambahan widget popular posts dengan membuka halaman blog, kemudian lanjutkan kembali untuk membuat ticker popular posts dengan :
  9. Pilih dan klik fitur Rancangan/Design.
  10. Klik Edit HTML.
  11. Lakukan Backup Template. Buka tutorialnya di sini.
  12. Klik Expand Widget Template/Expand Widget Templates.
  13. Copy dan pastekan kode CSS di atas kode </head>.
  14. Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
  15. Cari kode <b:if cond='data:title'><h2><data:title/></h2></b:if>.
    Sampeyan bisa gunakan Ctrl + F untuk memudahkan mencari kode. Panduan menggunakan Ctrl + F untuk mencari kode html template bisa di baca di sini.
  16. Di sekitar kode di atas kode lengkapnya seperti di bawah ini:
  17. <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='data:showThumbnails == "false"'>
              <b:if cond='data:showSnippets == "false"'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <b:if cond='data:showSnippets == "false"'>
                <!-- (3) Show only thumbnails -->
                <div class='item-thumbnail-only'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                </div>
                <div style='clear: both;'/>
              <b:else/>
                <!-- (4) Show snippets and thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    <div style='clear:both;'/>
    
                  <div class='item-snippet'><data:post.snippet/></div>
                </div>
                <div style='clear: both;'/>
              </b:if>
            </b:if>
          </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    </b:widget>
  18. Rubah/hapus kode di atas dan ganti dengan kode baru berikut ini:
  19. <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div id='GR_popularposts' onMouseout='copyspeed=marqueespeed' onMouseover='copyspeed=pausespeed'>
    <div id='vmarquee' style='position: absolute; width: 98%;'>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='data:showThumbnails == "false"'>
              <b:if cond='data:showSnippets == "false"'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <b:if cond='data:showSnippets == "false"'>
                <!-- (3) Show only thumbnails -->
                <div class='item-thumbnail-only'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                </div>
                <div style='clear: both;'/>
              <b:else/>
                <!-- (4) Show snippets and thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    <div style='clear:both;'/>
    
                  <div class='item-snippet'><data:post.snippet/></div>
                </div>
                <div style='clear: both;'/>
              </b:if>
            </b:if>
          </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </div>
    </div>
    </b:includable>
    </b:widget>
  20. SAVE Templates/Simpan Template
  21. Klik kembali Expand Widget Template

Javascript

<script src="http://gubhugreyot-ticker-popularposts.googlecode.com/files/GR_tickerpopularposts.js" type="text/javascript"></script>

Kode CSS

.popular-posts ul{
      margin:0;
      padding:0 5px 0 5px;
}
.popular-posts li{
      margin:0;
      padding:0;
}
.popular-posts .item-thumbnail a img{
      width:70px !important;
      height:70px !important;
      border:1px solid #eee;
      padding:4px;
      background:#aaa;
      border-radius:5px;
      box-shadow:2px 2px 2px #000;
      margin:0 6px 5px 0;
}
#GR_popularposts{
 position: relative;
 width:100%;
 height:250px;
        background:#b1bfb9;
        background:-o-linear-gradient(top, #b1bfb9 0%,#efefef 100%);
        background:-moz-linear-gradient(top, #b1bfb9 0%, #efefef 100%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b1bfb9), color-stop(100%,#efefef));
        background:-webkit-linear-gradient(top, #b1bfb9 0%,#efefef 100%);
        background:-ms-linear-gradient(top, #b1bfb9 0%,#efefef 100%); 
        background:linear-gradient(top, #b1bfb9 0%,#efefef 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1bfb9', endColorstr='#efefef',GradientType=0 );
        overflow: hidden;
        border: 2px solid rgba(0,0,0,0.7);
        border-top-width:12px;
        border-bottom-width:12px;
        border-radius:6px;
        padding:10px 0;
        box-shadow:0 0 8px #444;
}

Catatan/keterangan:

  1. perhatikan Kode CSS yang seperti ini:
    .popular-posts .item-thumbnail a img
          width:70px !important;
          height:70px !important; 
          ...
          ...
    }
    Jika kolom widget terlalu sempit image pada widget popular posts bisa diperkecil dengan merubah nilai 70px menjadi 40px atau 50px.
  2. Panduan cara mengaktifkan widget popular posts blogger dapat diikuti melalui link di bawah ini:
    Cara Mengaktifkan Widget Popular Posts
  3. Demo dan kode menggunakan "New Blogger Template"

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

Update » Jemuah LEGI, January, 13, 2012

» Happy Blogging - gubhugreyot «

3 komentar:

  1. matur sembah nuwun mas.
    tak cobae. siapa tahu bisa saya.
    yah kalo sempat dolan ke blog ku,biar yang lagi belajar kecipratan pengunjunge sampean.
    tapi saya bingung dengan petunjuk yang no
    7 sama yang 8.mohon di jelasne.makasih

    BalasHapus
  2. Apakah Anda berpikir untuk mendapatkan bantuan keuangan, Apakah Anda serius membutuhkan pinjaman mendesak, apakah Anda berpikir untuk memulai bisnis Anda sendiri, Anda berada di utang, ini adalah kesempatan Anda untuk mencapai keinginan Anda karena kami memberikan pinjaman pribadi, pinjaman bisnis, dan perusahaan pinjaman, dan semua jenis pinjaman pada tingkat bunga 2%, kami menjamin semua klien berharga kami bahwa mereka akan mendapatkan semua pinjaman masing-masing dan menjadi tahun baru dengan senyum di wajah mereka.
    Untuk informasi lebih lanjut silahkan hubungi kami sekarang melalui email {} gloryloanfirm@gmail.com

    Informasi Peminjam:

    Nama lengkap: _______________
    Negara: __________________
    Sex: ______________________
    Umur: ______________________
    Jumlah Pinjaman Dibutuhkan: _______
    Durasi Pinjaman: ____________
    Tujuan pinjaman: _____________
    Nomor ponsel: ________
    Ibu Glory

    BalasHapus

 
GR | Edited by | gubhug reyot