Cara Membuat

Cara Membuat Tombol Bantuan dengan jQuery. Dalam merancang sebuah halaman dengan banyak feature yang kompleks, terkadang perancangnya perlu menambahkan tombol bantuan. Tombol bantuan ini biasanya digunakan untuk memberi panduan tambahan kepada pengunjung atau cuma sekedar untuk menerangkan suatu fungsi tertentu. Lazimnya tombol bantuan ini menggunakan tulisan “Help”, “What This?” atau hanya menggunakan tanda tanya (?) saja.

Buat Anda yang ingin menambahkan tombol bantuan ini di halaman Blogspot, Anda bisa membuatnya sendiri dengan bantuan jQuery. Cara membuat tombol bantuan di Blogspot ini tidaklah sulit. Silakan ikuti langkah demi langkahnya:

1. Buka blogger.com
2. Pada menu “Tema”, klik “Edit HTML”
3. Sisipkan jQuery di template yang digunakan. Untuk menambahkannya di template Blogspot, silakan ikuti caranya di postingan tentang Cara Menambahkan jQuery di Template Blogspot. Tetapi jika template yang digunakan sudah menggunakan jQuery, lewati saja bagian ini.
4. Kemudian salin script di bawah ini dan letakkan di atas tag </body>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {

$('[data-haspopup="true"]').attr("aria-haspopup", true);

$('[data-haspopup="true"]').on('click', function() {
$(this).attr('aria-haspopup', function (i, attr) {
    return attr == 'true' ? 'false' : 'true';
});

$($(this).data("target")).toggle();
});

$('[data-haspopup]').click(function(event) {
event.preventDefault();
return $(this).text() == "X" ? $(this).text("?") : $(this).text("X");
});

});
//]]></script>

5. Setelah itu simpan template.

Untuk menambahkan tombol bantuan (misalnya saja di dalam postingan), caranya adalah sebagai berikut:

1. Pilih postingan yang ingin diberi tombol bantuan, lalu edit postingan tersebut.
2. Salin tag HTML di bawah ini, letakkan di tempat dimana tombol bantuan tersebut ingin ditampilkan (umumnya di sebelah kanannya). Kemudian edit sesuai kebutuhan.

<a data-haspopup="true" data-target=".help-1" href="#">
?
</a>
<span class="collapse help-1"><!--letakkan keterangannya disini--></span>

Catatan: Selector class “help-1” bisa diganti dengan selector yang lainnya, misalnya dengan ID. Nama selector juga bisa diganti sesuai dengan kebutuhan.

3. Tambahkan pula CSS berikut ini:

<style type="text/css">
.collapse{
display:none;
}
</style>

4. Setelah itu, klik “Update” dan silakan lihat hasilnya.

Demo:

? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue. Etiam tempor orci eu lobortis elementum nibh tellus. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Tempus egestas sed sed risus pretium. Est velit egestas dui id ornare. Natoque penatibus et magnis dis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Porttitor eget dolor morbi non. Eget egestas purus viverra accumsan in nisl nisi. Felis donec et odio pellentesque diam volutpat commodo sed.

Inilah cara menambahkan tombol bantuan di halaman Blogspot. Semoga tutorial ini bisa bermanfaat, selamat mencoba!

Cara Pasang Software Pembaca Layar NVDA untuk Tunanetra. Dengan kemajuan teknologi sekarang ini, utamanya teknologi digital baik untuk komputer maupun smartphone, bisa membantu tunanetra dalam mengoperasikan beberapa perangkat modern seperti laptop, komputer dan juga smartphone. Untuk mendukung aktifitas tunanetra dalam mengoperasikan berbagai perangkat modern tersebut, maka digunakan aplikasi khusus, yaitu software pembaca layar khusus untuk tunanetra.

Software pembaca layar yang banyak digunakan tunanetra pengguna laptop dan komputer di Indonesia adalah NVDA (Non Visual Desktop Access). Software pembaca layar NVDA ini bisa didapatkan secara gratis dan bisa menggunakan speech syntesizer ID Damayanti Bahasa Indonesia. Dengan menggunakan speech syntesizer Damayanti Bahasa Indonesia tentunya akan sangat membantu buat tunanetra yang tidak menguasai Bahasa Inggris sama sekali.

Buat yang ingin tahu cara pasang software pembaca layar NVDA di laptop atau komputer supaya tunanetra turut bisa menggunakan laptop/komputer tersebut, caranya adalah sebagai berikut:

Cara Pasang NVDA di Laptop atau Komputer

Untuk cara pasang software pembaca layar NVDA untuk tunanetra ini tidaklah sulit. Silakan buka https://www.nvaccess.org/download/ lalu download NVDA versi terbaru, kemudian instal sampai selesai. Setelah software screen reader NVDA ini terpasang, software pembaca layar NVDA tersebut sudah siap digunakan.

Untuk mengaktifkan program pembaca layar NVDA ini ada 2 cara, yaitu secara manual dan secara otomatis.

Cara Mengaktifkan NVDA Secara Manual

Untuk mengaktifkan screen reader NVDA ini secara manual bisa menggunakan shortcut Control + Alt + N. Sedangkan untuk menonaktifkan pembaca layar NVDA ini bisa menggunakan shortcut NVDA + Q lalu klik OK.

Note: Tombol NVDA yang dimaksud adalah tombol capslock pada laptop dan tombol Insert numpad pada keyboard komputer/PC.

Cara Mengaktifkan NVDA Secara Otomatis Setelah Masuk Windows

Jika ingin screen reader ini bisa langsung aktif saat laptop/komputer dioperasikan, maka perlu merubah setelan dari NVDA tersebut. Silakan ikuti langkah-langkah tentang bagaimana merubah setelan NVDA agar pembaca layar NVDA yang digunakan bisa secara otomatis aktif saat laptop/komputer dihidupkan:

Buka menu NVDA dengan menggunakan shortcut NVDA + N, kemudian klik Pilihan→Settings→General, lalu centang pada “NVDA berjalan otomatis setelah masuk ke Windows”, setelah itu klik OK.

Cara Pasang NVDA ID Damayanti Bahasa Indonesia

Buat yang ingin menggunakan speech syntesizer Bahasa Indonesia ID Damayanti, silakan ikuti cara memasang NVDA ID Damayanti Bahasa Indonesia berikut ini:

1. Kunjungi https://vocalizer-nvda.com/downloads kemudian pilih add-on ID Damayanti Bahasa Indonesia dan silakan download.
2. Aktifkan screen reader NVDA, lalu silakan install add-on ID Damayanti yang sudah di download tadi sampai selesai.

Cara Mengganti Suara NVDA ID Damayanti Bahasa Indonesia

Untuk cara merubah suara default NVDA dengan suara NVDA ID Damayanti, caranya adalah sebagai berikut:

1. Aktifkan screen reader NVDA, jika program pembaca layar NVDA sudah aktif, abaikan baris ini.
2. Lalu masuk ke menu NVDA dengan menggunakan shortcut NVDA + N kemudian klik Pilihan→Settings→Speech dan klik “Change”.
3. Pada “Mesin Suara”, pilih “Nuance Vocalizer Expressive” lalu klik OK.
4. Setelah itu pada “Suara” pilih “ID Damayanti Indonesia”, kemudian klik OK.
5. Selanjutnya masuk ke menu NVDA sekali lagi, lalu “Simpan Konfigurasi”, dan selesai.

Dengan memasang software pembaca layar untuk tunanetra pada laptop atau komputer tentunya akan sangat membantu tunanetra dalam mengenal perangkat modern, khususnya komputer, sehingga diharapkan tunanetra bisa melakukan kegiatan yang lebih bermanfaat di kemudian hari.

Cara Pasang jQuery di Blogger, Cara Memasang jQuery di Blog. jQuery diperkenalkan pertama kali oleh John Resig pada tahun 2006. jQuery atau perpustakaan javascript adalah kumpulan berbagai fungsi javascript yang sudah diringkas dan disederhanakan penulisan fungsi-fungsinya agar lebih efisien dan ringkas sehingga pengembangan suatu website bisa dikerjakan secara efektif dan lebih cepat. Dengan menggunakan jQuery ini memudahkan orang dalam memanipulasi tampilan HTML, membuat animasi, dan mendukung kinerja ajax jadi jauh lebih mudah dan cepat. Apalagi sekarang jQuery didukung oleh banyak sekali browser-browser terkemuka. Tidak mengherankan jika sekarang jQuery menjadi salah satu library JavaScript yang sangat populer sekaligus paling banyak digunakan oleh banyak web developer di seluruh dunia.

Pada dasarnya, jQuery dapat berfungsi untuk menyederhanakan dalam penulisan sebuah script. Contohnya dalam menampilkan tulisan "Hello world". Bila menggunakan Javascript Native script tersebut akan ditulis seperti ini:

JavaScript Native

Sedangkan untuk menampilkan output berupa tulisan yang sama, bila memakai jQuery bisa disingkat menjadi seperti ini:

jQuery

Dari contoh di atas, dapat diketahui bahwa dengan menggunakan jQuery, untuk menghasilkan output yang sama bisa menggunakan baris kode yang jauh lebih sederhana.

Karena fungsinya yang bagus dan mudah dipelajari, Tidak heran bila Saat ini hampir sebagian besar website dan blog yang menggunakan jQuery agar pembuatan animasi, manipulasi DOM HTML dan berbagai efek unik lainnya bisa dilakukan dengan lebih mudah.

ada Banyak kelebihan yang bisa didapat jika menyisipkan jQuery di blog. Berikut beberapa keunggulan dari memasang jQuery:

Kelebihan jQuery

1. Sangat memudahkan dalam mengakses elemen-elemen HTML tertentu.
2. Kompatibel dengan semua browser terkemuka.
3. Dokumentasinya sangat lengkap, jadi gampang dipelajari.
4. Penulisan script jadi lebih pendek dan ringkas.
5. Modifikasi dan manipulasi elemen HTML jadi lebih mudah dan cepat.
6. Bisa juga digunakan untuk memanipulasi CSS.
7. Mempersingkat kerja ajax.
8. Lebih mudah dalam penerapan efek-efek animasi dan JavaScript.

Dewasa ini ada banyak tempat yang menyediakan library jQuery seperti Google, Cloudflare, Microsoft dan juga website resmi jQuery.

Google CDN (terpopuler)

Cloudflare CDN

Microsoft CDN

jQuery Official CDN

Jika mau pasang jQuery, silakan pilih salah satu dari beberapa penyedia library jQuery tersebut.

Cara Pasang jQuery di Blogspot

Cara memasang jQuery di Blogspot ini sangat mudah. Berikut ini cara pasang jQuery di Blogspot:

1. Login ke Blogger.com.
2. Lalu click menu "Tema" => "Edit HTML".
3. Salin salah satu code dari salah satu penyedia jQuery di atas, misalnya saja dari Google CDN, dan letakkan di atas tag </head> sehingga secara garis besar penempatannya akan seperti ini:

<!DOCTYPE html>
<html>
<head>
...
<script src='https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js'></script>
</head>
<body>
...
</body>
</html>

4. Setelah itu simpan tema.

Demikian informasi terbaru tentang Cara Cara Memasang jQuery di Blogspot, selamat mencoba!

Cara Mengganti Tanda Kutip (") dengan “ dan ” di Postingan Blogspot Pakai Javascript Jquery. Terkadang di dalam postingan blog, perlu menampilkan tulisan yang berbentuk dialog dari beberapa subyek. Ini biasanya digunakan pada blog yang mengupas tentang berita, cerita atau wawancara.

Umumnya blog tersebut akan menggunakan tanda kutip (") untuk mengapit setiap kalimat ucapan. Coba perhatikan penggalan dialog cerita berikut ini:

Pada kalimat dialog tersebut di atas, setiap kalimat ucapan diapit dengan tanda kutip ("). Jika ingin mengganti tanda kutip tersebut dengan tanda kutip buka (“) di awal kalimat dan tanda kutip tutup (”) di akhir kalimat, maka untuk mengubahnya menjadi tanda kutip buka (“) dan tanda kutip tutup (”) secara otomatis, perlu dinambahkan script javascript untuk menggantinya.

Berikut ini Cara Mengganti Tanda Kutip (") dengan “ dan ” di Postingan Blogspot:

1. Buka blogger.com
2. Pada menu “Tema”, pilih “Edit HTML”.
3. Karena script ini akan menggunakan jQuery, maka tambahkan Jquery di template Blogspot yang digunakan. Untuk menambahkan jQuery di Blogspot, simak postingan tentang Cara Menambahkan jQuery di Blogspot. Tetapi jika template yang digunakan tersebut sudah menggunakan jQuery, abaikan saja langkah ini.
4. Lalu salin script di bawah ini dan letakkan di atas tag </body>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() { 
html = $('[data-story="true"]').html();

$('[data-story="true"]').html(
html.replace(/\"[^\"]+\"/g, function(x) {
return "“" + x.replace(/\"/g, "") + "”";
}
)
);

});
//]]></script>

5. Setelah itu simpan template.

Untuk menerapkannya ke dalam setiap postingan blog caranya adalah sebagai berikut:

1. Edit setiap postingan yang ingin diganti tanda kutipnya.
2. Apitlah baris kalimat/dialog tersebut dengan tag berikut ini:

<div data-story="true">
<!--letakkan kalimat/dialognya disini-->
</div>

Note: Tidak harus menggunakan tag <div/> bisa juga menggunakan element lainnya. Misalnya menggunakan tag <article/> atau tag <section/>. Kuncinya terletak pada attribute data-story="true". Jadi apa pun element yang digunakan, cukup tambahkan saja attribute data-story="true" itu di element yang digunakan.

3. Setelah itu click “Update” dan lihat hasilnya.

Di bawah ini adalah contoh dialog di atas setelah diganti tanda kutipnya.

Pada contoh dialog di atas tampak semua tanda kutipnya telah berubah menjadi “ dan ”.

Mudah bukan? Selamat mencoba!

Ketika Anda mulai mempelajari SEO, Anda akan sering mendengar istilah meta tag description. Lalu apa itu meta tag description? Meta tag description adalah tag html yang bertujuan untuk membantu search engine, utamanya Google, dalam mengetahui ulasan singkat tentang isi dari website Anda. Jadi tujuan sebenarnya meta tag adalah untuk memudahkan search engine mengindeks suatu halaman.

Seberapa pentingkah meta description ini untuk SEO? Beberapa tahun lalu, search engine memang memakai meta description untuk menentukan relevansi suatu keyword. Tetapi beberapa saat kemudian banyak orang yang memanipulasi search engine dengan memasukkan keyword yang tidak relevan dengan isi artikel tersebut dalam meta description untuk mendongkrak peringkat di hasil penelusuran. Oleh karena itu search engine, khususnya Google, pada tahun 2009, Google mengeluarkan statement bahwa Google tidak lagi memakai meta description dalam menentukan hasil penelusuran dan meta tag tidak akan berpengaruh apapun terhadap peringkat.

Lalu Kenapa praktisi SEO banyak yang menyarankan untuk memasang meta tag description? Walaupun meta tag description tidak berperan secara langsung dalam menentukan ranking atau peringkat di search engine, tetapi karena Google akan menampilkan meta description ini di hasil pencarian, maka meta description ini tetap dipakai untuk memberikan penjelasan singkat suatu halaman kepada calon pengunjung saat halaman tersebut Muncul di pencarian organik. Meta description ini bisa digunakan untuk mempengaruhi keputusan pengunjung untuk mengunjungi halaman blog Anda atau tidak.

Panjang meta tag description yang Muncul di hasil pencarian ini bervariasi, berkisar antara 135 karakter sampai 160 karakter. Tetapi rata-rata tidak lebih dari 155 karakter. Google sendiri juga menyarankan agar meta tag description terlihat bagus, panjang meta tag description yang digunakan sebaiknya tidak lebih dari 150 karakter. Oleh karena meta tag description ini begitu penting karena akan dilihat pertama kali oleh pengunjung di hasil penelusuran sebelum pengunjung membuka halaman, maka agar meta tag description bisa memberikan performa yang maksimal untuk traffic pengunjung, dengan panjang kalimat meta tag description yang sebaiknya tidak lebih dari 150 karakter, ketika membuat meta tag description tentu sebaiknya membuang kata-kata yang tidak diperlukan dan hanya menggunakan kalimat yang bisa mengundang pengunjung saja. Dengan adanya meta tag description di blog, itu artinya Anda menyediakan rangkuman untuk memberikan penjelasan kepada calon pengunjung dan blog Anda akan lebih disukai oleh search engine.

Cara Mengaktifkan Meta Tag Description di Blogspot.

1. Buka blogger.com dan login.
2. Klik sub menu "Search preferences".
3. Jika pada "Meta Tags Description" pengaturannya masih [Disabled], klik Edit, kemudian centang pada pilihan kotak checkbox "Yes".
4. Pada kotak edit, ketikkan meta deskripsi blog yang dikehendaki lalu simpan perubahan.

Cara Menambahkan Meta Tag Description di Postingan Blogspot

Untuk menambahkan meta tag description pada masing-masing postingan:

1. Edit postingan yang ingin diberi meta tag description.
2. Klik "Search Description", pada kotak edit ketikkan meta tag description yang dikehendaki, lalu klik "Done".
3. Setelah itu update postingan dan selesai.

Selamat mencoba, semoga bermanfaat.

Cara Menggunakan Aria-current Attribute. Sudah umum saat ini dalam hal untuk menyajikan beberapa informasi penting di blog atau website kepada pengguna secara visual, tetapi juga memberi alternatif bagi tunanetra pengguna pembaca layar untuk juga mengetahui informasi tersebut. Apalagi sekarang ini hampir semua browser telah mendukung Assistive Technology bagi pengguna tunanetra pengguna screen reader seperti NVDA dan JAWS.

Ada beberapa pola umum yang sering kali digunakan pengembang untuk menyoroti beberapa informasi umum yang ingin diberi penekanan khusus secara visual, contohnya:

• Current page/link untuk menunjukkan halaman/tautan saat ini di dalam menu navigasi;
• Current step untuk menunjukkan langkah dalam proses/progress;
• Current date untuk menunjukkan tanggal saat ini di kalender;
• Current time untuk menunjukkan waktu saat ini dalam jadwal
• Current location untuk menunjukkan lokasi saat ini di peta.

Biasanya ini dibedakan secara istimewa dari informasi lainnya menggunakan CSS. Sebagai contoh:

<nav>
  <ul class="example-menu">
     <li><a class="current-page" href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Product</a></li>
     <li><a href="#">Privacy Policy</a></li>
     <li><a href="#">Contact</a></li>
  </ul>
</nav>

Pada contoh di atas, link yang sedang dibuka dalam skenario kali ini adalah halaman “Home”, diberi class=“current-page”

Lalu untuk membedakannya dengan link lainnya maka diberi warna yang berbeda dengan menambahkan CSS seperti ini:

<style type="text/css">
  .current-page{
     background-color:#fff;
     color:#000;
  }
</style>

Jika dibuka pada browser, tampilannya kira-kira akan seperti ini:

Pada contoh di atas terlihat tautan “Home” tampak berbeda dengan tautan lainnya. Hal ini bisa ditangkap dengan baik secara visual. Tetapi masalahnya, CSS merupakan media visual, dan informasi ini tidak bisa ditangkap oleh tunanetra pengguna pembaca layar.

Bermaksud untuk memecahkan masalah khusus ini, beberapa pengembang berinisiatif menjadikan link tersebut tidak aktif atau dengan menggunakan atribut title dengan alternatif teks seperti “current page” yang menyampaikan informasi yang relevan kepada tunanetra pengguna pembaca layar. Bahkan ada beberapa pengembang yang mencoba menggunakan gambar latar dan menggunakan alternatif text untuk menyampaikan informasi tersebut kepada tunanetra pengguna pembaca layar. Ada beberapa alasan mengapa sebaiknya para pengembang tidak menggunakan salah satu dari solusi seperti ini. Pertanyaan baru Muncul, bagaimana jika informasi yang disampaikan tersebut bukan merupakan sebuah tautan, atau bukan elemen interaktif sama sekali? Sebagai misal adalah elemen yang menampilkan keterangan hari dan tanggal di bawah ini:

Assistive Tecnology Dengan Aria-Current Attribute

Atribut aria-current dimaksudkan untuk memecahkan masalah ini. Beberapa value yang bisa digunakan antara lain:

Jadi aria-current atribut ini dapat digunakan untuk menyelesaikan beberapa masalah penyampaian informasi kepada tunanetra pengguna pembaca layar. Agar solusi Assistive Technology ini bisa diterima pula secara visual, maka bisa juga ditambahkan css khusus untuk menyoroti item tersebut dengan menggunakan aria-current sebagai property CSS. Berikut CSS untuk hal tersebut:

<style type="text/css">
  [aria-current] {
     background-color:#fff;
     color:#000;
  }
</style>

Cara Menggunakan Aria-current Attribute

Coba hapus class=“current-page” pada contoh di atas, dan gantilah dengan attribute aria-current=“page”, sehingga kode lengkapnya menjadi seperti ini:

<nav>
  <ul class="example-menu">
     <li><a aria-current="page" href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Product</a></li>
     <li><a href="#">Privacy Policy</a></li>
     <li><a href="#">Contact</a></li>
  </ul>
</nav>

maka tampilannya kira-kira akan seperti ini:

Sekilas memang tampak tidak ada perubahan apa-apa, tetapi yang membedakannya, sekarang tunanetra pengguna screen reader bisa membedakan bahwa link “Home” di atas sedang terbuka karena aplikasi pembaca layar yang digunakan oleh tunanetra akan berbunyi “current page Home”.

Begitu juga ketika ditambahkan attribute aria-current=“date” pada contoh tanggal di atas, setelah ditambahkan atribut aria-current maka screen reader seperti JAWS atau NVDA akan mengatakan “current date” setelah membacakan informasi tanggal yang ditampilkan. Di bawah ini contoh setelah ditambahkan aria-current pada contoh tanggal tersebut:

Script Jquery Javascript untuk Menambahkan Aria-Current secara Otomatis pada Link

Untuk memberi informasi kalau sebuah tautan sedang dibuka kepada tunanetra pengguna pembaca layar pastinya akan sangat merepotkan jika itu ditambahkan satu demi satu secara manual. Solusi terbaik adalah menambahkan fungsi script Javascript khusus untuk melakukan hal tersebut secara otomatis.

Cara menambahkan aria-current attribute secara otomatis ke dalam Blogspot caranya tidak terlalu sulit. Ikuti langkah-langkah berikut ini untuk menerapkannya ke dalam blog Blogspot:

1. Buka blogger.com lalu login.
2. Kemudian pada menu “Tema”, klik “Edit HTML”
3. Karena script ini menggunakan Jquery, maka pastikan tema Blogspot yang Anda gunakan sudah menggunakan Jquery. Jika belum menggunakan Jquery, maka tambahkan Jquery pada template blog yang Anda gunakan. Untuk menambahkan Jquery di template Blogspot, silakan ikuti langkah demi langkahnya pada postingan tentang Cara Pasang jQuery di Blogspot. Kalau sudah ada Jquery di template yang digunakan, maka abaikan saja baris ini.
4. Kemudian salin script di bawah ini dan letakkan di atas tag </body>

<script type='text/javascript'>//<![CDATA[
  $(document).ready(function() { 
     $('a').each(function(){ 
       var current = window.location.href;

       if ($(this).attr("href") == current) $(this).attr("aria-current", "page" );
     });
  });
//]]></script>

5. Lalu tambahkan CSS berikut ini dan letakkan di atas tag </head>

<style type="text/css">
  [aria-current] {
     background-color:#fff;
     color:#000;
  }
</style>

Ganti property background-color:#fff; dan color:#000; dengan warna yang diinginkan.

6. Setelah itu simpan template dan lihat hasilnya.

Setelah menambahkan script Javascript tersebut, maka semua link yang sedang dibuka akan ditambahkan attribute aria-current dan lihatlah perubahan warnanya. Selamat mencoba!

Menciptakan pengalaman terbaik untuk berselancar di dunia internet bagi banyak perangkat tidaklah sesulit yang dibayangkan. Dalam kesempatan kali ini, kita akan mencoba menggunakan font family yang bisa tampil dengan baik di semua perangkat. Baik itu ponsel, smart phone, android, windows phone, iphone, laptop maupun pc. Ide dasarnya adalah mengembangkan pemikiran untuk mendukung kecepatan respons suatu halaman ketika dimuat dengan memanfaatkan font yang telah ada dalam setiap perangkat tersebut. Jika sebuah halaman menggunakan font family yang didukung oleh sistem dalam perangkat, tentu tidak perlu memuat font lainnya lagi. Dengan begitu kecepatan loading halaman bisa dipercepat yang berimbas pada performa pemuatan halaman. Bagi beberapa desainer web, ini bisa jadi masalah baru pastinya. Karena menggunakan font external, misalnya saja Google fonts, tentu sangat tidak direkomendasikan.

Mencari font family yang berfungsi baik di berbagai tipe perangkat ternyata cukup membingungkan. Ini karena semua perangkat telah mengembangkan font family bawaan yang berbeda antara satu dengan yang lainnya. Setiap perangkat memiliki ukuran layar yang sangat berbeda dan kemampuan yang berbeda pula. Jadi pastilah kita tidak bisa hanya menggunakan 1 type font family saja. Kalau kita menggunakan semua font default di masing-masing perangkat tersebut, tentu kita harus melakukan beberapa penyesuaian desain pada perangkat ponsel dan smart phone.

Dalam praktiknya, jika sebuah font telah dideklarasikan, dan perangkat pengguna memiliki font yang ada dalam daftar font family tersebut, maka sisa daftar font family harus diabaikan. Ini berarti jika beberapa font tersebut dinyatakan sebagai font yang dapat diunduh dengan secara langsung atau pun tidak langsung dengan menggunakan kode yang disediakan oleh Google, maka tidak boleh ada unduhan yang dilakukan. Tetapi jika ada karakter yang tidak ada dalam font itu, maka daftar harus diproses lebih lanjut dan ini akan menghasilkan unduhan font jika tidak ada font sebelumnya dalam daftar. Browser dapat menerapkan perilaku ini secara berbeda, misalnya mungkin selalu memuat font yang dapat diunduh, atau mungkin gagal mengunduhnya jika font dalam daftar sebelumnya ada dalam sistem.

Di bawah ini adalah beberapa font family yang mengacu pada font default dalam sistem, pada kebanyakan platform iOS, Windows, Windows Phone, Android dan Ubuntu yang bisa digunakan pada proyek selanjutnya. Tentunya jika pengembang tertarik untuk menggunakan font yang didukung oleh semua perangkat dan bisa tampil baik di multi-perangkat.

Daftar Font Family Default System

• -apple-system- San Francisco di Safari (di Mac OS X dan iOS); Neue Helvetica dan Lucida Grande pada versi Mac OS X.
• system-ui - Font UI default pada platform yang diberikan.
• BlinkMacSystemFont- setara dengan -apple-system, untuk Chrome di Mac OS X.
• "Segoe UI" - Windows (Vista +) dan Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) dan Chrome OS.
• Ubuntu - semua versi Ubuntu.

Pada panduan kali ini, font untuk OS lain atau versi yang lebih lama tidak dicantumkan.

Menggunakan Font-Family Default System

Untuk menggunakan font tersebut, silakan tambahkan baris property berikut pada pengaturan css proyek yang sedang dikerjakan.

font-family:system, -apple-system, system-ui, "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Lucida Grande", Roboto, Arial, Helvetica, sans-serif, Ubuntu;

Contohnya jika ingin menggunakan font tersebut pada suatu elemen, maka tambahkan saja property tersebut pada elemen yang ingin menggunakan font tersebut.

Cara Mengganti Font Template Dengan Font Family Default System

1. Buka blogger.com kemudian login.
2. Pada menu “Tema”, klik “Edit HTML”
3. Lalu salin CSS di bawah ini dan letakkan di atas tag </head>

<style type="text/css">
  body{
     font-family:system, -apple-system, system-ui, "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Lucida Grande", Roboto, Arial, Helvetica, sans-serif, Ubuntu;
     font-size:16px;
  }
</style>

4. Setelah itu simpan tema dan lihat hasilnya.

Template yang saya gunakan ini sudah menggunakan font-family default dari masing-masing system. Untuk melihat perbedaannya, silakan buka blog ini di beberapa perangkat yang berbeda. Jika tertarik menerapkan font-family default system ini di blog atau web Anda, silakan ikuti langkah-langkah cara mengganti font template blogspot dengan font-family default dari system di atas pada desain web atau blog yang Anda miliki.

Selamat mencoba!

Membuat Tombol Expand-collapse Toggle untuk Menampilkan dan Menyembunyikan Suatu Element. Terkadang kita ingin membuat sesuatu yang bisa di tampilkan dan disembunyikan kembali, hanya dengan cara menekan sebuah tombol. Tombol semacam ini biasa disebut dengan tombol toggle expand-collapse. Komponen expand-collapse seperti ini umum digunakan untuk menampilkan dan menyembunyikan kembali sebuah informasi yang terlalu panjang. Dengan adanya tombol expand-collapse untuk menampilkan dan menyembunyikan suatu konten tentu akan membuat sajian informasi yang ditampilkan akan terlihat ringkas dan lebih rapi.

Tombol expand-collapse ini menggunakan bantuan script Javascript untuk membuat efek menampilkan dan menyembunyikan suatu element tertentu. Secara umum komponen tombol expand-collapse ini memiliki tombol yang digunakan sebagai pemicu dan sebuah elemen yang disembunyikan. Ketika melakukan klik pada tombol expand collapse, maka konten yang disembunyikan akan ditampilkan. Jika tombol expand collapse di-click sekali lagi maka content tersebut akan disembunyikan kembali.

Untuk membuat tombol expand collapse seperti ini dan menerapkannya pada postingan di Blogspot, caranya cukup mudah. Silakan ikuti langkah demi langkah di bawah ini:

Cara Membuat Tombol Toggle Expand Collapse Sederhana dengan Javascript

1. Buka blogger.com lalu login.
2. Klik menu “Tema”→“Edit HTML”
3. Salin script di bawah ini:

<script type="text/javascript">
function openclose(ID) {
var x = document.getElementById(ID).style;

x.display = (!x.display) ? 'none' : '';
}
</script>

4. Letakkan script Javascript tersebut di atas tag </body>
5. Kemudian salin CSS di bawah ini dan letakkan di atas tag </head>

<style type="text/css">
  .expand-collapse-button{
     font-size:15px;
     padding:8px 15px;
     margin:10px 20px 20px 0;
     background-color:#0000EE;
     color:#fff;
     border:1px solid #000;
     border-radius:4px;
     display:inline-block;
  }
</style>

6. Setelah itu simpan template.

Cara Menambahkan Tombol Expand-Collapse Dalam Postingan

Untuk bagaimana cara membuat tombol toggle expand collapse di dalam postingan, silakan ikuti cara berikut ini:

1. Edit postingan yang ingin diberi tombol toggle expand collapse, pilih edit dalam mode HTML.
2. Salin tag HTML di bawah ini dan letakkan di sembarang tempat di dalam postingan.

<a class="expand-collapse-button" href="javascript:openclose('ID_1');">
TOMBOL 1
</a>
<div id='ID_1' style="display:none">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue. Etiam tempor orci eu lobortis elementum nibh tellus. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Tempus egestas sed sed risus pretium. Est velit egestas dui id ornare. Natoque penatibus et magnis dis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Porttitor eget dolor morbi non. Eget egestas purus viverra accumsan in nisl nisi. Felis donec et odio pellentesque diam volutpat commodo sed.</p>
<p>Ultricies lacus sed turpis tincidunt id aliquet. Congue mauris rhoncus aenean vel elit scelerisque. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Suscipit adipiscing bibendum est ultricies integer quis auctor. Id aliquet risus feugiat in ante metus dictum. Risus in hendrerit gravida rutrum quisque non tellus orci. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Feugiat in ante metus dictum at. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Risus sed vulputate odio ut enim. Diam quam nulla porttitor massa id. Massa eget egestas purus viverra accumsan in. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Justo laoreet sit amet cursus sit amet dictum. Aliquet eget sit amet tellus cras. Enim diam vulputate ut pharetra sit amet aliquam. Morbi tristique senectus et netus et. Volutpat diam ut venenatis tellus in metus vulputate. Arcu non sodales neque sodales ut etiam. Curabitur gravida arcu ac tortor dignissim convallis aenean.</p>
<p>Ut tristique et egestas quis ipsum. Gravida dictum fusce ut placerat orci nulla pellentesque. Id aliquet lectus proin nibh nisl. Lorem ipsum dolor sit amet consectetur. Massa id neque aliquam vestibulum morbi blandit. Eget magna fermentum iaculis eu non diam. Laoreet id donec ultrices tincidunt arcu non sodales neque sodales. Id nibh tortor id aliquet lectus. Diam sit amet nisl suscipit adipiscing bibendum est ultricies. Eget felis eget nunc lobortis. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Cras fermentum odio eu feugiat pretium. Ut lectus arcu bibendum at varius vel pharetra vel. Id Semper risus in hendrerit gravida. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Justo nec ultrices dui sapien eget. Purus Semper eget duis at tellus at urna condimentum mattis. Maecenas ultricies mi eget mauris pharetra et ultrices neque.</p>
</div> 

<a class="expand-collapse-button" href="javascript:openclose('ID_2');">
TOMBOL 2
</a>
<div id='ID_2' style="display:none">
<p>Rhoncus urna neque viverra justo nec ultrices dui sapien. Et ligula ullamcorper malesuada proin libero. Rutrum quisque non tellus orci ac auctor augue. Id donec ultrices tincidunt arcu non sodales neque. Eget Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Donec et odio pellentesque diam volutpat commodo sed egestas. Curabitur vitae nunc sed velit dignissim. Massa enim nec dui nunc mattis. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Feugiat in fermentum posuere urna nec tincidunt. Cursus mattis molestie a iaculis at.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Donec adipiscing tristique risus nec. Est Lorem ipsum dolor sit amet consectetur. Pharetra diam sit amet nisl. Scelerisque viverra mauris in aliquam. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Interdum consectetur libero id faucibus nisl tincidunt eget. Tincidunt id aliquet risus feugiat in ante metus dictum. In hac habitasse platea dictumst quisque sagittis. Pellentesque habitant morbi tristique senectus. Eget arcu dictum varius duis at consectetur Lorem donec. Viverra orci sagittis eu volutpat odio facilisis. Risus feugiat in ante metus dictum. Augue interdum velit euismod in pellentesque. Diam ut venenatis tellus in metus vulputate eu scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue. Etiam tempor orci eu lobortis elementum nibh tellus. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Tempus egestas sed sed risus pretium. Est velit egestas dui id ornare. Natoque penatibus et magnis dis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Porttitor eget dolor morbi non. Eget egestas purus viverra accumsan in nisl nisi. Felis donec et odio pellentesque diam volutpat commodo sed.</p>
<p>Ultricies lacus sed turpis tincidunt id aliquet. Congue mauris rhoncus aenean vel elit scelerisque. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Suscipit adipiscing bibendum est ultricies integer quis auctor. Id aliquet risus feugiat in ante metus dictum. Risus in hendrerit gravida rutrum quisque non tellus orci. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Feugiat in ante metus dictum at. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Risus sed vulputate odio ut enim. Diam quam nulla porttitor massa id. Massa eget egestas purus viverra accumsan in. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Justo laoreet sit amet cursus sit amet dictum. Aliquet eget sit amet tellus cras. Enim diam vulputate ut pharetra sit amet aliquam. Morbi tristique senectus et netus et. Volutpat diam ut venenatis tellus in metus vulputate. Arcu non sodales neque sodales ut etiam. Curabitur gravida arcu ac tortor dignissim convallis aenean.</p>
</div> 

<a class="expand-collapse-button" href="javascript:openclose('ID_3');">
TOMBOL 3
</a>
<div id="ID_3" style="display:none">
<p>Ut tristique et egestas quis ipsum. Gravida dictum fusce ut placerat orci nulla pellentesque. Id aliquet lectus proin nibh nisl. Lorem ipsum dolor sit amet consectetur. Massa id neque aliquam vestibulum morbi blandit. Eget magna fermentum iaculis eu non diam. Laoreet id donec ultrices tincidunt arcu non sodales neque sodales. Id nibh tortor id aliquet lectus. Diam sit amet nisl suscipit adipiscing bibendum est ultricies. Eget felis eget nunc lobortis. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Cras fermentum odio eu feugiat pretium. Ut lectus arcu bibendum at varius vel pharetra vel. Id Semper risus in hendrerit gravida. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Justo nec ultrices dui sapien eget. Purus Semper eget duis at tellus at urna condimentum mattis. Maecenas ultricies mi eget mauris pharetra et ultrices neque.</p>
<p>Rhoncus urna neque viverra justo nec ultrices dui sapien. Et ligula ullamcorper malesuada proin libero. Rutrum quisque non tellus orci ac auctor augue. Id donec ultrices tincidunt arcu non sodales neque. Eget Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Donec et odio pellentesque diam volutpat commodo sed egestas. Curabitur vitae nunc sed velit dignissim. Massa enim nec dui nunc mattis. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Feugiat in fermentum posuere urna nec tincidunt. Cursus mattis molestie a iaculis at.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Donec adipiscing tristique risus nec. Est Lorem ipsum dolor sit amet consectetur. Pharetra diam sit amet nisl. Scelerisque viverra mauris in aliquam. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Interdum consectetur libero id faucibus nisl tincidunt eget. Tincidunt id aliquet risus feugiat in ante metus dictum. In hac habitasse platea dictumst quisque sagittis. Pellentesque habitant morbi tristique senectus. Eget arcu dictum varius duis at consectetur Lorem donec. Viverra orci sagittis eu volutpat odio facilisis. Risus feugiat in ante metus dictum. Augue interdum velit euismod in pellentesque. Diam ut venenatis tellus in metus vulputate eu scelerisque.</p>
</div> 

Catatan:

• Silakan ganti dummy text dengan tulisan lain sesuai kebutuhan.
• Ganti juga ID dan tulisan TOMBOL sesuai keperluan.
3. Setelah itu silakan update postingan dan lihat hasilnya.

Kalau berhasil menambahkan tombol toggle expand-collapse ke dalam postingan, kira-kira hasilnya akan seperti ini:

Demo Tombol Toggle Expand-Collapse Buka-Tutup Dengan Javascript

<!DOCTYPE html>
<html>
<head>
<title>Demo Javascript Expand Collapse</title>

<script type="text/javascript">
function openclose(ID) {
var x = document.getElementById(ID).style;

x.display = (!x.display) ? 'none' : '';
}
</script>

<style type="text/css">
a{
   text-decoration:none;
}

.expand-collapse-button{
   font-family:Georgia;
   font-size:18px;
   padding:8px 15px;
   margin:10px 20px 20px 0;
   background-color:#0000EE;
   color:#fff;
   border:1px solid #000;
   border-radius:4px;
   display:inline-block;
}
</style>
</head>
<body>
<a class="expand-collapse-button" href="javascript:openclose('ID_1');">
TOMBOL 1
</a>
<div id='ID_1' style="display:none">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue. Etiam tempor orci eu lobortis elementum nibh tellus. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Tempus egestas sed sed risus pretium. Est velit egestas dui id ornare. Natoque penatibus et magnis dis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Porttitor eget dolor morbi non. Eget egestas purus viverra accumsan in nisl nisi. Felis donec et odio pellentesque diam volutpat commodo sed.</p>
<p>Ultricies lacus sed turpis tincidunt id aliquet. Congue mauris rhoncus aenean vel elit scelerisque. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Suscipit adipiscing bibendum est ultricies integer quis auctor. Id aliquet risus feugiat in ante metus dictum. Risus in hendrerit gravida rutrum quisque non tellus orci. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Feugiat in ante metus dictum at. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Risus sed vulputate odio ut enim. Diam quam nulla porttitor massa id. Massa eget egestas purus viverra accumsan in. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Justo laoreet sit amet cursus sit amet dictum. Aliquet eget sit amet tellus cras. Enim diam vulputate ut pharetra sit amet aliquam. Morbi tristique senectus et netus et. Volutpat diam ut venenatis tellus in metus vulputate. Arcu non sodales neque sodales ut etiam. Curabitur gravida arcu ac tortor dignissim convallis aenean.</p>
<p>Ut tristique et egestas quis ipsum. Gravida dictum fusce ut placerat orci nulla pellentesque. Id aliquet lectus proin nibh nisl. Lorem ipsum dolor sit amet consectetur. Massa id neque aliquam vestibulum morbi blandit. Eget magna fermentum iaculis eu non diam. Laoreet id donec ultrices tincidunt arcu non sodales neque sodales. Id nibh tortor id aliquet lectus. Diam sit amet nisl suscipit adipiscing bibendum est ultricies. Eget felis eget nunc lobortis. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Cras fermentum odio eu feugiat pretium. Ut lectus arcu bibendum at varius vel pharetra vel. Id Semper risus in hendrerit gravida. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Justo nec ultrices dui sapien eget. Purus Semper eget duis at tellus at urna condimentum mattis. Maecenas ultricies mi eget mauris pharetra et ultrices neque.</p>
</div> 

<a class="expand-collapse-button" href="javascript:openclose('ID_2');">
TOMBOL 2
</a>
<div id='ID_2' style="display:none">
<p>Rhoncus urna neque viverra justo nec ultrices dui sapien. Et ligula ullamcorper malesuada proin libero. Rutrum quisque non tellus orci ac auctor augue. Id donec ultrices tincidunt arcu non sodales neque. Eget Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Donec et odio pellentesque diam volutpat commodo sed egestas. Curabitur vitae nunc sed velit dignissim. Massa enim nec dui nunc mattis. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Feugiat in fermentum posuere urna nec tincidunt. Cursus mattis molestie a iaculis at.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Donec adipiscing tristique risus nec. Est Lorem ipsum dolor sit amet consectetur. Pharetra diam sit amet nisl. Scelerisque viverra mauris in aliquam. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Interdum consectetur libero id faucibus nisl tincidunt eget. Tincidunt id aliquet risus feugiat in ante metus dictum. In hac habitasse platea dictumst quisque sagittis. Pellentesque habitant morbi tristique senectus. Eget arcu dictum varius duis at consectetur Lorem donec. Viverra orci sagittis eu volutpat odio facilisis. Risus feugiat in ante metus dictum. Augue interdum velit euismod in pellentesque. Diam ut venenatis tellus in metus vulputate eu scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue. Etiam tempor orci eu lobortis elementum nibh tellus. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Tempus egestas sed sed risus pretium. Est velit egestas dui id ornare. Natoque penatibus et magnis dis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Porttitor eget dolor morbi non. Eget egestas purus viverra accumsan in nisl nisi. Felis donec et odio pellentesque diam volutpat commodo sed.</p>
<p>Ultricies lacus sed turpis tincidunt id aliquet. Congue mauris rhoncus aenean vel elit scelerisque. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Suscipit adipiscing bibendum est ultricies integer quis auctor. Id aliquet risus feugiat in ante metus dictum. Risus in hendrerit gravida rutrum quisque non tellus orci. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Feugiat in ante metus dictum at. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Risus sed vulputate odio ut enim. Diam quam nulla porttitor massa id. Massa eget egestas purus viverra accumsan in. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Justo laoreet sit amet cursus sit amet dictum. Aliquet eget sit amet tellus cras. Enim diam vulputate ut pharetra sit amet aliquam. Morbi tristique senectus et netus et. Volutpat diam ut venenatis tellus in metus vulputate. Arcu non sodales neque sodales ut etiam. Curabitur gravida arcu ac tortor dignissim convallis aenean.</p>
</div> 

<a class="expand-collapse-button" href="javascript:openclose('ID_3');">
TOMBOL 3
</a>
<div id="ID_3" style="display:none">
<p>Ut tristique et egestas quis ipsum. Gravida dictum fusce ut placerat orci nulla pellentesque. Id aliquet lectus proin nibh nisl. Lorem ipsum dolor sit amet consectetur. Massa id neque aliquam vestibulum morbi blandit. Eget magna fermentum iaculis eu non diam. Laoreet id donec ultrices tincidunt arcu non sodales neque sodales. Id nibh tortor id aliquet lectus. Diam sit amet nisl suscipit adipiscing bibendum est ultricies. Eget felis eget nunc lobortis. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Cras fermentum odio eu feugiat pretium. Ut lectus arcu bibendum at varius vel pharetra vel. Id Semper risus in hendrerit gravida. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Justo nec ultrices dui sapien eget. Purus Semper eget duis at tellus at urna condimentum mattis. Maecenas ultricies mi eget mauris pharetra et ultrices neque.</p>
<p>Rhoncus urna neque viverra justo nec ultrices dui sapien. Et ligula ullamcorper malesuada proin libero. Rutrum quisque non tellus orci ac auctor augue. Id donec ultrices tincidunt arcu non sodales neque. Eget Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Donec et odio pellentesque diam volutpat commodo sed egestas. Curabitur vitae nunc sed velit dignissim. Massa enim nec dui nunc mattis. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Feugiat in fermentum posuere urna nec tincidunt. Cursus mattis molestie a iaculis at.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Donec adipiscing tristique risus nec. Est Lorem ipsum dolor sit amet consectetur. Pharetra diam sit amet nisl. Scelerisque viverra mauris in aliquam. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Interdum consectetur libero id faucibus nisl tincidunt eget. Tincidunt id aliquet risus feugiat in ante metus dictum. In hac habitasse platea dictumst quisque sagittis. Pellentesque habitant morbi tristique senectus. Eget arcu dictum varius duis at consectetur Lorem donec. Viverra orci sagittis eu volutpat odio facilisis. Risus feugiat in ante metus dictum. Augue interdum velit euismod in pellentesque. Diam ut venenatis tellus in metus vulputate eu scelerisque.</p>
</div> 
</body>
</html>

Ternyata cara membuat tombol expand collapse untuk postingan Blogspot menggunakan Javascript sangat mudah bukan? Selamat mencoba!

Seorang blogger bisa saja kesal dikarenakan tulisannya yang dicontek orang lain dan kemudian dipublikasikan di blog milik orang lain tanpa minta izin terlebih dahulu kepada penulisnya atau tidak mencantumkan kredit link sumber tulisan pada artikel contekan yang dipublikasikan tersebut. Hal ini wajar, sebab menulis artikel tentulah bukan urusan gampang dan membutuhkan keterampilan menulis yang khusus. Karena perasaan kesal tersebut, kini banyak cara ditempuh oleh para penulis blog agar tulisannya tidak bisa dengan gampangnya dicontek orang lain. Salah satunya yang cukup populer adalah menambahkan script anti copy-paste dengan menggunakan Javascript. Meskipun teknik yang digunakan dengan menambahkan script anti copy-paste tersebut masih bisa saja diakali dengan beberapa "cara khusus", tetapi setidaknya dengan menambahkan script anti copy-paste itu tidak semua orang bisa dengan leluasa asal comot tulisan dari blog yang dikelola.

Buat para blogger yang ingin menambahkan script Javascript anti copy-paste di blog Blogspot yang dikelola, berikut http://mahirngoding.blogspot.com bagikan script Javascript khusus anti copy-paste untuk blog di Blogspot.

Script Javascript anti copy-paste ini menggunakan Jquery dan bisa dimodifikasi dengan menambahkan pesan khusus.

Script Anti Copy Paste

Cara memasang script Javascript anti copy paste adalah sebagai berikut:

1. Buka blogger.com
2. Klik menu Tema => Edit HTML
3. Pastikan template Blogspot yang digunakan sudah menggunakan Jquery. Jika belum, salin code di bawah ini dan letakkan di atas tag </head>. Jika sudah menggunakan Jquery, abaikan baris ini.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

4. Kemudian salin salah satu script anti copy paste di bawah ini dan tempelkan di atas tag </body>
• Script anti copy paste tanpa pesan:

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() { 
 $(document).keydown(function (event) {
 if (event.altKey || event.ctrlKey || event.keyCode == 121 || event.keyCode == 123) {
 return false;
 }
 });
 $(document).bind("contextmenu",function(e){
 return false;
 });
});
//]]></script>

• Script anti copy paste menggunakan pesan khusus:

<script type='text/javascript'>//<![CDATA[
var message = "PESAN KHUSUS DI SINI";
$(document).ready(function() { 
 $(document).keydown(function (event) {
 if (event.altKey || event.ctrlKey || event.keyCode == 121 || event.keyCode == 123) {
alert(message);
 return false;
 }
 });
 $(document).bind("contextmenu",function(e){
alert(message);
 return false;
 });
});
//]]></script>

5. Lalu salin CSS di bawah ini dan letakkan di atas tag </head>

<style type='text/css'>
@media print{
*{
display:none !important}
body:after{
content:""}
}
</style>

6. Setelah itu simpan template dan lihat hasilnya.

Demikianlah cara memasang script anti copy paste menggunakan Javascript Jquery. Semoga tulisan ini bisa membantu para blogger untuk melindungi tulisannya dari para "pencuri". Selamat mencoba.

Cara Mengganti Older/Newer Post dengan Judul Postingan Blog. Secara default, menu navigasi halaman blogger yang ada di bagian bawah halaman depan atau halaman postingan biasanya berupa link dengan anchor text older post, newer post, dan home. Kita bisa mengubahnya dengan judul postingan sehingga membuat struktur navigasi menjadi lebih baik. Mengganti tulisan tersebut menjadi judul postingan tentunya akan lebih SEO dan user friendly. Juga akan membantu pengunjung untuk mengetahui apa pembahasan dari artikel sebelum atau selanjutnya.

Berikut ini cara mengganti next post dan older post dengan judul posting atau judul tulisan di halaman dalam postingan Blogger, khususnya untuk template bawaan Blogger.

1. Buka blogger.com
2. Lalu klik Tema => Edit HTML
3. Kemudian pastikan template blog yang digunakan sudah dilengkapi dengan Jquery agar script bisa berkerja dengan baik.
• Untuk mengetahuinya cari url untuk memanggil fungsi-fungsi Jquery di bawah ini apakah sudah ada atau belum:

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

• Kalau belum ada, tambahkan dulu syntax untuk menggunakan jQuery di bawah ini dan letakkan di atas tag </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

4. Cari syntax berikut ini dan hapus.

        <!-- navigation -->
        <b:include name='nextprev'/>

5. Kemudian ganti dengan kode berikut ini:

        <b:include name='nextprevwithtitle'/>

6. Lalu tambahkan baris syntax berikut tepat di atas syntax </b:widget>

 <b:includable id='nextprevwithtitle'>
<b:if cond='data:newerPageUrl OR data:olderPageUrl'>
<ul class='pager'>
<b:if cond='data:newerPageUrl'>
<li class='next'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"'>
<data:newerPageTitle/>
</a>
</li>
</b:if>
<b:if cond='data:olderPageUrl'>
<li class='previous'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"'>
<data:olderPageTitle/>
</a>
</li>
</b:if>
</ul>
<script type='text/javascript'>
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink + " .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
});
</script>
</b:if>
</b:includable>

7. Simpan Template, dan lihat hasilnya!

Demikian Cara Mengganti Older/Newer Post dengan Judul Postingan Blog. selamat mencoba!

Setelah membuat struktur dokumen HTML untuk tema Blogspot yang hendak dibuat, langkah selanjutnya adalah merencanakan susunan rancangan dasar yang ingin ditampilkan.

Rencananya desain tema Blogspot ini nantinya akan terdiri dari 4 baris, yaitu:

1. Header yang akan diisi dengan judul blog dan deskripsi blog
2. Content utama yang nantinya akan dibagi menjadi 2 kolom, yaitu kiri untuk postingan dan kanan untuk sidebar
3. Footer yang akan dibagi menjadi 3 kolom untuk 3 widget
4. Copyright yang akan berisi copyright blog

Setelah merencanakan susunan rancangan dasar tersebut, kemudian dibuatlah pembagian menurut struktur HTML masing-masing. Struktur HTML tersebut akan menjadi seperti ini:

<!--baris 1-->
<header>
<!--judul blog-->
</header>
<!--baris 2-->
<div class='row'>
<div class='col-md-7'>
<main>
<!--postingan-->
</main>
</div>
<div class='col-md-5'>
<aside>
<!--sidebar-->
</aside>
</div>
</div>
<!--baris 3-->
<div class='row'>
<div class='col-md-4'>
<!--widget 1-->
</div>
<div class='col-md-4'>
<!--widget 2-->
</div>
<div class='col-md-4'>
<!--widget 3-->
</div>
</div>
<!--baris 4-->
<footer>
<!--copyright-->
</footer>

Hapus tag <!--tag html--> dan ganti dengan tag HTML di atas sehingga secara keseluruhan syntax tersebut akan menjadi seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' 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 content='text/html; charset=utf-8' http-equiv='Content-type'/>
  <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
  <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<b:skin version='1.0.0'><![CDATA[

]]></b:skin>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>
<b:include data='blog' name='google-analytics'/>
</head>
<body>

<!--baris 1-->
<header>
<!--judul blog-->
</header>
<!--baris 2-->
<div class='row'>
<div class='col-md-7'>
<main>
<!--postingan-->
</main>
</div>
<div class='col-md-5'>
<aside>
<!--sidebar-->
</aside>
</div>
</div>
<!--baris 3-->
<div class='row'>
<div class='col-md-4'>
<!--widget 1-->
</div>
<div class='col-md-4'>
<!--widget 2-->
</div>
<div class='col-md-4'>
<!--widget 3-->
</div>
</div>
<!--baris 4-->
<footer>
<!--copyright-->
</footer>

</body>
</html>

Cara Membuat Tag Title yang SEO Friendly, Cara Membuat Title yang SEO Friendly, Panduan Optimasi Title Agar SEO Friendly, Cara Membuat Title Blog yang SEO Friendly. Tag title pada halaman blog merupakan elemen yang pertama kali dilihat oleh search engine Google. Title merupakan salah satu elemen paling penting dari SEO on-page karena title merupakan faktor terpenting kedua dari SEO on-page setelah konten. Jika ingin meningkatkan peringkat blog di hasil penelusuran search engine, utamanya Google, maka tentunya harus mengetahui bagaimana cara membuat title blog yang SEO friendly agar lebih optimal. Oleh karena itu penting sekali untuk melakukan optimasi title agar halaman blog lebih mudah ditemukan lewat search engine, khususnya Google. Karena title selalu akan ditampilkan di hasil pencarian Google, supaya blog lebih maksimal di hasil pencarian, artinya penulisan dan format title wajib diperhatikan dalam optimasi SEO.

