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>

Work Mag : Responsive Premium Blogspot Template (Gratis)

Work Mag Is a New Blogger Template. Its High User Friendly Blogger Template. If You Blogger User This is a best Template For You, Mobile, Desktop And Tablet Friendly User Interface. Simple And Clean Color’s, Navigation Menu, Image Slider and Tabs Wight Ready Template.

DEMOVIEW    |    DOWNLOAD

Work Mag TEMPLATE INFORMATIONS
Platform Type : Blogger.com
Template Name : Work Mag
Author name : coolbthemes
 Designer URL : http://www.coolbthemes.com

Features :

•     Responsive Template Design
•     Auto Blog Post summarize And “Read More” Button
•     Auto Image Crop With Thumbnail (Home Page and Label Page Only)
•     Css And HTML Base Menu With Drop down
•     Auto Date Show At Header Right side
•     Tabs Widgets ready (Powered By Jquery)
•     Image Slider (Powered By Jquery)
•     Simple User Friendly Search Box
•     Auto Pagination Added To Post Footer
•     Social Icons Collection(Placed Post Footer)
•     Social Share Widget (Placed Post Footer)
•     Custom Error 404 Page With Search Box (Official 404 Page)
•     Related Post Widget (Placed Post Footer)
•     Ads Banner Ready
•     Meta Keywords And Description Support (Official Meta Description Support)
•     Random Post Selector
•     Recent Post By Label
•     4 Column Footer Area
•     Flicker Image Gallery
•     Official “FOLLOW BY EMAIL” Widget

Blogspot Template Minimalis Responsif : B1:A

 B1:A | Blogspot Template Minimalis Responsif 

B1:A adalah template Blogger responsif minimalis dua kolom. Pemilihan font di fokuskan pada Source Sans Pro, Oswald dan font ikon dari Fontawesome. Template blogger keren ini saya dapatkan dari blog jagoan Indonesia www.dte.web.id milik Kang Mas Taufik Nurrohman.

Tampilan template tersebut terkesan sederhana. Namun disitulah letak kelebihannya, sehingga terlihat elegant dan profesional.

VIEWDEMO | DOWNLOAD

Konfigurasi B1:A | Blogspot Template Minimalis Responsif

1. Mengubah Teks “Read More”

Masuk ke halaman Tata Letak, kemudian lihat pada widget Posting Blog. Klik tombol pengeditan yang terletak di sebelah pojok kanan bawah. Teks “Read More” bisa diganti pada bagian ini: 

2. Mengubah Teks “Search”

Saat Anda berada di halaman Editor HTML template, pastikan kursor teks sedang aktif di dalam area kode. Tekan CTRL + F lalu ketik class='submit-button. Kode yang diberi tanda di bawah ini adalah yang harus diganti:

<button class='submit-button' type='submit'><i class='icon-search'/> Search</button>

3. Memodifikasi Menu Navigasi

Tekan CTRL + F lalu ketik id='site-nav untuk menemukan deret kode seperti ini:

<nav class='nav' id='site-nav'>
<ul>
<li><a class='home-menu' expr:href='data:blog.homepageUrl' title='Home'><i class='icon-home icon-2x'/><span class='screen-reader'> Home</span></a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Archive</a></li>
... 

4. Mematikan Fitur Responsif

Untuk yang tidak suka dengan tema responsif, pada tag <html> terdapat atribut kelas seperti ini:

<html expr:class='data:blog.languageDirection + &quot; no-js rwd&quot;' expr:dir='data:blog.languageDirection'>

Untuk mematikan fitur responsif, buang kode yang diberi tanda merah.