Walopun template ini menggunakan banyak kode css untuk beberapa widget yang ada, template ini termasuk ringan. Dari uji loading blog demo Face Off Magajah template untuk tampilan main post pada seocentro.com, didapat hasilnya kurang lebih 42Kb-an. Hal ini
Berikut ini skrinshot template Face Off Magajah pada tampilan Main Post
Gambar 1.Berikut ini skrinhot layout template Face Off dengan kode <b:if cond='...'></b:if>
Gambar 2.Main Post dan Sidebar pada layout tidak muncul karena penggunaan kode <b:if cond='...'></b:if>
Lihat demo pada Main Post, Label Post dan Single Post | Download template Face Off Magajah
Setting Face Off Magajah template
1. Setting Menu pada Main Post dan Single Post
Masuk ke Layout > klik Edit HMTL.
Untuk menu Main Post, cari kode ini
<div id='navhome'>
Untuk menu Single Post, cari kode ini
<div id='navigation'>
Ganti YOUR-LINK-ABOUT-HERE, LINK-RSSFEED-HERE, dan Edit Me.
2. Setting Acordion Menu (Menu Blog widget seperti pada demo)
Menu Accordion pada template Face Off Magajah ini saya khususkan fungsinya sebagai link untuk Recent Post, Recent Post per kategori/label maupun untuk Recent Comment walopun bisa untuk widget yang lain.
Untuk setting accordion menu, kopi dan paste kode berikut ini
<div class="arrowlistmenu">
<h3 class="menuheader expandable">Recent Posts</h3>
<ul class="categoryitems">
<--- Kode javascript ato postingan --->
</ul>
<h3 class="menuheader expandable">Category 1</h3>
<ul class="categoryitems">
<--- Kode javascript ato postingan --->
</ul>
</div>
* Kode diatas hanya untuk 2 Submenu.
* Warna merah adalah judul Submenu
Untuk setting Recent Post per kategori/label, kopi dan paste kode berikut ini.
<script src="http://sites.google.com/site/vectorireng/javascript/codejavascript.js"></script>
<script>var numposts = 8; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://freetemplate-ajah.blogspot.com/feeds/posts/default/-/Free%20Blogger%20Templates?orderby=published&alt=json-in-script&callback=rp">
</script>
Ganti yang berwarna merah dengan alamat blog sobat.
Untuk warna biru adalah nama label post. Penulisan nama label post harus sesuai besar kecil hurufnya.
/-/Free%20Blogger%20Templates? adalah contoh untuk label post Free Blogger Templates pada blog saya (3 kata)
Jika nama label post terdiri dari 2 kata, misal ireng ajah maka penulisannya menjadi
/-/ireng%20ajah?
Untuk label post 1 kata, misalnya ireng, maka penulisannya
/-/ireng?
3. Setting Feature Content
Copy dan paste kode berikut
<style type="text/css">
div.TabTampil div.TTs{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active{ background: #fff; }
div.TabTampil div.Halamans{ clear: both; overflow: hidden; background: #fff;}
div.TabTampil div.Halamans div.Halaman{ height: 100%;
padding: 0px; overflow: hidden; color: #000;}
div.TabTampil div.Halamans div.Halaman div.Alas{ padding: 5px; }
div.TabTampil div.TTs a{float: left;display: block; width: 30px; text-align: center; height: 20px; padding: 3px; margin-right:1px; vertical-align: middle; text-decoration: none; font:bold 12px Arial; color: #ff0000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil"><div style="width: 250px;" class="TTs"> <a>1</a><a>2</a><a>3</a></div>
<div style="width: 250px; height: 200px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<a href="LINK-ULR-HERE" title="Title" target="_blank"/><img src="LINK-URL-IMAGE" alt="Alt Image" title="Title Image" width="240" height="180" /></a>
</div></div>
<div class="Halaman">
<div class="Alas">
<---- Konten Feature Post --->
</div></div>
<div class="Halaman">
<div class="Alas">
<a href="LINK-ULR-HERE" title="Title" target="_blank"/><img src="LINK-URL-IMAGE" alt="Alt Image" title="Title Image" width="240" height="180" /></a>
</div></div>
</div></div></form><script style="text/javascript"
src="http://sites.google.com/site/vectorireng/javascript/codejavascript.js"></script><script
type="text/javascript">tabtampil_inisial('TabTampil');</script>
* Warna merah adalah jumlah (judul) feature content. Kode diatas adalah contoh untuk 3 feature content
4. Add widget baru untuk Sidebar.
Seperti yang sudah saya tulis diatas, template ini menggunakan kode <b:if cond='...'></b:if> untuk mengelompokkan widget2nya sehingga ada beberapa widget blog yang tersembunyi pada main post dan begitu pula sebaliknya pada single post.
Secara garis besar, kode HTML (Layout > Edit HMTL) widget pada Sidebar seperti berikut :
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Widget 1' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Widget 2' type='HTML'/>
</b:section>
</div>
</b:if>
Warna merah itu adalah kode untuk menghilangkan widget sidebar pada tampilan main post (liat ke-2 gambar diatas).
"Lha terus gimana kalo mau add widget baru pada sidebar??"
Untuk add widget baru pada sidebar, ada beberapa cara.
a. Copy n paste kode yang sudah ada pada sidebar
Cara ini hanya untuk widget HMTL/Javascript. Caranya, sobat cukup copy n paste kode berikut HMTL/Javascript berikut
<b:widget id='HTML2' locked='false' title='Widget 2' type='HTML'/>
Letakkan pada seperti pada susunan diatas. Ganti HTML2 misal menjadi HTML10 (ato terserah. jangan sama dengan HMTL yang lain) dan ganti juga Title/Judulnya dari Widget 2 misalnya menjadi Link Sobat. Jika sudah, save lalu sobat masuk ke single post. Nanti widget pada sidebar dengan judul Link Sobat akan muncul. Klik Edit (tanda obeng) dan masukkan kode/postingan ke widget tersebut.
b. Bisa juga lewat widget lain yang mucul pada tampilan Main Post.
Lihat gambar 2. Caranya, masuk ke Layout < for="expandWidgets">Expand Widget Templates) dan cari widget baru tersebut, kemudian cut dan paste pada sidebar. Save
c. Menambahkan widget langsung pada Sidebar
Cara yang ke 3 ini akan menampilkan Sidebar pada Layout (gambar 2). Beberapa bagian yang menjadi 1 kelompok dengan Sidebar dimana diawali
<b:if cond='data:blog.url != data:blog.homepageUrl'> dan diakhiri kode </b:if>
adalah Main-Wrapper, Search-box, dan Sidebar-Wrapper itu sendiri. Untuk bisa menambahkan widget langsung pada Sidebar, maka setiap bagian tersebut kecuali Sidebar-Wrapper harus diawali dengan kode
<b:if cond='data:blog.url != data:blog.homepageUrl'> dan diakhiri </b:if>
Save.
Jika sudah, masuk ke Layout > Page Element (widget Sidebar akan tampak). Kemudian, klik Add gadget dan pilih widget yang akan ditambahkan.
Jika sudah, klik Edit Html dan klik Expand Widget Templates.
Kemudian cari widget yang baru saja ditambahkan tersebut. Saya misalkan sobat menambahkan widget HTML/Javascript dan diberi judul Link Sobat.
Kode widget Link Sobat akan tampak seperti berikut
<b:widget id='HTML30' locked='false' title='Link Sobat' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
* Perhatikan yang saya kasih warna merah
Ubah kode tersebut menjadi seperti ini
<b:widget id='HTML30' locked='false' title='Link Sobat' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
* Perhatikan yang saya kasih warna merah.
Save
Berhubung file download template ini sudah ada bawaan widget HTML/Javascript, maka sobat juga harus melakukan hal yang sama seperti diatas untuk widget2 yang sudah ada.
Cara tersebut untuk widget HTML/Javascript. Jika sobat menambahkan widget lain, misalnya profil, akan menjadi sulit karena saya tidak tau, (belum tau) dimana kode
<b:if cond='data:blog.url != data:blog.homepageUrl'> dan </b:if> harus ditambahkan/diedit.
Disinilah repotnya jika menggunakan cara ke 3. Kalo sobat menggunakan cara ke 1 ato cara ke 2, semua widget pada Sidebar bisa diakali dengan mudah.
(Huhh... cape euy.. ngetiknya...)
Begitulah cara setting template ini. Jika sobat merasa bingung dengan penjelasan diatas (saya juga bingung sendiri..) sobat bisa meninggalkan komentar.
No comments:
Post a Comment