.jpg)
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.- Login ke Blogger.
- Dasbor/Dasboard.
- Rancangan/Design atau Layout (Tata Letak) untuk New Blogger Interface.
- Page Element (Elemen Laman).
- Klik Add a Gadget.
- Pilih widget/gadget Popular Posts/Entri Populer
- Klik SAVE.
- Anda bisa cek dulu hasil penambahan widget popular posts dengan membuka halaman blog, kemudian lanjutkan kembali untuk membuat ticker popular posts dengan :
- Pilih dan klik fitur Rancangan/Design.
- Klik Edit HTML.
- Lakukan Backup Template. Buka tutorialnya di sini.
- Klik Expand Widget Template/Expand Widget Templates.
- Copy dan pastekan kode CSS di atas kode </head>.
- Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
- 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. - Di sekitar kode di atas kode lengkapnya seperti di bawah ini:
- Rubah/hapus kode di atas dan ganti dengan kode baru berikut ini:
- SAVE Templates/Simpan Template
- Klik kembali Expand Widget Template
<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><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>
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:
- 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. - Panduan cara mengaktifkan widget popular posts blogger dapat diikuti melalui link di bawah ini:
Cara Mengaktifkan Widget Popular Posts - 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 «
matur sembah nuwun mas.
BalasHapustak 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
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 {ما شاء الله}
BalasHapusMata 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 {وعليكم السلام}