Paano Madagdag ang Table of Content (TOC) sa bawat Pag-post ng Blogger na Madali.

Kung nais mong lumikha ng Talaan ng mga Nilalaman sa Blogger tulad ng WordPress at kung hindi mo alam kung paano ito tapos at kung paano ito gawin sa WordPress makakakuha ka ng mga plugin sa isang lugar na magbibigay sa iyo ng Talaan ng mga Nilalaman sa isang pag-click. Magdaragdag sa bawat post ngunit wala kang makitang anumang naturang plugin sa loob ng blogger, manu-mano kang dapat ilagay sa aming koponan ang Hukuman, kaya ngayon matututunan natin nang detalyado kung paano maglagay ng talahanayan ng nilalaman sa blogger sa bawat post 

Kaya bago simulan ang prosesong ito hihilingin ko sa iyo na i-back up ang iyong tema sa iyong imbakan kung hindi man kung tatanggalin mo ang isang bagay na mali kung gayon ang iyong koponan ay maaaring masira kaya’t simulan natin angTutorial

 Kaya muna kailangan mong buksan ang iyong blogger.com

 Pagkatapos nito kailangan mong pumunta sa seksyon ng tema

Pumunta sa Editor ng tema sa blogger

Bago lumipat nang higit pa kunin ang iyong backup ng tema mula sa arrow sa tabi ng pindutang I-Customize tulad ng ipinakita sa ibaba

Tema ng pag-backup 1
Tema ng pag-backup 2

At i-save ang iyong backup file sa iyong imbakan.

Matapos mag-click sa arrow sa tabi ng pindutang ipasadya, mag-click sa EDIT HTML . Ngayon ang iyong code ng tema ay nasa harap mo.

I-edit ang HTML ng iyong tema

Ibinibigay ko sa iyo ang code sa ibaba kung saan kailangan mong kopyahin at i-paste sa iyong tema pagkatapos ng <head> na tag.

 

Matapos makopya ang code, kailangan mong idagdag pagkatapos ng <head> na seksyon ng code ng tema.

Matapos mong i-paste ang code at mag-click sa pindutang I-save ang Mga Pagbabago, pagkatapos ang iyong code ay matagumpay na maidaragdag sa iyong tema. 

Related:   Paano i-clone ang isang website sa isang Bagong Server?

Pagkatapos nito kailangan mong pumunta sa seksyon ng tema at pindutin ang Control + F , bubuksan nito ang iyong tool na Maghanap at Palitan at kailangan mong hanapin

]]> </ b: balat>

Matapos hanapin ang code na ito, magdagdag ng CSS code bago ]]> </ b: balat>

CODE ng CSS

/*####TOC Plugin V2.0*/
.mbtTOC2{
border:5px solid #0008FC ;
border-radius: 10px 50px 10px 50px;
box-shadow:5px 5px 5px 5px grey;
border-style:dashed;
background-color:#ACDEFB;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
 font-family:Oswald, arial;
 display: block;width: 70%;
 }
 
 .mbtTOC2 button{
 background:#ACDEFB;
 font-family:oswald, arial; font-size:22px;
 position:relative;
 outline:none;
 border:none;
 color:#2E2E2E;
 padding:0 0 0 15px;
 }
 
 .mbtTOC2 button a {
 color:#FF0313;
 padding:0px 2px;
 cursor:pointer;
 } 
 
.mbtTOC2 button a:hover{
 text-decoration:underline; 
 } 
 
.mbtTOC2 button span {
font-size:15px; margin:0px 10px;
 }

.mbtTOC2 li{margin:10px 0;  } 

.mbtTOC2 li a {
color:#EA1414;
 text-decoration:none;
 font-size:18px;
 text-transform:capitalize;
 } 
 
.mbtTOC2 li a:hover {
text-decoration: underline;
}
.mbtTOC2 li li {margin:14px 0px;}
 
.mbtTOC2 li li a{
 color:#040404;
 font-size:15px;
 }

.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/* 
.point2 {list-style-type:lower-alpha} 
.point3 {list-style-type:lower-roman} 
.point4 {list-style-type:disc} 
*/

Sa susunod na hakbang, kailangan nating gumawa ng katulad na bagay, hanapin

<data: post.body />

at palitan ang itaas ng code ng <div id = ”post-toc”> <data: post.body /> </div> ang code na ito

At i-save ang tema. Ngayon, ang lahat ng bahagi ng editor ng tema ay tapos na.

 Ang susunod na hakbang ay upang pumunta sa iyong post editor ng post kung saan nais mong magdagdag ng talahanayan ng mga nilalaman. pumunta ngayon sa HTML Editor ng post na iyon. 

Related:   Paano mag-apply para sa Ezoic (Hakbang sa Hakbang sa Hakbang)
Mag-post ng editor- blogger

 

<div class = ”mbtTOC2 ″> <button> Mga Nilalaman <span> [<a onclick=iritiambtToggle2()iritia id=iritiaTogiritia> itago </a>] </span> </button> <div id =” mbtTOC2 ″> </div> </div>

at i-paste ang code sa itaas kung saan nais mong ipakita ang talahanayan ng mga nilalaman. Personal kong inirerekumenda na magbayad ka ng QR code bago ka magtungo sa iyong post. Halimbawa, bago ang unang tag na <h1> / <h2>

At sa huling hakbang, kailangan mong i-paste ang script sa ibaba ng iyong nilalaman sa post sa post editor

<script>mbtTOC2();</script>
Magdagdag ng Talaan ng nilalaman ng sript sa post editor

Ang lahat ng tapos na ngayon ay i-update ang iyong post o i-publish ito at maaari mong makita sa iyong una na ang talahanayan ng nilalaman ay nakikita.

 Suriin ang mga tama na nabigasyon sa talahanayan ng mga nilalaman.

 Kung nais mong baguhin ang istilo at kulay ng talahanayan ng nilalaman na ito kailangan mong magkaroon ng isang mahusay na kaalaman sa CSS, pagkatapos ay maaari mong i-edit ang iyong CSS code na nabanggit sa itaas upang baguhin ang kulay at istilo ng iyong TOC.

Leave a Comment