Membuat Daftar Posting di Halaman Statis Blogger

Berbagai hal bisa kita tuliskan sebagai posting di halaman statis blogger yang berjumlah 20 halaman (maksimal). Judul (title) posting dihalaman statis nantinya ditampilkan sebagai link menu yang letaknya bisa kita pilih antara sidebar dan di atas halaman posting (di bawah header). Karena terbatasnya lebar, baik di bawah header ataupun sidebar, sebaiknya title halaman statis dibuat sependek mungkin. Title yang pendek nantinya bisa diperjelas melalui deskripsi di halaman statis tersebut.

Mengisi halaman statis blogger dengan daftar berbagai posting yang telah kita buat juga menjadi salah satu hal yang akan sangat bermanfaat. Halaman statis membuat kita bisa lebih memaksimalkan tampilan daftar posting tersebut karena halaman yang cukup luas. Beberapa kode CSS dan xHTML mungkin akan dapat membantu hingga daftar posting dapat dibuat lebih tertata rapi. Di bawah ini telah tersedia kode CSS dan xHTML yang mungkin sampeyan butuhkan. Untuk lebih memaksimalkan hasilnya atau mungkin juga untuk penyesuaian dengan halaman blog silahkan lakukan beberapa modisikasi melalui perubahan pada kode CSS atu xHTML. O ... ya ... kita telah sediakan dalam dua bentuk box. Box besar digunakan apababila daftar posting dibuat dalam ukuran selebar halaman posting dan kode css dan xHTML ke-2 membagi halaman posting menjadi 2 kolom hingga mampu memuat 2 box daftar posting di kanan dan kiri.



Kode CSS Daftar Posting Box Besar
.boks-daftar-posting-1{
     width:95%; /* by: http://gubhugreyot.blogspot.com */ 
     background:#fff;
     border:2px solid #555;
     margin:20px auto;
     padding:20px 15px;
     border-radius:6px;
}
.boks-daftar-posting-1 h3{
     font-size:18px;
     text-align:left;
     margin:10px 0 10px 20px;
}
.daftar-posting-1{
     max-height:500px;
     overflow:auto;
     border:1px solid #888;
     box-shadow:0 0 10px #333;
     border-radius:4px;
}
.daftar-posting-1 ul{
     display:inline-block;
     list-style:none;
     margin:20px 0;
     padding:0 25px;
}
.daftar-posting-1 li{
     list-style:circle;
     width:1000px;
     line-height:18px;
}
.daftar-posting-1 li a{
     font-size:12px;
     font-weight:bold;
     font-family:Tahoma, Arial, Helvetica;
     color:#111;
     text-decoration:none;
     transition:1s;
     -o-transition:1s;
     -moz-transition:1s;
     -webki-transition:1s;
}
.daftar-posting-1 li a:hover{
     color:red; /* by: http://gubhugreyot.blogdetik.com */ 
     text-shadow:1px 1px 1px #000;
}
.clear{clear:both;margin:0;padding:0;width:0;}

xHTML Daftar Posting Box Besar

<div class="boks-daftar-posting-1">
        <h3>Panduan Blogger</h3>
    <div class="daftar-posting-1">
        <ul>
            <li><a href="panduan-blogger-1.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-1</a></li>
            <li><a href="panduan-blogger-2.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-2</a></li>
            <li><a href="panduan-blogger-3.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-3</a></li>
            <li><a href="panduan-blogger-4.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-4</a></li>
            <li><a href="panduan-blogger-5.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-5</a></li>
            <li><a href="panduan-blogger-javascript-jQuery-kode-CSS-dan-kode-html-1.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger Javascript, jQuery, kode CSS dan kode HTML-1</a></li>
            <li><a href="panduan-blogger-6.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-6</a></li>
            <li><a href="panduan-blogger-7.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-7</a></li>
            <li><a href="panduan-blogger-8.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-8</a></li>
            <li><a href="panduan-blogger-9.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-9</a></li>
            <li><a href="panduan-blogger-10.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-10</a></li>
            <li><a href="panduan-blogger-11.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-11</a></li>
            <li><a href="panduan-blogger-12.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-12</a></li>
            <li><a href="panduan-blogger-13.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-13</a></li>
            <li><a href="panduan-blogger-14.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-14</a></li>
            <li><a href="panduan-blogger-15.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-15</a></li>
            <li><a href="panduan-blogger-javascript-jQuery-kode-CSS-dan-kode-html-2.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger Javascript, jQuery, kode CSS dan kode HTML-2</a></li>
            <li><a href="panduan-blogger-16.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-16</a></li>
            <li><a href="panduan-blogger-17.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-17</a></li>
            <li><a href="panduan-blogger-18.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-18</a></li>
            <li><a href="panduan-blogger-19.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-19</a></li>
            <li><a href="panduan-blogger-20.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-20</a></li>
            <li><a href="panduan-blogger-21.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-21</a></li>
            <li><a href="panduan-blogger-22.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-22</a></li>
            <li><a href="panduan-blogger-23.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-23</a></li>
            <li><a href="panduan-blogger-24.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-24</a></li>
            <li><a href="panduan-blogger-25.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-25</a></li>
         </ul>
    </div>
</div>

