√ Cara Memakai Conditional Tag Di Blogger

Conditional Tag, merupakan tag khusus yang dipakai di Blogger yang fungsinya sama ibarat logika IF. Ya ibarat namanya, tag ini bertugas menjalankan perintah apa saja pada kondisi tertentu. Makara contohnya kau sanggup memasang isyarat CSS yang hanya berlaku pada suatu halaman yang kau inginkan. Atau menyembunyikan/menampilkan sebuah widget hanya pada halaman tertentu.

Conditional tag salah satu topik yang paling sering dicari para pengguna blogger yang gemar melaksanakan modifikasi pada isyarat HTML blogger. Secara umum penggunaan conditional tag dalam HTML blogger ibarat berikut ini:

<b:if cond='kondisi_ekspresi'>     <!-- perintah ketika kondisi terpenuhi --> </b:if>

Bagian <!-- perintah ketika kondisi terpenuhi --> yakni kawasan untuk menuliskan perintah yang hanya dijalankan ketika kondisi_ekspresi terpenuhi. Selain itu berikut ini kondisi lisan apa saja yang sanggup dipakai beserta dengan fungsinya:

Daftar tipe halaman untuk Conditional tags

Archive page

Archive page atau halaman arsip merupakan halaman yang menampilkan postingan-postingan di blog menurut rentan waktu tertentu. Contohnya yakni ini atau ini.

<b:if cond='data:blog.pageType == "archive"'>     <!-- menjalankan perintah hanya di halaman arsip --> </b:if>

Error page (404)

404 merupakan halaman yang mewakili semua halaman yang tidak ditemukan atau tidak termasuk halaman yang spesifik.

<b:if cond='data:blog.pageType == "error_page"'>     <!-- menjalankan perintah di semua halaman error --> </b:if>

Index page

Halaman index merupakan istilah yang dipakai untuk menyebutkan halaman yang berisi daftar posting. Biasanya halaman ini hanya menampilkan daftar posting berupa judul dan ringkasan yang dilengkapi dengan jumplink (read more) untuk membuka posting secara lengkap. Beberapa yang termasuk halaman index yakni homepage, label, search query, dan search update.

<b:if cond='data:blog.pageType == "index"'>     <!-- semua index page --> </b:if>

Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>      <!-- hanya di homepage --> </b:if>

Item (post) pages

Halaman yang menampilkan sebuah postingan secara penuh, contohnya yakni halaman ini.

<b:if cond='data:blog.pageType == "item"'>     <!-- semua halaman item (posting) --> </b:if>

Specific post by URL

Halaman spesifik yang didefinisikan dengan URL halaman tersebut. Artinya perintah pada conditional tag ini hanya akan tampil pada halaman yang mempunyai URL tersebut.

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2014/08/foo"'>     <!-- menjalankan perintah di halaman (contoh) www.maringngerrang.com/2014/08/foo.html --> </b:if>

Label page

Salah satu halaman yang termasuk index page. Halaman ini menampilkan daftar postingan menurut label. Conditional tag ini berlaku untuk semua label. Contohnya yakni halaman ini.

<b:if cond='data:blog.searchLabel'>     <!-- semua label --> </b:if>

Spesific label page

Hampir sama ibarat label page, hanya saja lebih spesifik untuk label tertentu saja.

<b:if cond='data:blog.searchLabel == "foo"'>     <!-- hanya label 'foo' --> </b:if>

Search page

Halaman ini merupakan daftar postingan menurut kata kunci yang dimasukkan pada pencarian. Contohnya yakni halaman ini atau ini.

<b:if cond='data:blog.pageType == "archive"'>     <!-- menjalankan perintah hanya di halaman arsip --> </b:if>

Error page (404)

404 merupakan halaman yang mewakili semua halaman yang tidak ditemukan atau tidak termasuk halaman yang spesifik.

<b:if cond='data:blog.pageType == "error_page"'>     <!-- menjalankan perintah di semua halaman error --> </b:if>

Index page

Halaman index merupakan istilah yang dipakai untuk menyebutkan halaman yang berisi daftar posting. Biasanya halaman ini hanya menampilkan daftar posting berupa judul dan ringkasan yang dilengkapi dengan jumplink (read more) untuk membuka posting secara lengkap. Beberapa yang termasuk halaman index yakni homepage, label, search query, dan search update.

<b:if cond='data:blog.pageType == "index"'>     <!-- semua index page --> </b:if>

Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>      <!-- hanya di homepage --> </b:if>

Item (post) pages

Halaman yang menampilkan sebuah postingan secara penuh, contohnya yakni halaman ini.

<b:if cond='data:blog.pageType == "item"'>     <!-- semua halaman item (posting) --> </b:if>

Specific post by URL

Halaman spesifik yang didefinisikan dengan URL halaman tersebut. Artinya perintah pada conditional tag ini hanya akan tampil pada halaman yang mempunyai URL tersebut.

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2014/08/foo" target="_blank">Custom Search Engine, maka conditional tag ini tidak berlaku.
 
 
<b:if cond='data:blog.searchQuery'>     <!-- semua hasil pencarian --> </b:if>
 
Specific Search Query page
Sama ibarat search page hanya saja lebih spesifik untuk query tertentu.
 
 
<b:if cond='data:blog.searchQuery == "foo"'>     <!-- hanya pencarian dengan query 'foo' --> </b:if>
 
Static page
Merupakan halaman yang dibentuk oleh user. Melalui blogger dengan menciptakan halaman gres di bab Halaman. Contohnya yakni ini.
 
 
<b:if cond='data:blog.pageType == "static_page"'>     <!-- semua halaman statis --> </b:if>
 
Spesifi static page by URL
Sama ibarat static page hanya saja spesifik menurut URL tertentu
 
 
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'>     <!-- halaman statis dengan alaman (contoh) www.maringngerrang.com/p/foo.html --> </b:if>
 
Mobile page
Seperti yang kita ketahui bahwa sebagian besar tampilan PC dan tampilan di Mobile mempunyai beberapa perbedaan, termasuk perbedaan kode. Khususnya bagi pengguna AMP HTML. Untuk mengatur mana yang tampil di mobile dan mana yang tidak sanggup memakai conditional tag di bawah, ganti dengan true untuk tampilan mobile dan false untuk selain tampilan mobile:
 
 
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>     <!-- perintah ini hanya tampil pada tampilan mobile --> </b:if>
 
