Cara Membuat Kotak Blogroll dan Marquee

Kali ini aku mau ngejelasin trik kali dengan gaya puisi, biar nggak bosen, tapi jangan diketawain ya, soalnya lom pernah buat puisi nih.

Tatkala link-link jumlahnya sudah berjuta-juta
Maka semakin sesaklah dada blog ini
Jikalau hal ini tidak diatasi dengan bijaksana
Maka blognya dikau akan penuh sesak dengan link-link itu
Udah bagus nggak puisinya? ancur ya? :r Ok lanjuuut.

Oleh karena itulah
hamba memberanikan diri untuk menawarkan obat sesak tersebut
Melalui secuil ilmu berikut
Daku berharap dapat membantu kisanak supaya blognya tidak sesak

Kira-kira pada mudeng nggak ya penjelasan tadi, ah biarin deh :z
:r udah ah, udah mual2 nih pake gaya puici, sekarang ganti gaya biasa aja.

Untuk trik kali ini, ada dua macam kotak blogroll yang akan kita buat, terserah kamu mo pilih yang mana. Kotak blogroll-nya yaitu:

1. Kotak Blogroll Model Textarea

Contohnya seperti kotak blog roll seperti punyaku itu, itu lho yg atasnya ada tulisanya "Friend links"
Nha begini cara membuatnya :
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link...

</div>

keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar kayak punyaku, maka hilangkan kode <br />

2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah itu lho). Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>

Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah mudeng to artinya, gak usah dijelasin ya).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode <br />.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

OK SELAMAT MENCOBA......

Posted By Achmad Rizali20.05

7

Continue Reading

Membuat Menu Vertikal

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');

Pilihan Warna menu vertikal :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.

Dah gitu aja. Gampang kan???? :D

Posted By Achmad Rizali20.03

3

Continue Reading

Cara Membuat Menu Tab View

Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn? yg ada "Tips & Trik", "Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :

Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

Posted By Achmad Rizali20.02

4

Continue Reading

cara Membuat Menu Horizontal

Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:



Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:

pertama-tama kamu harus punya gambar kayak gini nih:

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.

blackleft.gif	blackright.gif
greenleft.gif	greenright.gif
redleft.gif	redright.gif
unguleft.gif	unguright.gif
yellowleft.gif	yellowright.gif
blueleft.gif	blueright.gif

Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:
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://superinhost.com/gambar/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://superinhost.com/gambar/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}

#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://superinhost.com/gambar/redleft.gif") no-repeat left top;

background: url("http://superinhost.com/gambar/redright.gif") no-repeat right top;

Mudeng nggak loe :D
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.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://trik-tips.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 Save

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.

hasilnya pasti akan berbeda-beda di setiap template.
kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang pinter :r coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ, Good luck.....

Posted By Achmad Rizali20.00

4

Continue Reading

cara membuat read more di blog

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 </head>

<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....

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>


Trus bagaimana bagi yang sudah pakai 'read more' yang lama dan pingin ganti dengan 'read more' yang baru ini?
gini caranya:

'Read more' yang lama kan kodenya seperti ini :

<div class='post-header-line-1'/>
<div class='post-body entry-conten'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>

hapus text yang berwarna biru, lalu ikuti langkah-langkah diatas.
oh ya jangan lupa ikuti langkah berikut ini
1. Pilih menu Setting -->> Formatting
2. 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>

bedanya apa sama read more yang dulu? perhatikan text yang berwarna merah, kalo dulu kan tulisannya "class" sekarang ganti menjadi "id".

Posted By Achmad Rizali19.54

4

Continue Reading