Membuat footer 3 kolom

Okay langsung ke tutorial ya?

* Seperti biasa kali ini kita akan sedikit mengutak-atik template blog kita

* Untuk membuat footer dibutuhkan kode CSS di bawah ini:

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

* Pendek kan kodenya? pastekan sebelum kode </b:skin>

* Lalu kamu cari kode <b:section class='footer' id='footer'/> (pakai CTRL+F)

* Kamu paste kode dibawah ini di bawah kode tersebut:

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col1'

preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left;

margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'

preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col3'

preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding:

10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

* Simpan template!
Sekarang blog kamu pasti jadi lebih canti.

Read More

Membuat kotak komentar di bahwah posting

Akhirnya datang juga....
Setelah lama ditunggu-tunggu oleh para penggemar setianya, akhir blogger/blogspot menerbitkan juga comment box atau kotak komentar yang langsung muncul berada dibawah postingan. Kalau dulu hanya berupa link &quot;Post a Comment&quot;, maka yang sekarang lain, yg sekarang kotak komentarnya langsung muncul persis dibawah postingan (seperti kotak komentar dibawah ini). Dengan adanya kotak komentar yang seperti ini, akupun rela mengganti kotak komentarku yang dulu (haloscan) dengan comentbox yang ini. Walaupun kotak komentar ini masih dalam draft tapi sudah bisa dinikmati.

Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.

1. Login ke http://draft.blogger.com, Ingat yang http://draft.blogger.com bukan blogger.com.
2. Trus ke menu Setting--&gt;Comments. Kemudian ganti &quot;Comment Form Placement&quot; menjadi &quot;Embedded below post&quot; (lihat gambar dibawah)



3. Kemudian klik &quot;Save Setting&quot;

Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).

4. Selanjutnya pergi ke menu &quot;Layout--&gt;Edit HTML&quot;
5. Beri tanda centang kotak &quot;Expand widget templates&quot;.
6. Trus cari kode berikut ini :

&lt;p class='comment-footer'&gt;
&lt;a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'&gt;
&lt;data:postCommentMsg/&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;/b:if&gt;


7. Kemudian ganti kode tersebut dengan kode dibawah ini:

&lt;p class='comment-footer'&gt;
&lt;b:if cond='data:post.embedCommentForm'&gt;
&lt;b:include data='post' name='comment-form'/&gt;
&lt;b:else/&gt; &lt;b:if cond='data:post.allowComments'&gt;
&lt;a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'&gt;
&lt;data:postCommentMsg/&gt;&lt;/a&gt;
&lt;/b:if&gt; &lt;/b:if&gt; &lt;/p&gt; &lt;/b:if&gt;


8. Lalu simpan template kamu dan tinggal dilihat hasilnya...
By:trik-tips.blogspot.com

Read More

Cara Menghilangkan Tanggal Posting

menghilangkan tanggal posting blogger, mau tau caranya? pertama masuk halaman Edit HTML kemudian cari h2.date-header { jika sudah ketemu tambahkan visibility: hidden; diantara kode tersebut. lihat contoh kodenya dibawah:

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}

udah deh...metmencoba ya...

Read More

Gambar Berubah Saat Terkena Kursor

Langsung aja teman bisa lihat hasilnya seperti ini
Nih contohnya saya punya 2 gambar seperti ini:

Sebelum kena kursor

Sesudah kena kursor

Hasilnya akan jadi seperti ini::

Berikut ini adlah kode HTMLnya:

<img onmouseout="this.src='http://alamat/gambar1.gif';" onmouseover="this.src='http://alamat/gambar/kena/kursor.gif';" src="http://alamat/gambar1.gif" />

yang berwarna biru itu tinggal di ganti aja dengan alamat gambar kamu
untuk membuat gambar nya tinggal klik disini
oke semoga berhasil ya..

Read More

Cara membuat menu Dtree