Fungsi NOT, OR, AND, dan ELSE
NOT
Fungsi NOT sanggup dibilang sebagai fungsi "pengecualian" atau fungsi "kebalikan". Conditional tag ini akan menjalankan perintah kecuali pada kondisi yang disebutkan. Bagian yang membuktikan NOT yakni penggunaan == diganti dengan !=.
 
 
<b:if cond='data:blog.pageType != "item"'>     <!-- perintah untuk semua halaman kecuali halaman item (posting) --> </b:if>
 atau
 
 
<b:if cond='data:blog.url != data:blog.homepageUrl'>     <!-- semua halaman kecuali homepage --> </b:if>
 
OR
Fungsi OR yakni sesuai artinya yaitu "atau". Makara perintah hanya dijalankan salah satunya saja, bila salah satu kondisi terpenuhi, maka kondisi lainnya diabaikan.
 
 
<b:if cond='data:blog.url == data:blog.homepageUrl'>     <!-- baris perintah hanya dijalankan bila halaman ini yakni homepage --> <b:elseif cond='data:blog.pageType == "static_page"'>     <!-- baris perintah hanya dijalankan bila halaman ini yakni halaman statis --> </b:if>
 
AND
Fungsi AND yakni untuk kondisi berganda. Makara perintah akan dijalankan bila dan hanya bila semua kondisi terpenuhi. Contoh kasus berikut ini, perintah akan dijalankan pada semua index_page (homepage, label, search query, dan search update) DAN terkecuali sebuah halaman label, yaitu halaman label 'foo'. Makara perintah hanya berlaku bila kedua kondisi tersebut terpenuhi.
 
 
<b:if cond='data:blog.pageType == "index"'>     <b:if cond='data:blog.searchLabel != "foo"'>         <!-- perintah dijalankan di semua index_page (termasuk label), kecuali label 'foo' -->     </b:if> </b:if>
 
ELSE
Fungsi Else yakni untuk menjalankan perintah bila semua kondisi yang disebutkan tidak terpenuhi. Atau dengan kata lain, selain semua kondisi yang disebutkan.
 
 
<b:if cond='data:blog.pageType == "item"'>     <!-- perintah bila halaman ini halaman posting (item) --> <b:elseif cond='data:blog.pageType == "static_page"'>     <!-- perintah bila halaman ini halaman statis --> <b:else/>     <!-- perintah bila ini bukan halaman posting dan bukan halaman statis --> </b:if>
 
Contoh Pengaplikasian
Conditional tags sanggup diaplikasikan untuk menjalankan perintah tertentu pada Blogger, seperti:
 
Menampilkan widget pada halaman tertentu
 
Menggunakan isyarat CSS hanya pada halaman tertentu
 
Menambahkan meta tag Facebook dan tag kartu Twitter
 
Load JavaScript pada halaman tertentu saja (bisa mempercepat loading blog pada halaman yang tidak perlu load JS tersebut)
 
