Free Responsive Template Mas Sugeng

Responsive Template dari Mas Sugeng  di bawah ini screenshoot templatenya

Template Mas Sugeng

[ Live Demo ] [ Download ]

Untuk anda yang tertarik menggunakan template ini silahkan diDOwnload. Berikut ini adalah cara setting template ini :

Setelah memasang template ini di blog agan, ada beberapa kode yang perlu dirubah terlebih dahulu. Masuk ke dashboard blog anda, klik blog yang ingin agan edit, klik Template, klik Edit HTML, klik Lanjutkan, Selanjutnya tinggal agan cari kode-kode di bawah ini:

• YOUR_GOOGLE_PLUS_URL : Ganti dengan URL Profile google plus agan
• YOUR_BLOG_ID : Ganti dengan blog ID agan.
• YOUR_FACEBOOK_PROFILE_ID : Ganti dengan ID Profil facebook agan.
• YOUR_TWITTER_URL : Ganti dengan URL twitter agan.
• YOUR_TWITTER_NAME : Ganti dengan nama twitter agan.
• YOUR_FACEBOOK_FANS_PAGE_URL : Ganti dengan URL halaman facebook anda.

Selain kode-kode di atas, agan juga perlu mengganti link-link di menu navigasi. Di situ sudah diberikan keterangan untuk memudahkan agan menemukan kodenya. Berikut kode keterangannya:
<!-- menu navigasi untuk template seluler --> : Di bawah kode ini adalah menu navigasi versi seluler.
<!-- menu navigasi versi desktop --> : Di bawah kode ini adalah menu navigasi versi desktop.
<!-- top navigation --> : Di bawah kode ini adalah menu navigasi versi desktop untuk bagian atas.

Mengedit Menu Navigasi

Seperti yang sudah saya jelaskan di panduan bagian Kode yang perlu diedit, template ini memiliki dua buah menu navigasi, yang pertama untuk tampilan versi mobile/seluler, dan yang kedua untuk tampilan versi desktop. Berikut ini adalah cara bagaimana untuk mengeditnya :

1. Menu navigasi versi seluler.
Untuk mengedit menu navigasi versi seluler sangatlah mudah, agan hanya perlu mengganti URL dan anchor link-nya saja. Contohnya adalah seperti ini :

<span><a href='/search/label/Sepakbola/max-results=6'>Menu1 </a></span> &#183;

Yang berwarna merah bisa agan ganti dengan URL tujuan. Yang berwana hijau bisa agan ganti dengan anchor link yang nanti akan menjadi text tampilan yang muncul di menu navigasi. Sedangkan yang berwarna biru adalah untuk tanda pemisah antara menu berupa simbol "·" (titik).
2. Menu navigasi versi desktop
Untuk versi desktop kurang lebih sama saja, baik untuk yang bagian atas header maupun yang di bawah header. Intinya hanya mengganti URL tujuan dan anchor link-nya. Berikut adalah contohnya :

<li><a href='/search/label/Entertainment/max-results=6'>Menu1 </a></li>

Agan dapat menambahkan beberapa menu lagi jika dirasa kurang, namun jangan sampai terlalu banyak, sesuaikan dengal lebar template ini. Yang membedakan antara menu navigasi versi seluler dengan versi desktop adalah, di navigasi versi desktop agan bisa menambahkan dropdown menu, namun hanya untuk yang di bawah header. Untuk menambahkan dropdown menu, kurang lebih struktur kodenya seperti ini :

<li class='sub'><a href='#'>Menu1</a> <ul>
<li><a href='/search/label/Gadget/max-results=6'>Submenu1</a></li>
<li><a href='/search/label/Internet/max-results=6'>Submenu2</a></li>
</ul>
</li>

Yang berwarna hijau adalah anchor link yang bila diklik akan memunculkan submenu di bawahnya. Yang berwarna merah adalah URL tujuan untuk submenu. Yang berwarna biru adalah anchor link untuk submenu. Yang paling penting adalah jangan sampai lupa untuk menambahkan class "sub" pada tag <li>. Mengaktifkan Custom Mobile Template Untuk mengaktifkan fitur custom mobile template caranya adalah sebagai berikut:

1. Masuk/login ke dashboard blog agan
2. Pilih blog yang ingin agan aktifkan fitur custom mobile templatenya
3. Klik menu Template pada tab di sebelah kiri
4. Klik icon Gear di bagian bawah tampilan preview template seluler
5. Pilih "Ya. Tampilkan template seluler di perangkat seluler"
6. Di bagian dropdown, pilih "Tersesuai"
7. Klik Simpan

Memasang Iklan Versi Mobile

Untuk memasang kode iklan versi mobile di template ini sangat mudah, karena di dalam template ini sudah saya sediakan slot khususnya, yaitu di bagian bawah menu navigasi, di bawah judul posting, di bawah posting, dan di atas footer. Dan berikut adalah penjelasannya: Masuk ke dashboard blog agan, klik blog yang ingin agan edit, klik Template , klik Edit HTML, tinggal agan cari kode keterangan di bawah ini:

• <!-- top mobile ads section --> : Taruh di bawah kode ini untuk menampilkan iklan mobile di bagian bawah menu navigasi.
• <!-- footer mobile ads section --> : Taruh di bawah kode ini untuk menampilkan iklan mobile di bagian atas footer.
• <!-- top post mobile ads section --> : Taruh di bawah kode ini untuk menampilkan iklan mobile di bagian bawah judul posting.
• <!-- bottom post mobile ads section --> : Taruh di bawah kode ini untuk menampilkan iklan mobile di bagian bawah posting.