1. Silahkan anda instal terlebih dahulu template yang anda download, caranya bisa dilihat pada artikel dibawah:
Cara pasang atau instalasi template blogger atau blogspot
2. Lalu silahkan ganti atau nonaktifkan mobile template blogger anda, dibawah adalah tutorialnya:
Cara menonaktifkan atau mengganti mobile template blogger atau blogspot
Keterangan:
Template ini memiliki fitur yang keren, support untuk custom mobile maupun responsive desain. Keduanya sama sama cepat di load dan powerfull pada seluler anda. Jika anda ingin menampilkan desain responsive pada seluler, maka anda bisa menonaktifkan template mobile anda, dan jika anda ingin menampilkan custom mobile maka akan harus mengganti default mobile template blogger dengan custom template blogger khusus. Caranya bisa anda lihat pada tutorial diatas.
3. Langkah selanjutnya adalah tinggal anda konfigurasi saja template nya. Berikut adalah yang perlu anda konfigurasi pada template SimpleSanget:
Konfiguasi meta
Silahkan anda edit template anda, Masuk ke blogger -> template -> Edit HTML Cari kode:
<!-- Ganti dengan aplikasi ID facebook anda sendiri -->
<meta content='226875977396331' property='fb:app_id'/>
<!-- Ganti dengan twitter username anda sendiri xxx ganti dengan @xxx -->
<meta content='xxx' name='twitter:site'/>
<meta content='xxx' name='twitter:creator'/>
<!-- ganti kode https://plus.google.com/+AAGian dengan url google plus anda -->
<link href='https://plus.google.com/+AAGian/about' rel='author'/>
<link href='https://plus.google.com/+AAGian/posts' rel='publisher'/>
<link href='https://plus.google.com/+AAGian/' rel='me'/>Keterangan:
- Ganti kode 226875977396331 dengan facebook app ID anda sendiri, jika anda tidak punya facebook App id sendiri, bisa menggunakan APP ID saya diatas atau menghapus kode <meta content='226875977396331' property='fb:app_id'/>
- Lalu anda ganti semua kode xxx dengan username twitter anda.
- Setelah itu anda ganti semua kode https://plus.google.com/+AAGian dengan URL google plus anda sendiri.
Konfigurasi box subscriber dibawah postingan
Masih di edit HTML silahkan anda cari kode berikut:
<b:includable id='subscribebox' var='post'>
<div class='gmr-subscribebox'>
<h4>Subscribe via Email</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri=gianmr", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' method='post' target='popupwindow'>
<input name='email' type='text' id='gmr-subscribe-input' placeholder='Email Address..'/>
<input value='gianmr' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='gmr-btn gmr-btn-orange gmr-btn-block' type='submit' value='Subscribe Now'/>
</form>
</div>
</b:includable>Keterangan:
Silahkan anda ganti kode gianmr dengan nama feedburner anda sendiri, biasanya link feedburner adalah http://feeds.feedburner.com/namafeedanda maka anda tinggal mengganti kode gianmr dengan namafeedanda
Memasukan kode banner atau adsense sebelum dan setelah artikel.
Masih di edit HTML cari kode berikut:
<!-- Adsense 336x280 before article start -->
<img alt="adsense 336x280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfaA6bgGPzImoPsTHZcGFUlOCx0iBrarqBIK-mUGeiK2J1a-HAeXgVIBmC2eAh4uzuCB3U8z5RJFa930hVgROSXwzB0ABB4QPs-tEHMyUrAkR92rDBpskWO4bATxMUSWzRmlRnVavUoH2g/s1600/adsense336x280.png" title="adsense 336x280" width="336" />
<!-- Adsense 336x280 before article end -->
<data:post.body/>
<!-- Adsense 336x280 after article start -->
<img alt="adsense 336x280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfaA6bgGPzImoPsTHZcGFUlOCx0iBrarqBIK-mUGeiK2J1a-HAeXgVIBmC2eAh4uzuCB3U8z5RJFa930hVgROSXwzB0ABB4QPs-tEHMyUrAkR92rDBpskWO4bATxMUSWzRmlRnVavUoH2g/s1600/adsense336x280.png" title="adsense 336x280" width="336" />
<!-- Adsense 336x280 after article end -->Keterangan:
Sebelumnya silahkan anda parse terlebih dahulu kode adsense anda disini:
Html js converter to blogger
Untuk memasukkan adsense sebelum artikel silahkan anda masukkan kode hasil konversi di:
<!-- Adsense 336x280 before article start -->
<img alt="adsense 336x280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfaA6bgGPzImoPsTHZcGFUlOCx0iBrarqBIK-mUGeiK2J1a-HAeXgVIBmC2eAh4uzuCB3U8z5RJFa930hVgROSXwzB0ABB4QPs-tEHMyUrAkR92rDBpskWO4bATxMUSWzRmlRnVavUoH2g/s1600/adsense336x280.png" title="adsense 336x280" width="336" />
<!-- Adsense 336x280 before article end -->
Untuk memasukkan setelah artikel anda bisa taruh kode di:
<!-- Adsense 336x280 after article start -->
<img alt="adsense 336x280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfaA6bgGPzImoPsTHZcGFUlOCx0iBrarqBIK-mUGeiK2J1a-HAeXgVIBmC2eAh4uzuCB3U8z5RJFa930hVgROSXwzB0ABB4QPs-tEHMyUrAkR92rDBpskWO4bATxMUSWzRmlRnVavUoH2g/s1600/adsense336x280.png" title="adsense 336x280" width="336" />
<!-- Adsense 336x280 after article end -->Setting Menu atau Top Navigasi
Silahkan anda setting widget atau gadget anda, masuk ke blogger -> Tata Letak
Lalu edit gadget navigasi:
Masukkan kode berikut:
<!-- Menu toggle -->
<a href='#gmrmenu' id='gmrmenuLink' class='menu-link' title='Open Menu'>
<!-- Hamburger icon -->
<span></span> Menu
</a>
<div id='gmrmenu'>
<ul>
<li itemprop='url'><a expr:href='data:blog.homepageUrl' title='Home' itemprop='name'>Home</a></li>
<li itemprop='url'><a href='#' title='Menu' itemprop='name'>Menu</a></li>
<li itemprop='url'><a href='#' title='Menu' itemprop='name'>Menu</a></li>
<li itemprop='url'><a href='#' title='Menu' itemprop='name'>Menu</a></li>
<li itemprop='url'>
<a class='submenus' href='#' title='Menu' itemprop='name'>Menu</a>
<ul class='menus'>
<li itemprop='url'><a href='#' itemprop='name' title='SubMenu'>SubMenu</a></li>
<li itemprop='url'><a href='#' itemprop='name' title='SubMenu'>SubMenu</a></li>
</ul>
</li>
<li itemprop='url'><a href='#' title='Menu' itemprop='name'>Menu</a></li>
</ul>
</div>Keterangan:
Ganti kode # dengan URL anda, ganti tulisan Menu dengan nama menu anda, ganti tulisan SubMenu dengan nama submenu anda.
Biarkan struktur HTML seperti diatas, jangan mengganti class atau lainnya. Atau tampilan menu anda tidak akan seperti demo. cukup mengganti href, dan judul menunya saja, kalau mau menambahkan menu anda bisa memasukkan kode:
<li itemprop='url'><a href='#' title='Menu' itemprop='name'>Menu</a></li>Konfigurasi lainnya:
Silahkan anda lihat settingan widget lainnya:
Keterangan gambar diatas:
- Untuk menambahkan Adsense setelah menu anda bisa menambahkan langsung di HeaderBanner, untuk menambahkan Adsense di sidebar anda bisa menambahkan di widget Adsense 160x600, untuk menambahkan banner di footer anda bisa menambahkan Adsense di FooterBanner. Jika anda tidak ingin menambahkan widget maka biarkan saja apa adanya.
- Untuk popular post seperti demo, settingan widgetnya seperti ini:
- Silahkan anda isi semua gadget atau widget di footer, tidak ada settingan khusus di footer widget, untuk demo widget label anda setting seperti ini:
Jika ada yang ingin anda tanyakan atau meminta dukungan mengenai template ini, silahkan anda komentar disini.
0 komentar