Menampilkan tag 'title' sesuai jenis halaman (Optimasi tag Title SEO)
 
 Misalnya, saya akan menghilangkan widget HTML2 pada tampilan seluler (HTML2 merupakan ID widget tersebut, ini atau ini.
 
 
<b:if cond='data:blog.pageType == "archive"'>     <!-- menjalankan perintah hanya di halaman arsip --> </b:if>
 
Error page (404)
404 merupakan halaman yang mewakili semua halaman yang tidak ditemukan atau tidak termasuk halaman yang spesifik.
 
 
<b:if cond='data:blog.pageType == "error_page"'>     <!-- menjalankan perintah di semua halaman error --> </b:if>
 
Index page
Halaman index merupakan istilah yang dipakai untuk menyebutkan halaman yang berisi daftar posting. Biasanya halaman ini hanya menampilkan daftar posting berupa judul dan ringkasan yang dilengkapi dengan jumplink (read more) untuk membuka posting secara lengkap. Beberapa yang termasuk halaman index yakni homepage, label, search query, dan search update.
 
 
<b:if cond='data:blog.pageType == "index"'>     <!-- semua index page --> </b:if>
 
Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>      <!-- hanya di homepage --> </b:if>
 
Item (post) pages
Halaman yang menampilkan sebuah postingan secara penuh, contohnya yakni halaman ini.
 
 
<b:if cond='data:blog.pageType == "item"'>     <!-- semua halaman item (posting) --> </b:if>
 
Specific post by URL
Halaman spesifik yang didefinisikan dengan URL halaman tersebut. Artinya perintah pada conditional tag ini hanya akan tampil pada halaman yang mempunyai URL tersebut.
 
 
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2014/08/foo" target="_blank">pelajari lebih lanjut cara mengetahui ID widget di blogger)
 
 Pertama-tama buka Tema pada Blogger kemudian klik Edit HTML, kemudian temukan ID blog yang dicari - dalam pola ini yakni HTML2 -, kau sanggup klik tombol Lompat ke widget pada bab atas sajian Edit HTML. Kode widget tersebut kurang lebih ibarat ini:
 
 
<b:widget id='HTML2' locked='false' title='' type='HTML'>   <b:widget-settings>     <b:widget-setting name='content'>...</b:widget-setting>   </b:widget-settings>   <b:includable id='main'>     <!-- only display title if it's non-empty -->     <b:if cond='data:title != &quot;&quot;'>       <h2 class='title'><data:title/></h2>     </b:if>     <div class='widget-content'>       <data:content/>     </div>      <b:include name='quickedit'/> <!-- hilangkan ini bagi pengguna AMP HTML -->   </b:includable> </b:widget>
 Setelah itu tambahkan isyarat conditional cond='data:blog.isMobileRequest == &quot;true&quot;' sebagai atribut pada tag b:widget. Lalu kodenya akan terlihat ibarat ini:
 
 
<b:widget cond='data:blog.isMobileRequest == &quot;true&quot;' id='HTML2' locked='false' title='' type='HTML'>
 Kamu sanggup mengganti nilai true menjadi false. True berarti widget tersebut tampil di ponsel dan tidak tampil bila dibuka di PC, sedangkan false yakni sebaliknya.
 
 Selain itu untuk menghindari isyarat AMP HTML, kau juga perlu menghapus <b:include name='quickedit'/> pada setiap widget yang ada di HTML blog kamu.
 
 
Tips dan Peringatan
Tips
Saat kau menyalin conditional tag di atas ke dalam HTML blog kau di Blogger, secara otomatis editor akan mengkonversi semua simbol kutip ganda " menjadi &quot;. Oleh alasannya yakni itu sebelum memasukkan conditional tag di atas ke blog kamu, ganti semua kutip ganda " menjadi &quot;. Anda sanggup mengaturnya dengan gampang di sini.
 
 
Peringatan
Mungkin dengan salah satu pola kondisi untuk widget blog di atas, kau sanggup lebih mengerti wacana peletakan conditional tag pada HTML blogger beserta fungsi penggunaannya. Selalu ingat untuk memperhatikan dengan baik derma isyarat epilog pada conditional tag yaitu isyarat </b:if> yang membuktikan final perintah conditional tag tersebut. Pastikan tidak ada tag yang saling berseberangan akhir meletakkan tag epilog yang tidak pada tempatnya.
 
 
Penutup
Itulah beberapa hal yang sanggup kau pelajari wacana Conditional Tag di Blogger beserta fungsi dan cara penggunannya. Dengan demikian kau sanggup mencoba berguru memodifikasi HTML blogger sesuai kebutuhan dan impian kamu. Jangan lupa tinggalkan komentar terbaik kau di bawah atau di halaman contact blog ini. Terima kasih, biar bermanfaat dan hingga jumpa!
 Sumber http://www.maringngerrang.com/

√ Aba-Aba Javascript Untuk Membersihkan Textarea Dan Textbox

Baiklah dalam posting kali ini saya akan membahas mengenai aba-aba j4vascript untuk membersihkan texarea. Posting ini terispirasi dikala saya memperbaiki halaman HTML Editor blog ini. Pertama-tama kau perlu memahami disini kita akan memakai dua jenis pengkodean, yang pertama yaitu HTML dan JavaScript (kita sebut JS), JS merupakan bahasa pemrograman web yang tidak berdiri sendiri, JS dipakai bersama dengan HTML.

Terlebih dahulu kita akan membangun aba-aba HTML nya. Kita memerlukan input textarea dan tombol, tombol untuk membersihkan textarea tersebut. Kira-kira kodenya menyerupai ini.

<input type="button" value="Clear" onclick="j4vascript:eraseText();"/>  <textarea id='output' rows=20 cols=90></textarea>

Bagian yang ditandai tersebut merupakan bab utama dari "pembersih" input textarea. Kaprikornus aba-aba yang ditandai tersebut dapat kau letakkan di kawasan lain yang kau inginkan semoga dikala di-klik, maka semua teks di textarea akan terhapus. Setelah itu kita pasang fungsi j4vascript pada aba-aba diatas, kita memerlukan aba-aba j4vascript menyerupai berikut ini.

function eraseText() {     document.getElementById("output").value = ""; }

Perhatikan bab output. Itu merupakan nama "id" dari input textarea yang ada di atas. Kaprikornus contohnya kau ingin menggunakannya pada textbox atau yang lain, cukup tambahkan id="output". Lalu kita masukkan aba-aba j4vascript tersebut kedalam tag script di HTML. Sehingga aba-aba diatas akan menjadi menyerupai berikut ini.

<script> function eraseText() {     document.getElementById("output").value = ""; } </script>

Selanjutnya kita letakkan kedua aba-aba HTML diatas, sehingga hasil balasannya akan menjadi menyerupai aba-aba berikut ini.

<input type="button" value="Clear" onclick="j4vascript:eraseText();"/>  <textarea id='output' rows=20 cols=90></textarea> <script> function eraseText() {     document.getElementById("output").value = ""; } </script>

Sebelum memasang aba-aba HTML tersebut di blog atau website, kau dapat mencoba memakai aba-aba tersebut pada halaman HTML Editor yang merupakan halaman blog ini.

Itulah beberapa langkah yang dapat kau lakukan untuk menciptakan tombol pembersih textarea atau textbox dengan memakai j4vascript. Semoga artikel ini dapat bermanfaat. Jika ada hal yang kurang jelas, maka jangan sungkan untuk menawarkan komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan hingga jumpa!

Sumber : https://stackoverflow.com/questions/15968911/how-to-clear-text-area-with-a-button-in-html-using-j4vascript

Sumber http://www.maringngerrang.com/

√ Cara Gampang Backup Aba-Aba Html Blogger

Apa gunanya backup!?

Dalam posting kali ini saya akan membahas perihal cara gampang untuk backup isyarat HTML blog kita. Kata "backup" bagi sebagian orang mungkin tidak abnormal lagi, kata ini sering terdengar. Dimana kita sering membacanya? Di komputer dan di internet utamanya.

Backup yakni aktivitas menciptakan cadangan suatu arsip data dari komputer dengan cara menyalin semoga data tersebut sanggup digunakan kembali ketika terjadi kerusakan atau kehilangan data. Backup sangat baik dilakukan pada data yang sensitif dan sangat penting.

Dalam sebuah blog, salah satu data yang paling penting yakni isyarat HTML blog tersebut. Dalam beberapa kesalahan isyarat HTML sanggup menghancurkan blog itu sendiri, maka tidak ada salahnya bila isyarat tersebut disalin ke kawasan yang lebih aman.

Cara gampang backup Blogger

Bagi seorang Blogger yang bahagia melaksanakan modifikasi terhadap blognya mungkin perlu sering melaksanakan ini. Yaitu backup. Apa yang di-backup? Yaitu isyarat HTML yang dimodifikasi. Agar suatu ketika bila terjadi hal-hal yang kurang berkenan sanggup melaksanakan restore terhadap isyarat dan konten yang ada di blog tersebut.

Ada beberapa hal yang perlu dan penting untuk di-backup ketika memakai Blogger. Pertama yakni isyarat HTML Blogger, yaitu isyarat yang digunakan oleh template yang kau gunakan. Dan yang kedua yakni posting di Blogger. Ini yakni yang paling penting mengingat konten yakni nyawa dari sebuah blog. Baiklah, kau sanggup mengikuti cara-cara berikut ini:

A. Backup isyarat HTML Blogger

Ada dua cara yang sanggup kau pilih untuk melaksanakan backup terhadap isyarat HTML di blogger kamu. Cara pertama dengan d0wnl0ad file XML nya dan cara kedua dengan menyimpannya secara manual.

Cara pertama: d0wnl0ad isyarat HTML Blogger

1. Buka Blogger
2. Pada pecahan Tema klik tombol strong Backup / Pulihkan
3. Tekan tombol Download tema
4. Tunggu hingga proses loading dan d0wnl0ad selesai, kemudian simpan file XML yang telah di d0wnl0ad pada kawasan penyimpanan backup kamu

Cara kedua: copy isyarat HTML Blogger

1. Buka Blogger
2. Pada pecahan Tema klik tombol Edit HTML
3. Klik pada isyarat HTML yang muncul kemudian tekan CTRL + A
4. Salin seluruh isyarat tersebut dengan menekan CTRL + C
5. Buka text editor Notepad, atau Notepad++ atau Sublime Text
6. Tempel isyarat HTML tadi pada text editor tersebut, kemudian tekan CTRL + S
7. Khusus untuk Notepad, dikala melaksanakan proses penyimpanan, ganti Encoding dari ANSI menjadi UTF-8

B. Backup konten/posting Blogger

Seperti yang sudah diketahui bahwa posting pada sebuah blog sanggup dibilang merupakan pecahan yang lebih penting dibandingkan template. Sebab posting yakni pecahan utama yang memilih popularitas dan karir sebuah blog. Oleh alasannya itu penting untuk rutin melaksanakan backup terhadap posting blogger dengan memakai cara berikut ini:

1. Buka Blogger
2. Pada pecahan Setelan pilih pengaturan Lainnya
3. Pada pecahan Impor & backup, klik tombol Backup konten
4. Tunggu hingga proses loading selesai, proses ini mungkin membutuhkan waktu, tergantung dari jumlah postingan yang ada di blog kau dan kecepatan jaringan internet yang kau gunakan
5. File XML akan di d0wnl0ad secara otomatis. Simpan file tersebut pada kawasan penyimpanan backup kamu
6. Untuk melaksanakan Restore atau import konten yang telah di backup kedalam sebuah blogger, kau sanggup menekan tombol Impor konten

Itulah beberapa langkah dan cara gampang yang sanggup kau gunakan untuk melaksanakan backup terhadap data penting di Blogger. Semoga artikel ini sanggup bermanfaat untuk kamu. Jika ada hal yang kurang jelas, maka jangan sungkan untuk menyampaikannya pada komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan hingga jumpa!
Sumber http://www.maringngerrang.com/

√ Cara Mengubah Atribut Html Dengan Jquery (100% Berhasil)

Apa itu attribute HTML?

Dalam bahasa pemrograman web, bab paling dasar yang perlu diketahui yakni tag. Tag dalam HTML merupakan isyarat yang diawali dengan simbol "lebih kecil dari" (<) dan diakhiri dengan simbol "lebih besar dari" (>).

Setelah simbol < akan ada "nama tag". Sehingga pola tag HTML yakni <div> yang disebut sebagai (pembuka) tag div yang mempunyai epilog </div>.

Selain berisi nama, dalam sebuah tag dapat diisi dengan aneka macam attribute yang mempunyai nilai masing-masing dan juga diletakkan sebelum simbol > dalam pembuka sebuah tag.

Attribute biasanya berisi hukum tertentu yang ditujukan kepada tag di mana atribut tersebut diletakkan. Contohnya yakni <div title="√ Cara Mengubah Atribut HTML dengan JQuery (100% Berhasil)" bgcolor="red"> yang mempunyai atribut title dengan nilai "Halo!" dan atribut bgcolor dengan nilai "red".

Mengubah atribut tag HTML tanpa mengedit tag

Jika kau bertanya, bisakah mengubah atribut HTML tanpa mengedit tag HTML tersebut? Jawabannya, tentu saja bisa! Mengubah atribut tag HTML di sini maksudnya adalah:

• Menambahkan atribut baru
• Menghapus atribut
• Mengubah nilai atribut

Memasang Jquery di Blogger

Untuk melaksanakan hal tersebut, yang diharapkan hanyalah sintaks Javascript Jquery. Terlebih dahulu kau perlu memasang "perpustakaan" Jquery di blog kau sebelum menggunakannya. Ikuti cara berikut

1. Buka Blogger
2. Pada bab Tema klik tombol Edit HTML
3. Temukan isyarat </head> dan tambahkan isyarat berikut di atasnya

<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>

4. Klik tombol Simpan

Memanipulasi atribut elemen HTML dengan Jquery

Ada dua isyarat dasar yang dipakai untuk mengolah atribut suatu elemen HTML, yaitu menambahkan/mengganti dan menghapus atribut. .attr() dipakai untuk menambahkan dan mengubah nilai atribut sedangkan .removeAttr() dipakai untuk menghapus suatu atribut.

Metode pemanggilan tag

Untuk (misalnya) menambahkan atribut gres ke dalam suatu elemen/tag HTML, terlebih dahulu perlu didefinisikan tujuan tag akan ditambahkan atribut gres (bisa juga disebut memanggil tag mana yang ingin ditambahkan atribut baru).

Elemen tujuan tersebut dapat dipanggil dalam 3 cara, yaitu dengan memanggil nama tag, nama class, atau nama id. Berikut penjelasannya masing-masing.

1. Menggunakan nama tag

Dengan cara ini semua tag yang memakai nama yang sama akan ditambahkan atribut baru. Misalnya semua gambar yang tampil di blog akan ditambahkan atribut title. Jika isyarat HTML yang dipakai yakni sebagai berikut:

<img src="/image/image.jpg" />

Maka sintaks Jquery yang dipakai adalah:

$('img').attr('title', '');

2. Menggunakan nama class

Metode ini cocok dipakai untuk mengubah atribut beberapa elemen saja, sehingga elemen lain dengan nama tag yang sama dapat tidak terdampak. Kode yang dipakai yakni sebagai berikut, dengan mengganti .nama-class

<div class="nama-class">Halo</div>

Sintaks Jquery yang dipakai adalah:

$('.nama-class').attr('title', '');

3. Menggunakan nama id

Salah satu atribut elemen HTML yaitu id. Contohnya <div id="saya">. Atribut tersebut gunanya untuk memperlihatkan identitas terhadap suatu elemen yang cuma dapat dipakai satu kali. Makara dihentikan ada elemen HTML yang memakai id yang sama.

<div id="nama-id">Halo</div>

Sintaks Jquery yang dipakai adalah:

$('#nama-id').attr('title', '');

Cara menambahkan atribut baru

Kode berikut ini akan menambahkan atribut title pada semua tag img.

$('img').attr('title', '');

Cara mengubah nilai atribut yang sudah ada

Jika sebuah elemen sudah mempunyai atribut, kau dapat mengubahnya dengan cara yang sama menyerupai menambahkan atribut baru. Kode di atas juga akan bekerja pada elemen img yang sudah punya atribut title. Makara nilai atribut dari semua elemen img tersebut akan diubah menjadi .

Menghapus atribut yang sudah ada

Kode berikut ini akan menghapus atribut title beserta nilainya pada semua tag img. Untuk menghapus atribut suatu elemen, kau dapat memakai isyarat berikut ini:

$('img').removeAttr('title');

Manipulasi atribut secara massal

Jika atribut yang dimanipulasi lebih dari satu, contohnya menambahkan title dan mengubah href pada tag anchor, maka kau dapat memakai isyarat berikut untuk memudahkan ketika mengedit.

$('a').attr({   'href':'https://www.maringngerrang.com',   'title':'' });

Cara penggunaan di Blogger

Terlebih dahulu kau perlu memasukkan isyarat di atas di dalam tag script. Untuk memakai metode-metode di atas pada blog kau di Blogger, kau dapat mengikuti langkah-langkah berikut ini.

1. Buka Blogger
2. Pada bab Tema klik tombol Edit HTML
3. Temukan isyarat </body> dan tambahkan isyarat berikut di atasnya

<script><!-- Masukkan isyarat Jquery di sini --></script>

4. Klik tombol Simpan

Contoh penggunaan

Sebagai pola isyarat berikut akan menampilkan sebuah gambar yang ketika di klik maka gambar tersebut akan berubah, kita hanya memakai isyarat JQuery untuk mengganti atribut src ketika di klik. Kamu dapat melihat dan mencoba pribadi kesudahannya di sini.

<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script> <img onclick="maringngerrang()" title="√ Cara Mengubah Atribut HTML dengan JQuery (100% Berhasil)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQbJ88KL7xS08SAy8edu_HZufncbzI6-OikNsA_2uCYHqjE41pxGCl0noCKeHG0iSp3j7fefO3C3Fr8ytO8mcPCsvzR_1n9gPXJoni-buFtcrF-wrRXvrGfDhyphenhyphensUp2tzP1ZF7TavPXRII/s1600/MusikTulus.jpg"/> <script> function maringngerrang(){ $('img').attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-GGlOy1st_nBz7alikfRQfcKpN2dz0FTcjxEOLGUHsWY5iGK19H6UtuVR385Y7OUdHsgJU4HT1ZjymEFiYK2xMKhnMUxb0JzG-L6eH9Le4OqJduipOVPkcdyOwFB6WjVa-TqnuXsw2k/s1600/MusikTulus.png'); } </script>

Penutup

Itulah langkah-langkah dan cara yang dapat kau gunakan untuk mengubah atribut tag HTML, baik menghapus, mengubah nilai, atau menambah atribut tag HML dengan memakai Javascript, atau JQuery dengan gampang dan lengkap. Semoga artikel ini dapat bermanfaat untuk kamu.

Jika ada hal yang kurang jelas, maka jangan sungkan untuk memperlihatkan komentar kau di bawah atau melalui halaman contact blog ini. Terima kasih dan hingga jumpa!
Sumber http://www.maringngerrang.com/

√ Cara Lengkap Menciptakan Template Blogger Sendiri [Bagian 1]

Dalam posting kali ini aku akan membahas perihal cara lengkap menciptakan template blog sendiri di Blogger. Untuk menciptakan template blog sendiri, teman perlu memahami dasar-dasar arahan Hypertext Markup Language (HTML) dan Cascade Style Sheet (CSS), selain itu akan lebih baik jikalau teman juga menguasai arahan JavaScript (JS).

Pertama-tama akan aku jelaskan apa-apa saja yang akan ada dalam penggalan template blog, disini aku bagi menjadi 5 bagian, mulai dari penggalan paling atas diantaranya ialah Header (yang berisi judul dan deskripsi blog), Menu (yang berisi menu-menu blog sobat), Main (bagian yang berisi posting blog sobat, kolom komentar, page navigation dll), Sidebar (berisi gadget/widget yang sanggup teman modifikasi), Footer (bisa berisi widget atau diisi dengan sajian khusus sesuai cita-cita teman dan di tambahkan copyright dibagian paling bawah). Misal tampilan dasar untuk template blog yang akan kita buat ialah menyerupai berikut ini.

Baiklah, pertama-tama kita akan membentuk arahan HTML dasar yang dibutuhkan di blogger. Pada HTML dasar ini kita hanya memenuhi hukum yang benar-benar dasar dari penggunaan HTML dan hukum dari Blogger itu sendiri. Untuk bentuk dasar dari HTML yang kita kenal ialah sebagai berikut.

<!DOCTYPE html> <html> <head>  </head> <body>  </body> </html>

Sobat sanggup mencoba memasangnya di blog sobat. Untuk memodifikasi arahan HTML di blogger pertama-tama silakan buka dashboard blogger sobat. Lalu pada menu-menu yang ada pilih Template kemudian klik Edit HTML.

Jika teman memasang arahan menyerupai diatas pada blogger, tentu teman akan mendapat pesan kesalahan. Karena pada arahan dasar HTML blogger kita memerlukan tag <b:section> dan <b:skin> dengan hukum penggunaan masing-masing. Makara jikalau ditambahkan kedua elemen tersebut maka arahan HTML dasar kita akan menjadi menyerupai berikut ini.

<!DOCTYPE html> <html> <head> <b:skin><![CDATA[  ]]></b:skin> </head> <body> <b:section class='main' id='Posting'/> </body> </html>

Nah, akan aku jelaskan kedua elemen yang ditambahkan tersebut, pertama <b:section> merupakan tag khusus pada blogger yang dipakai untuk menciptakan "bagian" atau kerangka yang sanggup ditambahkan objek tertentu dengan fungsi tertentu melalui penggalan layout atau Tata Letak, jadi jikalau arahan dengan tag b:section tersebut telah ditambahkan maka pada penggalan tata letak akan bertambah daerah untuk sanggup meletakkan widget, sedangkan <b:skin> ialah tag khusus pula yang ada pada blogger yang fungsinya kurang lebih sama dengan tag <style>, yaitu untuk meletakkan arahan CSS didalamnya. Namun kita tidak sanggup menghilangkan <b:skin> dan hanya memakai arahan <style> di dalam arahan blog alasannya ialah akan di deteksi sebagai kesalahan, pada tag <b:skin> biasanya di isi dengan arahan CSS dasar (default) yang diperlukan.

Kedua arahan tersebut saja bergotong-royong sudah cukup untuk sanggup dikatakan arahan HTML blog kita diterima oleh blogger, tetapi jikalau dilihat pada tampilan blog yang terjadi malah TIDAK ADA TAMPILAN SAMA SEKALI. Hal ini terjadi lantaran kita belum menambahkan widget di blog yang berfungsi untuk menampilkan postingan, untuk menambahkan widget tersebut kita tidak sanggup eksklusif menuju ke Tata Letak kemudian tambah widget/gadget, tetapi kita harus menambahkannya memakai arahan tertentu.

Sekarang teman ingat kita telah menciptakan "bagian" (section) pada blog untuk menempatkan widget dan perhatikan pada arahan sebelumnya bahwa id dari section yang dibentuk bernilai Posting jadi kita bertujuan untuk menempatkan widget yang menampilkan postingan blog pada section tersebut. Pertama hilangkan arahan epilog pada penggalan simpulan dari tag section, sehingga kodenya menjadi <b:section class='main' id='Posting'> (perhatikan perbedaannya dengan arahan sebelumnya), kemudian tambahkan arahan <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' visible='true'/> dibawahnya kemudian kita beri epilog untuk tag section dengan </b:section>. Makara arahan kita kini menjadi menyerupai berikut ini.

<!DOCTYPE html> <html> <head> <b:skin><![CDATA[  ]]></b:skin> </head> <body> <b:section class='main' id='Posting'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' visible='true'/> </b:section> </body> </html>

Setelah itu coba lihat pada blog sobat, akan muncul postingan blog teman (jika telah ada artikel yang telah diterbitkan), beserta dengan beberapa embel-embelnya. Nah selanjutnya kita melangkah ke proteksi title yang akan tampil pada titlebar browser, alasannya ialah jikalau diperhatikan pada penggalan title bar browser hanya menampilkan URL dari blog dan itu sangat tidak yummy dipandang.

Untuk mengatasi hal tersebut sederhananya kita cuma perlu menambahkan <title>Judul</title> didalam <head>. Tetapi tentu tidak semua halaman di blog mempunyai title yang sama, misal halaman posting tentunya harus berjudul sesuai dengan judul posting begitupun halaman-halaman lain. Makara biar lebih teratur tambahkan arahan berikut dibawah <head>.

<!-- SEO Title Tag --> <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <title>Archive untuk <data:blog.pageTitle/></title> <meta content='noindex,nofollow,noarchive' name='robots'/> <b:else/> <b:if cond='data:blog.pageType == &quot;error_page&quot;'> <title>Halaman Tidak Ditemukan | <data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> </b:if> </b:if>

Kemudian tambahkan pula tag meta charset, tag meta untuk mengakibatkan blog kita blog yang responsive atau yang biasa disebut sebagai mobile friendly kemudian tambahkan pula tag link untuk mengatur gambar favicon blog. Ini merupakan kode-kode dasar selanjutnya yang dibutuhkan dalam arahan HTML blogger. Berikut ini ketiga arahan yang aku maksud tersebut.

<meta charset='utf-8'/> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

Sehingga secara keseluruhan arahan yang kita buat semenjak awal akan menjadi menyerupai berikut ini.

<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>  <!-- SEO Title Tag --> <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <title>Archive untuk <data:blog.pageTitle/></title> <meta content='noindex,nofollow,noarchive' name='robots'/> <b:else/> <b:if cond='data:blog.pageType == &quot;error_page&quot;'> <title>Halaman Tidak Ditemukan | <data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> </b:if> </b:if>  <b:skin><![CDATA[  ]]></b:skin> </head> <body> <b:section class='main' id='Posting'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' visible='true'/> </b:section> </body> </html>

Sekarang coba simpan arahan HTML blog tersebut kemudian reload atau restart halaman editor HTML blogger dan lihat apa yang terjadi, arahan blog teman ternyata bertambah panjang. Sobat tidak perlu heran, hal ini dikarenakan beberapa hal, pertama penulisan arahan tag HTML beberapa ada yang kurang lengkap jadi blogger melengkapinya kemudian yang kedua blogger menambahkan kode-kode lebih lengkap pada widget yang menampilkan postingan blog, teman sanggup melihat-lihat sendiri apa kegunaan dari arahan tersebut melalui bentuk dan bahasanya. Makara secara keseluruhan hasil terakhir arahan blog yang kita buat pada pembahasan ini adalah.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta charset='utf-8'/> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>  <!-- SEO Title Tag --> <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <title>Archive untuk <data:blog.pageTitle/></title> <meta content='noindex,nofollow,noarchive' name='robots'/> <b:else/> <b:if cond='data:blog.pageType == &quot;error_page&quot;'> <title>Halaman Tidak Ditemukan | <data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> </b:if> </b:if>  <b:skin><![CDATA[  ]]></b:skin> </head> <body>   <b:section class='main' id='Posting'>     <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>       <!-- TERDAPAT KODE PANJANG DISINI -->     </b:widget>   </b:section> </body> </html>

Nah, kini template yang teman buat sanggup dibilang telah selesai jikalau ditinjau dari diterima atau tidaknya oleh blogger. Untuk pembahasan perihal mengatur tampilannya, menambahkan header, footer serta sidebar akan aku bahas pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 2].

Mungkin cukup sekian dari saya, semoga sanggup bermanfaat, kalau ada yang ingin teman tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau sanggup juga melalui halaman contact blog ini. Terima kasih.

Sumber http://www.maringngerrang.com/

√ Cara Lengkap Menciptakan Template Blogger Sendiri [Bagian 2]

Dalam posting kali ini aku akan melanjutkan pembahasan dari posting sebelumnya yaitu pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]. Pada bab kedua ini aku akan fokus membahas perihal bagaimana cara menambahkan bagian-bagian lain pada template blogger buatan sendiri ini, bab lain yang aku maksud yakni header, sidebar, serta footer. Sebenarnya tanpa sidebar template blog juga sanggup dikatakan lengkap lantaran beberapa template ada yang mempunyai tampilan tanpa sidebar. Tetapi kita akan menciptakan yang secara umumnya saja jadi untuk modifikasi lainnya yang bekerjasama dengan tampilan akan aku bahas pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 3]. Selain itu aku juga belum menambahkan menu, sajian blog sanggup kita atur belakangan.

Baiklah, tujuan kita yakni menambahkan bagian-bagian lain pada template blogger buatan sendiri ini. Sekarang kita telah hingga pada section yang berisi widget untuk menampilkan posting blog. Kaprikornus di blog hanya tampil posting-posting blog (kalau ada). Pertama kita akan menambahkan header untuk blog. Header dalam hal ini berisi judul blog beserta deskripsi blog. Berikut ini kemajuan terakhir dari instruksi blog yang kita buat.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta charset='utf-8'/> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>  <!-- SEO Title Tag --> <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <title>Archive untuk <data:blog.pageTitle/></title> <meta content='noindex,nofollow,noarchive' name='robots'/> <b:else/> <b:if cond='data:blog.pageType == &quot;error_page&quot;'> <title>Halaman Tidak Ditemukan | <data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> </b:if> </b:if>  <b:skin><![CDATA[  ]]></b:skin> </head> <body>   <b:section class='main' id='Posting'>     <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>       <!-- TERDAPAT KODE PANJANG DISINI -->     </b:widget>   </b:section> </body> </html>

Pertama-tama tambahkan atribut showaddelement='no' pada tag <b:section> sehingga kesudahannya menjadi <b:section class='main' id='Posting' showaddelement='no'>, hal ini bertujuan semoga pada section tersebut tidak ada tombol tambah gadget/widget. Setelah itu jangan simpan dulu, selanjutnya kita akan menambahkan section gres diatasnya. Tambahkan instruksi <b:section id='Header' maxwidget='1' showaddelement='no'> diatas tag section sebelumnya, jadi dalam body terdiri dari instruksi menyerupai berikut.

