Tekst ichida yashirilgan tekst-spoyler

Tekst ichida yashirilgan tekst-spoyler


Assalomu – aleykum blogimning foydalanuvchilari. Men Oxunjon G’aybullayev.

Bu maqolamda vebsayt yoki wordpress blog uchun qanday chiroyli spoylerni plaginsiz yaratish haqida yozishga qaror qildim.

Spoyler so’zini oldin eshitmagan bo’lsangiz, quyida spoylerning namunasi:Tekst ichida yashirilgan tekst-spoyler

Bu yerda tekstning sarlavhasi (har qanday tekstning)
Bu yerda esa spoyler ostidagi kontent

Namunada ko’rganingizdek, spoyler maqolalaringizni ixchamlashtirishda yordam beradi.

Plaginsiz spoylerni yaratishda qilinadigan ishlar sxemasi:

  1. footer.php faylida blogga jQuery kutubxonasini bog’lash.
  2. footer.php faylida spoyler scriptni bog’lash.
  3. style.css fayliga spoyler uchun css stilini qo’shish.
  4. Maqola yoki blog sahifasiga spoyler kodini qo’shish.

Demak, birinchi bo’lib jQuery kutubxonasini bog’laymiz. Quyidagi kodni body tegi yopilishidan oldin footer.php fayliga qo’shib qo’ying. Bu uchun admin Dashboard ( boshqaruv paneli) Appearance–>Editor–>footer.php orqali boring.


Siz buni header.php fayliga qo’shsangiz ham farqi yo’q. Shunchaki men barcha script va kodlarni blogning pastki tub qismida qo’yaman, shu tarzda ular oxirda yuklanishi mumkin, sizlarga ham shuni tavsiya qilaman. Aytgancha kodni qo’shishdan oldin, barchasini ko’rib chiqing, ehtimol siz bu kodni allaqachon o’rnatib bo’lgandirsiz. Misol uchun men allaqachon kodni o’rnatib qo’yganman:

Tekst ichida yashirilgan tekst-spoyler

 

Blogingizning header.php, footer.php, function.php, index.php, fayllarini tekshiring, agar jquery.min.js hech qayerda o’rnatilmagan bo’lsa, bu kodni o’rnating va keyin bu ishni qayta qilmang. Bu faqat bir marta qilinadi.

Endi, spoylerning ishlashi uchun blogning footer.php fayliga quyidgi kodni qo’shing ( </body> tegidan keyin).



Yaxshi! Endi blogning style.css faylining oxiriga quyidagi kodni qo’shing va Update File tugmasini bosing:

.spoiler {
overflow: hidden;
margin-bottom: 20px;
margin-top: 20px;
border: 1px solid #dfdfdf;
border-left: 2px solid #3965a8;
box-shadow: 0 0 9px #dddddd inset;
}

.title_h3 {
cursor:pointer;
font-size: 14px;
background: #dddddd;
margin: 0 -10px 0 -10px;
padding: 10px;
padding-left: 30px;
-moz-box-shadow: 0 0 9px #dddddd inset;
box-shadow: 0 0 9px #dddddd inset;
}

.closed .contents { display:none; }
.closed h3 { background: #bbbbbb; }
.contents { padding: 10px; }

Bu stillardir. Ya’ni, spoyleringizning ko’rinishi. Siz bu kodni qo’shganda, spoyler meniki kabi ko’rinadi (yuqoridagi namuna, lekin agar siz ko’rinishni o’zgartirmoqchi bo’lsangiz, shu yuqoridagi kodga o’zgartirish kiritishingiz kerak. Lekin ehtiyot bo’ling to’g’ri kodlarni buzib qo’ymang! Stilni ya’ni ko’rinishni o’zgartirishda yordamga muhtoj bo’ladigan bo’lsangiz, bu ssilkadan topasiz.

Yuqoridagi ishlar faqat bir marta qilinadi.

Shunday qilib, oxirgi narsa, biz, aslida, spoylerni blogimizning maqola yoki sahifasiga qo’shamiz. Buni amalga oshirish uchun ushbu kodni sahifadagi kerakli joyga kiritishingiz kerak, kiritishda Text panelida kiriting, Visualda emas:

Bu yerda tekstning sarlavhasi (har qanday tekstning)
Bu yerda esa spoyler ostidagi kontent

 

Agar siz bitta sahifada spoylerdan 2,3,5 va 10 marta foydalanmoqchi bo’lsangiz ham, spoyler ichida spoyler yaratmoqchi bo’lsangiz ham, xuddi shu koddan foydalanasiz.

Sayt yoki blogning texnik tomonlarini ko’rsatib beradigan maqolalarimni o’tkazib yubormang blogimga OBUNA bo’ling!

Men esa sizlar bilan xayrlashaman, xayr!

 

Muallif: Oxunjon G’aybullayev.

 

 

BULAR BILAN HAM TANISHING:

Publication author

offline 49 mins

Oxunjon G'aybullayev

10
Comments: 118Publics: 120Registration: 04-10-2017
Like this post? Please share to your friends:
Leave a Reply
Tarmoq orqali kiring: 

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: