Ngawi Responsive Blogger Template

Sudah lama admin tidak membagikan template untuk blogger. Alhamdulillah pada kesempatan kali ini saya akan membagikan template hasil garapan saya. Sebenarnya template yang saya garap ini bukan sepenuhnya murni garapan saya.
Saya hanya mengedit bagian header, footer dan sedikit utak - atik pada sidebarnya. Untuk kerangka template originalnya sendiri saya mengambil dari template NGD milik kang Rifan Hidayat, jika anda menginginkan template originalnya bisa download disini : NGD Flat v.2.00 Responsive.

Perubahan yang saya lakukan pada template ini yakni membuat template Ngawi Responsive Blogger Template menjadi fast loading tanpa membuang fitur yang ada pada template aslinya. Selain itu saya merubah tampilan header mirip seperti blog kompi ajaib milik bapak adhy dan merombak habis footernya :)

Fitur yang ada pada Ngawi Responsive Blogger Template

1. Responsive

2. Valid HTML5

3. SEO Friendly

4. Thread comment hack

5. Adsense Friendly (disamping judul, dibawah artikel dan bisa di sidebar)

6. Fast Loading (pagespeed insight diatas 90+ bahkan mendekati 100)

7. No error di struktur datanya.

Untuk fitur yang lain silakan dirasakan sendiri nanti setelah memakai template ini.

Costumisasi Template

Untuk memperoleh hasil yang optimal pada template silakan ikuti panduan costumisasi berikut :

1. Tag Meta

Silakan anda sesuaikan sendiri tag meta berdasarkan blog yang anda kelola, untuk lebih jelasnya silakan agan ganti xxxx dengan informasi web anda. Tag meta pada template ini sudah saya optimalkan, kalau anda mau tahu cara mengoptimalkan tag meta baca : Optimalkan Tag Meta Untuk Peningkatan SEO

2. Menu Navigasi

Pada template ini terdapat 2 menu navigasi yakni navigasi atas dan navigasi bawah. Navigasi yang saya maksudkan adalah :

Navigasi atas

<div class='bungkus-judulblog'>
Ubah Navigasi yang ada disini........
</div>

Navigasi bawah

<div class='nav2 cf' id='nav2' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
Ubah Navigasi yang ada disini.......
</div>

3. Menambahkan Profil pada Footer

Untuk menambahkan profil anda pada footer :

a. Menuju ke tata letak

b. Pada widget bagian bawah pilih add widget

c. Pilih HTML/JavaScript

d Pastekan code html berikut :

<style>
.mbt-share {list-style: none;}
.mbt-share li {float: left; padding-right:13px; }
#profilemohammad{
border:0px solid #888; margin:2px 15px 0px 0px; padding:2px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
}
#profilemohammad:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity  {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
margin-right:5px;
}
.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<img width="60px" height="60px" class="opacity" id="profilemohammad" src="//a.disquscdn.com/uploads/users/15536/5431/avatar92.jpg?1430559850" align="left" /> Hai, saya agung, saya admin blog ini. Saya bukan orang yang ahli dalam bidang ini, namun saya mencoba untuk belajar dan berbagi. <a style="color:#888;" href="http://www.awblog.net/p/about.html">Read More..</a>  <br />
<br /><ul class="mbt-share">
<li>
<a target="_blank" rel="nofollow" href="http://www.awblog.net/Emailfeeds"><i class="fa fa-envelope-o"></i></a></li>
<li><a target="_blank" rel="nofollow" href="http://www.awblog.net/feeds"><i class="fa fa-rss"></i></a></li>
<li><a target="_blank" rel="nofollow" href="http://www.facebook.com/who.les5"><i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" rel="nofollow" href="http://plus.google.com/+AgungWinarno045"><i class="fa fa-google-plus"></i></a></li>
<li><a target="_blank" rel="nofollow" href="http://twitter.com/agung_arno"><i class="fa fa-twitter"></i></a></li>
</ul>

4. Edit Ads di Bawah Postingan

Untuk mengedit tampilan ads dibawah postingan, silakan anda cari code berikut dan edit sesuai selera anda.

<div id='iklan-bawah-post'>
<div class='iklanmu'>
Kode iklanmu disini...
</div></div>

Untuk costumisasi lainnya saya serahkan kepada pembaca. Sekian share template Ngawi Responsive Blogger Template semoga bermanfaat.