<body>   <b:section id='Header' maxwidget='1' showaddelement='no'/>   <b:section class='main' id='Posting' showaddelement='no'>    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>       <!-- TERDAPAT KODE PANJANG DISINI -->     </b:widget>   </b:section> </body>

Kemudian tambahkan section gres untuk sidebar dibawah section posting. Sehingga kini kita mempunyai 3 section didalam tag body. Hasilnya menyerupai berikut ini.

<body>   <b:section id='Header' maxwidget='1' showaddelement='no'/>   <b:section class='main' id='Posting' showaddelement='no'>     <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>       <!-- TERDAPAT KODE PANJANG DISINI -->     </b:widget>   </b:section>   <b:section id='Sidebar'/> </body>

Nah, selanjutnya kita akan menambahkan judul blog dan deskripsi blog pada bab section Header. Sama menyerupai sebelumnya, hapus epilog pada section Header kemudian tambahkan instruksi berikut dibawah section Header.

<b:widget id='Header1' locked='true' title='Koala Kumal (Header)' type='Header' version='1'>         <b:includable id='main'>           <b:if cond='data:useImage'>             <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>               <!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. -->               <b:if cond='data:mobile'>                 <div id='header-inner'>                   <div class='titlewrapper' style='background: transparent'>                     <b:include name='title'/>                   </div>                   <b:include name='description'/>                 </div>                 <b:else/>                 <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>                   <div class='titlewrapper' style='background: transparent'>                     <b:include name='title'/>                   </div>                   <b:include name='description'/>                 </div>               </b:if>               <b:else/>               <!--Show the image only-->               <div id='header-inner'>                 <a expr:href='data:blog.homepageUrl' style='display: block'>                   <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>                 </a>                 <!--Show the description-->                 <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>                   <b:include name='description'/>                 </b:if>               </div>             </b:if>             <b:else/>             <!--No header image -->             <div id='header-inner'>               <div class='titlewrapper'>                 <b:include name='title'/>               </div>               <b:include name='description'/>             </div>           </b:if>         </b:includable>         <b:includable id='description'>           <div class='descriptionwrapper'>             <p class='description'><span><data:description/></span></p>           </div>         </b:includable>         <b:includable id='title'>           <b:if cond='data:blog.pageType != &quot;item&quot;'>             <b:if cond='data:blog.pageType != &quot;static_page&quot;'>               <h1 class='title'>                 <div class='menu-hadi' onclick='openNav()'><i class='fa fa-navicon'/></div>                 <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>                   <span itemprop='headline'><data:title/></span>                 </a>               </h1>               <b:else/>               <h2 class='title'>                 <div class='menu-hadi' onclick='openNav()'><i class='fa fa-navicon'/></div>                 <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>                   <span itemprop='name'><data:title/></span>                 </a>               </h2>             </b:if>             <b:else/>             <h2 class='title'>               <div class='menu-hadi' onclick='openNav()'><i class='fa fa-navicon'/></div>               <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>                 <span itemprop='name'><data:title/></span>               </a>             </h2>           </b:if>         </b:includable>       </b:widget>

