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'>5. Save template
//<![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>
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..
Comments
Post a Comment