Apa itu menu Dtree (D-Tree) ? itu lho menu yang memiliki struktur seperti pohon, yang punya cabang-cabang itu lho, Seperti kalo kita membuka Windows Explorer. Menu yang seperti gambar dibawah ini atau seperti contoh ini.



Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?

Beginilah cara membuatnya :

1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>

<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" />
<script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>

3. Trus Klik Tombol "Save

4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.

<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>

berikut ini keteranganya:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,�Node 1�,�link.html�);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).

- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:

d.add(10,0,�Profile�,�link.html�,��,��,�http://kendhin.890m.com/dtree/trash.gif�);

Ganti text "http://kendhin.890m.com/dtree/trash.gif" dengan alamat gambar kamu.
Selesai deh....

Read More

Memasang youtube di blog

Untuk membuat vidio youtube di blog sebenernya sangat gampang sekali dan caranya teman tinggal ikuti aja ya caranya di bawah ini :

pertama-tama masuk dulu di www.youtube.com

Kode Video di Youtube:

Ketika kamu menemukan salah satu video di youtube kemudian disebelah kanan video kamu akan menemukan kode yang bisa kamu Copy-paste. perhatikan gambar dibawah agar lebih mudah.

Kode Video di Google Video:

Hampir Sama dengan Youtube, ketika menemukan salah satu Video di Google Video kamu tinggal klik saja link Embed kemudian akan tampil kode yang siap kamu copy paste ke blog-mu.

Bagaimana memasang kodenya di blog?

Jika ingin menampilkan video di halaman postingan kamu tinggal Copy-Paste saja codenya, sedangkan jika ingin menampikan di element halaman lain, tinggal klik Add a Page Element lalu pilih HTML/JavaScript kemudian dengan cara yang sama tinggal Copy-Paste dan jangan lupa simpan.

Read More

Jadwal Seminar (FBSS) & Workshop IW2

Periode January 2010

TANGGAL	ACARA	WAKTU	TEMPAT	ALAMAT	KOTA	KAPASITAS
Rescedhule	IW2	09.00	TELKOM TRAINING CENTER	Jl. Gayungan PTT no 17 - 19	Surabaya	200 Kursi
		09.00	TELKOM TRAINING CENTER	on progress	Malang	200 Kursi
		09.00	TELKOM TRAINING CENTER	Jl. Andi Pangeran Pettarani no 4	Makasar	200 Kursi
23 Jan 2010	FBSS	15.30	Menara Cardig	Jl. Raya Halim Perdana Kusuma, Jaktim	Jakarta	320 Kursi
		15.30	Udinus	Jl. Sultan Alaudin 88C	semarang	500 Kursi
		15.30	Hotel Jamrud	Jl. Dr. Wahidin Sudirohusodo No. 46-A	Cirebon	200 Kursi
24 Jan 2010	IW2	09.00	TELKOM TRAINING CENTER	Jl. Letjen S. Parman no 8 Jakarta Barat	Jakarta	200 Kursi
		09.00	TELKOM TRAINING CENTER	Jl. Tegal sari Barat Raya no 9 - 11	Semarang	200 Kursi
		09.00	TELKOM TRAINING CENTER	Jl. Gegerkalong Hilir no 47	Bandung & Cirebon	200 Kursi
30 Jan 2010	FBSS	15.30	Hotel Nirmala	Jl. Uluatu II No. 10 Jimbaran Kuta	Denpasar	300 Kursi
		13.00	Griya Dome Convention Centre	Jl. T. Amir hamzah No. 68	Medan	200 Kursi
		15.30	Gudeg Bu Citro 1925	Jl. Janti no 330	Yogya	200 Kursi
31 Jan 2010	IW2	09.00	TELKOM TRAINING CENTER	on progress	Denpasar	200 Kursi
		09.00	TELKOM TRAINING CENTER	Jl. Letjen Jamin Ginting Km 11,1 No.9 Simpang Selayang	Medan	200 Kursi
		09.00	TELKOM TRAINING CENTER	on progress	Yogya	200 Kursi
9 Jan 2010	FBBS	15.30	Hotel Gucci	Jl. Pasirkaliki No. 53. Bojonegara	Bandung	200 Kursi
16 Jan 2010	FBSS	15.30	Gedung Bumi Mandiri	Jl. Basuki Rachmat 129-137	Surabaya	200 Kursi
		15.30	Hotel Trio Indah II	Jl. Brigjen Slamet Riyadi 1-3	Malang	275 Kursi
		15.30	Hotel Celebes	Jl. Latimojong 142B	Makasar	200 Kursi

Read More

Membuat menu horizontal

Oke kali ini kita coba membuat menu horizontal.
apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). oke faham ya...

pertama-tama saya jelaskan yang di bawah ini adalah warna-warna yang akan kita gunaka

blackleft.gif blackright.gif

greenleft.gif greenright.gif

redleft.gif redright.gif

unguleft.gif unguright.gif

yellowleft.gif yellowright.gif

blueleft.gif blueright.gif

whiteleft.gif whiteright.gif


1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://bikinwebprofesional.blogspot.com"><span>Home</span></a></li>
<li><a href="http://.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://bikinwebprofesional.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://bikinwebprofesional.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://bikinwebprofesional.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :

<div id="content-wrapper">

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

terus di simpan

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya....

Read More

Membuat Read More 2

Lho? maksudnya apa? gini lho kalo read more yang lama, yang sudah pernah dibahas kita bahas dulu (udah baca belum?, kalo belum baca dulu gih disini ), kan kalo kita ng-klik tulisan read more atau Baca Selengkapnya itu kita akan membuka halaman baru sehingga akan meloading lagi halaman web kita, ya tho?. Nha Read more yang ini, yang akan kita bahas ini nggak gitu cara kerjanya, cara kerjanya yaitu berangkat jam 08.00 pagi pulang jam 16.00 WIB (emangnya PNS) :D Gini lho cara kerjanya :
Di trik Read more yang baru ini, kita akan membuat link Read more yang jika kita meng-klik link tersebut, maka keseluruhan artikel akan terpampang dibawahnya, jadi tidak perlu meload ke halaman yang lain, contohnya disini. Piye? uenak tho? bagi yang sudah kebelet ingin menyimak trik ini silahkan langsung ikuti trik berikut ini (langsung loncat dua baris ke bawah). Dan bagi yang kebelet mo pipis silahkan ke kamar mandi dulu :D


Berikut ini langkah-langkahnya:

1. Login ke Blogger
2. Pilih Layout --> Edit HTML
3. Kamu mau memback-up template kamu dulu nggak?, kalo iya kilik tulisan Download Template lalu simpan.
4. JBeri tanda centang pada kotak yang bertuliskan Expand Template Widget
5. Kopi kode berikut ini dan taruh tepat diatas kode

<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>

6. Sudah? sudah belum? ditanya kok diam aja gimana sih ? :x
7. Kalo sudah cari kode dibawah ini

<div class='post-header-line-1'/>

(letaknya kira-kira di bagian tengah kebawah. yak terus..terus..Nha disitu ketemu kan kodenya?)

8. Nha dibawahnya kan ada kode gini <div class='post-body entry-content'> Nha ganti kode tersebut menjadi seperti ini:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

9.Terus dibawahnya kan kan ada kode gini <p><data:post.body/></p>
10. Tembahkan kode ini dibawahnya.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

11. jadi seluruh kodenya akan menjadi seperti ini :

<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

12. Tulisan 'Selengkapnya' dan 'Ringkasan' bisa diganti dengan apa aja kata yang kamu suka.
13. Lalu simpan template.
14. Pilih menu Setting -->> Formatting
15. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.

<span id="fullpost">


</span>

selesai....
dan semoga berhasil....

Ohya, kalo memposting pilih yang "Edit Html", letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas kode <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span id="fullpost"> dan </span>

Read More