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 «

4 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
  3. Di dalam Islam Allah mengajarkan kepada kita bagaimana memberi yang terbaik terutama ketika tetangga Anda dalam kebutuhan keuangan, karena kami dan seluruh staf RAMADHAN ISLAMIYAT LOAN FIRM sampai pada kesimpulan bahwa kami harus menyediakan bantuan keuangan bagi mereka yang berada di keuangan kebutuhan seperti mereka yang membutuhkan dana untuk ekspansi bisnis mereka yang membutuhkan uang untuk proyek yang sangat tinggi didirikan dan kami memberikan pinjaman kepada semua saudara muslim dan saudari kita dan juga untuk non muslim seperti Mashallah {ما شاء الله}

    Mata uang kami berkisar dari {$, IDR, RM, €, £} ke mata uang lainnya dan semuanya sesuai dengan peraturan Dana Moneter Internasional {IMF} untuk transfer uang sehingga cukup untuk mengatakan bahwa kami sepenuhnya berlisensi untuk mengoperasikan dan bertransaksi bisnis dalam mata uang apa pun di dunia, silakan hubungi kami {ramadhanislamiyatloans@gmail.com}
       Apakah Anda berutang harap menghentikan kepanikan proses kami di sini sangat cepat dan cepat karena Anda dapat membayar semua hutang terutang Anda dalam waktu 48 jam setelah melamar
    RAMADHAN adalah semua tentang kekudusan sehingga kita tidak menipu atau menipu semua yang perlu Anda lakukan hanya bagi Anda untuk memiliki penghasilan stabil juga harus ada sarana di mana Anda dapat mengidentifikasi diri Anda {KTP} dan kemudian Anda harus memiliki Bank akun di mana Anda ingin kami menyimpan email uang ::::: {ramadhanislamiyatloans@gmail.com}

        Proses di sini tidak rumit, melainkan sangat cepat dan fleksibel

    Wa 'alaykum al-salaam {وعليكم السلام}

    BalasHapus

 
GR | Edited by | gubhug reyot