Materispot, Free Material Design Blogspot Template

Documentation & Tutorial

Materipress X Chromebook

Installation

Sign in to your blog dashboard, and select the template menu on the left.

Materispot Tutorial - Blogspot Dashboard

Click the Backup / Restore button in the upper right corner.

Don’t forget to backup your old template by clicking the Download template button. Backup will be downloaded in .xml format. Once the download is complete, click the Browse... button, select materispot.xml files that have been downloaded, and click Upload.

Materispot Tutorial - Upload Template

Back to the template page, click settings (gear icon) in the bottom of the mobile template preview.

Materispot Tutorial - Disable Mobile Template

Select “No. Show desktop template on mobile devices” to disable the standard mobile version of Blogger.

Customization

From your blog dashboard, select the template menu on the left, and click Edit HTML button.

Materispot Tutorial - Editor

Main Menu

Find this code:

<ul class='menu'>
  <b:if cond='data:blog.url==data:blog.homepageUrl'>
    <li><a class='current' href='/' title='Home'>Home</a></li>
  <b:else/>
    <li><a href='/' title='Home'>Home</a></li>
  </b:if>
  <li>
    <label class='toggle' for='drop-1'>Menu 1<svg fill='#757575' height='14' viewBox='0 0 14 14' width='14'><path d='M5 8l4 4 4-4z'/></svg></label>
    <a href='#' title='Menu 1'>Menu 1</a>
    <input id='drop-1' type='checkbox'/>
    <ul>
      <li>
        <label class='toggle' for='drop-2'>Sub Menu 1<svg fill='#757575' height='14' viewBox='0 0 14 14' width='14'><path d='M5 8l4 4 4-4z'/></svg></label>
        <a href='#' title='Sub Menu 1'>Sub Menu 1</a>
        <input id='drop-2' type='checkbox'/>
        <ul>
          <li><a href='#' title='Sub Sub Menu 1'>Sub Sub Menu 1</a></li>
          <li><a href='#' title='Sub Sub Menu 2'>Sub Sub Menu 2</a></li>
          <li><a href='#' title='Sub Sub Menu 3'>Sub Sub Menu 3</a></li>
        </ul>
      </li>
      <li><a href='#' title='Sub Menu 2'>Sub Menu 2</a></li>
      <li><a href='#' title='Sub Menu 3'>Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href='#' title='Menu 2'>Menu 2</a></li>
</ul>

Change the link, title, and text that match with your need.

Ads Code

Find this code: [Your Ad Code Here], change with your own script, and delete this code:

  • <!-- above <div class='classname'>
  • --> below </div>

There are 6 ads spot that you can choose.

Custom Theme Width

Find and change this code if you prefer a tighter or wider display:

.header,nav,#wrapper,footer{max-width:858px}

Change 858px with your own choice.

Get Rid of Gadget Edit Buttons

Find and delete this code (can be more than one, depending on the number of gadgets):

<b:include name='quickedit'/>

Sources and Credits

Feel free to contact me if you need a help 🙂

Pages 1 2 3

183 Comments

    • sebenernya lebarnya saya pas kan dengan ukuran adsense gan, biar yg di post sama sidebarnya pas… hehe… tapi kalau mau dibuat lebar bisa diedit juga ☺

  11. Templatenya mantep mas, gak kalah sama template blog ini, emang top deh masalah desain. tinggal di percepat loading mobilenya aja nih jos banget. Makasih banyak udah kasih free mas

    • Terimakasih, memang pas bikin fokusnya ke design mas, masalahnya kecepatan tetap diperhatikan tapi bukan fokus utama, hehe.. mungkin update selanjutnya bisa lebih saya maksimalkan page speed loadnya

  16. Gan saya sudah mengganti menu sesuai dengan petunjuk, tapi karena saya newbie, mohon petunjuk bagaimana mengaktifkan menu itu..terima kasih

    • Bisa menggunakan app pihak ketiga, seperti share this atau comotin kode official buttonnya satu2

  32. Kok gak sama gan sama versi demonya .. ada gak yang versi demo nya gan buat di download hehe 🙂 lanjutkan gan .. ane suka banget template versi ginian 😀

    • Untuk authornya tampil gan, tapi saya bikin simple. Untuk share button, sementara bisa pasang sendiri, mungkin lain kali akan ditambah fitur share, soalnya lumayan banyak yg req

  44. tidak bisa di download,padahal sudah di share ke facebook dan udah PUBLIC atau FRIENDS tapi tetp ga bisa
    berapakali di coba sampai penuh di beranda saya
    pesan ini terus Important: Ensure your post has visibility ‘PUBLIC’ or ‘FRIENDS’ – then click ‘Verify’

  67. Bro difky sory,, yg ane gambar settingannya mucul mulu di widget..itu yg logo konci sama obeng,, gimana ngilanginnya yah cek di iteknokrat.blogspot.com

    • Find this code:

      .post-snippet{color:#757575;font-size:.9em;line-height:1.2em;max-height:2.4em;overflow:hidden}

      change: max-height:2.4em; to max-height:3.6em; for 3 lines, max-height:4.8em; for 4 lines, etc

    • Pas kemaren rilis udah teratasi, mungkin baru ada update dari Blogger jadi muncul lagi. 🙂 maybe next update diperbaiki

    • Belom ada kak 🙂 kalau udh rilis baru diupdate link nya. Misal pengen bgt maen sekarang, ada beberapa game yg sama dgn nama dan publisher berbeda yg udah ada di toko aplikasi, tapi tidak untuk negara Indonesia. Download dan mainnya harus pake VPN

  81. bagus sih komentar nya cuma terlalu memakan tempat, dan saran saya coba di padukan dengan overflow hehe biar ada scroll nya aja :3

    • From the blogger settings, go to “Posts, Comments, and Sharing”. Find “Show at most” option and you can change the number of posts on your homepage

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *