Ads Banner

Membuat Daftar Posting di Beranda Dengan Navigasi

Membuat Daftar Posting di Beranda Dengan Navigasi
Membuat Daftar Posting di Beranda Dengan Navigasi

Terinspirasi dari Blog DTE (Membuat Daftar Posting Dengan Navigasi) Kali ini saya mencoba untuk menerapkannya di Halaman Beranda seperti di Blog ini. Dengan teknik ini, ketika kita menggunakan/mengklik navigasi untuk melihat daftar posting lainnya (berpindah ke halaman selanjutnya) tanpa harus memuat halaman secara keseluruhan.

Cara Membuat Daftar Posting Dengan Navigasi

1. Tambahkan Kode CSS di bawah ini setelah ]]></b:skin>

#you_page {
    font:inherit;
    width:100%;
    float:left;
    margin-top:10px
}
#toc-outer {
    margin:0 -9px 0
}
.you_item {
    float:left;
    height:auto;
    overflow:hidden;
    width:47%;
    margin:3px 5px 8px;
    padding:0 3px;
    border:1px solid #292929;
    -webkit-box-shadow:inset 1px 0 #1a1a1a;
    -moz-box-shadow:inset 0 1px 0 #1a1a1a;
    box-shadow:inset 1px 1px #1a1a1a
}
.you_item h5 {
    margin:0;
    border-bottom:1px solid #1a1a1a;
    height:30px;
    overflow:hidden;
    padding:2px 6px !important
}
.you_item h5 a:hover {
    color:#e77e23
}
.you_item h5 a {
    color:#bbb
}
.you_item img {
    float:left;
    height:70px;
    width:70px;
    z-indent:99999px;
    margin:0 7px 5px 5px
}
.you_item .you_foot {
    border-top:1px solid #1a1a1a;
    padding:1px
}
.iteminside {
    height:80px;
    overflow:hidden;
    border-top:1px solid #292929;
    padding-top:5px;
    border-bottom:1px solid #292929
}
.you_item .you_foot a.itemrmore {
    display:block;
    float:right;
    color:#bbb;
    line-height:100%;
    padding:3px;
    font-size:10px
}
#itempager {
    clear:both;
    padding:10px 0
}
#you_tot {
    padding:2px
}
#you_hal, #you_tot {
    font:inherit;
    margin:10px 5px;
    text-align:left;
    padding:0
}
#you_hal span, #you_hal a {
    box-shadow:inset 1px 1px 1px #1a1a1a;
    -webkit-box-shadow:inset 1px 1px #1a1a1a;
    background:#292929;
    color:#999;
    display:inline;
    text-indent:0;
    margin:0 2px;
    padding:4px 8px;
    font-size:11px
}
#halaman span.hidden {
    display:none
}
#you_hal a:hover, #you_hal span.actual, #you_hal span a:hover {
    background:#04a30a;
    color:#fff
}
#loadingscript{
background:transparent url('data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==') no-repeat 50% 50%
}

/* Agar responsive tambahkan kode ini*/
@media screen and (max-width:636px) {
    .you_item {
        width:100%
    }
}

2. Cari Kode <b:includable id="nextprev"> kemudian tambahkan kode dibawah tepat setelah <b:includable id="nextprev">

<b:if cond="data:blog.url == data:blog.homepageUrl">
<div id="you_page">
<script  type="text/javascript">
var showPostDate   = true,
    showComments   = false,
    idMode         = true,
    sortByLabel    = true,
    labelSorter    = "Blog Tutorial",
    loadingText    = "Loading...",
    totalPostLabel = "Total Post :",
    jumpPageLabel  = "Page",
    commentsLabel  = "Comments",
    rmoreText      = "Read more ►",
    prevText       = "Prev",
    nextText       = "Next",
    siteUrl        = "http://info-kmu.blogspot.com/",
    postsperpage   = 14,
    numchars       = 145,
    imgBlank       = "https://2.bp.blogspot.com/-LQV025ltHWI/UnZSnJQN_GI/AAAAAAAAGes/gbXNGWA21LY/s320/logon.png";
</script>
<script src="https://drive.google.com/open?id=0B3p31o3sU30FQ0d2NW14OHlIOUk"></script>
</div>
</b:if>
Ganti URL http://info-kmu.blogspot.com dengan alamat blog Anda kemudian simpan.

Keterangan Konfigurasi

OpsiNilaiKeterangan
showPostDatetruefalse berarti bulan terbit artikel tidak ditampilkan, dan True sebaliknya.
false
showCommentstruefalse Berarti jumlah commentar tidak akan ditampilkan sedangkan True sebaliknya. 
false
idModetrueJika bernilai true, sistem penanggalan artikel akan menjadi berbahasa Indonesia. Jika bernilai false sistem penanggalan artikel akan berubah menjadi berbahasa Inggris.
false
sortByLabeltrueDigunakan untuk memfilter artikel/posting. Jika ingin menampilkan posting dengan kategori tertentu saja, pilihlah nilai true. Setelah itu tentukan nama label pada variabel labelSorter.
false
labelSorter"JavaScript", "Widget", ... (nama label)Tentukan nama label jika opsi sortByLabel bernilai true.
totalPostLabel"Jumlah posting:", ... (teks)Tentukan keterangan jumlah posting (yang di bawah navigasi).
jumpPageLabel"Halaman", ... (teks)Tentukan keterangan lompatan posting (yang di bawah navigasi).
commentsLabel"Komentar", "Comments", ... (teks)Digunakan untuk menentukan label jumlah komentar (contoh: 10 Komentar).
rmoreText"Baca Selengkapnya", "Read More", ... (teks)Digunakan untuk menentukan label link menuju posting asli.
prevText"Sebelumnya", "Previous", ... (teks)Digunakan untuk menentukan label navigasi mundur.
nextText"Berikutnya", "Next", ... (teks)Digunakan untuk menentukan label navigasi maju.
siteUrl(URL Blog)Ganti URL ini dengan URL blog Anda.
postsPerPage10, 30, ... (numerik)Digunakan untuk menentukan jumlah posting yang tampil pada satu halaman.
numChars100, 200, ... (numerik)Digunakan untuk menentukan jumlah karakter ringkasan posting.
imgBlankno-image.jpg (URL Gambar)Gambar cadangan jika posting yang tampil tidak memiliki gambar.

Atur Jumlah Posting Pada Beranda Menjadi Satu.
Caranya masuk ke Tata Letak, Lalu pada posting blog Klik Edit, kemudian atur menjadi 1 atau sesuai pilihan anda

Untuk tampilannya silahkan anda modifikasi sendiri kode CSSnya... coz CSS diatas adalah CSS yang saya gunakan untuk blog ini.

Source http://www.dte.web.id/2012/03/daftar-isi-blogger-dengan-navigasi.html

Print/Save

Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.!
Share This :

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar