Struktur Posting

Ketika melakukan buat atau edit posting, jarang sekali pengguna menggunakan tampilan HTML (HyperText Markup Language). Memang pada dasarnya agak susah waktu awal-awal menghadapi tampilan tersebut, oleh karena pengguna memasukkan tag-tag atau atribut pengkodean secara manual. Namun apabila dicermati lebih mendalam, penggunaan tampilan HTML & tag yang sesuai akan meningkatkan keterbacaan dalam blog pengguna, sebagai contoh paragraf ini berada pada tag <p> … </p>. Selanjutnya, coba kita perhatikan ampersand yang terlihat unik. Anda dapat menggunakannya dengan memasukkan kode <span class="amp">&amp;</span>, dimana pengkodean .amp telah include dalam CSS theme MiMspot.

Header h1

Header h2

Header h3

Header h4

Header h5

Header h6

Judul Tabel

Header	I	II
Body table	1	a
Body table	2	b
Body table	3	c
Body table	4	d
Body table	5	e
Footer	24	abcdef

Table source

.fin {
 content: "\2767";
 display: block;
 font-size: 3em;
 line-height: 1.1429;
 margin-bottom: .5714em;
 text-align: center;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Teks tebal mauris non lectus ipsum. Phasellus Teks miring pellentesque, diam lacinia auctor fringilla, erat nibh ullamcorper felis, et lobortis magna diam quis magna. Phasellus et Tautan teks turpis nisl. Aliquam mattis velit at dui accumsan et laoreet est varius. Nunc ac massa vel nulla ullamcorper volutpat nec ac magna. Donec at convallis lacus. Nunc turpis mi, iaculis sit amet tempus aliquam, tempor eu turpis.

Mauris et mattis sem. Quote, mauris vestibulum vulputate mauris vitae adipiscing. Quote, proin tempus posuere congue. Aenean luctus volutpat mauris, at molestie neque scelerisque ac. Duis ultricies vulputate tincidunt. Aliquam eu ^{Teks sup} velit dolor. Nullam faucibus tortor nec odio semper malesuada. Cras vehicula bibendum lectus, et euismod tellus auctor et. Etiam pulvinar _{Teks sub} sollicitudin justo, sit amet tincidunt tortor mollis a.

Blockquote, proin tempus posuere congue. Aenean luctus volutpat mauris, at molestie neque scelerisque ac. Duis ultricies vulputate tincidunt. Aliquam eu velit dolor. Nullam faucibus tortor nec odio semper malesuada. Cras vehicula bibendum lectus, et euismod tellus auctor et. Etiam pulvinar sollicitudin justo, sit amet tincidunt tortor mollis a.

Blockquote source

Cras et lectus orci, teks code euismod molestie mauris. Cras accumsan, Teks insert sapien quis venenatis porttitor Teks delete, sapien dolor bibendum dui, vitae tempus urna est id justo. Cras vestibulum nisl vitae augue cursus ultricies. Teks mark. Aliquam eu enim dolor, eleifend convallis ipsum. Fusce dapibus, purus ut varius porta, nunc dolor luctus metus, quis ornare massa urna venenatis sapien. Aliquam erat volutpat. In nec turpis tellus. Aenean vel augue ante, et rutrum enim. Suspendisse quis diam vitae nibh convallis ullamcorper.

Untuk mengetahui pengkodean di atas, silakan tekan tombol Ctrl+U pada papan ketik Anda. Contoh penggunaan figure, walaupun pada kasus lain tidak mesti figure dimanfaatkan untuk menampilkan gambar.

Keterangan figcaption mengenai gambar. Sumber asli dari Anu bin Anu.

Alamat Penulis

Readmore

Petunjuk Instalasi MiMspot

Kemungkinan akan terdapat perbedaan tampilan blog Anda dengan demonstrasi MiMspot, ketika telah melakukan instalasi theme MiMspot. Hal tersebut biasa terjadi, oleh karena residu pengkodean template sebelumnya masih menempel pada MiMspot yang Anda install. Berikut petunjuk instalasi agar dapat meminimalisasi atau bahkan menghilangkan residu tersebut.

• Backup terlebih dulu template Anda, sebelum melakukan langkah-langkah di bawah ini.
• Silakan menuju Dashboard Blogger.com Anda.
• Pilih template default & eksekusi dengan mengklik “Apply to Blog”.
• Kemudian beralih pada “Layout” (Tata Letak), maka akan ditampilkan halaman bagan blog Anda.
• Lihat pada bagan “Blog Posting” & di bagian bawah sebelah kanannya klik “Edit”.
• Selanjutnya tinggal melakukan konfigurasi seperti yang dicontohkan pada gambar berikut.
• Simpan.
• Kembali ke tab “Template”, “Edit HTML”, klik tombol “Proceed” dan jangan lupa untuk mencentang Expand Widget Templates.
• Salin MiMspot theme, kemudian tempel pada form “Edit HTML”.
• Preview atau jika telah yakin klik tombol “Save template”.

Selamat menikmati & memanfaatkan MiMspot template gratis berplatform Blogger™.

Readmore

Optimalisasi dan Kustomisasi Manual MiMspot

MiMspot akan menampilkan performa optimal jika & hanya jika pengguna melakukan beberapa kustomisasi manual, baik terhadap theme, fitur maupun widget.

Theme

Pokok utama dari theme adalah ketika Anda melakukan instalasi MiMspot sangat dimungkinkan tampilan demonstrasi dengan tampilan situs web atau blog Anda akan berbeda. Hal ini disebabkan beberapa residu pengkodean dari template sebelumnya masih menempel ‘layaknya perangko’. :) Dan untuk kustomisasinya akan dibahas pada petunjuk instalasi agar dapat meminimalisasi atau bahkan menghilangkan residu tersebut. Kemudian tidak kalah penting, pengguna seharusnya mengunduh gambar yang menjadi salah satu perangkat template ini & mengunggahnya ke situs web yang melayani penyimpanan gambar, seperti picasa, photobucket, dan sebagainya. Berikut merupakan gambar — ukuran asli — yang dimaksud oleh penulis:

