Gudang Tutorial Blog

Label dengan Thumbnail Bulat Berputar

9:40 AM

Sobat pasti sudah pernah melihatnya daftar isi sesuai label dengan thumbnail bulat berputar yang seperti contoh gambar di atas.
Penasaran cara membuatnya?
Ea deh saya share...

1. Login blogger
2. Template dan edit html
3. Letakkan kode berikut di atas ]]></b:skin>

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" dan 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 berwarna pada script ganti dengan nama label dan jumlah thumbnail yang ingin di tampilkan.
7. save dan lihat hasilnya

Silahkan dicoba, semoga bermanfaat..