Sehingga hasil dari instruksi yang kita buat sejauh ini yakni menyerupai berikut ini.

<body>   <b:section id='Header' maxwidget='1' showaddelement='no'/>     <b:widget id='Header1' locked='true' title='Koala Kumal (Header)' type='Header' version='1' visible='true'>    <!-- TERDAPAT KODE PANJANG DISINI -->  </b:widget>   <b:section class='main' id='Posting' showaddelement='no'>     <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>       <!-- TERDAPAT KODE PANJANG DISINI -->     </b:widget>   </b:section>   <b:section id='Sidebar'/> </body>

Nah, kini kita sudah memasang beberapa komponen di blog, diatanranya header, main, dan sidebar. Seperti yang aku bahas pada posting bab pertama kita akan menciptakan 5 komponen, sehingga kita tinggal menambahkan 2 komponen yang kurang, yaitu footer dan menu.

Nah, untuk menambahkan footer, ini sama saja ketika menambahkan header dan sidebar, kita memakai section. Kenapa memakai section? Hal ini lantaran kita akan mengatur pada bab footer sanggup ditambahkan widget. Sobat sanggup mengaturnya sendiri nanti pada template yang berbeda kalau ingin memasang elemen tertentu pada bab footer namun disini kita akan mencoba menciptakan bab footer sanggup diisi dengan widget/gadget.

