DroidPluss : Responsive Blogger Template Valid HTML5, CSS3, 100% SEO Friendly

Jujur saya sebenarnya kurang suka memuji Kang Ismet  takut nantinya dia jadi besar kepala he… he… Tapi untuk karyanya yang satu ini, mau tidak mau saya harus mengatakan “dia memang hebat”. Dia salah satu blogger Indonesia yang patut di banggakan.

Responsive Blogger Template Valid HTML5, CSS3, 100% SEO Friendly
DroidPluss Blogspot Template

Menurut saya, buah karyanya – DroidPluss Responsive Blogger Template – merupakan mahakarya yang layak diketengahkan dan bersaing dimata dunia. Bahkan, menurut saya lagi, template dia yang satu ini lebih bagus dari template yang ia pakai sendiri… he… he…

Sayangnya template tersebut dia bagikan secara gratis. Sehingga mau tidak mau, saya langsung mengganti template saya dengan karyanya he… he… Terimakasih banyak Kang Ismet.

Siapa yang tidak tergoda hatinya untuk berganti template jika melihat beberapa point penting untuk DroidPluss Blogger Template ini.

Bayangkan kawan inti point penting yang melengkapi stuktur keren DroidPluss Blogger Template:

  1. Responsiv cek -> disini
  2. Valid HTML5 pada Homepage cek -> disini
  3. Valid HTML5 pada postingan cek -> disini
  4. Valid CSS3 cek -> disini
  5. SEO 100% cek -> disini
  6. Sticky Widget
  7. Back to top
  8. Customized Deleted Comment
  9. Smooth scroll to comment hash
  10. dll.

Dan yang terpenting, template ini dibagikan Gratiiis/free download. Anda bisa menghilangkan Credit pada footer, dengan membayar Rp. 50.000,-. (This template is absolutely free, you may remove credit link by sending me $5 USD through PayPal). Contact

Kostumisasi DroidPluss : Responsive Blogger Template

Untuk kostumisasi saya rasa tidak ada masalah, tapi mungkin ada beberapa hal yang perlu saya jelaskan disini. Untuk merubah sticky widget (Sosial media yang melayang) silahkan temukan kode seperti dibawah ini kemudian edit.

<div id=’stickywidget’>
<h3>Sosial Media</h3>
…..
…..
…..
</div>

 Untuk membuat widget Artikel Terbaru, tambah widget HTML/JavaScript dan simpan kode ini :

<script type=”text/javascript”>
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==’alternate’){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write(‘<li>’);document.write(posttitle)}if(standardstyling)document.write(‘</li>’)}
</script>
<script type=”text/javascript”>var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script type=”text/javascript” src=”https://redaksiexpo2012.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts”></script>

Ganti yang ditandai warna merah dengan url blog anda. 

Untuk membuat blog tetap valid HTML5, setelah menambah widget hapus kode ini pada Template -> Edit HTML

<b:include name=’quickedit’/>

Oke… saya kira demikian puja-puji ini.. Semoga bermanfaat..

Simplex Reporter News Responsive Blogger Template

Simplex Reporter News Responsive Blogger Template
The Simplex Reporter is a news category based theme that is best suited for news publishing site and also for information blogs.The important features of this theme are premium design,4 column footer,best style that makes your blogs professional,social sharing icons,mega menu and many other cool features.

Simplex Reporter Blogger Template is a free news based blogger template. The template looks elegant and attractive. It has features which are rarely found on blogger blogs. The site is responsive and looks really beautiful on all the screens with different sizes. This is an idol template for news blog. Its features like fast loading, Ticker, Superb menu make it best out of the rest.

Features : 1 Right Sidebar, 2 Right Sidebar, 3 Columns, 4 columns, 4 Columns Footer, Adsense ready, Blogger Template 2013, Elegant, Fashion, Fixed width, Free Premium, news, Red, SEO, White, WordPress Look.

Platform Type :  Blogger / Blogspot
Template Name :  Simplex Reporter Blogger Template
Template Author : Rocking Templates
Designer The Simplex Design | http://www.thesimplexdesign.com/

Portofolio responsive blogger template : PISGOR

Portofolio responsive blogger template : PISGOR

Pisgor Blogger Template saya dapat dari Loefa-cebook, merupakan tema blog yang responsive dengan gaya Portofolio. Template ini, cocok untuk anda yang mempunyai blog menampilkan photo-photo.

Pisgor Blogger Template dibangun menggunkan framework profesional bernama Skeleton, framework Skeleton ini banyak digunakan untuk membangun sebuah website profesional.

 ViewDemo        :        DownLoad

Cara Intall Template
Untuk sistem instalasi PISGOR Blogger Template ini, tidak begitu rumit. Berikut caranya:

  • Unzip file Blogger Template yang sudah anda download
  • Masuk ke Blogger Halaman Template, lalu klik EDIT HTML
  • Buka file XML Template dengan HTML Editor seperti Notepad++ untuk Windows atau TextWrangler untuk Mac.
  • Lalu Copy semua kode template
  • Kemudian Paste kedalam EDIT HTML Blogger
  • Terakhir Klik Save Template

Untuk cara settup template lebih lengkap telah dibuat file instruksi, dan dimasukan kedalam file download Pisgor Blogger template.

Demikian Pisgor Blogspot Template ini, semoga bermanfaat

Responsive Thesis Template For Blogger Blogspot V2

Responsive Thesis Template For Blogger Blogspot V2
Responsive Thesis Template For Blogger Blogspot V2

Responsive thesis template for blogger blogspot V2 adalah penyempurnaan daripada template thesis responsive untuk blogspot yang dikeluarkan pertamakali oleh andrianovitcrew. Template yang mengusung desain, clean, minimalis, visitor friendly ini juga dirancang khusus untuk memaksimalkan SEO blogger blogspot.

Sesuai dengan janjinya, walau belum lama realese Responsive thesis template for blogger blogspot,
andrianovitcrew telah melakukan update terbaru template yang terkenal SEO Killer ini. Pada V2 ini, ada banyak penyempurnaan telah dilakukan.

Menurut dia,pada awal pembuatan Responsive thesis template for blogger blogspot yang pertama masih terlalu banyak bugs yang perlu disempurnakan lagi. Sehingga, setelah melakukan beberapa kali ujikaji dari template thesis untuk blogger (blogspot) yang pertama, akhirnya telah siap direlease responsive thesis template untuk blogger blogspot yang kedua (V2).

Responsive thesis template for blogger blogspot ini, adalah gabungan antara beban loading halaman yang sangat cepat dengan optimasi SEO dan juga rich microdata. 

Berikut berbagai kelebihan dari Responsive thesis template untuk blogger blogspot v2 ini: 

Minimalis ,clean design, visitor friendly

Desain template thesis yang kedua ini terinspirasi dari thesis ‘social triggers’ dimana demo asli dari templatenya bisa dilihat di http://diythemes.com/demo/?skin=thesis_social_triggers.

Desain yang bersih dan rapi sehingga memudahkan pembaca dalam menjelajahi blog  dan juga membuat visitor betah untuk berlama-lama di blog kita.tapi perlu diingat juga “Konten is the King”

Seo heading tags

Susunan heading tags yang benar dan sejatinya sudah seo friendly sangat disukai oleh mesin pencari (google). Untuk menambah pengetahuan atau sekedar referensi tentang bagaimana susunan heading tags yang benar bisa dibaca disini.Tak lupa juga Heading h1, h2, h3, h4, h5 dan juga h6 pun tersusun secara sempurna di dalam template ini (banyak dari pembuat template blogspot yang mengabaikan hal ini).

Fast Loading Page

