Membuat Popular Posts Berputar Keatas

ass smuanya...

ga bnyak basa basi Langsung aja dech

Untuk membuat popular posts bergerak berputar keatas, saya sarankan untuk membuat back up template terlebih dahulu untuk menghindari kesalahan dalam penambahan kode pada template, tahap membuatnya sebagai berikut :

1. Masuk akun Blogger - Design/Rancangan - Add Gadget dan pilih Popular Posts seperti gambar dibawah ini, jika dalam blog kalian sudah terpasang widget popular posts tidak perlu menambahkan widget ini, kalian lewati saja cara no. 1.

2. Kemudian masuk ke bagian Edit HTML
3. Ceklist pada bagian Expand Widget Templates
4. Cari kode <div class='widget-content popular-posts'> 
<ul>
dan simpan kode marquee dibawah ini pada bagian bawah kode tersebut

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>

5. Selanjutnya cari kode </b:loop> dan tambahkan kode </marquee> dibawah kode </b:loop>

Sehingga secara keseluruhan kodenya menjadi seperti dibawah ini :

<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>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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 == &quot;false&quot;'>
<!-- (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 class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>

6. Save template, dan buka blog kalian untuk melihat hasilnya.

sekian dan terima kasih

wassalam

»»  READMORE ==>>

Cara memasang screen sever pada blog dngan gambar yang kita inginkan

Screen saver ini sama halnya dengan yang ada di layar komputer, ketika tidak ada aktivitas pada komputer tersebut dalam beberapa saat maka komputer akan berubah menjadi modus siaga yaitu mengeluarkan animasi, gambar, atau apa saja sesuai settingan si penggunanya.

Dari info yang saya tahu screen saver tersebut bisa digunakan menjadi salah satu langkah untuk penghematan energi listrik yang digunakan, oleh karena itu screen saver yang di pasang pada ruki-zone ini dominan hitam, karena warna hitam pada layar monitor di sinyalir bisa menghemat energi.

Berikut langkah pemasangan screen saver untuk blog yang dimaksudkan.

Setelah sobat masuk ke akun blogger sobat masing-masing silahkan sobat copykan kode di bawah ini kedalam form HTML/Java Script pada Add a Gadget.

<script type="text/javascript" src="http://ruki-zone.googlecode.com/files/www.ruki-zone.com-screensaver.js"></script>
<style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(http://photoserver.ws/images/VDRg4f2c117fa884e.jpg) no-repeat center center fixed black; }
div#energysaving p span {display:none;visibility:hidden;}
</style>

Untuk gambar yang akan di tampilkan pada saat screen saver muncul bisa sobat ubah dengan mengganti tulisan yang berwarna ungu dengan url gambar yang sobat inginkan.

Semoga tips n trik blogging kali ini bisa memberikan manfaat untuk kita semua.

Wassalam.

sumber

»»  READMORE ==>>

Memasang scroll otomatis pada widget blog archive

Assalamu'alaikum Wr. Wb.

Apa kabar sobat semuanya pada pagi hari ini.. :D (masih pagi atau sudah siang sekarang ya.. Hehe)

Oya sobat, pada pagi hari ini saya akan menambah koleksi Tips n Trik Blogging lagi nih sobat, yaitu Cara Memasang Scroll Pada Widget Arsip Blog. Setelah beberapa hari yang lalu ruki-zone membuat postingan tentang Membuat Breadcrumb Pada Blog yang di request oleh sobat kita Densasta.

Oke, kita langsung saja ya sobat.

Pertama yang harus sobat lakukan adalah mengaktifkan widget Arsip Blog dan kemudian silahkan sobat buka "Edit HTML" dan cari kata "BlogArchive" pada template sobat tersebut (gunakan CTRL + F).

Setelah ketemu, sisipkan kode yang berwarna merah dibawah ini pada rangkaian kode widget arsip blog pada template sobat tersebut. Kode lengkapnya seperti di bawah ini.

Klik show untuk melihat

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

Untuk mengatur tinggi scroll silahkan sobat sesuaikan dengan mengatur angka yang warna ungu di atas.

Setelah dirasa pas, silahkan sobat simpan hasil editan sobat tadi dan silahkan di lihat hasilnya.

Bagaimana sobat, cukup mudahkan cara memasang scroll tersebut.

Selamat Mencoba ya sobat.. :D

Wassalam..

sumber

»»  READMORE ==>>

Cara Membuat Widget Follow Us twitter Fcabook Melayang di Blog/Blogspot

Konsep widget ini yaitu memberikan styling CSS: fixed position dan scrolling display pada link gambar untuk memberikan efek melayang.


Cara membuat/memasang twitter follow us/facebook page:
1. Masuk ke dashboard > Design > Klik Add a Gadget
2. Setelah pop up window muncul, pilih HTML/JavaScript


3. kemudian copy code berikut

untuk twitter

<br/><a style="display:scroll;position:fixed;bottom:200px;left:1px;" href="http://twitter.com/twitter_kamu target="_blank"><img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimskctxFIk7-JtbYYmH5Ps2xGUhpYiFvDhiRtS8aNsCGR1jyP9wgkzAXHe4u_79RuVjD-dGCxFnL9wuoJI0XG2YzIxypbTubOLEzCQZupSvMw0Ii2Uw94E8qM2vBIbF9eVNEjo7sladNE7/s1600/floatingtwitter.png" /></a>

untuk Facebook

<br><a style="display:scroll;position:fixed;bottom:350px;left:1px;" href="http://facebook.com/facebook_kamu target="_blank"><img style="display:scroll;position:fixed;bottom:320px;left:1px;" src="http://uptmadiun.com/wp-content/uploads/2011/04/facebook_icon.gif" / height="86" width="33" /></a>

4. Paste kode yang sudah di edit ke kolom configure HTML/Javascript.
5. Ganti twitter_anda/facebook_anda dengan nama account Twitter/Facebook anda.
Jika anda ingin widget berada di sebelah kiri browser, ganti right dengan left.
6. Pratinjau dulu, jika berhasil klik save.
7. Refresh blog dan lihat hasilnya.
Selamat mencoba.
sumber

»»  READMORE ==>>