Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog

Hai agan-agan semua...
bertemu lagi dengan saya anak gokil yang selalu membagi ilmu bagai kalian yang membutuhkannya...!!
Dalam posting saya kali ini adalah Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog. Dengan menggunakan Script CSS, agan-agan semua bisa merubah scroll di blog dengan tampilan yang sangat menarik dan mengesankan...
Langkah-langkahnya bisa agan baca dibawah ini :

1. Buka akun blog agan > Rancangan > Edit HTML
2. Cari kode ]]></b:skin> dengan menekan Ctrl+F (supaya cepat menyarinya)
3. Lalu Copas kode berikut diatas kode ]]></b:skin>

::-webkit-scrollbar {height:12px;width: 12px;background: #00A000;}
::-webkit-scrollbar-thumb {background-color: #A52A2A;-moz-border-radius: 10px;border-radius: 10px;} - See more at: http://blogharun26.blogspot.com/2013/07/cara-mengganti-tampilan-scroll-bar.html#sthash.EupbFnEZ.dpuf

Itu adalah cara mengganti scroll bar di blog.. semoga bermanfaat bagi agan-agan semua

cara membuat widget popular post bergerak

cara membuat widget popular post bergerak

widget popular post adalah untuk menampilkan artikel yang sering dibaca sobat blogger pasti sudah tau semua kan ..he..hee.
Nah kali ini bagi sobat bloger yang ingin modif widget populer postnya supaya bisa  bergerak naik turun cukup mudah dan untuk menseting widget ini masuk di dasbord tata letak entri populer nah disitu anda bisa mensetting sesuai degan selera anda misalnya ingin menampilkan dengan tumbnail dan dan juga cuplikan semua tergantung keinginan sobat seperti ini gambarnya:


nah sedangkan untuk langkah langkah membuat Entri Populer supaya bisa bergerak naik turun sebagai berikut:

• Logi ke dasbord
• Pilih Rancangan Tambahkan Gedget Entri Populer atau Populer Post kalau sobat belum pasang tapi kalau anda sudah pasang lewati aja
• Tambahkan Gedget lagi HTML Java Script
• Lalu copy code dibawah ini di HTML Java Script
• Dan  langkah terahir simpan

<style type="text/css" media="screen">


#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:280px;
    
}


#PopularPosts1 ul {
width:342px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}


#PopularPosts1 li {
 width:334px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}


#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}


#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}


#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}


#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}


#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}


#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;    
}


#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}


.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}


a img {
    border: 0;
}


-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://camporbawor.googlecode.com/files/popularpost2.js" type="text/javascript"></script>

sumber : http://aly-ahmad.blogspot.com

cara membuat popular post bergerak keatas

Sebenarnya cara membuat popular post memang sudah ada dan disediakan oleh blogger sendiri, namun masih kurang maknyos, karena bentuk dan motidnya yang biasa-biasa saja, tidak bisa bergerak naik turun :). disini kita akan mengulas tentang cara membuat popular post bergerak. ayo kita simak dengan seksama.

Berikut langkah-langkah atau cara membuat popular post bergerak keatas

1. Login ke blog dulu, kemudian anda masuk ke DESAIN --> TATA LETAK


2. Sudah! kemudian tambah widget = klik gadget
3. Pilih entri popular, centang semua kotak
4. Simpan/SAVE

Apabila Gadget sudah terpasang kemudian klik Desain-Template yang posisinya dibawah Tata Letak. Kemudian klik Edit HTML, jangan lupa centang Expand widget.

Setelah langkah diatas, kemudian selanjutnya Cara membuat popular post bergerak pada blogspot adalah dengan mencari kode berikut:

Sobat Cari kode berikut:

<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>

Sudah ketemu, kemudian letakkan kode berikut setelah kode diatas.

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

Setelah itu cari dibawahnya lagi kode </ul>, dan masukan kode dibawah ini tepat sebelum/diatas kode </ul> tersebut.

</marquee>

LIHAT HASIL PERPADUAN KODENYA, 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>

Kalau anda menggantikan tinggi gadget, silakan anda gantikan kode warna hijau diatas. Silakan anda ber expressi, semoga berhasil. Untuk selanjutnya silakan kita diskusi dibawah ini.

Cara Membuat Efek Bubble di Blog

Hallo sahabat combate semua. Sudah baca-baca artikel yang menarik di blog ini belum..? jika sahabat combate semua ingin membaca artikel menarik di blog ini, sahabat tinggal klik DISINI atau DISANA atau DISITU….!! Heee klik aja salah satunya entar pada nuju kehalaman yang bener koo.

Tidak banyak basa-basi,, untuk posting saya kali ini adalah “Cara Membuat Efek Bubble di Blog”. Saya mempostingkan hal ini supaya blog kalian semua menjadi

tampil lebih keren dan disukai banyak pengunjung. Langsung aja ke tutorialnya:

1.Masuk dulu kea kun blog.
2.Lalu masuk ke bagin Tata letak
4.jika sudah tinggal tambahkan gadget
5.Lalu pilih HTML/Javascript.
6.Copas kode dibawah ini tepat di dalam HTML/Javascript

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}


function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

// ]]>
</script>

Keterangan : kode yang berwarna merah yaitu warna Bubble.

Sedangkan kode yang berwarna Biru yaitu Jumlah bubble yang akan ditampilkan.

4.Lalu simpan dan lihatlah hasilnya.

Blog kalian pasti jadi cool deh and banyak yang menyukainya, bahkan temen kalian yang mempunyai blog pasti bakalan iri deh melihat blog sahabat yang begitu keren dengan tambahan Gadget ini.

Jangan lupa like Fans Page saya oke supaya saya lebih rajin untuk beragi ilmu kepada sahabat combate semua. Dan jika sahabat mau baca artikel menarik lainnya. Sahabat tinggal klik DISINI.