WP Mini - Template Material Design Blogger/Wordpress

Template Blogger Material Design Responsive WP Mini

Codepelajar.com - Selamat datang sobat semua, sudah lama tidak mengupdate artikel disini karena berbagai kesibukan dan juga sedang proses pengisian konten di blog Jalan Pelajar. Selain itu admin juga sedang sibuk menggurus hal-hal lain seperti request tutorial dan redesain beberapa template. Nah berbicara tentang template, kali ini saya akan membagikan Template Blogger Responsive secara gratis.


WP Mini adalah template blogger responsive yang simpel dan unik. Desain template ini terinspirasi dari gaya kartu Material Design dan juga tampilan aplikai seluler yang minimalis. selain itu juga saya tidak melengkapi dengan JQuery pada javascript template ini. tujuan tidak menggunakan Jquery agar template ringan saja sih. kamu bisa menambahkan manual jika dibutuhkan untuk beberapa kode javascript lain.

Template Blogger WP Mini sesuai namanya di desain secara minimalis, dengan 1 kolom pada Main Post dan 2 Colom untuk footer widget. Saya juga menerapkan beberapa slot iklan juga, juga social share dalam postingan


Beberapa Fitur Template Blogger WP Mini

Berikut ini saya akan menjelaskan beberapa keunggulan dari template blogger ini yang di antaranya:


#1. Responsive dan Mobile Friendly


Template Blogger Material Design Responsive WP Mini

Halaman website yang responsive adalah poin penting dalam persaingan rangking mesin telusur (SERP). sebuah website yang memiliki desain User Interface UI bisa menyesuaikan sesuai ukuran perangkat pengguna menjadi poin lebih untuk menaikan rank di mesin pencari. Maka dari itu template saya kali ini didesain menjadi Responsive. Karena pada tujuan template ini dibagikan untuk para sobat blogger yang menyukai desain blog yang tampilannya minimalis juga mobile-friendly.


2. Material Design yang Minimalis

Seperti sebelumnya saya katakan, template WP Mini Blogger ini adalah template dengan desain Material Design, namun Minimalis. Dengan Tampilan UI Gaya Kartu dan juga perpaduan warna cerah ini menjadikan perpaduan sempurna dan tidak membosankan


3. Tanpa JQuery


Template Blogger Material Design Responsive WP Mini

Saya tidak memasangkan jQuery pada template ini dengan alasan tidak terlalu butuh, yang kedua untuk kecepatan. Dengan begitu template ini murni menggunakan vanila.js dan memiliki sedikit javascript tambahan


4. Desain Grid Halaman Depan


Template Blogger Material Design Responsive WP Mini

Untuk tampilan halaman depan, template ini menggunakan desain grid dengan 3 kolom. Pada setiap item grid dilengkapi seperti label kategori, thumbnail post, Judul dan Waktu posting. Tampilan grid ini akan berubah saat situs di akses oleh tablet juga seluler.


5. SEO Friendly

Didalamnya saya sudah sematkan beberapa optimasi pada template blogger ini diantarnya:

  • SEO dan Sosial Meta Tag
  • Schema Markup untuk Blog
  • Script ld JSON
  • Heading Tag dinamis
  • Penyempurnaan Title Tag
  • Dan Lainnya.


6. Fast Load Template


Template Blogger Material Design Responsive WP Mini

Template Blogger Material Design Responsive WP Mini

Template ini dalah hal preloading sudah cepat, dengan skor hijau pada Google PageSpeed Insights dan juga GTMETRIX. Kecepatan ini bisa saja berubah jika sobat melakukan perubahan ataupun penambahan kode-kode untuk penambahan fitur.


7. Tersedia dengan varian warna

Saya juga menyediakan beberapa varian lain seperti warna gelap, warna pink , dan warna merah. Untuk saat ini hanya warna itu saja yang saya buat untuk template blogger kali ini.


Template Minimalist Untuk Wordpress (Terbaru)

Tadinya WP Mini ini template ini hanya untuk blogger, tapi karena salah satu teman kami dari Blog K-Dezign convert juga ke Wordpress dan jadilah versi wordpressnya yang bisa kamu download juga disini.


9. Gratis

Kabar gembiranya template ini saya bagikan secara gratis, selama sobat bisa menghargai karya saya dengan tidak menghilangkan link kredit pada template. Sobat bisa dengan bebas meredesain template ini seperti apapun. Dan Kalo mau redesain bilang dulu ya biar afdol sama saling kenal juge hehehe :3


Itulah beberapa fitur dari Template Blogger WP Mini, bagi sobat yang ingin mencobanya bisa dengan mencobanya melalui tombol berikut ini.


Cara Setting Template WP Mini

Pada Template Blogger kali ini ada beberapa settingan yang harus di sesuaikan dan bisa sobat ikuti langkah-langkahnya berikut:

Cara Ganti dan Pasang Template Blogger

  1. Buka Dashboard Blogger.com
  2. Pilih Menu Tema
  3. Lihat pada kiri atas tombol backup/pulihkan dan klik tombol tersebut
  4. Pada popup klik tombol "choose file" (untuk jaga-jaga coba cadangkan terlebih dahulu template sebelumnya)
  5. Pilih template WP Mini dengan ektensi .xml
  6. Done


Konfigurasi Kelengkapan Template

Ada beberapa konfigurasi pada template setelah pemasangan, diharapkan untuk mengikuti langkah-langkah berikut agar tidak terjadi eror.


Sosial dan Verifikasi

Cari kata "OPTIMASI SOSIAL" dan sesuaikan dengan settingan pada template sobat.

<!-- OPTIMASI SOSIAL -->
<link href='https://plus.google.com/xxxxxxxxxxxxxxxxx' rel='author'/>
<link href='https://plus.google.com/xxxxxxxxxxxxxxxxx' rel='me'/>
<link href='https://plus.google.com/xxxxxxxxxxxxxxxxx' rel='publisher'/>
<link href='https://wpmini.blogspot.com/p/sitemap.html' rel='contents'/>
<meta content='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' name='yandex-verification'/>
<meta content='xxxxx' property='fb:admins'/>
<meta content='xxxxx' property='fb:profile_id'/>
<meta content='Lisanto Indrawan' name='Author'/>
<meta content='https://www.facebook.com/xxxxxxxxxxxxxxx' property='article:author'/>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta expr:content='data:blog.blogspotFaviconUrl' name='twitter:card'/>
<meta content='@bmatindas' name='twitter:creator'/>
<meta content='id_ID' property='og:locale:alternate'/>


Halaman Kontak

Untuk membuat halaman, pertama buka halaman baru dan sisipkan kode dibawah ini. Ubah xxxx dengan ID Blogger sobat.


<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<p>Nama Lengkap</p>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="">
<p>Email</p>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">
<p>Tuliskan Pesan</p>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim">
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4045037633214598874';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4045037633214598874','//wpmini.blogspot.com/','4045037633214598874');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '4045037633214598874', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>


Halaman Sitemap

Jika sobat ingin menambahkan halaman sitemap. sobat bisa dengan membuat halaman baru dan menempelkan kode dibawah ini (ubah juga https://wpmini.blogspot.com/ dengan situs kamu)


<div id="toc">
<script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://wpmini.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>


Email Subscriber

Untuk menyesuakan email subscriber yang ada pada template, cari kode https://feedburner.google.com/fb/a/mailverify?uri=xxxxxxxxx dan ganti xxx dengan feedburner sobat.


Setting Navigasi dan Footer Nav

Cari kedua kode berikut lalu sesuaikan.

Navigasi Header

<nav id='navigasi'>
  <a title="close modal" class='menu-close fa fa-close' onclick='menuToggle()'/>
<ul class='wjs-menu dropdown-menu'>
  <li><a title='See An update Articles' href='/'>Home</a></li>
  <li><a title='Design Articles' href='#'>Desain</a></li>
  <li><a title='Video Articles' href='#'>Video</a></li>
  <li><a title="Wallpaper on Gallery" href='#'>Wallpaper</a></li>
</ul>
</nav>

Footer Navigasi
<div class='footer-end-item'>
      <nav>
        <ul>
          <li><a title='About website' href='#'>About</a></li>
          <li><a title='Contact me' href='#'>Kontak</a></li>
          <li><a title="Policy and Privacy" href='#'>Privasi</a></li>
        </ul>
      </nav>
    </div>


Sosial Icon Link

Untuk mengubah sosial icon link bisa dengan mencari kode berikut:

 <div id='social-enlargement'>
    <ul>
      <li><a href="#" class="fa fa-facebook fa-2x"></a></li>
      <li><a href="#" class="fa fa-google-plus fa-2x"></a></li>
      <li><a href="#" class="fa fa-instagram fa-2x"></a></li>
      <li><a href="#" class="fa fa-twitter fa-2x"></a></li>
    </ul>
  </div>


Setting Iklan di dalam Artikel

Pada template ini kamu bisa menambahkan kode iklan hanya dengan menambahkan widget iklan pada menu tata letak.



Demikian postingan panjang saya tentang Template Blogger WP Mini Responsive dan juga Cara Mengubah Situs menjadi template safelink. Jika ada kesulitan jangan sungkan untuk bertanya, dan berkomentar di bawah setelah artikel ini. Nantikan juga Template dan tutorial anti mainstream yang bisa sobat temukan di Codepelajar.com

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel