Download Template Blogspot Responsive OprexMedia

Bagi sobat sekalian yang ingin menjajal template blogspot responsive ini silahkan dowbload dibawah ini. Ingat template ini masih sangat perlu sentuhan anda sendiri. Berkreasilah sepuasnya dan tunjukkan kreatifitas sobat.

Jangan takut dengan pakem credit link yang membodohi dan menciptakan manusia egois. Ini jaman open source. Pembuat linux saja gak pernah maen patent-patentan, hak kekayaan intelektual atau apalah. Semuanya di buka bebas untuk sobat sekalian agar bisa di personalisasi lagi oleh sobat. Bisa jadi belum ada template serupa yang free. Silahkan di cek di Google dengan kata kunci "TEMPLATE BLOGSPOT RESPONSIVE!

Download Template Blogspot Responsive OprexMedia

Selamat berkreasi!

OprexMedia | Personalisasi Template Blogspot OprexMedia

Template ini sebenarnya masih mentah banget. Kamu bisa memodifikasi sendiri setiap value yang ada agar sesuai dengan kamu banget. Hanya saja jika ingin tetap berada pada frame yang ada hendaknya hati-hati dengan kode @media-screen sebagai kode pembentuk responsive. Maklum kode tersebut 100% copy paste tanpa tahu jeroannya lebih dalam.

Untuk deretan menu sendiri saya letakkan di dalam template. Namun saya merekomendasikan agar sobat meletakkannya di dalam widget. Ini untuk lebih memudahkan sobat untuk menambah atau mengurangi isi menu.

Berikut kode menu yang bisa sobat letakkan di dalam widget. Pastikan telah menghapusnya terlebih dahulu dari dalam template sebelum kode berikut di taro di dalam widget.
<div class='menu-iskaruji'>
<ul>
<li><a href='URL BLOG SOBAT'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
<li><a href='#'>Menu 7</a></li>
<li><a href='#'>Menu 8</a></li>
</ul>
</div>

OprexMedia | Menggunakan Tipe Dokumen HTML 5

Document Type HTML 5 ini sebenarnya sudah diterapkan oleh Blogspot untuk template-template default blogspot sekarang. Seperti template Blogspot Mobile ataupun template yang di rekomendasikan saat pertama kali kita bikin blog di blogspot. Silahkan di cek pada template template mobile blogspot sobat atau pada blog Multibrand yang menggunakan template blogspot Dtd HTML 5.

Lihat perbedaannya. Ini adalah tipe dokumen template yang masih menggunakan Tipe Dokumen Transitional seperti pada blog Iskaruji dot com:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Dan ini Tipe Dokumen HTML 5
<!DOCTYPE html>
Mungkin perbedaan yang paling kentara saat menggunakan tipe dokumen HTML 5 ini adalah karena loadnya yang lebih enteng. Selain itu mungkin karena HTML 5 sudah di rekomendasikan oleh Blogspot pada template defaultnya.

OprexMedia | Instalasi Template Blogspot OprexMedia

Seperti kita ketahui, setiap kali kita bikin blog baru sekarang pasti di arahkan ke template default blogspot yang notabene sudah menerapkan HTML 5. Jadi untuk istalasinya sendiri tidak ada beda dengan instalasi template lainnya. Hanya saja di sarankan untuk Delete Widget. Hal ini untuk memudahkan kita mempersonalisasi dan mengatur kembali blog kita tanpa di ganggu dulu oleh tambahan widget.

OprexMedia | Valid W3C Untuk Halaman Depan

Tentang validitas ini memang masih menuai kontroversi. Apalagi jika hostnya blogspot. Hal ini gak penting banget. Tapi bagi yang care seperti saya maka template Blogspot OprexMedia ini, defaultnya 100% pass check valid W3C. Namun kedepannya mungkin akan terjadi error disana-sini. Dan hal utama penyebab error adalah pada penulisan pernyataan xml-nya:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en' 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>
Jika susunan kodnya seperti itu, maka dijamin tidak akan valid. Untuk itu saya mencoba bikin simple dengan menggantinya menjadi:
<!DOCTYPE html>
<html lang='en'>
<head>
Kode yang sudah di ganti tersebut akan kembali lagi seperti semula jika kita melakukan perubahan pada template. Persis seperti perubahan yang selalu terjadi pada Transitional setiap kali kita menambahkan widget. Untuk itu jika ingin tetap tampil valid maka tidak ada cara lain kecuali menghapusnya kembali.

Error yang lain mungkin akan disebabkan oleh Blog Pager. Ini sudah menjadi rahasia umum. Namun hal ini tetap saya pertahankan. Jika sobat tdak menghendakinya bisa juga diganti dengan yang lain agar template-nya valid.

Untuk hal lainnya mungkin ada cara penulisan kode-kode kita ataupun gambar yang menyebabkan jadi error. Untuk hal ini marilah kita belajar sama-sama karena HTML 5 juga masih asing dan buta bagi saya.

OprexMedia | Penerapan SEO On Page

Pada Template Blogspot OprexMedia ini di lengkapi dengan optimasi SEO On Page. Dimana setiap halaman post akan terbaca deskripsi dan kewyord yang berbeda dari halaman utama. Walaupun begitu ia tetap sinkron dengan halaman utama karena selalu menyertakan judl blog sebagai deskripsi dan keyword post.

Lihat keterbacaan browser pada post sebelumnya tentang Template Blogspot Responsive. Pada Mozilla, Klik Kanan > View Page Source, maka akan terbaca demikian:
Judul Post: OprexMedia | Template Blogspot Responsive | Blogspot Template Experimentally Media

Deskripsi Post: OprexMedia | Template Blogspot Responsive, Blogspot Template Experimentally Media, OprexMedia | Template Blogspot Responsive

Keyword Post: OprexMedia | Template Blogspot Responsive, Blogspot Template Experimentally Media, OprexMedia | Template Blogspot Responsive
Mengapa hal ini disebut SEO on Page? Untuk masalah ini silahkan kunjungi halaman Webmaster Guideline Google.

OprexMedia | Template Blogspot Responsive

Kelebihan responsive dibandingkan dengan template statis lainnya adalah lebih mudah di buka dan di baca oleh media screen dengan resolusi hingga 240 x 320 (small phone) tanpa scroll. Begitu juga jika di buka dengan monitor model sekarang yang melebar kesamping, maka blog kita akan tetap serti yang anda lihat sekarang dan tidak mengecil seperti blog Iskaruji dot com.

Untuk mengecek tampilannya pada resolusi layar yang berbeda silahkan di coba di http://mattkersley.com/responsive/. Bisa juga dengan mengecilkan browser sobat hingga selayar handphone atau iPhone. Bandingkan dengan tampilannya dengan Blog sobat atau Blog Iskaruji dot com.

Responsive ini dimungkinkan karena penggunaan kode berikut di dalam CSS-nya:
@media handheld, only screen and (max-width:767px){
#header-wrapper {font-size:10px;}
#main-wrapper, #header img, #sidebar-wrapper, #footer, #sidebar2-wrapper, #footer1-wrapper, #footer2-wrapper, #footer3-wrapper {clear:both;width:98%;float:left;}#footer2-wrapper{margin-left:0}
#outer-wrapper, #main-wrapper, #sidebar-wrapper, #sidebar2-wrapper, #footer1-wrapper, #footer2-wrapper, #footer3-wrapper {word-wrap:break-word;font-size:medium;font-family:"Arial"; }
.post img{width:100%;height:100%;float:center;}
}

@media screen and (min-width:768px) and (max-width:1023px){
#sidebar-wrapper, #sidebar2-wrapper, #footer1-wrapper, #footer2-wrapper, #footer3-wrapper{margin-top:20px;}
}

Dan ini kode pembentuk tampilan responsive pada halaman post.
@media handheld, only screen and (max-width:767px){#header-wrapper {font-size:10px;}#main-wrapper, #header img, #sidebar-wrapper, #sidebar2-wrapper {clear:both;width:98%;float:left;}#outer-wrapper, #main-wrapper, #sidebar-wrapper, #sidebar2-wrapper{word-wrap:break-word;font-size:medium;font-family:Georgia}.post img{width:100%;height:100%;float:center;}}
@media screen and (min-width:768px) and (max-width:1023px){#sidebar-wrapper, #sidebar2-wrapper{margin-top:20px;}}
Kode-kode tersebut baru bisa berjalan jika semua satuan pixel [px] dalam kode diatas kamu ganti dengan persentase [%]

Responsive ini tidak terjadi saat di buka dengan IE 8 seperti yang sudah saya coba. Selain itu untuk banner iklan berukuran melebihi 240px juga akan terpotong saat di buka.

OprexMedia | Tentang Template Blogspot OprexMedia

Template Blogspot Oprexmedia ini terinspirasi dari Blog http://faceleakz.blogspot.com yang menerapkan HTML 5 pada templatenya. Selain itu template tersebut juga responsive. Saat kita buka blognya dalam media screen apapun ia akan terlihat mengikuti lebar dari screen tersebut. Alhasil, kita tidak akan menemui scroll kekanan saat membuka blog.

Nama OprexMedia sendiri adalah karangan asal-asalan, mengingat template ini adalah oprex atau modifikasi dari template Minima 2006 seperti yang di terapkan pada blog Blink-Yogya. Jadi tidak 100% coding sendiri.

Beberapa kelebihannya mungkin bisa ditemui pada:
Selamat mencoba!