Kecepatan loading yang benar-benar sangat cepat diterapkan di responsive template thesis V2 ini. Dalam hal ini, anda bisa test di http://developers.google.com/speed/pagespeed/insights/ atau di http://gtmetrix.com/. Untuk memaksimalkan kecepatan template ini, sengaja tidak memasang jquery, soalnya jquery itu bikin loading blog jadi super berat.   

Responsive Web desain

Sebelumnya, apa itu responsive web desain??

Responsive Web Desain adalah sebuah pendekatan yang menunjukkan bahwa desain dan pengembangan harus menanggapi perilaku dan lingkungan pengguna berdasarkan pada ukuran, platform dan orientasi layar. Praktik ini meliputi penggunan perpaduan grid fleksibel dan layout, gambar dan CSS media query. Sebagaimana pengguna saat ini yang beralih dari laptop ke tablet, website secara otomatis harus menyesuaikan resolusi, ukuran gambar dan kemampuan scriptingnya. Dengan kata lain, website harus memiliki teknologi untuk secara otomatis merespon preferensi pengguna yang didasarkan pada resolusi layar gadget yang digunakan (komputer pc, laptop, netbook,tablet, smart phone dan mobile phone).

Hal ini yang merupakan salah satu kelebihan dari template thesis untuk blogspot yang mana sebelumnya belum ada yang bikin (responsive thesis untuk blogger blogspot ). Responsive desain disini termasuk juga pada bagian komentar. Biasanya pada template yang mengaku ‘responsive’ ternyata tidak support pada bagian komentar.

Rich Microdata Dan Mark Up schema (schema.org)

Lengkapnya microdata dan mark up schema dari schema.org juga melengkapi sempurnanya template thesis for blogger blogspot V2 ini.

Seo Breadcrumb

Breadcrumb bisa dikatakan sangat special. Breadcrumb yang Ter-index oleh google, juga dilengkapi dengan microdata breadcrumb sekaligus.

Tidak adanya error di rich snippet google testing tool.

Hal ini meliputi ‘Error: Missing required field updated ‘, ‘Error: Missing required hCard author’ Dan error lainya yang mana tak bisa disebutkan satu persatu disini. Untuk membuktikan masalah ini bisa di test di http://www.google.com/webmasters/tools/richsnippets.

Seo meta tags (dynamic seo meta tags)

Cukup satu kali setting untuk mengaktifkanya ( ini sudah termasuk seo post meta tags, seo label meta tags, seo search meta tags dan lain lain.

Halaman dengan lebar penuh (full width) di halaman statis (single page)dan halaman error (error page).

Bertujuan untuk membedakan mana itu halaman statis dan mana itu halaman post.

Block link aktif di area komentar

Ini bertujuan untuk mencegah para spammer yang sering menanam backlink secara semena-mena.

Javascript manipulasi komentar

Visitor/orang yang komentar di blog secara otomatis bisa memasukkan gambar/video youtube/tag ‘pre’/tag ‘code’ ataupun juga tag ‘blockquote’ di dalam komentar. Ini sangat berguna bagi blog yang sering memberikan posting tentang tutorial .

Search Widget menggunakan Quick search dengan Json Blogger

Melakukan pencarian di dalam blog secara cepat tanpa meninggalkan halaman yang sedang dikunjungi.

Valid sebagai HTML5 template

Hanya valid untuk homepage alias halaman utama saja .

Jikalau widget popular post disertakan dengan gambar thumbnail dan snippet, maka akan mengakibatkan error saat validitas. Tapi jangan takut, asal rajin editing code HTML template tips nya ada disini.

Untuk halaman post ataupun halaman statis, memang sedikit susah untuk membuat valid HTML5. Banyak sekali faktor yang membuat error di halaman selain homepage (halaman utama). Untuk check validitas html5 dapat dilakukan di http://validator.w3.org/. Memang, platform blogger (blogspot) di desain untuk xhtml bukan nya HTML5. Di dalam template ini memang telah sengaja dilengkapi beberapa ‘blogspot hacks’ supaya bisa valid HTML5.

More Features Responsive Thesis Template For Blogger Blogspot V2

  • Support social sharing dan juga social network widget
  • Support email subscription widget
  • Support about author widget
  • Support Ads ( iklan )
  • Custom Tips, Info Dan Warning Block di postingan
  • Related Post widget
  • SEO comment system
  • Custom Error Page 404 
VIEWDEMO    |    DOWNLOAD




Fasteseo – Seo Responsive Blogger Template

Fasteseo - Seo Responsive Blogger Template

ALL ABOUT BLOGSPOT TEMPLATES : Satu lagi template blogspot karya +Fajri Andaviar saya share disini. Sebelumnya adalah, BeriMagz : Responsive Blogger Template. Menurut dia, tema blog ini juga Responsive banget. Tidak hanya itu, selain tampilannya elegant juga sangat SEO Friendly.

Sesuai dengan namanya, Fasteseo – Seo Responsive Blogger Template. Di desain penuh warna agar terlihat Fresh serta dilengkapi berbagai fitur yang fungsional.

 Features Fasteseo – Seo Responsive Blogger Template :

  •     100% SEO di Chkme.com
  •     Iklan disisi Header
  •     Halaman Error 404
  •     Breadcrumbs siap
  •     Menu Navigasi Sticky (Menempel) dengan kotak pencarian
  •     Read More otomatis siap
  •     Menu dibawah header dengan Font Awesome
  •     Widget Popular Posts yang telah di Desain
  •     Widget Label Cloud yang telah di Desain
  •     Catatan kaki terindex Google
  •     Artikel terkait Vertikal
  •     Post Next dan Prev
  •     Threaded Comment
  •     Autor Comment
  •     Dan Lainnya

Instalasi Fasteseo Template :

Setelah upload template, ada beberapa sentuhan modifikasi yang berhubungan dengan indentitas blog anda.

  • Cari kode YOUR-GOOGLE-URL , dan ganti semua kode tadi dengan URL Google+ Sobat.
  • Cari kode YOUR-ALEXA-ID , dan ganti dengan ID Alexa Blog Sobat.
  • Cari NameBlog dan NamaBlog , dan ganti semua kode tadi dengan nama Blog Sobat.
  • Cari kode YOUR DESCRIPTION HERE , dan ganti dengan deskripsi Blog Sobat.
  • Cari kode Keywords1, Keywords2, Keywords3 , dan ganti semua kode tadi dengan Keywords Blog Sobat.

Mengganti Menu Navigasi Fixed/Float : Cari kode berikut :

<nav id='nav'>
<ul class='menunav' id='navinti'>
<li class='mhome'><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>Download</a></li>
  <li><a href='/404'>404</a></li>
<li class='dgnsub'><a href='#'>Kebijakan</a>
<ul class='sub-menu hidden'>
  <li><a href='#'>Privacy Police</a></li>
  <li><a href='#'>Disclaimer</a></li>
  <li><a href='#'>Terms Of Service</a></li>
</ul>
</li>

Lalu ganti # (Tanda Pagar) dan title menu sesuai kebutuhan dan keinginan anda.

Mengganti Menu di bawah Header : Cari kode dibawah ini:

<div class='masmenu'>
<ul class='sf-menu'>
<li><a href='/'><i class='icon-home' style='margin-right: 5px;'/>Home</a></li>
<li><a href='#'><i class='icon-html5' style='margin-right: 5px;'/>Blogger</a>
<ul>
<li><a href='#'>Tutorial Blogger</a></li>
<li><a href='#'>Templates</a></li>
<li><a href='#'>SEO</a></li>
<li><a href='#'>HTML5</a></li>
<li><a href='#'>Tips &amp; Trick</a></li>
</ul>
</li>
<li><a href='/'><i class='icon-rocket' style='margin-right: 5px;'/>Info Fakta</a>
<ul>
<li><a href='#'>Umum</a></li>
<li><a href='#'>Sejarah</a></li>
<li><a href='#'>Misteri</a></li>
<li><a href='#'>Unik</a></li>
<li><a href='#'>Lelucon</a></li>
<li><a href='#'>Hiburan</a></li>
<li><a href='#'>Olahraga</a></li>
<li><a href='#'>Gaya Hidup</a></li>
<li><a href='#'>Tips</a></li>
<li><a href='#'>Wisata</a></li>
</ul>
</li>
<li><a href='/'><i class='icon-facebook-sign' style='margin-right: 5px;'/>Jejaring Sosial</a>
<ul>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Google</a></li>
<li><a href='#'>Heello</a></li>
<li><a href='#'>Myspace</a></li>
<li><a href='#'>Instagram</a></li>
<li><a href='#'>Pinterest</a></li>
</ul>
</li>
  <li><a href='#'><i class='icon-music' style='margin-right: 5px;'/>Musik</a></li>
</ul>
<li><a href='#'><i class='icon-laptop' style='margin-right: 5px;'/>Tekno</a>
<ul>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Komputer</a></li>
<li><a href='#'>Software</a></li>
</ul>
</li>
<li><a href='#'><i class='icon-suitcase' style='margin-right: 5px;'/>Informasi</a>
<ul>
<li><a href='#'>Olahraga</a></li>
<li><a href='#'>Entertainment</a></li>
<li><a href='#'>Islam</a></li>
<li><a href='#'>Dunia</a></li>
</ul>
</li>
<li><a href='#'><i class='icon-coffee' style='margin-right: 5px;'/>More</a>
<ul>
<li><a href='#'>Teknik Komputer Jaringan</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Film</a></li>
<li><a href='#'>WordPress</a></li>
</ul>
  </li>
</div>

Ganti # (Tanda Pagar) dan judul menu sesuai keinginan anda.

Responsive Blogger Template : BeriMagz

Responsive Blogger Template : BeriMagz

All About Blogspot Templates : Blogger template ini saya dapat dari blog milik +Fajri Andaviar di http://fajriandaviar.blogspot.com. Menurut dia, theme blog ini memiliki fitur yang responsive sekaligus juga ringan (fast loading). Menurut saya, template ini keren dan layak untuk di share kepada para blogger.

Template magazine responsive ini bernama: BeriMagz 

DemoView   |    DownLoad
Tertarik? Berikut tutorial untuk mengganti fitur BeriMagz Blogger Template: 

1. Untuk Mengganti Menu Atas

<div id='top-menuwrapper'>
<div id='top-menuwrap'>
<div id='top-menu'>
<ul>
<li><a href='/' style='background:#D12F2F'><i class='icon-home icon-2x'
style='margin-bottom:9px'/></a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
</ul>
</div></div></div>

2. Untuk Mengganti Menu di Bawah Header Cari Code Berikut:


<nav id='menu'>
<input type='checkbox'/>
  <label><i class='icon-reorder'/><span>Navigation</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='dropdown' href='#'>Drop Menu</a>
<ul class='menus'>
 <li><a href='#'>Drop Menu 1</a></li>
 <li><a href='#'>Drop Menu 2</a></li>
 <li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a class='dropdown' href='#'>Drop Menu 1</a>
<ul class='menus'>
 <li><a href='#'>Drop Menu 1</a></li>
 <li><a href='#'>Drop Menu 2</a></li>
 <li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
       </ul>
    </nav>

3. Untuk mengganti List Social, cari kode berikut:


<div class='social-tooltip'>
<ul>
<li class='pinterest'><a href='/'><i class='icon-pinterest'/></a></li>
<li><a class='twitter' href='/'><i class='icon-twitter'/></a></li>
<li><a class='linkedin' href='/'><i class='icon-linkedin'/></a></li>
<li><a class='facebook' href='/'><i class='icon-facebook'/></a></li>
<li><a class='gplus' href='/'><i class='icon-google-plus'/></a></li>