Gudang Tutorial Blog

img.label_thumb{

float:left;

width:80px;

height:80px;

margin-left:4px;

margin-bottom:10px;

-webkit-border-radius: 210px;

-moz-border-radius: 210px;

border-radius: 50%;

text-align: center;

overflow: hidden;

-webkit-box-shadow:

inset 0 0 1px 230px rgba(0,0,0,0.6),

inset 0 0 0 3px #111111;

-moz-box-shadow:

inset 0 0 1px 230px rgba(0,0,0,0.6),

inset 0 0 0 3px #111111;

box-shadow:

inset 0 0 1px 230px rgba(0,0,0,0.6),

inset 0 0 0 3px #111111;

-webkit-transition: box-shadow 400ms ease-in-out;

-moz-transition: box-shadow 400ms ease-in-out;

-o-transition: box-shadow 400ms ease-in-out;

-ms-transition: box-shadow 400ms ease-in-out;

transition: box-shadow 400ms ease-in-out;

/*For IE < 9 so that we have some kind of effect */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

display: block;

outline: none;

-moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out; border:0

}

img.label_thumb:hover{

-webkit-box-shadow:

inset 0 0 0 0 rgba(0,0,0,0.6),

inset 0 0 0 20px #0dc3ff,

0 0 10px rgba(0,0,0,0.3);

-moz-box-shadow:

inset 0 0 0 0 rgba(0,0,0,0.6),

inset 0 0 0 20px #0dc3ff,

0 0 10px rgba(0,0,0,0.3);

box-shadow:

inset 0 0 0 0 rgba(0,0,0,0.6),

inset 0 0 0 20px #0dc3ff,

0 0 10px rgba(0,0,0,0.3);

/*For IE < 9 so that we have some kind of effect */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

-moz-transform:rotate(360deg); -o-transform:rotate(360deg); -webkit-transform:rotate(360deg); transform:rotate(360deg); border:0; }

table.game_grid {font-family: "Trebuchet MS",tahoma,arial; margin: 10px 0px 10px 0px; width: 410px; border-width: 1px 1px 0px 1px; border-style: solid; border-color: #333;}

table.game_grid td { border-bottom: 1px solid #333; padding: 2px 4px 2px 6px; }

table.game_grid td.grid_heading { letter-spacing: 1px; font-weight: bold; color: #eee; font-size: 1.1em; background-color: #0dc3ff; text-align:center; }

table.game_grid td.grid_sysreqs { letter-spacing: 1px; font-weight: bold; color: #333; font-size: 1.1em; background-color: #ccc; text-align:center; }

table.game_grid td.grid_row_title { background-color: #eee; border-right: 1px solid #333;}

4. Letakkan kode berikut di atas </head>

<script type='text/javascript'>

    //<![CDATA[

    function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}

    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}

    var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)

    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}

    else thumburl='';}

    document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');

    if(i!=(numposts-1))

    document.write('');}

    document.write('</div>');}

    //]]>

    </script>

5. Save template

6. Layout "html/javascript" dain letakkan script berikut

<script type='text/javascript'>var numposts = 8;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 70;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Tutorial%20Blog?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

 

kode kuning pada script ganti dengan nama label yang ingin di tampilkan.

7.  save dan lihat hasilnya



Silahkan dicoba, semoga bermanfaat..

Jika kita ingin mengedit judul post, link blog atau hover pada template blog,

kita harus nguprek css nya.

Kali ini saya ingin berbagi cara membuat judul post warna pelangi pada blog.



1. Tentunya login blog sobat dan menuju template edit html

2. cari kode .post h2  ,ini kode untuk judul postingan

3. Letakkan kode berikut di dalamnya

-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-image:-webkit-gradient(linear,left top,right top,from(#00C5FF),to(#FFCC00)); background-image:-webkit-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-moz-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-ms-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-o-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400);

Hasilnya ntar seperti ini

.post h2 {-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-image:-webkit-gradient(linear,left top,right top,from(#00C5FF),to(#FFCC00)); background-image:-webkit-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-moz-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-ms-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-o-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); font:18px Architects+Daughter;line-height:1.2em;margin:.25em 0 0;padding:0 0 4px;}

6. Save



Sobat dapat memodifikasi warna sesuai keingin. Pada tutorial saya kali ini hanya mencontohkan warna pelangi. Jika ada kode css lain yang lebih simple dari yang saya bikin, dapat di share melalui reply komentar.

Gimana seh cara mengubah skin winamp dengan foto atau gambar apapun yang kita pengen?

Simak yee..

1. Download SkinnerToo SE 2.4

2. Instal dan buka pilih winamp classic dan full transparent

3. Klik file dan load gambar sobat

4. Edit warna dan jika sudah manteb save di folder skin "C:\Program Files\Winamp\Skins\” dan ber-extention *.wsz."

5. Hasil punya saia






































6. selanjutnya buka winamp sobat dan klik kanan,pilih skin yang sudah di simpan tadi.

 Selamat mencoba!