Kumpulan Kode Tag Snippet Script Blogspot
Memilih template dan mengatur tampilan blog merupakan salah satu aktivitas blogging yang terbilang cukup penting karena aktifitas ini merupakan salah satu faktor penting untuk menarik perhatian pengunjung blog. Pemilihan template hendaknya disesuaikan dengan niche blog yang digunakan. Pemilihan template yang tepat akan memberikan pengalaman pengguna yang atraktif dan dinamis. Hal ini pula yang akan mendorong pengunjung blog merasa betah dan tertarik untuk kembali lagi.
Setelah memilih template yang tepat hal selanjutnya adalah mengisi tampilan blog dan memodifikasi tampilan dari template yang digunakan, karena bawaan default baik template standar blogger maupun yang custom perlu sedikit banyak penyesuaian agar bisa sesuai dengan grand desain awal sewaktu merencanakan tujuan dari pembuatan blog. Modifikasi template blog adalah bagian dari aktivitas ngeblog (blogging) untuk menyajikan tampilan blog yang unik dan menarik.
Umumnya blogger ingin memiliki tampilan blog yang berbeda dengan blog lainnya, meskipun templatenya sama. Modifikasi template blog biasanya dilakukan dari segi warna, jenis huruf, ukuran huruf, penambahan widget, desain tampilan widget, dan sebagainya. Resiko dari asyiknya modifikasi template adalah "ketinggalan" oleh blogger lain yang lebih fokus ke konten (artikel blog) ketimbang utak-atik template tapi kalo sudah hobi yaa sudah dilanjut aja lagian memiliki tampilan blog yang bagus merupakan kebanggaan tersendiri.
Perlu diketahui juga modifikasi tampilan blog diperlukan pengetahuan mengenai tentang kode HTML, CSS, Javascript dan kode snippet blog baik untuk platform wordpress, blogspot, joomla dan platform lainnya. Setiap platform memiliki kode snippet sendiri jadi pastikan anda memahami kode snipet dari platform yang akan digunakan.
Pada pembahasan artikel ini, penulis hanya akan membahas kode umum (HTML, CSS & Javascript) serta kode snippet yang menggunakan platform blogspot.
Setelah memilih template yang tepat hal selanjutnya adalah mengisi tampilan blog dan memodifikasi tampilan dari template yang digunakan, karena bawaan default baik template standar blogger maupun yang custom perlu sedikit banyak penyesuaian agar bisa sesuai dengan grand desain awal sewaktu merencanakan tujuan dari pembuatan blog. Modifikasi template blog adalah bagian dari aktivitas ngeblog (blogging) untuk menyajikan tampilan blog yang unik dan menarik.
Umumnya blogger ingin memiliki tampilan blog yang berbeda dengan blog lainnya, meskipun templatenya sama. Modifikasi template blog biasanya dilakukan dari segi warna, jenis huruf, ukuran huruf, penambahan widget, desain tampilan widget, dan sebagainya. Resiko dari asyiknya modifikasi template adalah "ketinggalan" oleh blogger lain yang lebih fokus ke konten (artikel blog) ketimbang utak-atik template tapi kalo sudah hobi yaa sudah dilanjut aja lagian memiliki tampilan blog yang bagus merupakan kebanggaan tersendiri.
Perlu diketahui juga modifikasi tampilan blog diperlukan pengetahuan mengenai tentang kode HTML, CSS, Javascript dan kode snippet blog baik untuk platform wordpress, blogspot, joomla dan platform lainnya. Setiap platform memiliki kode snippet sendiri jadi pastikan anda memahami kode snipet dari platform yang akan digunakan.
Pada pembahasan artikel ini, penulis hanya akan membahas kode umum (HTML, CSS & Javascript) serta kode snippet yang menggunakan platform blogspot.
Seperti yang kita ketahui mengurusi tampilan blog (template) akan banyak menguras waktu, energi, dan pikiran. Bisa seharian bahkan berhari-hari waktu dihabiskan untuk modifikasi template, apalagi kalo "gagal maning - gagal maning" menerapkan kodenya, tapi gapapa yang penting masih tetap semangat.
Dalam istilah blogging Kode html untuk blog secara umum di sebut dengan template atau tema tampilan blog atau apalah yang penting anda paham dimana tampilan blog/web anda akan terlihat menarik tergantung dengan template yang anda gunakan tersebut, semakin baik template blog anda semakin menarik blog anda di pandang pengunjung blog yang bisa memberikan kesan tersendiri, dengan harapan pengunjung blog akan betah berlama-lama di blog anda dan ingin kembali mengunjungi blog anda, kecuali konten anda asal-asalan, walaupun templte blognya keren dan menarik ya sama saja, pengunjung langsung kabur, dan inilah yang akan menambah bounce rate blog anda akan membengkak yaitu banyaknya visitor balik kanan karena tidak suka dengan konten anda atau tampilan blog anda. jadi tampilan blog itu sangatlah penting sekali lagi penting, penting dan penting.
Dalam istilah blogging Kode html untuk blog secara umum di sebut dengan template atau tema tampilan blog atau apalah yang penting anda paham dimana tampilan blog/web anda akan terlihat menarik tergantung dengan template yang anda gunakan tersebut, semakin baik template blog anda semakin menarik blog anda di pandang pengunjung blog yang bisa memberikan kesan tersendiri, dengan harapan pengunjung blog akan betah berlama-lama di blog anda dan ingin kembali mengunjungi blog anda, kecuali konten anda asal-asalan, walaupun templte blognya keren dan menarik ya sama saja, pengunjung langsung kabur, dan inilah yang akan menambah bounce rate blog anda akan membengkak yaitu banyaknya visitor balik kanan karena tidak suka dengan konten anda atau tampilan blog anda. jadi tampilan blog itu sangatlah penting sekali lagi penting, penting dan penting.
Daftar Kode Penting untuk Modifikasi Template Blog
Berikut ini beberapa kode CSS, HTML, dan JavaScript -- tiga jenis kode yang membangun sebuah template blog -- yang bisa dan biasa digunakan untuk modifikasi template.
Definisi kode CSS, HTML, dan JavaScript yang dikutip dari Wikipedia :
- CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
- HTML adalah kependekan dari Hyper Text Markup Language, yaitu sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
- JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
#1 Kode Warna HTML
Kode warna HTML adalah kode yang berfungsi mengubah warna huruf atau warna apa pun di template blog. Kode warna HTML diawali dengan kode "tagar" alias tanda-pagar (#). Misalnya, kode #000000 adalah warna hitam dan #ffffff kode warna putih. Kode warna HTML adalah kembar tiga heksadesimal yang mewakili warna merah, hijau, dan biru (#RRGGBB). Misalnya, dalam warna merah, kode warna adalah # FF0000, yaitu '255' merah, '0' hijau, dan '0' biru. Kode warna ini dapat digunakan untuk mengubah warna latar belakang, teks, dan tabel pada halaman web.
Web tools kode warna dan tabel warna HTML dapat dilihat pada halaman Daftar Kode Warna HTML.
Web tools kode warna dan tabel warna HTML dapat dilihat pada halaman Daftar Kode Warna HTML.
#2. Kode Quickedit
Kode ini untuk menyembunyikan Icon Obeng & Tang (Wrench) alias ikon pensil yang biasa muncul di widget. Ikon atau gambar Obeng & Tang ini wajib disembunyikan biar tidak mengganggu tampilan blog.
Secara, banyak pengunjung sedang login ke akun bloggernya sehingga tanda obeng & tang itu akan terlihat juga, bukan hanya oleh admin/author blog.
Secara, banyak pengunjung sedang login ke akun bloggernya sehingga tanda obeng & tang itu akan terlihat juga, bukan hanya oleh admin/author blog.
.quickedit{display:none}
Simpan kode tersebut di atas kode </b:skin> atau </style> untuk menghapus gambar obeng & tang.
#3. Kode Redirect Error 404 Page Not Found
Jika permalink posting Anda berubah atau posting Anda dihapus, maka akan ditemukan halaman kosong alias Error 404 Halaman Tidak Ditemukan. Ini bahaya buat reputasi blog kita di mata mesin pencari ataupun pengunjung.
Untuk mengatasinya, salah satu solusinya, adalah dengan memasang kode yang akan mengarahkan halaman yang tidak ditemukan itu ke halaman depan (homepage). Berikut ini kodenya, simpan di atas kode </body>
<b:if cond='data:blog.pageType == "error_page"'>
<script type='text/javascript'>MOZ_redirect=setTimeout(function(){location.pathname= "/" }, 1);</script>
</b:if>
#4. Kode Anti-Komentar Spam
Kode ini untuk menghapus otomatis link hidup/aktif yang ada dalam isi komentar blog. Pasang di atas kode </body> atau </head>
<script type='text/javascript'>
jQuery(document).ready(function(){jQuery("#comments p").find("a").replaceWith("<mark>Spam Detected!</mark> Link aktif otomatis terhapus!!!");});
</script>
#5. Kode Heading Tag H1 untuk Logo/Gambar Header
Kode berikut ini, yaitu <h1> dan </h1>, untuk menjadikan gambar logo header sebagai H1 agar SEO Friendly. Pasang di bagian seperti dalam kode berikut ini:
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<h1>
<img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' style='display: block'/>
</h1>
</a>
#6. Kode Mengatur Jumlah Posting Halaman Label
Kode berikut ini untuk mengatur jumlah posting di halaman label. Ketika kita klik link label/kategori, maka akan terbuka halaman berisi posting label yang yang diklik.
Untuk membatasi jumlahnya, maka GANTI semua kode:
data:label.url
DENGAN kode:
data:label.url + "?&max-results=5"
Angka 5 adalah jumlah posting. Bisa diubah menjadi lebih kecil atau besar.
#7. Kode Tahun Copyright Otomatis
Di bagian footer biasanya ada tahun copyright, seperti Copyright (c) 2016 Contoh Blog. All Rights Reserved.
Nah, agar tahunnya berubah secara otomatis begitu pergantian tahun terjadi, maka hapus kode copyright lama dan ganti dengan kode ini:
Copyright © <script type='text/javascript'>document.write(new Date().getFullYear());</script> <a expr:href='data:blog.homepageUrl'></a>. All rights reserved.
#8. Kode Logis Untuk Mengatur Tampilan Di BlogSpot
Jenis Halaman Blogger & Tag Bersyarat Blogger Paling Banyak Digunakan
- Archive Page
Halaman Blogger ditambahkan oleh widget Arsip yang biasanya memiliki "_archive.html" yang berakhir dengan URL milik jenis halaman Arsip.
<b:if cond='data:blog.pageType == "archive"'> ...CODE... </b:if> - Index Page
Halaman Blogger dengan daftar posting biasanya disebut halaman Indeks. Misalnya - Halaman Beranda dan halaman hasil pencarian.
<b:if cond='data:blog.pageType == "index"'> ...CODE... </b:if> - Item Page
Posting Blogger yang dibuat dengan mengklik tombol posting baru disebut halaman Item.
<b:if cond='data:blog.pageType == "item"'> ...CODE... </b:if>
Tag Bersyarat untuk Malone posting Blogger Pertama
<b:if cond='data:post.isFirstPost'> ...CODE... </b:if> - Static Page
Halaman blogger yang dibuat dengan mengklik tombol halaman baru disebut halaman statis.
<b:if cond='data:blog.pageType == "static_page"'> ...CODE... </b:if> - Error Page
Halaman Blogger dapat dialihkan ke halaman Kesalahan saat diarahkan ke URL yang tidak ada.
<b:if cond='data:blog.pageType == "error_page"'> ...CODE... </b:if> - Label Page
Halaman berbasis label Blogger berisi artikel yang diposting serupa atau terkait.
<b:if cond='data:blog.searchLabel'> ...CODE for all Label Pages... </b:if>
Tentukan Nama Label dalam pernyataan bersyarat.
<b:if cond='data:blog.searchLabel== "LABEL_NAME"'> ...CODE for specific Label Page... </b:if> - Search Page
Halaman Blogger yang menyediakan daftar posting yang cocok dengan persyaratan kueri yang diberikan.
<b:if cond='data:blog.searchQuery'> ...CODE for all Search Pages... </b:if>
Tentukan Permintaan Pencarian dalam pernyataan bersyarat.
<b:if cond='data:blog.searchQuery == "SEARCH_QUERY"'> ...CODE for specific Search Page... </b:if>
Beberapa Kondisi Logis Tag Blogger
1. <b:if cond='data:blog.url == data:blog.homepageUrl'>...CODE...</b:if>
Kode ini berfungsi untuk menampilkan widget blog hanya pada main post saja alias akan menghilang ketika sobat mengklik Label Post atau membaca postingan secara keseluruhan
2. <b:if cond='data:blog.url != data:blog.homepageUrl'>...CODE...</b:if>
Kode ini berfungsi untuk menampilkan widget blog pada label post dan single post (membaca postingan secara keseluruhan).
3. <b:if cond='data:blog.pageType != "item"'>...CODE...</b:if>
Kode ini berfungsi untuk menampilkan widget blog pada main post dan label post dan akan menghilang ketika membaca postingan secara keseluruhan (single post).
4. <b:if cond='data:blog.pageType == "item"'>...CODE...</b:if>
Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja alias ketika sobat membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau label post.
5. <b:if cond='data:blog.pageType == "index"'>...CODE...</b:if>
Fungsi kode ini sama dengan fungsi kode pada nomer 3.
6. <b:if cond='data:blog.url == "URL"'> ...CODE...</b:if>
Fungsi kode ini melakukan perubahan spesifik hanya dalam satu posting / halaman tertentu
7. <b:if cond='data:blog.pageType != "index"'> ...CODE... </b:if>
Fungsi kode ini diterapkan untuk menampilkan kode tertentu pada semua halaman kecuali posting-daftar-halaman
8.
<b:if cond='CONDITION-CODE-1'>
<!--..Action-Code-1...-->
<b:elseif cond='CONDITION-CODE-2'/>
<!--..Action-Code-2...-->
<b:else/>
<!--..Default-Action-Code...-->
</b:if>
Kode ini berfungsi dalam beberapa kondisi pernyataan fungsi yang multi-kondisional untuk dilakukan maka dalam platform Blogger memiliki tag dan
9.
<b: if cond='CONDITION-CODE-1 && CONDITION-CODE-2'>
<!--..Action-Code...-->
</b: if >
<b: if cond='CONDITION-CODE-1 || CONDITION-CODE-2'>
<!--..Action-Code...-->
</b: if >
Kode ini berfungsi untuk penggunaan kode logis operand AND dan OR pada penggunaan kode logis blogger.
Penerapan kode diatas bisa dilakukan dengan 2 cara.
1. Langsung pada widget tersebut.
Cara ini langsung pada widget masing2 yang hendak diatur tampilannya. Misalkan sobat mau menambahkan widget HTML/Javascript dibagian sidebar. Jika sudah, jangan lupa untuk centang Expand Widget Templates.
Kode widget HTML/Javascript aslinya akan tampak seperti ini.
<b:widget id='HTML30' locked='false' title='Link Sobat' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty --> <b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2> </b:if>
<div class='widget-content'> br /><data:content/> </div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
* Perhatikan yang saya kasih warna biru
Kemudian, sobat ingin menambahkan kode nomer 4. Sobat harus mengedit kodenya menjadi seperti berikut ini.
<b:widget id='HTML30' locked='false' title='Link Sobat' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<h2 class='title'><data:title/></h2> <div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/></b:includable>
</b:widget>
* Perhatikan yang saya kasih warna biru
Kelebihan cara ini adalah tampilan widget tersebut akan tetep muncul di layout (page element) sehingga memudahkan ketika kita mau menambahkan widget yang lain dibagian sidebar tersebut.
2. Semua widget/kelompok
Untuk lebih jelasnya, perhatikan contoh berikut ini. Saya misalkan pada bagian Sidebar.
Kode widget pada sidebar tanpa klik Expand Widget Templates akan tampak seperti ini (saya menggunakan kode nomer 4 sebagai contoh) :
<b:if cond='data:blog.pageType == "item"'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML81' locked='false' title='' type='HTML'/>
<b:widget id='HTML33' locked='false' title='Search This Blog' type='HTML'/>
<b:widget id='HTML63' locked='false' title='My Service' type='HTML'/>
</b:section>
</div>
</b:if>
* Perhatikan warna biru. Komposisi cara 2 ini harus dimulai dengan kode diatas dan diakhiri dengan kode </b:if>.
#9. Kode Tag Blogger
Kode tag blog digunakan untuk mendapatkan dan menampilkan data-data seputar blog atau postingan blogger. Kode tag blog ini sangat bermanfaat terutama pada saat modifikasi template dan pembuatan kustom widget. Penggunaan kode tag ada yang berupa Widget Tags for Layouts dan Layouts Data Tags.
Widget Tags for Layouts
Widget Tags for Layouts digunakan langsung layaknya seperti kode HTML namun dengan menggunakan syntax standar yang sudah disediakan oleh blogspot. Adapun tipe Widget Tags for Layouts adalah sebagai berikut.
Layouts Data Tags
Layouts Data Tags merupakan pelengkap data yang digunakan pada Widget Tags for Layouts, kode Layouts Data Tags berisi data spesifik mengenai data yang ada pada blog tersebut. Kode Layouts Data Tags meliputi :
Widget Tags for Layouts
Widget Tags for Layouts digunakan langsung layaknya seperti kode HTML namun dengan menggunakan syntax standar yang sudah disediakan oleh blogspot. Adapun tipe Widget Tags for Layouts adalah sebagai berikut.
- Includes (b:include)
- Data Output (data:)
- Loops (b:loop)
- If, elseif & else (b:if)
- Switches (b:switch)
- Attribute expressions (expr:)
- Evaluated Expressions (b:eval)
- Variable alias (b:with)
Layouts Data Tags
Layouts Data Tags merupakan pelengkap data yang digunakan pada Widget Tags for Layouts, kode Layouts Data Tags berisi data spesifik mengenai data yang ada pada blog tersebut. Kode Layouts Data Tags meliputi :
- Globally Available Data
- Page Header
- Blog Posts
- Blog Archives
- Profile
- Text / HTML / JavaScript
- Feed
- Picture
- Labels
- List
- Link List
- Logo
Semoga bisa bermanfaat, apabila ada pertanyaan dan saran silakan disampaikan pada kotak komentar di bawah. Sampai bertemu lagi pada postingan artikel berikutnya...
Keyword
Modifikasi, Custom, Blog, Blogger, Blogspot, Kode, Snippet, Kumpulan, Script, Code, Blogging, Cara, Kustom, Edit, Tampilan, Template, HTML, CSS, Javascript, Jquery, Ubah, Tema.
Incoming Search Term
Cara Merubah Tema Blog, Modifikasi Template Blog, Kode Blogger, Script Blogspot, Snippet Blog Code, Code Condition for Blogspot, HTML Blogspot Code, CSS Code Blogspot, Javascript for Bloger.