Karena secara default Blogspot tidak hadir dengan SEO yang telah dioptimalkan, struktur title tag bawaan dari Blogspot itu justru meletakkan judul blog di awal title baru kemudian judul artikel. Ini tentunya tidak sesuai dengan kaidah optimasi SEO yang diharapkan oleh search engine, khususnya Google, karena search engine akan membaca title dari kiri ke kanan, dan bukan sebaliknya. Agar sesuai dengan format SEO yang diinginkan, jadi perlu mengganti title tersebut secara manual agar lebih SEO friendly.

Secara default, syntax untuk <title /> adalah sebagai berikut:

    <title><data:blog.pageTitle/></title>

atau

<title><data:view.title.escaped/></title>

Susunan title bawaan dari Blogspot biasanya judul blog berada di awal dan judul postingan malah berada di belakangnya. Bahkan untuk template default Blogger yang terbaru hanya terdiri dari judul artikelnya saja. Supaya format title tersebut SEO friendly, maka harus diganti dengan susunan title tag yang SEO friendly, yaitu judul postingan berada di awal dan judul blog ada di belakangnya.

Untuk itu, tag title default tersebut sebaiknya diganti dengan susunan tag title yang SEO friendly. Cara mengganti tag title default dengan format tag title yang SEO friendly adalah sebagai berikut:

