Daftar Isi

1. Panduan Instalasi........................................................................................................
2. Responsive dan Versi Mobile.....................................................................................
3. Menu Navigasi.............................................................................................................
4. Tombol Social Media...................................................................................................
5. Modifikasi Tampilan Template...................................................................................
6. Adsense Responsive..................................................................................................
7. acebook !omments..................................................................................................
8. S"#...............................................................................................................................
Copyright 2014 Mas Sugeng (www.mas-sugeng.com)
Panduan Instalasi
Sebelum memasang template ini di blog sobat, saya sarankan untuk menghapus terlebih
semua widget yang ada di blog sobat. al ini untuk menghindari tampilan tata letak yang
men!adi berantakan.
Setelah sobat memasang template ini di blog sobat, maka tampilan tata letaknya kurang
lebih akan seperti ini"
#ngka 1 adalah widget untuk tab $iew, sedangkan angka 2 adalah widget untuk re%ent
post berdasarkan label.
&ada widget tab $iew bisa sobat isi dengan widget apa sa!a yang sobat inginkan.
Sedangan untuk widget re%ent post dibuat khusus hanya untuk menampilkan re%ent post
berdasarkan label.
'ntuk %ara setting widget re%ent post sendiri sangatlah mudah. (ukup klik edit pada
masing)masing kolom widget dan masukan nama label yang ingin sobat mun%ulkan pada
kolom konten"
Copyright 2014 Mas Sugeng (www.mas-sugeng.com)
*idget re%ent post pada template ini hanya terdapat 6 kolom sa!a. Sobat bisa
menggunakan semuanya atau bisa !uga menampilkan beberapa sa!a, atau bahkan tidak
ditampilkan sama sekali !uga tidak masalah.
Responsive dan Versi Mobile
+emplate ini memiliki dua ,itur keren, yaitu responsi$e design dan %ustom mobile $ersion.
-itur ini tidak bisa digunakan se%ara bersamaan, !adi silakan sobat bisa memilih apakah
ingin menggunakan responsi$e atau $ersi mobile.
.ika ingin menggunakan responsi$e design maka hal perlu dilakukan adalah %ukup
menonakatifkan ,itur template seluler pada blog sobat, %aranya"
/asuk ke 0ashboard blog sobat 1 +emplate 1 2lik i%on 3$ear4 di bawah pre$iew template
seluler 1 dan pilih 3Tidak. Tampilkan template seluler di perangkat seluler.3 1 Simpan
Copyright 2014 Mas Sugeng (www.mas-sugeng.com)
.ika sobat lebih memilih untuk menggunakan ,itur %ustom mobile template, maka %aranya
adalah sebagai berikut "
/asuk ke 0ashboard blog sobat 1 +emplate 1 2lik i%on 3$ear4 di bawah pre$iew template
seluler 1 dan pilih 3%a. Tampilkan template seluler di perangkat seluler.3 1 pada menu
dropdown pilih 3&'usus4 1 Simpan
Menu Navigasi
&ada template ini terdapat tiga buah menu na$igasi. 0ua menu na$igasi untuk $ersi
desktop dan satu menu na$igasi untuk $ersi mobile.
'ntuk mengedit menu na$igasi $ersi desktop pada bagian atas header %ukup %ari kode ini"
<!-- primary navigation menu start -->
<ul class='nav-menu'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>rivacy olicy</a></li>
<li><a href='#'>!isclaimer</a></li>
</ul>
<!-- primary navigation menu en" -->
Copyright 2014 Mas Sugeng (www.mas-sugeng.com)
Silakan %ukup edit tanda pagar merah dengan (R) tu!uan dan te5t warna hi!au dengan
+e5t tampilan atau anc'or te*t.
'ntuk menu na$igasi di bawah header silakan %ari kode berikut ini "
<!-- secon"ary navigation menu start -->
<ul class='nav nav-menu#'>
<li><a class='active' href='/'><i class='fa fa-home'/> $ome</a></li>
<li><a href='#'>%enu &</a>
<ul>
<li><a href='#'>'ub %enu &</a></li>
<li><a href='#'>'ub %enu #</a></li>
<li><a href='#'>'ub %enu (</a></li>
</ul>
</li>
<li><a href='#'>%enu #</a>
<ul>
<li><a href='#'>'ub %enu &</a> </li>
<li><a href='#'>'ub %enu #</a></li>
<li><a href='#'>'ub %enu (</a></li>
</ul>
</li>
<li><a href='#'>%enu (</a></li>
<li><a href='/#)&(/&)/mar*up-html-tags-an"-
formatting+html'>%ar*up</a></li>
<li><a href='/massugeng'>,rror age</a></li>
<li><a href='/p/lorem-ipsum-"olor-sit-amet-consectetur+html'>'tatic
age</a></li>
</ul>
<!-- secon"ary navigation menu en" -->
Seperti biasa, %ukup edit yang berwarna merah dengan '67 tu!uan dan yang berwarna
hi!au dengan te5t tampilan.
8ah !ika sobat mengakti,kan $ersi mobile sobat !uga perlu mengedit menu na$igasi untuk
$ersi mobile. +api !uka sobat hanya menggunakan responsi$e design maka menu na$igasi
ini tidak perlu diedit.
'ntuk mengedit menu na$igasi $ersi mobile silakan %ari kode ini"
<!-- mobile navigation menu start -->
<"iv i"='mobile-nav'>
<span><a e-pr.href='"ata.blog+homepageUrl'>/eran"a</a></span> 0#&1(2
<span><a href='#'>3e*nologi</a></span> 0#&1(2
<span><a href='#'>4lahraga</a></span> 0#&1(2
<span><a href='#'>,ntertainment</a></span> 0#&1(2
<span><a href='#'>5aya $i"up</a></span>
</"iv>
<!-- mobile navigation menu en" -->
Seperti biasa, %ukup edit yang berwarna merah dengan '67 tu!uan dan yang berwarna
hi!au dengan te5t tampilan.
Copyright 2014 Mas Sugeng (www.mas-sugeng.com)
Tombol Social Media
+erakhir yang perlu diedit adalah tombol so%ial media di sebelah kanan menu na$igasi
atas. Silakan %ukup %ari kode berikut ini"
<!-- social me"ia button start -->
<ul class='nav-social'>
<li><a class='fcb'
href='https://www.facebook.com/evotemplatesnet' rel='nofollo6'><i class='fa fa-
faceboo*-s7uare fa-#-'/></a>
</li>
<li><a class='gpl' href='https://plus.google.com/
+SugengRiyadi' rel='nofollo6'><i class='fa fa-google-plus-s7uare fa-#-'/></a>
</li>
<li><a class='t6t' href='https://twitter.com/blogmassugeng'
rel='nofollo6'><i class='fa fa-t6itter-s7uare fa-#-'/></a>
</li>
<li><a class='ytb' href='https://www.youtube.com'
rel='nofollo6'><i class='fa fa-youtube fa-#-'/></a>
</li>
</ul>
<!-- social me"ia button en" -->
Silakan %ukup rubah sa!a '67)'67 yang bertanda hi!au di atas dengan '67 milik sobat.
Modifikasi Tampilan Template
9agi sobat yang mungkin ingin memodi,ikasi template ini agar sedikit berbeda, sobat bisa
meman,aatkan ,itur peran%ang template yang ada di blogger. Sobat bisa dengan mudah
mengganti warna, ba%kground, dan !uga ,ont pada template ini.
(aranya sangatlah mudah, silakan sobat masuk ke Das'board blogger 1 Template 1
Sesuakan. Setelah itu klik 3Tingkat )an+ut4
Copyright 2014 Mas Sugeng (www.mas-sugeng.com)
8ah pada menu tersebut silakan sobat bisa memodi,ikasi template ini sesuai keinginan.
Adsense Responsive
9agi sobat publisher :klan #dSense bisa meman,aatkan template ini untuk menampilan
unit iklan responsi$e dari #dSense. Sobat bisa memasang #dSense 6esponsi$e di mana
sa!a, tapi saya rekomendasikan untuk dipasang pada bagian bawah menu na$igasi
;<7=5<=p5> atau di samping header ;7285<=p5>.
9erikut adalah %ontah nyata iklan #dSense responsi$e yang saya terpakan pada template
ini "
Copyright 2014 Mas Sugeng (www.mas-sugeng.com)
Landscape
Potrait
'ntuk %ara memasang #dSense responsi$e sangatlah mudah, tidak ada bedanya dengan
memasang unit iklan #dSense pada umumnya.
/asuk ke 0ashboard #dSense milik sobat 1 Iklan Sa,a 1 (nit iklan baru.
/asukan nama unit iklan dan pada bagian (kuran iklan pilih -(nit iklan responsif
./"TA01
.ika sudah, klik simpan dan dapatkan kode.
7angkah selan!utnya tinggal sobat letakan kode unit iklannya pada blog sobat melalui
menu #dd ?adget 1 +/7@.a$aS%ript.
acebook !omments
+anpa melakukan pengaturan sebenernya ,a%ebook %omment akan otomatis tampil dan
dapat digunakan se%ara normal. 8amun, agar sobat bisa melakukan moderasi terhadap
komentar)komentar yang masuk, maka perlu dilakukan sedikit kon,igurasi.
al pertama yang perlu sobat lakukan adalah membuat #plikasi ,a%ebook. 'ntuk tutorial
%ara membuat aplikasi ,a%ebook sobat bisa googling atau 27:2 0: S:8:. .ika sobat sudah
punya sebelumnya maka tidak perlu membuat lagi.
Setelah berhasil membuat aplikasi ,a%ebook, yang perlu sobat lakukan selan!utnya adalah
men%atat APP ID dari aplikasi ,a%ebook yang baru sa!a sobat buat.
Setelah itu silakan sobat %ari kode berikut ini di dalam template "
Copyright 2014 Mas Sugeng (www.mas-sugeng.com)
<meta property='fb.app8i"' content='YOUR!""#$%!&$O'$('/>
?anti yang berwarna hi!au dengan APP ID sobat.
Sekali lagi, %ari kode berikut ini "
<script>
//<!9C!A3A9
6in"o6+fbAsync:nit = function;< =
>/+init;=
app:" . 'YOUR!""#$%!&$O'$('?
status . true? // chec* login status
coo*ie . true? // enable coo*ies to allo6 the server to access the
session
-fbml . true // parse @>/%A
B<2
B2
;function;< =
var e = "ocument+create,lement;'script'<2
e+src = "ocument+location+protocol C
'//connect+faceboo*+net/en8U'/all+Ds'2
e+async = true2
"ocument+get,lement/y:";'fb-root'<+appen"Chil";e<2
B;<<2
//EE>
</script>
?anti yang berwarna hi!au dengan APP ID sobat.
Sobat bisa melihat seluruh komentar)komentar ,a%ebook yang sudah masuk di dashboard
khusus 0: S:8:.
S"#
'ntuk masalah SAB pada template ini sudah saya setting semaksimal mungkin sesuai
dengan pengetahuan saya. Sobat tidak perlu melakuan modi,ikasi apapun pada template
ini.
8amun untuk lebih memaksimalkan lagi sobat bisa ba%a)ba%a postingan tentang SAB di
blog saya 222.mas3sugeng.com.
.ika ada yang kurang !elas atau ada yang error silakan bisa disampaikan melalui email ke
adminCmas)sugeng.%om atau S/S ke =82138245217 ;S/S only>, pin 99 7591<<55.
Copyright 2014 Mas Sugeng (www.mas-sugeng.com)