Kemudian ganti URL background pada Selektor input#q, #menu-navigation a.homeIcon, dan .subscribe-rss, .feed-links. Atau Anda dapat membiarkan apa adanya dengan resiko ketika gambar tersebut dipindahkan, maka ia tidak akan tampil dalam situs web atau blog Anda.

Fitur

Dari beberapa fitur yang telah disebutkan pada posting Rilis template MiMspot untuk Blogger.com, beberapa diantaranya diatur secara manual, seperti menu navigasi, jejaring sosial, & navigasi posting.

Menu Navigasi

Markah untuk menu navigasi berada antara <nav id='menu-navigation'> … </nav>.

<b:if cond='data:blog.url != "#"'>
 <li><a href='#'>Item1</a></li>
<b:else/>
 <li class='selected'><a href='#'>Item1</a></li>
</b:if>

Keterangan:
Makna dari pengkodean di atas adalah apabila halaman tidak menampilkan URL ini (ex: http://namablog.blogspot.com/p/about), maka berlaku kondisi berikut (normal). Jika halaman menampilkan URL ini, maka berlaku kondisi selected. Kode yang berwarna merah menunjukkan taut (link) yang akan menjadi tujuan, apabila di klik & harus sama antara satu dengan yang lain tiap tag kondisional (<b:if cond=…> sampai dengan </b:if>). Namun jika memanfaatkan drop down yang diganti hanya # pada menu “anakan’. Kemudian ganti pula kode yang berwarna hijau dengan nama yang sesuai (ex: About), dimana kondisinya sama dengan kode yang berwarna merah.

Taut Teks Jejaring Sosial

Anda cukup mengganti URL yang diberi warna merah pada kode di bawah ini dengan URL identitas pada masing-masing jejaring sosial.

<div class='social-networking'><span><a href='#' title='Ke lingkaran Google+'>Google+</a></span> <span><a href='#' title='Berteman di Facebook'>Facebook</a></span> <span><a href='#' title='Ikuti di Twitter'>Twitter</a></span></div>

Navigasi Posting (blog-pager)

Sesuaikan navigasi posting dengan setelan maksimal jumlah posting yang di tampilkan tiap halaman, yakni dengan mengganti variabel pada kode berikut.

var postperpage=4;
var numshowpage=4;

Kemudian navigasi per-posting yang dikustomisasi akan menampilkan judul posting, dapat dikembalikan ke default dengan menghapus 2 (dua) kode berikut.

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

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
$(document).ready(function(){ 
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").text(); 
$("a.blog-pager-newer-link").text(newerLinkTitle); 
}); 
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);//rgt 
}); 
}); 
</script>
</b:if>

