Petunjuk Install Mode H-Blogger Themes

Ditutupnya File Hosting Gratisan, membuat aku kelabakan mengingat beberapa template hasil meodifikasi minima menggunakan file Javascript yang aku simpan di Yahoo!Geocity. Untunglah aku ndak begitu lama resah, karena saat aku googling menemukan template Hybrid News yang menerapkan file Javascript pada kode templatenya.

Seperti kebiasaan sebelumnya, aku selalu tidak puas hanya sekedar menggunakan template orang kalau ndak memodifikasinya. Meskipun hasilnya tidak selalu aku gunakan untuk blogku. Kali ini saya mencoba memadukan dua template yang sangat populer baik di kalangan Blogger maupun Wordpress. Apalagi ada permintaan khusus dari rekan Herry Settings. Sebagai template utama aku menggunakan konsep Hybrid News Blogger Template dari Free Blogger Template, sedangkan modifikasinya aku menggunakan konsep pada Revolution City dari Bloganol.

Dari dua konsep template yang berbeda ini, lahirlah MODE H-BLOGGER THEME.

Mari kita belajar bersama bagaimana cara mengedit template yang telah aku modifikasi ini, berhati-hati dan gunakan CTRL + F untuk menemukan kode yang tepat untuk pencarian.

Buka Edit HTML, dan mari kita mulai .....

1. Kita mulai dari TOP Navigations, cari kode dibawah ini :

<ul class='menu sf-menu'>
<li class='current_page_item'><a href='/'>Home</a></li>
<li class='page_item'><a href='#' title='About'>About</a></li>
<li class='page_item'><a href='#' title='Archives'>Archives</a></li>
<li class='page_item'><a href='#' title='Blog'>Blog</a></li>
<li class='page_item'><a href='#' title='Elements'>Elements</a></li>
<li class='page_item'><a href='#' title='New menu'>New Menu</a></li>
</ul>

Keterangan :

- Ganti tanda # dengan masing-masing URL dari tiap menu navigasi anda.
- Ganti yang bercetak merah dengan TEXT anda.
- Kode bercetak tebal adalah menu tambahan bila anda ingin menambahkan menu yang lain

2. Untuk Navigasi yang dibawah header.

Cari kode dibawah ini :

<ul class='menu sf-menu'>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
</ul>

Silahkan ubah seperti langkah pada point 1.

3. Slide Feature [Automatic update for post summary and image thumbnail]

SLIDE fitur ini bisa dikatakan sebagai recent post. menggunakan script Atom Feed dan Dinamis model. Disini, kita menggunakan 2 ATOM feed untuk dua halaman dari SLIDE SHOW. Jadi, anda dapat menampilkan dua posting terbaru anda. Namun, tidak menutup kemungkinan bisa lebih.

Langkah pengeditan :

Cari kode berikut ini :

Tugas anda hanya mengganti "namablog.blogspot.com"

Pada Script Pertama :

startposts = 0;
numposts = 1;
home_page = "http://namablog.blogspot.com/feeds/posts/default";

Pada Script Kedua :

startposts = 1;
numposts = 2;
home_page = "http://namablog.blogspot.com/feeds/posts/default";

Coba perhatikan susunannya ( aku singkat saja, terlalu panjang masalahnya ) :

<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 0;
numposts = 1;
home_page = &quot;http://namablog.blogspot.com/feeds/posts/default&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>

<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 1;
numposts = 2;
home_page = &quot;http://namablog.blogspot.com/feeds/posts/default&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>

pada kode :

home_page = "http://namablog.blogspot.com/feeds/posts/default";

dapat anda ubah apabila anda ingin menampilkan posting sesuai label, dengan kode berikut ini :

http://namablog.blogspot.com/feeds/posts/default/-/labelyangdikehendaki

LALU BAGAIMANA JIKA ANDA INGIN MENAMBAHKAN HALAMAN LAIN DALAM SLIDE FEATURE...?

Anda hanya menyalin kode dari <div class='feature'> hingga </div>, kemudian merubah nilai STARTPOST dan NUMPOSTS pada kode tersebut.

Dibawah ini contoh penerapannya :

<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 0;
numposts = 1;
home_page = &quot;http://namablog.blogspot.com/feeds/posts/default&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>

<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 1;
numposts = 2;
home_page = &quot;http://namablog.blogspot.com/feeds/posts/default&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>

<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 2;
numposts = 3;
home_page = &quot;http://namablog.blogspot.com/feeds/posts/default&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>

4. Jika posting terbaru anda tidak menggunakan gambar, maka secara default akan muncul gambar yang telah disiapkan pada template ini. Bila anda ingin menggantinya dengan kreasi anda, silahkan cari kode URL berikut : http://i584.photobucket.com/albums/ss289/hemingways-studio/Have_Images_TEXT.png.


5. Menambahkan file feature pada masing-masing kolom CATEGORY.

Untuk dapat menampilkan penggalan posting pada Category, langkah yang harus anda kerjakan adalah sebagai berikut :

1. Untuk menambahkan gambar :

- Pada posting anda, saat anda mengupload gambar ke blogger, sebaiknya pada PILIH TATA LETAK centang Button KIRI, setelah gambar berhasil di upload masih pada posisi ruang posting, pilih edit HTML maka akan muncul kode seperti ini (saya ambil contoh sesuai yang ada di MODE H-BLOGGER THEME ):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_obRk93ibokA/SnYwuFsuM3I/AAAAAAAAAJg/8Nr41VUzzPw/s1600-h/204px-Dian_sastro_scroundbites_2007.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 143px; height: 232px;" src="http://3.bp.blogspot.com/_obRk93ibokA/SnYwuFsuM3I/AAAAAAAAAJg/8Nr41VUzzPw/s320/204px-Dian_sastro_scroundbites_2007.jpg" alt="" id="BLOGGER_PHOTO_ID_5365529574420394866" border="0" /></a>

COPAS kode tersebut dalam NOTEPAD. Kemudian buat modifikasi dari kode diatas seperti ini :

<a href="http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html"><img id="BLOGGER_PHOTO_ID_5365529574420394866" border="0" style="margin: 0pt 10px 0px 0pt; float: left; cursor: pointer; width: 70px; height: 70px;" alt="" src="http://3.bp.blogspot.com/_obRk93ibokA/SnYwuFsuM3I/AAAAAAAAAJg/8Nr41VUzzPw/s320/204px-Dian_sastro_scroundbites_2007.jpg"/></a> <a href="http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html">Dian Sastro</a><br/>
Dian Sastro is an Indonesian model and actress .....

keterangan :

- http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html, ini adalah URL posting anda.

- <img id="BLOGGER_PHOTO_ID_5365529574420394866" border="0" style="margin: 0pt 10px 0px 0pt; float: left; cursor: pointer; width: 70px; height: 70px;" alt="" src="http://3.bp.blogspot.com/_obRk93ibokA/SnYwuFsuM3I/AAAAAAAAAJg/8Nr41VUzzPw/s320/204px-Dian_sastro_scroundbites_2007.jpg"/></a>

kode diatas adalah modifikasi dari kode gambar yg ada pada posting yang kita COPAS tadi.
(ukuran gambar 70x70 px)

- <a href="http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html">Dian Sastro</a><br/>
Dian Sastro is an Indonesian model and actress .....

Kode diatas adalah URL posting kita yang dipasangkan pada judul posting (contoh:Dian Sastro), <br/> adalah kode agar penggalan kalimat dari posting berada dibawah judul, kemudian "Dian Sastro is an Indonesian model and actress ....." merupakan penggalan posting kita. Ingat jangan terlalu panjang, bila terlalu panjang tampilan akan berantakan.

Setelah itu, pada TATA LETAK- Eleman Halaman, anda akan menjumpai beberapa CATEGORY lengkap dengan kotak HTML/Javascript. Silahkan masukkan kode yang sudah dimodifikasi. Ingat, penambahan harus seimbang, bila CATEGORY#1 anda menambahkan 2 atau 3 kode HTML, maka pada CATEGORY#2 jumlah yang ditambahkan harus sama, Jika anda menambahkan dari masing-masing Category tidak sama, maka tampilan akan berantakan. Ini berlaku untuk yang lain.

Untuk menambahkan LINK URL pada tulisan "Read More Posts From This Category", silahkan anda Klik pada LABEL di sidebar, kemudian Copi URLnya. Lalu, masuk ke TATA LETAK - Edit HTML, kemudian cari kode seperti ini ....

<div id='homepageleft'>
<div class='model'>

<h3>Opini</h3>
<b:section class='homepageleftwidget' id='homepageleftwidget' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#'>Read More Posts From This Category</a></b>

</div></div>

Pada kode ini : <b><a href='#'>Read More Posts From This Category</a></b>
ganti # dengan URL dari Label/ kategori posting kita, sehingga akan menjadi seperti dibawah ini :

<b><a href='http://buatsobatku.blogspot.com/search/label/opini'>Read More Posts
From This Category</a></b>

Ohya, <h3>Opini</h3> silahkan ubah "Opini" sesuai dengan label posting anda.

ANDA BISA MENAMBAHKAN BEBERAPA CATEGORY, misal Category#5,6 dan seterusnya dengan cara COPAS kode

<div id='homepageleft'>
<div class='model'>

<h3>Category #3</h3>
<b:section class='homepagebotleftwidget' id='homepagebotleftwidget' preferred='yes'>
<b:widget id='HTML85' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#'>Read More Posts From This Category</a></b>

</div></div>
<div id='homepageright'>
<div class='model'>
<h3>Category #4</h3>
<b:section class='homepagebotrightwidget' id='homepagebotrightwidget' preferred='yes'>
<b:widget id='HTML97' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#' rel='bookmark'>Read More Posts From This Category</a></b>

</div>
</div>

ganti : Category, HTML-nya, misal HTML101 dst yang penting belum ada di kode HTML tersebut, dan yang lain sesuai langkah diatas, kemudian tambahkan dibawah :

<div id='homepageright'>
<div class='featured'>
<h3>Category #4</h3>
<b:section class='homepagebotrightwidget' id='homepagebotrightwidget' preferred='yes'>
<b:widget id='HTML97' locked='false' title='' type='HTML'/>
<b:widget id='HTML96' locked='false' title='' type='HTML'/>
<b:widget id='HTML94' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#' rel='bookmark'>Read More Posts From This Category</a></b>

</div>
</div>

</div>

..... tambahkan di sini......

</b:if>
</div>

6. Pada DEMO MODE H-BLOGGER THEME di Sidebar terdapat recent post berdasarkan label, cara pasangnya adalah masuk pada tata letak, kemudian pada elemen halaman klik tambah gadget dan pilih HTML/Javascript. Kemudian tambahkan kode berikut ini :

Label: <span id="pbl_labels"></span>
<div id="pbl_posts"> Recent Posts </div>

<script type="text/javascript">
var jumlah_maksimum_post = 5;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>

<script src="http://copycat91.googlecode.com/svn/trunk/recentpostsbylabel.js">
</script>

<script src="http://namabloganda.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
</script>

<!-- Tolong hargai dengan tidak menghapus/mengubah link di bawah -->
<div style="text-align:right; font-size:0.75em">
Widget by:
<a href="http://infotentangblog.blogspot.com/2009/07/recent-post-dengan-label.html">
Info Blog
</a>
</div>

Ganti http://namabloganda.blogspot.com dengan url blog anda.

NB.
- Sebaiknya terapkan pada blog baru dulu.
- Silahkan dicoba, jangan takut salah


Semoga dengan adanya tutorial ini, rekan-rekan blogger bisa menikmati template MODE H-BLOGGER THEMES.

Ingat, jangan takut untuk berexperimen, karena suatu keberhasilan tidak akan tercapai bila kita tidak berusaha untuk mencobanya.....

Anda bisa download template MODE H-BLOGGER THEME di bCOMStudio.


DEMO MODE H-BLOGGER THEMES