Setelah beberapa lama tidak berhadapan dengan pengkodean Blogger™, akhirnya Optimasi Blog mengeluarkan template gratis yang diberi titel “MiMspot”. Template ini didistribusikan gratis & terkesan minimalis serta sederhana dengan — default — berwarna putih. Nah, apabila Anda melihat demonstrasi yang menampilkan warna latar berbeda, hal itu disebabkan pengkodisian kode yang sengaja dibuat oleh penulis. Berikut adalah tampilan, demo, serta taut untuk mengunduh template MiMspot.
Tolong, jangan dihapus atau dirubah atau ditambah dengan atribut “no-follow” taut kredit yang mengarah ke Optimasi Blog. Jangan lupa sharing & tambahkan juga +1 pada posting ini, apabila mendatangkan manfaat bagi Anda dan/atau para blogger lain dengan mengklik sharing-button (email, blog this, facebook, twitter).
Untuk beberapa kesukaran dalam menerapkan MiMspot pada blog Anda, kami menyediakan juga trik serta tips pada taut demo di atas. Sedangkan jika permasalahannya terletak pada taut unduh, Optimasi Blog menyediakan alternatif melalui Google Drive di http://docs.google.com/open?id=0B0_GO4QFa5MfYWFhWGNza1g4RkE
Pembaharuan (05 Nopember 2012): Perbaikan pada tampilan penelusuran berdasarkan arsip, Kustomisasi elemen status-msg-wrap, penambahan title serta CSS halaman error404, orientasi schema.org blog, blogposting, dan bredcrumbs.
Berikut contoh markah yang dimasukkan dalam menu pengaturan → Search Preferences → Custom Page Not Found.
<div class="error404">
<h2>Halaman Tidak Ditemukan</h2>
<div class="clear"></div>
<div class="noimg">
<span>Error <strong>404</strong></span>
</div>
<div class="errorInfo">
<p>Maaf, halaman yang Anda cari tidak ada dalam arsip kami atau telah dipindahkan. Mungkin pencarian atau <a href="#" title="Halaman Arsip">melihat arsip</a> akan membantu menemukan posting terkait.</p>
<form action="/search" id='searchform' method='get'>
<label class='assistive-text' for='q'>Search:</label>
<input class='field' id='q' name='q' placeholder='Search…' type='text'/>
<input class='submit' id='searchsubmit' name='submit' type='submit' value='Search'/>
</form>
</div>
</div>Masih digarap: desain responsif (tampilan pada layar yang berbeda) dengan menggunakan manual CSS media query.
Wow, keren neh gan. Izin sedot...
BalasHapuswah minimalis dan cakep ... ini yg ane suka :D
BalasHapusditunggu kunjungan balik n komentar nya bor :D
suwun . . .
Terima kasih, gan. Namun jika diberi pewarnaan dan dekorasi kode lain bisa jadi tidak sederhana lagi alias elegan.
HapusWallahul Muwaffiq ila Aqwamit Tharieq
Wassalamu’alaikum Wr. Wb.
kemana aja bang baru muncul?
BalasHapusane desain pake blogspot aja kalau bikin template sendiri dan menambahkan fitur search engine melebar diatas postingan , haha..
Banyak ngerjain tugas S2, bikin proposal penelitian. Lebih susah daripada ngeblog atau bikin template. Ujung-ujungnya sampai disetujui proposalnya, mungkin pula sampai penelitiannya selesai.
Hapustemplatenya bagus dan tadi saya kunjungi demonya ternyata sangat ringan diakses
BalasHapusizin mendownloadnya mas, terima kasih ya
Mas OB, bisa bantuin gak? saya ingin modif templates keren ini jadi dinamik heading seperti tutorial yang ada disini :
BalasHapushttp://www.dadangherdiana.com/2012/02/cara-mengubah-tag-heading-template.html
saya udah coba tapi bingung,,, kode2 nya gak sama,,
Thanks.
MiMspot sudah berisi unsur tag heading cuma di kustomisasi pada judul posting. Coba perhatikan saat agan di beranda, maka judul posting memiliki tag H3 dan ketika membuka salah satu posting, maka judul posting memiliki tag H2.
Hapus<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<h3 class='post-title entry-title' itemprop='name'>
<a expr:href='data:post.link'><data:post.title/></a>
</h3>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<h3 class='post-title entry-title' itemprop='name'>
<a expr:href='data:post.url'><data:post.title/></a>
</h3>
<b:else/>
<h2 class='post-title entry-title' itemprop='name'>
<data:post.title/>
</h2>
</b:if>
<b:else/>
<h2 class='post-title entry-title' itemprop='name'>
<data:post.title/>
</h2>
</b:if>
</b:if>
</b:if>
Fungsinya sama untuk mengganti tag heading (judul posting). Sedangkan pada header yang berisi judul blog dan deskripsi, Judul blog saya tambahkan <span>.
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<span><b:include name='title'/></span>
</h1>
</div>
<b:include name='description'/>
</div>
Ada apa dibalik penambahan span tersebut? Mudah-mudahan akan di tulis pada posting selanjutnya.
Terima kasih atas penjelasannya,,, sudah saya terapkan dan berhasil,, terima kasih sekali lagi mas OB.. sukses selalu :)
Hapus