1. Buka blogger.com
2. Kemudian klik Tema => Edit HTML, cari tag title di bawah ini dan hapus.

    <title><data:blog.pageTitle/></title>

atau

<title><data:view.title.escaped/></title>

3. Ganti dengan syntax berikut ini:

  <title>
<b:if cond='data:blog.pageName != ""'><data:blog.pageName/> | </b:if><data:blog.title/>
</title>

4. Simpan Template dan lihat hasilnya.

Susunan tag title di atas adalah susunan sederhana dari tag title yang SEO friendly. Kalau mau yang lebih lengkapnya bisa gunakan susunan tag title di bawah ini:

<title>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:blog.title/>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>Page Not Found! - <data:blog.title/><b:else/>
<b:if cond='data:blog.pageType == "item"'><data:blog.pageName/> | <data:blog.title/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'><data:blog.pageName/>~ <data:blog.title/><b:else/>
<b:if cond='data:blog.pageName == ""'><data:blog.title/><b:else/>
<b:if cond='data:blog.searchQuery'>Search results for <data:blog.searchQuery/> : <data:blog.title/><b:else/>
<b:if cond='data:blog.searchLabel'><data:blog.pageName/> - <data:blog.title/><b:else/>
<b:if cond='data:blog.pageType == "archive"'><data:blog.pageName/> | <data:blog.title/><b:else/><data:blog.title/></b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if></title>

Selamat mencoba.

1. Buka blogger.com.
2. Setelah dashboard Blogger terbuka, pilih sub menu Tema dan klik Edit HTML.
3. Karena tombol scroll ke atas ini akan menggunakan Fonts Awesome, pastikan tema Blogger yang digunakan sudah menggunakan Fonts Awsome. Jika belum, tambahkan code di bawah ini tepat di atas code <b:skin><![CDATA[

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

4. Tombol scroll ke atas ini juga menggunakan JQuery, jadi pastikan tema yang digunakan sudah menggunakan JQuery. Jika belum menggunakan, tambahkan code di bawah ini tepat di bawah code ]]></b:skin>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

5. Lalu copy style CSS di bawah ini tepat di atas syntax ]]></b:skin>

#back-to-top { 
height: 55px; 
width: 55px; 
position:fixed;
bottom:30px;
right:30px;
display:none;
background-color:#4dc247;
color:#EEE;
z-index:9999;
cursor:pointer;
opacity:0;
-webkit-transform:translateZ(0);
transition:all .4s;
border-radius:50%;
padding:15px;
font-size:25px}

#back-to-top:hover{
background-color:#333;
color:DADADA;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;}

6. Setelah itu copy tag HTML berikut ini di atas tag </body>.

<a href='#top' id='back-to-top' title='Back to Top'>
<i class='fa fa-angle-up'/>
</a>

<script type='text/javascript'>
$(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
            $('#back-to-top') .fadeOut();
        } else {
            $('#back-to-top') .fadeIn();
        }
    });
    $('#back-to-top').on('click', function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
        });
});
</script>

7. Setelah itu klik tombol Simpan Tema dan lihat hasilnya.

1. Buka blogger.com.
2. Pada Menu, pilih sub menu Tema lalu klik Edit HTML.
3. Copy <b:include cond='data:view.isMultipleItems' name='pagenavi'/> berikut ini dan paste di bawah syntax <b:include name='nextprev'/>
4. Kemudian copy code di bawah ini tepat di atas syntax </b:widget>

        <b:includable id='pagenavi'>
<div class='pagenavi'>
<script type='text/javascript'>
 var pageNaviConf = {
 perPage: 6,
 numPages: 5,
 firstText: "Recent",
 lastText: "Last",
 nextText: "Next",
 prevText: "Previous"
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='';if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
//]]>
</script>
</div>
</b:includable>

5. Setelah itu klik Simpan Tema. Selesai, dan lihat hasilnya.

Apa itu breadcrumbs? Banyak blogger pemula yang belum begitu mengenal tentang apa itu breadcrumbs dan seberapa penting meletakkan breadcrumbs ini ke dalam blog yang dikelola. Breadcrumbs adalah menu navigasi pada suatu blog atau website yang biasanya digunakan untuk membantu pengunjung mengetahui letak halaman yang sedang dibuka. Atau dengan kata lain, breadcrumbs ini digunakan untuk memberikan gambaran kepada pembaca mengenai posisi postingan yang sedang dibaca. Dengan menambahkan breadcrumbs ini ke dalam blog, maka breadcrumbs ini bisa melengkapi menu navigasi lainnya.

Manfaat Breadcrumbs

1. Memudahkan pengunjung berpindah ke halaman lainnya.
2. Memberi gambaran kepada pembaca mengenai posisi postingan yang sedang dibuka.

Fungsi atau Manfaat Breadcrumbs untuk SEO

1. Breadcrumbs bisa digunakan untuk membangun internal linking dengan halaman lainnya.
2. Mempermudah robot mesin pencari dalam merayapi seluruh halaman blog.

Cara Membuat Breadcrumbs Dengan Bootstrap di Blogspot

Untuk membuat Breadcrumb Bootstrap di Blogspot, caranya tidaklah sulit. Di bawah ini cara membuat breadcrumbs Bootstrap di Blogspot:

1. Buka blogger.com
2. Buka menu “Tema”, lalu klik “Edit HTML”
3. Karena breadcrumbs ini menggunakan plugin Bootstrap, maka tambahkan Bootstrap di template yang digunakan. Caranya salin code di bawah ini, dan letakkan tepat di atas tag </head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
4. Kemudian cari code seperti ini <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
5. Setelah ketemu, salin code di bawah ini, lalu letakkan tepat di bawah code <b:includable id='main' var='top'> yang ada di bawahnya.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
   <ol class='breadcrumb' name='Breadcrumb' role='navigation'>
     <li>
       <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
          <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
             Home
          </a>
       </span>
     </li>
     <b:if cond='data:blog.pageType == "error_page"'>
       <li>Page not found</li>
     <b:else/>
     <b:if cond='data:blog.pageType == "static_page"'>
       <li><b:if cond='data:blog.pageName == ""'>Untitled document<b:else/><data:blog.pageName/></b:if></li>
     <b:else/>
     <b:if cond='data:blog.pageType == "item"'>
       <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
            <b:loop values='data:post.labels' var='label'>
              <li>
                <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
                  <a expr:href='data:label.url + "?&max-results=8"' expr:title='data:label.name' itemprop='url'>
                    <span itemprop='title'><data:label.name/></span>
                  </a>
                </span>
              </li>
            </b:loop>
               <li><b:if cond='data:blog.pageName == ""'>Untitled document<b:else/><data:blog.pageName/></b:if></li>
          <b:else/>
              <li><b:if cond='data:blog.pageName == ""'>Untitled<b:else/><data:blog.pageName/></b:if></li>
          </b:if>
       </b:loop>
     <b:else/>
     <b:if cond='data:blog.pageType == "archive"'>
       <li><b:if cond='data:numPosts == 1'>Only</b:if> <data:numPosts/> post<b:if cond='data:numPosts != 1'>s</b:if> archived on <data:blog.pageName/></li>
     <b:else/>
     <b:if cond='data:blog.searchQuery'>
       <li><b:if cond='data:numPosts == 1'>Only</b:if> <data:numPosts/> post<b:if cond='data:numPosts != 1'>s</b:if> match with keyword “<data:blog.searchQuery/>”</li>
     <b:else/>
     <b:if cond='data:blog.pageType == "index"'> 
       <li><b:if cond='data:numPosts == 1'>Only</b:if> <data:numPosts/> post<b:if cond='data:numPosts != 1'>s</b:if><b:if cond='data:blog.pageName != ""'> categorized in “<data:blog.pageName/>”</b:if></li>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
   </ol>
</b:if>

6. Setelah itu simpan tema dan lihat hasilnya.

Inilah cara membuat breadcrumbs Bootstrap di Blogspot yang terbaru, jika Anda tertarik menambahkan breadcrumbs di template Blogspot Anda, silakan ikuti langkah-langkah di atas. Selamat mencoba!

Cara Memasang Slideshow di Blog, Jquery Slideshow untuk Blogspot. Jquery slide show atau slider Jquery adalah slideshow yang dibangun dengan Javascript Jquery untuk menampilkan gambar atau teks. Jquery slideshow sendiri memberi kemudahan dalam memilih beberapa efek animasi transisi pada gambar yang ditampilkan. Umumnya digunakan pada website atau blog yang memberi penekanan pada tampilan foto. Slideshow semacam ini banyak dipakai oleh website portofolio dan fotografi serta toko online untuk menampilkan animasi galeri foto mereka. Jquery slide show juga banyak digunakan sebagai widget Blogger untuk menampilkan update post terbaru maupun popular posts secara otomatis. Dengan menggunakan Jquery slideshow ini akan memungkinkan kita untuk membuat slideshow dengan banyak efek transisi gambar yang sangat menarik.

Tutorial Jquery slide show ini cukup mudah diikuti dan dipahami. Untuk cara membuat slider Jquery ini bisa terpasang di Blogspot, berikut tutorial cara memasang Jquery slideshow di dalam blog:

1. Buka blogger.com dan login.
2. Lalu klik Tema => Edit HTML
3. Pastikan template yang digunakan sudah menggunakan Jquery. Jika belum, agar script bisa berjalan lancar, tambahkan Jquery pada tema Blogspot yang digunakan. Jika sudah ada Jquery, abaikan baris ini.
4. Salin script di bawah ini dan tempelkan tepat di atas tag </body>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() { 
$(".slideshow .content-slider:gt(0)").hide();
setInterval(function() {
 $('.slideshow .content-slider:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
 .appendTo('.slideshow');
}, 3000);
});
//]]></script>

5. Kemudian salin style CSS di bawah ini dan letakkan di atas code ]]></b:skin>

.slideshow{
margin:20px auto;
width: 100%;
height: auto}
.content-slider{
display:none}
.content-slider img{
max-width:100%;
height:auto}

6. Setelah itu simpan template.

Untuk memasang Jquery slide show di dalam postingan, caranya cukup mudah:

1. Edit postingan yang ingin diberi slide show, dan pilih mode HTML.
2. Salin tag HTML di bawah ini dan letakkan pada tempat yang diinginkan.

<div class="slideshow">
<div class="content-slider">
<img src="{URL GAMBAR 1}"/>
<div class="text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>
</div>
<div class="content-slider">
<img src="{URL GAMBAR 2}"/>
<div class="text-center">
Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. 
</div>
</div>
<div class="content-slider">
<img src="{URL GAMBAR 3}"/>
<div class="text-center">
Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue. 
</div>
</div>
</div>

3. Ganti tulisan {URL GAMBAR} dengan URL gambar dan ganti dummy text dengan tulisan sesuai keinginan.
4. Setelah itu klik Update dan silakan lihat hasilnya.

Kalau berhasil memasang Jquery slide show di blog, maka hasilnya kira-kira akan seperti ini:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque.

Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue.

Cara memasang slide show ternyata sangat mudah bukan? Selamat mencoba.

Apa itu preloader? Banyak dari Anda mungkin telah melihatnya. Dan bagi Anda yang belum mengerti dengan apa itu yang disebut dengan preloader, jika Anda berselancar di internet dan pernah melihat sebuah gambar yang ditampilkan sebelum halaman dimuat sepenuhnya, setelah halaman tersebut telah dimuat kemudian gambar tersebut perlahan-lahan menghilang, efek semacam inilah yang disebut dengan istilah preloader.

Lalu untuk apa manfaatnya? Penambahan preloader ini ditujukan untuk meningkatkan kinerja dan memberikan kontrol pemuatan yang lebih halus kepada pengguna sebelum halaman yang sebenarnya bisa ditampilkan. Untuk itu sangat disarankan agar semua orang untuk menambahkan efek preloading ini ke blog masing-masing karena akan membuat blog lebih indah dan terlihat lebih profesional. Oleh karena itulah tutorial kali ini akan menunjukkan kepada Anda bagaimana cara menambahkan preloader tersebut ke blog Anda.

Cara Membuat Preloader Blogspot dengan JQuery

Cara membuat preloader Blogspot dengan menggunakan JQuery adalah sebagai berikut:

1. Buka blogger.com
2. Pada menu, pilih sub menu Tema, lalu klik Edit HTML.
3. Pastikan tema Blogspot yang digunakan sudah menggunakan JQuery. Jika belum, tambahkan code di bawah ini di atas tag </head>. Tetapi jika tema Blogger yang digunakan tersebut sudah memakai JQuery, langkah ini diabaikan saja.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

4. Lalu tambahkan code di bawah ini di bawah tag <body>

<div id="preloader">
<div class="preloader">
<img src="{URL GAMBAR}"/>
</div>
</div>

Note: Ganti {URL GAMBAR} dengan URL gambar yang mau dijadikan preloader.

5. Kemudian tambahkan code CSS di bawah ini tepat di atas tag ]]></b:skin>

#preloader{
background-color:#FFF;
position:fixed;
text-align:center;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%;
z-index:9999}

.preloader{
position:relative;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%}

.preloader img{
position:relative;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%;
z-index:9999}

6. Setelah itu, tambahkan script Javascript di bawah ini di atas tag </body>

<script type="text/javascript">//<![CDATA[
(function($) {
$(window).load(function() {
$('#preloader').delay(300).fadeOut('slow');
});
})(window.jQuery);
//]]></script>

7. Lalu klik Simpan Tema. Selesai.

Selamat mencoba.

Kesempatan kali ini http://mahirngoding.blogspot.com ingin berbagi tentang bagaimana cara membuat template Blogger/Blogspot yang responsif dengan menggunakan Bootstrap. Rencananya tema Blogspot yang dibuat ini akan menggunakan plugin CSS Bootstrap V3 untuk desain yang responsif dan juga memakai Font Awesome untuk mempercantik tampilan blog serta menggunakan Jquery untuk membuat tampilan blog agar lebih dinamis. Rancangan template blog tersebut secara garis besarnya akan seperti ini:

Dokumen HTML

Sebagai langkah awal, buka Notepad dan salin struktur dokumen HTML di bawah ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' 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 content='text/html; charset=utf-8' http-equiv='Content-type'/>
  <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
  <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

<b:skin version='1.0.0'><![CDATA[

]]></b:skin>

<b:include data='blog' name='google-analytics'/>
</head>
<body>

<!--tag html-->

</body>
</html>

CSS Bootstrap V3

Kemudian salin syntax di bawah ini untuk memanggil fungsi CSS Bootstrap:

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>

Letakkan code tersebut di atas code ini:

<b:skin version='1.0.0'><![CDATA[

Javascript Jquery

Kemudian tambahkan code untuk memanggil fungsi-fungsi Javascript Jquery, salin code di bawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

Lalu tempelkan code tersebut di atas code berikut ini:

<b:include data='blog' name='google-analytics'/>

Javascript Bootstrap

Jangan lupa tambahkan pula script Javascript bawaan dari Bootstrap. Salin code di bawah ini:

<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>

Letakkan code tersebut di bawah code berikut ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>

Fonts Awesome

Selanjutnya tambahkan Fonts Awesome. Salin code di bawah ini:

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Letakkan code ini tepat di bawah code:

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>

Hasil

Jadi secara keseluruhan nantinya struktur dokumen tersebut akan seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' 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 content='text/html; charset=utf-8' http-equiv='Content-type'/>
  <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
  <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<b:skin version='1.0.0'><![CDATA[

]]></b:skin>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>
<b:include data='blog' name='google-analytics'/>
</head>
<body>

<!--tag html-->

</body>
</html>

Bersambung ke Cara Membuat Tema Blogspot Bagian 1 Tahap Perencanaan