Cara Membuat Daftar isi Sesuai Label dengan Thumbnail Bulat Berputar

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 

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