Kod Pautan Selamat Disertakan dengan Pek Tema. Beli dan anda akan mendapat Kod Di Dalam di sana.
Imej dengan Kapsyen dan Peti Cahaya Auto
Kapsyen dalam imej ini tidak akan dibaca dalam huraian/coretan artikel. Anda juga boleh memilih untuk memastikan kapsyen boleh dibaca pada coretan artikel.
Semua imej dalam siaran akan mempunyai fungsi peti cahaya secara automatik, klik imej ini untuk mencubanya.
Kerja tambahan class='full'untuk mengalih keluar imej dan skrin margin, hanya berfungsi untuk paparan mudah alih.
Format penulisan:
Format Penulisan Imej dengan Kapsyen dan Peti Cahaya Auto
Format Penulisan Imej dengan Kapsyen dan Peti Cahaya Auto
<!--[ Imej Grid ]--> < kelas div = 'psImg grImg' > < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name.png' /> < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name.png' /> < img alt = 'image_title_here' src = 'https://4. bp.blogspot.com/.../name.png' /> < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name.png' /> </ div >
Imej dengan Tunjukkan Semua Fungsi
Digunakan untuk menyembunyikan beberapa imej dan akan ditunjukkan apabila pengguna mengklik butang 'Tunjukkan Semua'. Fungsi Tunjukkan Semua hanya boleh diaktifkan sekali, Imej tidak boleh disembunyikan semula apabila anda mengaktifkannya.
Format penulisan:
Format Penulisan Imej dengan Kapsyen dan Peti Cahaya Auto
<!--[ Tunjukkan Semua Imej ]--> < kelas input = 'inImg hidden' id = 'for-hideImage' type = 'checkbox' > < div class = 'psImg hdImg' > < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name.png' /> < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../ name.png' /> < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name.png' />< div class = 'btImg' > < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name.png' /><!--[ Imej butang untuk mengaktifkan ]--> < label untuk = 'for-hideImage' aria-label = 'Tunjukkan semua imej' > Tunjukkan Semua </ label > </ div ><!--[ Sembunyikan imej selebihnya di sini ]--> < div class = 'psImg shImg' > < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name .png' /> < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name.png' /> < img alt = 'image_title_here' src = 'https:/ /4.bp.blogspot.com/.../name.png' /> < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name.png' / > </ div > </ div >
Imej dengan Reka Letak Tatal
Sama seperti susun atur imej di atas, cuma pada paparan mudah alih imej akan disusun selari dengan fungsi tatal sisi tambahan pada paparan mudah alih.
Kami juga menambah kesan tatal lancar pada ciri ini. Sila cuba buka halaman ini pada peranti mudah alih anda:
Format penulisan:
Imej dengan Reka Letak Tatal
<!--[ Scroll Image ]--> < div class = 'psImg scImg scrlH' > < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name.jpg ' /> < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name.jpg' /> < img alt = 'image_title_here' src = 'https://4 .bp.blogspot.com/.../name.jpg' /> </ div >
Imej Lazyload
Berguna untuk melambatkan memuatkan imej supaya skor PageSpeed blog lebih tinggi, imej hanya akan dimuatkan apabila pengguna menatal ke kawasan imej. Semua imej dalam artikel ini menggunakan Lazyload.
Format penulisan:
Imej LazyLoad
< div > < img class = 'lazy' alt = 'image_title_here' data-src = 'https://4.bp.blogspot.com/.../name.png' src = 'data:image/png;base64 ,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' /> < noscript > < img alt = 'image_title_here' src = 'https://4.bp.blogspot.com/.../name.png' /> </ noscript > </ div >
Catatan Berkaitan Manual
Adalah penting untuk ambil perhatian bahawa ciri ini ditulis secara manual, ia tidak muncul secara automatik pada setiap halaman.
< div class = 'pRelate' > <!--[ Tajuk berkaitan ]--> < b > Anda mungkin mahu membaca siaran ini : </ b >< ul > < li > < a href = '#' > Your_post_title_here </ a > </ li > < li > < a href = '#' > Your_post_title_here </ a > </ li > < li > < a href = '#' > Your_post_title_here </ a > </ li > </ ul > </ div >
< details class = 'sp toc' open = '' > < summary data-show = 'Show all' data-hide = 'Hide all' > Related Posts </ summary > < div class = 'toC' id = 'aRel' > </ div > </ butiran >
Perenggan dengan Inden Teks
Pelanggan sangat penting, pelanggan akan diikuti oleh pelanggan. Untuk vestibulum harta itu, ia dibuat berguna dan berguna. Mauris atau diam pellentesque lorem lacinia luctus.
Format penulisan:
Inden Teks
< p class = 'pIndent' > Perenggan_anda_ada_di sini. </ p >
Perenggan dengan penutup Drop
Penutup jatuh akan mengubah saiz huruf pertama perenggan supaya ia menjatuhkan satu atau lebih baris ke bawah. Banyak jenis media cetak menggunakan drop cap seperti buku, majalah, surat khabar dan sebagainya kerana ia boleh menambah daya tarikan visual. Di bawah adalah Contohnya.
Mialah huruf besar besar yang digunakan sebagai unsur hiasan pada permulaan perenggan atau bahagian. Saiz had menurun biasanya dua atau lebih baris.
Format penulisan:
Tutup Tutup
< p > < span class = 'dropCap' > Y </ span > our_perenggan_ada_di sini. </ p >
Sebut harga
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
— Anonymous
Format penulisan:
Sebut harga
<blockquote> Adalah penting untuk memahami kesakitan itu sendiri, ia akan diikuti oleh penyedia pendidikan. Untuk vestibulum harta itu, ia dibuat berguna dan berguna. Mauris vel diam pellentesque lorem lacinia luctus.</ blockquote >
Gaya Lain:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.
Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
Gaya Sebut Harga2
< blockquote class = 's-1' > < div > Pelanggan itu sendiri penting, pelanggan akan diikuti. Untuk vestibulum harta itu, ia dibuat berguna dan berguna. Mauris atau diam pellentesque lorem lacinia luctus. Tidak kira sehebat mana pun, satu quiver dalam bola keranjang, kisah negara itu.
< ul > < li > Tetapi ia memerlukan kartun bola keranjang yang bijak tetapi hodoh. Seolah-olah saya seorang tuhan, tetapi saya benci kepanasan kebimbangan. </ li > < li > Beberapa takut hidup, kerana ia sepatutnya baik, feugiat lorem. Tetapi ia suci di syurga. </ li > </ ul > </ div > </ blockquote >
Blok Nota
Ciri ini berfungsi untuk menambah info penting, ayat amaran atau ayat serlah, terdapat dua gaya yang boleh anda cuba termasuk:
Pelanggan sangat penting, pelanggan akan diikuti oleh pelanggan. Untuk vestibulum harta itu, ia dibuat berguna dan berguna.
Blok Nota
<p class = 'note'> Adalah penting untuk mempelajari pelajaran itu sendiri, dan mengikuti proses pengajaran. Untuk diam vestibulum dignissim, dan pencetus dibuat mudah dan.</p>
Dengan Warna Berbeza:
Mauris atau diam pellentesque lorem lacinia luctus. Tidak kira sehebat mana pun, satu quiver dalam bola keranjang, kisah negara itu. Tetapi ia memerlukan kartun bola keranjang yang pintar tetapi hodoh.
Nota Blok 2
<p class = 'note wr'>Mauris vel diam pellentesque lorem lacinia luctus Tidak kira sehebat mana pun, satu quiver dalam bola keranjang, kisah negara itu. Tetapi ia memerlukan kartun bola keranjang yang pintar tetapi hodoh.</p>
Jadual
Jadual dalam tema ini telah ditetapkan responsif, sebagai contoh, jika bilangan lajur atau lebar jadual melebihi lebar skrin, supaya tidak merosakkan reka letak, jadual secara automatik akan mempunyai fungsi tatal.
Sila buka artikel ini pada peranti mudah alih anda dan serlahkan bahagian jadual di bawah:
white-space:nowrap;menentukan teks menjadi satu baris, ia tidak akan dibalut ke baris seterusnya dan akan berterusan sehingga<br>tag ditemui.
lebar min: 100%;mentakrifkan lebar minimum jadual, anda boleh menukarnya kepada unit px sebagai contoh500px. Tukar kepada0jika anda mahu lebar jadual ditentukan secara automatik.
Menggunakan Jadual Kandungan manual adalah lebih rumit daripada versi automatik, anda perlu menambah atribut ID yang berbeza dalam setiap teg tajuk dan menulisnya dalam senarai kandungan.
Format penulisan:
Jadual Kandungan Manual
< details class = 'sp toc' open = '' > < summary data-show = 'Tunjukkan semua' data-hide = 'Sembunyikan semua' > Kandungan </ summary > < div class = 'toC' > < ol > < li > < a href = '#heading' > Your_Heading </ a > </ li >
...
...
...</ ol ><!--[ Contoh ToC dengan subtajuk ]--> < ol > < li > < a href = '#heading' > Your_Heading </ a > < ol > < li > < a href = '#subHeading' > Sub_Heading_1 < / a > </ li >
...
...
...</ ol > </ li > </ ol > </ div > </ details >
Alih keluarbuka=''atribut kepada auto-tutup Jadual Kandungan apabila halaman pertama kali dimuatkan.
Anda boleh menukar tajuk atau frasa 'Tunjukkan semua/Sembunyikan semua' dalam bahagian yang ditanda.
Jadual Kandungan Separa Automatik
Isi kandungan
Pilihan paling mudah untuk memaparkan Jadual Kandungan. Ciri ini akan memaparkan semua teg tajuk dalam siaran anda (tiga peringkat h2- h4), jadi pastikan anda menulis teg tajuk dalam urutan. Baca: Kesilapan Biasa
Kod untuk menentukan lokasi widget ToC separa automatik:
JavaScript pertama
< details class = 'sp toc' > < summary data-show = 'Show all' data-hide = 'Hide all' > Jadual Kandungan </ summary > < div class = 'toC' id = 'autoToc' > </ div > </ butiran >
Penyerlah Sintaks
Digunakan untuk menentukan baris kod komputer (HTML, CSS, Javascript, dll.) dalam siaran.
Penyerlah Sintaks
<!--[ Tukar data-lang kepada html, css, js atau mana-mana bahasa ]--> < div class = 'pre fd' data-text = 'JavaScript' data-file = 'filename' data-lang = 'javascript ' data-time = 'true' data-download = 'true' data-copy = 'true' data-view = 'true' > < pra > Kod Anda Di Sini </ pre > </ div >
Ubahdata-lang='html'untuk menentukan format kod lain, iaitudata-text='css',data-text='js',data-text='php', dan lain-lain
Togol Tunjukkan / Sembunyikan
Digunakan untuk mencipta widget interaktif yang boleh dibuka dan ditutup oleh pengguna atas permintaan. Secara lalai widget ini ditutup, akan memaparkan kandungan di dalamnya apabila pengguna menekan butang arahan.
Sebarang kandungan boleh dimasukkan ke dalam widget ini.
Mentakrifkan kandungan tambahan yang boleh dibuka dan ditutup oleh pengguna atas permintaan dalam kumpulan, biasanya digunakan untuk senarai soalan atau Soalan Lazim (Soalan Lazim).
Accordion_first_title
Accordion_second_title
Accordion_third_title
Accordion_forth_title
Akordion
<!--[ Accordion start ]--> < div class = 'showH' > <!--[ Accordion line 1 ]--> < details class = 'ac' > < summary > Title_is_here </ summary > < div class = 'aC' > < p > Teks_anda_ada_di sini. </ p > </ div > </ butiran ><!--[ Accordion line 2 ]--> < details class = 'ac alt' > < summary > Title_is_here </ summary > < div class = 'aC' > < p > Your_text_is_here. </ p > </ div > </ butiran >
...
...</ div >
Gunakan nama kelasalt(ditandakan dalam kod di atas) untuk menukar gaya ikon.
Bilangan widget akordion yang boleh anda tambahkan adalah tidak terhad.
Skema FAQ dalam Microdata
Skema Soalan Lazim
<!--[ Accordion start ]--> < div class = 'showH' itemscope = '' itemtype = 'https://schema.org/FAQPage' > <!--[ Accordion line 1 ]--> < details class = 'ac' itemscope = '' itemprop = 'mainEntity' itemtype = 'https://schema.org/Question' > < summary itemprop = 'name' > Title_is_here </ summary > < div class = 'aC' itemscope = '' itemprop = 'acceptedAnswer' itemtype = 'https://schema.org/Answer' > < p itemprop = 'text' > Your_text_is_here. </ p > </ div > </ butiran ><!--[ Accordion line 2 ]--> < details class = 'ac alt' itemscope = '' itemprop = 'mainEntity' itemtype = 'https://schema.org/Question' > < summary itemprop = 'name' > Title_is_here </ summary > < div class = 'aC' itemscope = '' itemprop = 'acceptedAnswer' itemtype = 'https://schema.org/Answer' > < p itemprop = 'text' > Your_text_is_here. </ p > </ div > </ butiran >
...
...</ div >
Pautan Luaran
Memberitahu pengguna jika pautan akan membawa ke tapak lain.
< a class = 'button' href = 'url_is_here' > < i class = 'icon dl' > </ i > Title_link </ a > < a class = 'button' href = 'url_is_here' > < i class = 'icon demo' > </ i > Title_link </ a >
< div class = 'btnF' > < a class = 'button ln' href = 'url_is_here' > Demo </ a > < a class = 'button' href = 'url_is_here' > < i class = 'icon dl' > < / i > Muat turun </ a > </ div >
Pautan muat turun
Untuk memberikan maklumat fail yang dimuat turun kepada pengguna.
nama_fail.zip200kb
Butang Muat Turun
< div class = 'dlBox' > <!--[ Tukar data-text='...' atribut untuk menambah jenis fail baharu ]--> < span class = 'fT' data-text = 'zip' > </ span > < div class = 'fN' > <!--[ Nama fail ]--> < span > file_name.zip </ span > < span class = 'fS' > 200kb </ span > </ div ><!--[ Muat turun pautan (tukar href='...' atribut untuk menambah muat turun pautan) ]--> < a class = 'button' aria-label = 'Muat turun' href = 'url_is_here' rel = 'noreferrer' target = '_blank' > < i class = 'icon dl' > </ i > </ a > </ div >
Dengan imej latar belakang dan bukannya teks:
about_me.png10kb
Butang Muat Turun dengan Imej
< div class = 'dlBox' > <!--[ Change data-text='...' atribut untuk menambah jenis fail baharu ]--> < span class = 'fT lazy' data-text = 'zip' data- style = 'background-image: url(//3.bp.blogspot.com/.../title.png)' > </ span > < div class = 'fN' > <!--[ Nama fail ]- -> < span > about_me.png </ span > < span class = 'fS' > 10kb </ span > </ div ><!--[ Muat turun pautan (tukar href='...' atribut untuk menambah muat turun pautan) ]--> < a class = 'button' aria-label = 'Muat turun' href = 'url_is_here' rel = 'noreferrer' target = '_blank' > < i class = 'icon dl' > </ i > </ a > </ div >
Kotak Muat Turun Countdown
Ciri ini akan menunjukkan kira detik sebelum pengguna memuat turun sebarang fail.
Ciri ini memerlukan pautan muat turun terus fail awan. Anda boleh menggunakan Google Drive untuk mendapatkan pautan muat turun terus fail.
Dengan Imej:
about_me.webp1 Jan 2022165KB1080×1080.webp
Tanpa Imej:
about_me.webp1 Jan 2022165KB1080×1080.webp
Format penulisan:
Butang Muat Turun dengan Pemasa
< div class = 'dldCo' id = 'download1' > < div class = 'dldBx' > < div class = 'dldTp' > < div class = 'dldIm' data-text = '.png' style = 'background-image :url(image_url_here)' > < svg class = 'dldSv' viewBox = '0 0 34 34' > < circle class = 'b' cx = '17' cy = '17' r = '15.92' /> < circle class = 'c dldPg' cx = '17' cy = '17' r = '15.92' /> </ svg > </ div > < div class = 'dldIn' > < span data-text = 'Nama' > Music_Wallpaper. png </ span > < span data-text = 'Kategori' > Muzik </ span > < span data-text = 'Saiz' > 3.05MB </ span > < span data-text = 'Resolution' > 1920×1080 < / span > < span data-text = 'Extension' > .png </ span > </ div > </ div > < button onclick = 'download("#", "10", "false","#download1")' class = 'dldBt dldDl' > < svg class = 'line' viewBox = '0 0 24 24' > < polyline points = '8 17 12 21 16 17' /> < line x1 = '12' x2 = '12' y1 = '12' y2 ='21' /> < laluan d = 'M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29' / > </ svg > </ button > < button class = 'dldBt dldRt' > < svg class = 'line' viewBox = '0 0 24 24' > < polyline points = '23 4 23 10 17 10' /> < path d = 'M20.49 15a9 9 0 1 1-2.12-9.36L23 10' /> </ svg > </ butang > </ div > < div class = 'dldSl' > < div class = 'dldMe' > </ div > </ div > </ div >
Pemain muzik
Music Player yang boleh digunakan untuk memainkan lagu menggunakan fail audio iaitu MP3.
Legends Never Die
Alan Walker & A$AP Rocky
00:00
03:54
Format penulisan:
Pemain muzik
< div id = 'musicPlayer' > </ div > < script > /*<![CDATA[*/ / * Music Player Tracks */ var playerTracks = [{
name : "Track_title_here" ,
artis : "Artist_names_here" ,
cover : "https://raw.githubusercontent.com/.../name.jpg" ,
sumber : "https://raw.githubusercontent.com/.../name.mp3"
},
{nama : "Track_title_here" ,
artis : "Artist_names_here" ,
cover : "https://raw.githubusercontent.com/.../name.jpg" ,
sumber : "https://raw.githubusercontent.com/... /nama.mp3"
},
{nama : "Track_title_here" ,
artis : "Artist_names_here" ,
cover : "https://raw.githubusercontent.com/.../name.jpg" ,
sumber : "https://raw.githubusercontent.com/... /nama.mp3"
},
{nama : "Track_title_here" ,
artis : "Artist_names_here" ,
cover : "https://raw.githubusercontent.com/.../name.jpg" ,
sumber : "https://raw.githubusercontent.com/... /nama.mp3"
}
];/*]]>*/ </ skrip >
Video YouTube yang malas
Berguna untuk menangguhkan memuatkan video Youtube selepas pengguna menatal halaman.
JavaScript pertama
<!--[ Lazy youtube ]--> < div class = 'ytShdw' > < div class = 'lazyYt' data-embed = 'Youtube_video_ID' > < div class = 'play' > < svg viewbox = '0 0 213.7 213.7' > < kelas poligon = 't' mata = '73.5,62.5 148.5,105.8 73.5,149.1' > </ poligon > < kelas bulatan = 'c' cx = '106.8' cy = '106.8' r = '103.3' > </ circle > </ svg > </ div > </ div > </ div >
Menangguhkan pemuatan iframe dengan defer.jsfungsi:
JavaScript pertama
<!--[ Lazysize iframe ]--> < div class = 'ytShdw' > < div class = 'videoYt' > < iframe title = 'Lazy Iframe' class = 'lazy' data-src = '//www.youtube .com/embed/xxxxxxxxxxxx' benarkan = 'accelerometer; automain; papan keratan-tulis; encrypted-media; giroskop; picture-in-picture' allowfullscreen > </ iframe > </ div > </ div >
Tukar bahagian yang ditandakan dengan ID video Youtube yang anda mahu paparkan.
ID video boleh didapati dalam url video Youtube, contohnya:youtube.com/watch?v=axRAL0BXNvw.
Rujukan Pos
Untuk menulis senarai rujukan atau nota kaki di bawah siaran
Sumber: www.tehandfunzone.in
JavaScript pertama
< p class = 'pRef' > Sumber: < br > www.techandfunzone.in </ p >
Tajuk Sarikata
Untuk menukar Sarikata Pengepala dalam siaran atau halaman tertentu.
.html
<style>/*<![CDATA[*//* To change Header Subtitle */.headH.headSub{max-width:none} .headH.headSub::before{content:"Typography"}/*]]>*/</style>
