Membuat Daftar Isi Seperti Gallery

Membuat Daftar Isi Seperti Gallery adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Membuat Daftar Isi Seperti Gallery ini.
Daftar isi dalam dunia blogging tidaklah asing kita dengar, ada yang menyebut Sitemap Blog. Pemasangan daftar isi berupa gallery sama halnya dengan thumbnail yang dibahas sebelumnya. Akan tetapi pada tutorial ini, telah dimodifikasi dan di terapkan sentuhan-sentuhan CSS dan JavaScript yang dilengkapi jQuery yang menarik juga.

Jika anda tahu dalam menerapkannya, pastilah anda akan terkesan untuk menerapkannya dalam blog kita. Seperti yang Kang Onk pakai pada blog KOD Template tersebut.

LIVE DEMO

Tanpa panjang lebar, marilah kita ikuti bersama cara penerapannya dalam blog kita.

Langkah Pertama

Edit HTML blogger anda;
Cari kode ]]></b:skin>
Letakkan kode berikut sebelum kode diatas :

@font-face {
font-family:'Yanone Kaffeesatz';
font-style:normal;
font-weight:400;
src:local('Yanone Kaffeesatz Regular'),
local('YanoneKaffeesatz-Regular'),
url(http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v4/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff) format('woff');
}

#pio-masonry-container {
font:normal 11px Arial,Sans-Serif;
color:#666;
margin:0 auto;
}

#pio-masonry-container * {
border:none;
outline:none;
}

#pio-masonry-container .json_post {
background-color:white;
padding:20px;
margin:2px;
float:left;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5);
box-shadow:0 1px 2px rgba(0,0,0,0.5);
position:relative;
}

#pio-masonry-container .json_post h3 {
margin:0 0 10px;
padding:0 0;
font:normal 20px 'Yanone Kaffeesatz',Impact,Arial,Sans-Serif;
}

#pio-masonry-container .json_post h3 a {
text-decoration:none;
color:#3868B5;
font-weight:normal;
}

#pio-masonry-container .json_post .json_sub-header {
display:block;
margin:0 0 10px;
border-top:1px solid #ccc;
padding-top:10px;
color:#627E83;
}

#pio-masonry-container .json_post a.json_img-container {
display:block;
border:1px solid #ccc;
background-color:#fafafa;
padding:1%;
font-size:0;
}

#pio-masonry-container .json_post img {
margin:0 0;
padding:0 0;
width:100%;
height:auto;
display:block;
outline:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
opacity:0;
}

#pio-masonry-container .json_post p {
margin:10px 0 0;
padding:0;
word-wrap:break-word;
overflow:hidden;
}

#pio-masonry-container .json_post .json_post-footer {
text-align:left;
display:block;
margin-top:10px;
border-top:1px solid #ccc;
padding-top:10px;
overflow:hidden;
font-weight:bold;
}

#pio-masonry-container a.json_more {
display:block;
background-color:#3868B5;
color:white;
padding:0;
width:30px;
height:30px;
line-height:30px;
text-align:center;
text-decoration:none;
position:absolute;
bottom:0;
right:0;
font-size:14px;
font-weight:bold;
}

#pio-masonry-container a.json_more:hover {
background-color:#214889;
color:white;
}

#pio-masonry-container h3 a:hover {
color:#214889;
}

.clear {
clear:both;
}

#json_loading {
display:block;
width:120px;
position:fixed !important;
position:absolute;
text-align:center;
font:bold 11px/24px Arial,Sans-Serif;
color:white;
background-color:#36AA4A;
top:0;
left:50%;
margin-left:-60px;
z-index:999;
-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.4);
box-shadow:inset 0 -1px 0 rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.4);
text-shadow:0 -1px 0 rgba(0,0,0,0.4);
-webkit-border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
border-radius:0 0 4px 4px;
}

#json_loading.loaded {background-color:#900;}

#pio-masonry-container .json_post.json_thumbnail-mode.loading,
#pio-masonry-container .json_post.json_summary-mode a.loading {
background:white url('data:image/gif;base64,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') no-repeat 50% 50% !important;
padding:0 0;
}

#pio-masonry-container .json-post.json_summary-mode a.loading img {
background-color:transparent !important;
}

/* Thumbnail Mode */
#pio-masonry-container .json_post.json_thumbnail-mode {
padding:0 0;
line-height:0;
border:2px solid white;
width:50px;
height:50px;
overflow:hidden;
}

#pio-masonry-container .json_post.json_thumbnail-mode img {
border:none;
margin:0;
padding:0;
width:auto;
height:auto !important;
}

#pio-masonry-container .json_post.json_thumbnail-mode figcaption {
position:absolute;
right:0;
bottom:0;
left:0;
background-color:rgba(0,0,0,0.9);
line-height:100%;
padding:5px 7px;
overflow:hidden;
word-wrap:break-word;
display:none;
}

#pio-masonry-container .json_post.json_thumbnail-mode figcaption span {
font-size:10px;
}

#pio-masonry-container .json_post.json_thumbnail-mode strong.json_caption {
display:block;
padding:5px 5px 7px;
border-bottom:1px solid #222;
margin:0 0 4px;
}

#pio-masonry-container .json_post.json_thumbnail-mode strong.json_caption a {
color:#CFDBEC;
text-decoration:none;
}

#pio-masonry-container .json_post.json_thumbnail-mode strong.json_caption a:hover {
color:white;
}

#pio-masonry-container .json_post.json_thumbnail-mode .json_post-date {
float:left;
}

#pio-masonry-container .json_post.json_thumbnail-mode .json_comment {
float:right;
}

#pio-masonry-nav {
text-align:center;
font:normal 14px 'Yanone Kaffeesatz',Times,Serif;
margin:15px 0 30px;
display:none;
}

#pio-masonry-nav a,
#pio-masonry-nav #json_total-posts {
background-color:#012;
padding:4px 7px;
color:#DBE1F2;
text-decoration:none;
text-shadow:0 1px 0 rgba(0,0,0,0.7);
}

#pio-masonry-nav a:link {
background-image:-webkit-linear-gradient(top,#234,#012);
background-image:-moz-linear-gradient(top,#234,#012);
background-image:-ms-linear-gradient(top,#234,#012);
background-image:-o-linear-gradient(top,#234,#012);
background-image:linear-gradient(top,#234,#012);
}

#pio-masonry-nav a:hover {
color:white;
}

#pio-masonry-nav a:active {
background-image:none;
background-color:black;
}

#pio-masonry-nav #json_total-posts {
background-image:-webkit-linear-gradient(top,#012,#234);
background-image:-moz-linear-gradient(top,#012,#234);
background-image:-ms-linear-gradient(top,#012,#234);
background-image:-o-linear-gradient(top,#012,#234);
background-image:linear-gradient(top,#012,#234);
-webkit-box-shadow:inset 4px 0 2px -2px #012,inset -4px 0 2px -2px #012;
-moz-box-shadow:inset 4px 0 2px -2px #012,inset -4px 0 2px -2px #012;
box-shadow:inset 4px 0 2px -2px #012,inset -4px 0 2px -2px #012;
}

/**** Transitions ****/
.masonry.css-transition,
.masonry.css-transition .masonry-brick {
-webkit-transition-duration:0.7s;
-moz-transition-duration:0.7s;
-o-transition-duration:0.7s;
transition-duration:0.7s;
}

.masonry.css-transition {
-webkit-transition-property:height,width;
-moz-transition-property:height,width;
-o-transition-property:height,width;
transition-property:height,width;
}

.masonry.css-transition .masonry-brick {
-webkit-transition-property:left,right,top;
-moz-transition-property:left,right,top;
-o-transition-property:left,right,top;
transition-property:left,right,top;
}

Cari kode </head>
Copy paste kode dibawah ini sebelum kode diatas :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://zonaku.googlecode.com/files/jquery.masonry.js' type='text/javascript'/>

Simpan Template.

Langkah Kedua

Tambahkan halaman page atau postingan dan terapkan kode berikut :

<div id="pio-masonry-container">
<span id="json_loading">Please wait...</span></div>
<div id="pio-masonry-nav">
<a id="json_prev-nav">Previous</a><span id="json_total-posts">Page # of #</span><a id="json_next-nav">Next</a>
</div>
<script type="text/javascript">
//<![CDATA[
// JSON...
var viewMode         = "summary", // Widget mode ? "summary" : "thumbnail"
    jm_homePage      = "http://kang-fathur.blogspot.com",
    numposts         = 20,
    numchars         = 270,
    showThumbnails   = true,
    squareImage      = false,
    newTabLink       = false,
    jm_columnWidth   = 200,
    jm_subHeaderText = ["Posted by", "at"],
    jm_monthNames    = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    jm_commentLabel = "",
    jm_postCategory = null,
    jm_fallbackThumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEX__gTEO0TgSUQ1JsV2qYclf9-qi8zsc-LFNHMfVcK7dDISrfz3uoltSI0wHSpCAhDV_KgCROJUS6cJun7JuD427WLmyIJe42TVyvBK1osJcvRpD94yVyPdOwrktldU9nPzzA7XhSAmCS/s320/profile_blogger.jpg",
    jm_loadedText    = "Loaded.";

// MASONRY...
var $jm_container    = $('#pio-masonry-container'),
    $jm_itemSelector = '.json_post',
    $jm_nav          = $('#pio-masonry-nav'),
    $jm_prev         = $('#json_prev-nav'),
    $jm_next         = $('#json_next-nav'),
    $jm_totalPosts   = $('#json_total-posts'),

    jm_fadeSpeed   = 400,
    jm_resizeSpeed = 1000,
    jm_isAnimated = true,
    jm_animateWithTransition = false,
    jm_animationOptions = {
        queue: false,
        duration: 600,
        easing: null
    }
    jm_isFitWidth = true,
    jm_gutterWidth = 0,
    jm_isRTL       = false;
//]]>
</script>
<script src="http://zonaku.googlecode.com/files/post.brick.js" type="text/javascript"></script>

Simpan dan lihat hasilnya.

Semoga anda berhasil. Amin Allahumma Amin.

source : hompimpa

SELENGKAPNYA atau SEPENUHNYA

Sistem Komputer

Sitemap 1 2 3 4 5

Sistem Komputer

Friends