TutorialBlog: Buat Pages dalam Entri

Assalamualaikum dan salam sejahtera,

Fungsi:
Bercakap tentang fungsi? Huhu.. sangat banyak. Kalau novelis blogger, bolehlah susun karangan bab tu supaya pembaca tak perlu nak 'scroll' ke bawah. Blogger tip ke, yang gemar berkongsi berpuluh-puluh tip dalam satu post. Apa-apa saja perkara yang membuatkan pembaca terpaksa 'scroll' panjang sampai lenguh! Boleh letak 'blogger contacts' A to Z. Buat entri ala-ala Wikipedia, klik je terus sampai pada perenggan yang dicari. Untuk assignment juga boleh. ye semua boleh...

Ikut langkah berikut:
1- Pergi ke Blogger Dashboard > New Post/Page
2- Kaedah ini memerlukan lebih penggunaan 'HTML' daripada 'Compose' dalam ruang entri/post.
3- Baca keseluruhan entri sebelum menggodam kod, fahamkan dulu ye. Maaf kod agak panjang, tapi mudah aje nak buat...
4- Anda disyorkan untuk tulis entri seperti biasa, panjang berjela ATAU terus dengan letak kod.
Dengar dulu eh, kalau entri tu nak letak URL, gambar, kod hiasan lain berkaitan, amat digalakkan untuk tulis entri dulu. Lepas tu baru tukar kepada mode HTML. Jangan berpatah balik dah sampai 'Publish'!

3- First thing first, Letak kod (1) di bawah sekali dalam HTML.

<script src="http://stylifyyourblog1.googlecode.com/svn/trunk/pageinpost.js" >
</script>
<script type="text/javascript"> activatables('page', ['bab-1', 'bab-2','bab-3' ]);
</script>

4- Letak kod (2) dalam Edit HTML (utk semua entri) atau di bawah post (untuk entri tertentu aje) [dalam mode HTML]

<style>
div.content11 {clear: left;padding: 1em;}
div.content11.inactive {display: none;}
ol#toc {height: 2em;list-style: none;margin: 0;padding: 0;}
ol#toc a {padding: 0px 8px 0px;margin: 1px 4px;
text-decoration: none;border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;}
ol#toc a:hover {background-color: #DBECF8;padding: 0px 8px 0px;
border:1px solid #204e73;}
ol#toc a:hover span {background-position: 100% -120px;}
ol#toc li {float: left;margin: 0 6px 0 0;}
ol#toc li a.active {background-color: #48f;
background-position: 0 -60px;color: #fff;font-weight: bold;}
ol#toc li a.active span {background-position: 100% -60px;}
ol#toc span {background: url(tabs.gif) 100% 0;display: block;
line-height: 2em;padding-right: 10px;}
</style>

 Warna merah boleh tukar kod warna hover yang lain.

5- Letak kod (3) dalam mode HTML.

<div class="content11" id="bab-1">

 Letak Kandungan Bab 1

</div>
<div class="content11" id="bab-2">

Letak Kandungan Bab 2

</div>
<div class="content11" id="bab-3">

Letak Kandungan Bab 3

</div>
<ol id="toc">
<li><a href="#bab-1">BAB 1</a></li>
<li><a href="#bab-2">BAB 2</a></li>
<li><a href="#bab-3">BAB 3</a></li>
 </ol>

Untuk meletakkan butang pada perenggan tengah a.k.a. tebuk tengah (ala-ala Wikipedia), letak sahaja kod ini:

</div>
<ol id="toc">
<li><a href="#bab-1">BAB 1</a></li>
<li><a href="#bab-2">BAB 2</a></li>
<li><a href="#bab-3">BAB 3</a></li>
 </ol>

Nota:
# - jangan buang tanda ini. Jangan tukar 'Compose mode' semasa letak kod, nanti tanda ini juga boleh hilang. Terus 'publish'!

purple -  akan dipaparkan pada URL.
              bab-1/page-1/halaman-1/dll.
              Untuk assignment: boleh tukar (Pengenalan, Sejarah Penubuhan, Kesimpulan, Rujukan dll.)
              Untuk tip, boleh tukar: tip-satu:-mengecat-rumah [ikut kreativiti masing-masing]
orange - akan dipaparkan pada butang klik dalam entri. Jadi jangan tulis panjang sangat untuk ini. Biar   ringkas dan mudah faham.

SILA BACA SEMULA LANGKAH KE-4 DAN FAHAMKAN.
Jika anda memilih untuk terus kepada HTML mode, boleh guna 'double' <br /><br /> pada setiap perenggan yang diselang.
Jika bertembung dengan perenggan-kod lain, tutup dulu dengan </div>, kalau dah jumpa kod itu, tak perlu 'double' lagi...habiskan perenggan juga dengan kod </div>
Jika nak letak URL, guna kod: 
<a href="Letak URL">NAMA PADA ENTRI</a>
<a href="http://studioous.blogspot.com/2014/08/buat-pages-dalam-entri.html">KLIK TUTO INI</a>

Contoh:

 Boleh CTRL+F kalau tak jumpa ayat.

Dah tertukar ke Compose Mode?
Masalah besar pada URL aje, jadi padam 'highlight' biru tu, padam semua tanda tu tau.
<a href="https://www.blogger.com/blogger.g?blogID=xxxxxxxxxx#bab-1">
Jangan tukar balik dah sampai 'Publish'!

           
Contoh : ENTRI INI

Credit to: Stylifyyourblog

Terima kasih baca, sudi-sudilah komen :) .