Kaprikornus selanjutnya tambahkan lagi section dibawah section sidebar, beri nilai ID "footer" kemudian biarkan dibawahnya tetap kosong menyerupai pada section sidebar. Kaprikornus kini instruksi yang kita miliki yakni menyerupai berikut ini.

<body>   <b:section id='Header' maxwidget='1' showaddelement='no'>     <b:widget id='Header1' locked='true' title='Koala Kumal (Header)' type='Header' version='1' visible='true'>       <!-- TERDAPAT KODE PANJANG DISINI -->     </b:widget>   </b:section>   <b:section class='main' id='Posting' showaddelement='no'>     <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>       <!-- TERDAPAT KODE PANJANG DISINI -->     </b:widget>   </b:section>   <b:section id='Sidebar'/>   <b:section id='Footer'/> </body>

Kemudian dibawahnya teman sanggup menambahkan copyright semoga terlihat lebih formal dan sanggup mengatakan identitas pembuat template blog tersebut. Ada beberapa hal yang perlu teman ketahui dalam pembuatan copyright, silakan pelajari lebih lanjut.

Selanjutnya kita akan menambahkan sajian pada bab atas blog. Berdasarkan citra yang aku berikan pada bab pertama, kita akan menciptakan sajian yang sejajar dengan judul dan deskripsi blog. Kaprikornus penempatannya kita akan letakkan berdekatan dengan section header. Kaprikornus letakkan instruksi berikut dibawah section header atau sempurna diatas section posting.