Kode CSS Daftar posting Box Kecil
.boks-daftar-posting-2{
     width:45%; /* by: http://gubhugreyot.blogspot.com */ 
     background:#fff;
     border:2px solid #555;
     padding:10px;
     border-radius:6px;
}
.boks-daftar-posting-2 h3{
     font-size:18px;
     text-align:left;
     margin:10px 0 15px 10px;
}
.daftar-posting-2{
     max-height:500px;
     overflow:auto;
     border:1px solid #888;
     box-shadow:0 0 10px #333;
     border-radius:4px;
}
.daftar-posting-2 ul{
     display:inline-block;
     list-style:none;
     margin:20px 0;
     padding:0 25px;
}
.daftar-posting-2 li{
     list-style:circle;
     width:1000px;
     line-height:18px;
}
.daftar-posting-2 li a{
     font-size:12px;
     font-weight:bold;
     font-family:Tahoma, Arial, Helvetica;
     color:#111; /* by: http://gubhugreyot.blogdetik.com */ 
     text-decoration:none;
     transition:1s;
     -o-transition:1s;
     -moz-transition:1s;
     -webki-transition:1s;
}
.daftar-posting-2 li a:hover{
     color:red;
     text-shadow:1px 1px 1px #000;
}
.clear{clear:both;margin:0;padding:0;width:0;}

xHTML Daftar posting Box Kecil
<div class="boks-daftar-posting-2" style="float:left;">
            <h3>Panduan Blogger</h3>
    <div class="daftar-posting-2">
        <ul>
            <li><a href="panduan-blogger-1.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-1</a></li>
            <li><a href="panduan-blogger-2.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-2</a></li>
            <li><a href="panduan-blogger-3.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-3</a></li>
            <li><a href="panduan-blogger-4.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-4</a></li>
            <li><a href="panduan-blogger-5.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-5</a></li>
            <li><a href="panduan-blogger-javascript-jQuery-kode-CSS-dan-kode-html.html" target="_blank">Panduan Blogger Javascript, jQuery, kode CSS dan kode HTML</a></li>
            <li><a href="panduan-blogger-6.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-6</a></li>
            <li><a href="panduan-blogger-7.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-7</a></li>
            <li><a href="panduan-blogger-8.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-8</a></li>
            <li><a href="panduan-blogger-9.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-9</a></li>
            <li><a href="panduan-blogger-10.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-10</a></li>
            <li><a href="panduan-blogger-11.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-11</a></li>
            <li><a href="panduan-blogger-12.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-12</a></li>
            <li><a href="panduan-blogger-13.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-13</a></li>
            <li><a href="panduan-blogger-14.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-14</a></li>
            <li><a href="panduan-blogger-15.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-15</a></li>
        </ul>
    </div>
</div>


<div class="boks-daftar-posting-2" style="float:right;">
            <h3>Tutorial Blogger</h3>
    <div class="daftar-posting-2">
        <ul>
            <li><a href="tutorial-blogger-1.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-1</a></li>
            <li><a href="tutorial-blogger-2.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-2</a></li>
            <li><a href="tutorial-blogger-3.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-3</a></li>
            <li><a href="tutorial-blogger-4.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-4</a></li>
            <li><a href="tutorial-blogger-5.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-5</a></li>
            <li><a href="tutorial-blogger-6.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-6</a></li>
            <li><a href="tutorial-blogger-7.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-7</a></li>
            <li><a href="tutorial-blogger-8.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-8</a></li>
            <li><a href="tutorial-blogger-9.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-9</a></li>
            <li><a href="tutorial-blogger-10.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-10</a></li>
            <li><a href="tutorial-blogger-11.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-11</a></li>
            <li><a href="tutorial-blogger-12.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-12</a></li>
            <li><a href="tutorial-blogger-13.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-13</a></li>
            <li><a href="tutorial-blogger-14.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-14</a></li>
            <li><a href="tutorial-blogger-15.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-15</a></li>
            <li><a href="tutorial-blogger-16.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-16</a></li>
        </ul>
    </div>
</div>

<div class="clear"></div>

Cara Menggunakan Kode Daftar Posting
  • Login ke Blogger
  • Halaman Dasbor (Dasboard)
  • Klik Rancangan (Design)
  • Klik Edit HTML
  • Cari kode ]]></b:skin>
  • Letakkan kode CSS tepat di atas kode ]]></b:skin>
  • Klik Save Template
  • Buat Daftar Posting di halaman statis sesuai contoh xHTML
  • Beri Judul yang singkat (misalnya : Daftar Posting)
  • Terbitkan posting
  • Buka halaman blog kemudian KLIK Link Menu Daftar Posting (jika sama dengan contoh!)

Catatan/Keterangan
  • Ke dua kode CSS dan xHTML dapat digunakan secara terpisah (hanya box besar atau box kecil).
  • Ke dua kode (box) dapat digunakan secara bersamaan.
  • max-height:500px; berfungsi untuk membatasi tinggi box. Rubah nilainya jika dikehendaki, dimana semakin besar nilainya maka semakin tinggi.
  • Ini yang sangat penting: Jika anda menggunakan kode yang ke-2 (box kecil), perhatikan pada akhir xhtml box pertama (berwarna merah) dan awal xHTML box kedua (berwarna merah). Agar kedua box di kiri dan kanan dalam posisi sejajar maka kode xHTML akhir box pertama dan xHTML box kedua harus dubuat rapat!
  • Bukalah menu Sprecial Tutorials yang terletak di deret menu sebelah kiri jika membutuhkan beberapa panduan penting tentang cara menyimpan kode CSS, javascript dan xHTML serta cara cepat mencari kode HTML dengan Ctrl + F.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :



» Happy Blogging - gubhugreyot «

Comments

Post a Comment