Widget

Untuk widget, Anda dapat menambah atau mangurangi widget melalui tab pengaturan “Tata Letak”. Apabila ingin dilakukan secara manual MiMspot telah menyediakan bantuan yang dicontohkan pada sidebar kanan melalui kode berikut.

<!-- Your manual widget here!
  simply by adding a markup:
    <div class='widget selector-class' id='selector-id'>
      ...Your code...
    </div>
End -->

Keterangan:
Hapus kode yang berwarna merah, kemudian tentukan selektor untuk masing-masing class dan id yang diberi warna hijau.

Apabila Anda memasukkan widget pada “Tata Letak”, sebaiknya dioptimalkan kembali melalui “Edit HTML” — centang Expand Widget Templates — kemudian ganti tag h2 menjadi h3 & hapus kode <b:include name='quickedit'/> (jika dibiarkan pun tidak akan berpengaruh pada pengkodean) pada widget yang bersangkutan.

Readmore

Rilis template MiMspot untuk Blogger.com

Sebelumnya, silakan menuju posting Rilis Template Gratis MiMspot untuk review singkat dan akses untuk mengunduh.

Template ini diperuntukkan untuk para blogger yang menggunakan platform Blogger™ & dapat diperoleh secara gratis. Tidak ada kelengkapan untuk mengkustomisasi, kecuali Anda melakukannya melalui “Edit HTML”. Kemudian akses ke CSS (Cascading Style Sheets), yakni di antara kode <b:skin><![CDATA[ … ]]></b:skin> atau <style> … </style>. Tampil dengan warna putih yang dipadu dengan box-shadow CSS3. Adapun detail tata letak atau struktur konten blog secara default adalah sebagai berikut.

• Konten Header
  • Title & Deskripsi singkat
  • Kotak Penelusuran
  • Navigasi Menu
• Konten Main Wrapper
  • Konten main
  • Konten sidebar kanan
• Konten Footer
  • Sidebar Footer
  • Informasi konten

Menu navigasi tidak menggunakan pagelist & dikustomasi manual — kecuali untuk menu Beranda (Home) — serta mendukung drop down. Bahkan dalam menu tersebut juga diletakkan skip link yang dapat dimanfaatkan oleh pengguna screen reader. Pada sidebar disematkan taut ke beberapa jejaring sosial — Google+, Facebook, dan Twitter — dalam bentuk teks. Kemudian sidebar footer dibagi menjadi 3 (tiga) bagian pada baris yang sejajar. Terakhir informasi konten, dimana tautan teks secara otomatis menyesuaikan tahun sekarang, alamat blog, & alamat mobile blog Anda. Harap jangan menghapus atau mengganti tautan kredit yang beralamat ke http://optimasi-blog.blogspot.com.

Posisi konten main yang tidak sama dengan konten lain dalam Layout (tata letak) dilakukan agar ketika pengguna menambah background pada masing-masing elemen (main dan/atau sidebar) akan kelihatan menyeluruh. Bisakah tampil rata? Bisa, dengan mengecilkan ukuran lebar main-content dan sidebar-content sebesar 15 pixel (px). Kemudian (1) menambah atribut margin-left: 15px; pada main-content dan margin-right: 15px; pada sidebar-content atau (2) menambah atribut margin: 0 15px; pada main-wrapper.

Berikut beberapa fitur yang didukung oleh template MiMspot — template gratis — Blogger™.

• Kotak pencarian.
• Drop down menu navigasi.
• Otomatis readmore sudah terkompres melalui layanan “Online YUI Compressor”.
• Breadcrumbs.
• Posting terkait sederhana berdasarkan label (kompresi melalui layanan “Online YUI Compressor”).
• Kustomisasi blog-pager, baik pada halaman blog maupun posting blog.
• Kustomisasi komentar bersarang Blogger™
• Taut teks ke beberapa jejaring sosial.
• Taut teks to-top menggunakan jquery.
• Dan sebagainya sesuai dengan pindaian pengguna.

Disarankan agar posting blog tampil optimal, sebaiknya menggunakan tag-tag HTML (HyperText Markup Language) yang sesuai. Oleh karena tidaklah keliru apabila kita meluangkan waktu untuk belajar tentang struktur pengkodean agar tulisan lebih bermakna & sedikit-banyak mendukung keterbacaan.

Readmore