Cara Midamel Daptar Posting di Halaman Statis Blogger

Sagala rupa perkawis tiasa urang tuliskeun minangka posting di halaman statis blogger anu berjumlah 20 halaman (maksimal). Judul (title) posting dihalaman statis engkena dipidangkeun minangka link menu anu tempatna tiasa urang pilih antawis sidebar sarta di luhur halaman posting (handap header). Margi kawates na rubak,sae handap header ataupun sidebar,sasaena title halaman statis didamel sependek manawi. Title anu pondok engkena tiasa diperjelas ngaliwatan deskripsi di halaman statis.

Ngeusian halaman statis blogger kalawan daptar sagala rupa posting anu atos urang kanggo oge barobah kaayaan salah sahiji perkawis anu bade mere mangpaat pisan. Halaman statis midamel urang tiasa langkung memaksimalkeun tampilan daptar posting kasebat margi halaman anu cekap lega. Sababaraha kode CSS sarta xhtml manawi bakalan ngabantuan dugi daptar posting tiasa didamel langkung tertata rapih. handap ieu atos sadia kode CSS sarta xhtml anu manawi sampeyan butuhkan. Kanggo langkung memaksimalkeun hasilna atawa manawi oge kanggo penyesuaian kalawan halaman blog mangga pigawe sababaraha modisikasi ngaliwatan parobahan dina kode CSS atu xhtml. O ... nya ... urang atos diakeun dina dua wangun box. Box ageung dipake apababila daptar posting didamel dina ukuran selebar halaman posting sarta kode css sarta xhtml ka-2 ngabagi halaman posting barobah kaayaan 2 lajur dugi sanggem memuat 2 box daptar posting di katuhu sarta kenca.

Kode CSS Daftar Posting Box Badag

.wadah-menu-posting-1{
     width:95%; /* by: http://mitrabewarasunda.blogspot.com */ 
     background:#fff;
     border:2px solid #555;
     margin:20px auto;
     padding:20px 15px;
     border-radius:6px;
}
.wadah-menu-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://mitrabewarasunda.blogspot.com */ 
     text-shadow:1px 1px 1px #000;
}
.clear{clear:both;margin:0;padding:0;width:0;}

xHTML Daftar Posting Wadah Badag

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

Kode CSS Daftar posting Wadah Kecil 

.wadah-menu-posting-2{
     width:45%; /* by: http://mitrabewarasunda.blogspot.com */ 
     background:#fff;
     border:2px solid #555;
     padding:10px;
     border-radius:6px;
}
.wadah-menu-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://mitrabewarasunda.blogspot.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 Wadah Leutik 

<div class="wadah-menu-posting-2" style="float:left;">
            <h3>Diajar blogger</h3>
    <div class="daftar-posting-2">
        <ul>
            <li><a href="diajar-blogger-1.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-1</a></li>
            <li><a href="diajar-blogger-2.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-2</a></li>
            <li><a href="diajar-blogger-3.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-3</a></li>
            <li><a href="diajar-blogger-4.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-4</a></li>
            <li><a href="diajar-blogger-5.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-5</a></li>
            <li><a href="diajar-blogger-javascript-jQuery-kode-CSS-dan-kode-html.html" target="_blank">Diajar blogger Javascript, jQuery, kode CSS dan kode HTML</a></li>
            <li><a href="diajar-blogger-6.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-6</a></li>
            <li><a href="diajar-blogger-7.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-7</a></li>
            <li><a href="diajar-blogger-8.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-8</a></li>
            <li><a href="diajar-blogger-9.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-9</a></li>
            <li><a href="diajar-blogger-10.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-10</a></li>
            <li><a href="diajar-blogger-11.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-11</a></li>
            <li><a href="diajar-blogger-12.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-12</a></li>
            <li><a href="diajar-blogger-13.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-13</a></li>
            <li><a href="diajar-blogger-14.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-14</a></li>
            <li><a href="diajar-blogger-15.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-15</a></li>
        </ul>
    </div>
</div>


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

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

Cara Ngagunakeun Kode Daptar Posting


Catetan/Katerangan

• Ka dua kode CSS sarta xhtml tiasa dipake sacara terpisah (ngan box ageung atawa box alit).
• Ka dua kode (box) tiasa dipake sacara babarengan.
• max-height:500px; boga fungsi kanggo ngabatesan luhur box. Robih nilaina lamun dipikaresep , beuki ageung nilaina mangka beuki luhur.
• Iyeu anu penting: Lamun anjeun ngagunakeun kode anu ka-2 (box alit),perhatikan dina ahir xhtml box kahiji (warnana beureum) jeung awal xHTML box kadua (warnana beureum). Supados kadua box di kenca sarta katuhu dina posisi sajajar mangka kode xhtml ahir box kahiji sarta xhtml box kadua kedah disusun rapet!

Mangga oge buka Anu Lucu sejen nu narik pisan sarta pantes di turutan kabeh. Akses ngaliwatan link handap ieu :

» Happy Blogging - mitrabewarasunda «