<nav id='navmenu'>   <ul id='menu'>     <li><a href='#'>Home</a></li>     <li><a href='#'>About</a></li>     <li><a href='#'>Sitemap</a></li>     <li><a href='#'>Contact</a></li>   </ul> </nav>

Sehingga jadinya instruksi yang kita miliki kini yakni menyerupai berikut ini.

<body>   <b:section id='Header' maxwidget='1' showaddelement='no'>     <b:widget id='Header1' locked='true' title='Koala Kumal (Header)' type='Header' version='1' visible='true'>       <!-- TERDAPAT KODE PANJANG DISINI -->     </b:widget>   </b:section>   <nav id='navmenu'>     <ul id='menu'>       <li><a href='#'>Home</a></li>       <li><a href='#'>About</a></li>       <li><a href='#'>Sitemap</a></li>       <li><a href='#'>Contact</a></li>     </ul>   </nav>   <b:section class='main' id='Posting' showaddelement='no'>     <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>       <!-- TERDAPAT KODE PANJANG DISINI -->     </b:widget>   </b:section>   <b:section id='Sidebar'/>   <b:section id='Footer'/>   <!-- COPYRIGHT JIKA PERLU --> </body>

Sekarang instruksi yang kita buat sanggup dibilang sudah mempunyai komponen yang lengkap menurut sasaran yang aku berikan pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1], namun selanjutnya kita akan masuk pada bab pra mengatur tampilan komponen yang telah kita buat tersebut, jadi kita akan menciptakan pembiasaan sebelum mengatur tampilannya memakai CSS. Silakan baca pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 3].

Mungkin cukup sekian dari saya, semoga sanggup bermanfaat, kalau ada yang ingin teman tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau sanggup juga melalui halaman contact blog ini. Terima kasih.

Sumber http://www.maringngerrang.com/

√ Cara Lengkap Menciptakan Template Blogger Sendiri [Bagian 3]

Dalam posting kali ini saya akan melanjutkan pembahasan dari Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1] dan Cara Lengkap Membuat Template Blogger Sendiri [Bagian 2]. Pada posting seri ketiga ini saya mungkin akan membahas lebih singkat dari yang sebelumnya lantaran poin pembahasannya yaitu menciptakan pembiasaan sebelum mengatur tampilan template blog memakai CSS, jadi disini kita belum memakai CSS.

Penyesuaian yang kita perlukan disini yaitu membungkus seluruh section dan bagian-bagian utama dalam tag tertentu, contohnya kita memakai tag <div>. Makara sections yang telah kita buat ditempatkan dalam tag tertentu kemudian kita beri nilai ID untuk tag tersebut yang akan kita gunakan untuk mengaturnya nanti dalam isyarat CSS. Kode terakhir yang telah kita buat adalah.

<body>   <b:section id='Header' maxwidget='1' showaddelement='no'>     <b:widget id='Header1' locked='true' title='Koala Kumal (Header)' type='Header' version='1' visible='true'>       <!-- TERDAPAT KODE PANJANG DISINI -->     </b:widget>   </b:section>   <nav id='navmenu'>     <ul id='menu'>       <li><a href='#'>Home</a></li>       <li><a href='#'>About</a></li>       <li><a href='#'>Sitemap</a></li>       <li><a href='#'>Contact</a></li>     </ul>   </nav>   <b:section class='main' id='Posting' showaddelement='no'>     <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>       <!-- TERDAPAT KODE PANJANG DISINI -->     </b:widget>   </b:section>   <b:section id='Sidebar'/>   <b:section id='Footer'/>   <!-- COPYRIGHT JIKA PERLU --> </body>

Pertama kita letakkan header dan menu dalam satu tag. Tuliskan isyarat <div id='header-wrapper'> diatas section header dan beri epilog </div> dibawah epilog </nav>. Makara isyarat pada bab tersebut akan menjadi.

<body>   <div id='header-wrapper'>     <b:section id='Header' maxwidget='1' showaddelement='no'>       ...     </b:section>     <nav id='navmenu'>       ...     </nav>   </div>   ... </body>

Kemudian selanjutnya bungkus pula section posting dengan div dan beri ID main-wrapper, kemudian lanjut ke sidebar (sidebar-wrapper) dan footer (footer-wrapper). Sehingga isyarat tamat yang kita miliki hingga ketika ini menjadi menyerupai berikut.

<body>   <div id='header-wrapper'>     <b:section id='Header' maxwidget='1' showaddelement='no'>       ...     </b:section>     <nav id='navmenu'>       ...     </nav>   </div>   <div id='main-wrapper'>     <b:section class='main' id='Posting' showaddelement='no'>       ...     </b:section>   </div>   <div id='sidebar-wrapper'>     <b:section id='Sidebar'/>   </div>   <div id='footer-wrapper'>     <b:section id='Footer'/>     <!-- COPYRIGHT JIKA PERLU -->   </div> </body>

Selebihnya kalau sahabat merasa perlu membungkus lagi bagian-bagian yang lebih kecil sahabat dapat melakukannya dengan memberi nilai ID yang berbeda. Dengan begini sahabat sudah siap melangkah ke tahap mengatur tampilannya dengan memakai CSS alasannya yaitu pembiasaan yang saya maksud telah selesai dilakukan. Namun perlu sahabat ingat, kalau nantinya diharapkan derma pembiasaan lagi mungkin tag div dapat ditambah ditengah jalan tergantung kebutuhan. Silakan baca lanjutannya pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4].

Mungkin cukup sekian dari saya, supaya dapat bermanfaat, kalau ada yang ingin sahabat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau dapat juga melalui halaman contact blog ini. Terima kasih.

Sumber http://www.maringngerrang.com/