kompresi file online

Senin, 15 November 2010

bagaimana meningkatkan loading blog tetapi dengan mengompresi file online.
Berikut adalah alat-alat online untuk kompres file seperti kompresor css, javascript kompresor, kompresor kompresor html dan gambar.
CSS compressor

1. CSS Drive

2. CSS Compressor

3. Arantius

4. Clean CSS

5. Lottery Post

6. Pingates

7. Page Column

8. Askapache

9. Php Insider

10. Ice Board

11. Flump Cakes

12. Compressor

13. Peterbe

14. Refresh SF

15. Mab Blog

16. Seven Forty

17. Creatyvist

18. Homepage Performance

19. Generate It

20. CSS Portal


JavaScript Compressor

1. JavaScript Compressor

2. Creatyvist

3. JS Compress

4. Compressor Rater

5. About

6. Minify JavaScript

7. Dynamic Tool

8. Askapache

9. Minify JS

10.Compress JavaScript

11. Lottery Post


12. Huffman Javascript

13. Closure Compiler

14. Design 215

15. Milonic

16. Joliclic Code

17. YUI 2Clics

18. Felgall

19. LZ77

20. Pink Orange


HTML Compressor

1. Text Fixer

2. Boryi

Image Optimizer

1. Dynamic Drive

2. Image Optimizer

3. Stanley Shilov Image Compression

4. Jpeg Compress

5. Srink Pictures

6. Resize 2Mail

7. Jpeg-Optimizer

8. Smush It

9. Puny PNG

10. Gif Bot

11. Iresize

12. My Imager

13. Pic Resize

14. Web Resizer

15. Chami Jpeg Compressor

16. Image My Addr

17. Jpeg / Gif Compress

18. Jpeg Reducer

19. Compression Link Info

Read Post | komentar

Contoh Conditional Tag pada Blogspot

Rabu, 10 November 2010

Conditional Tag pada Blogspot digunakan untuk pengaturan element / widget atau kode tertentu kapan akan digunakan berdasarkan kondisi yang ditentukan, Misalhnya element/widget A akan muncul pada halaman home/depan tapi tidak muncul pada halaman postingan atau juga sebaliknya. Conditional Tag pada Blogspot biasa digunakan untuk mengatur widget atau element sehingga nampak pada kondisi tertentu.
Ada beberapa contoh Conditional Tag yang sering digunakan oleh para Blogger:

1.<b:if cond="data:blog.url == data:blog.homepageUrl"> ... </b:if>
Adalah Conditional Tag yang hanya ditampilkan pada halaman depan home/depan,
Contoh : Headline Pada Blog ini.

2.<b:if cond="data:blog.pageType != &quot;item&quot;"> ... </b:if>
Untuk menampilkan kode hanya pada halaman Depan, kategori / label,
Contoh : Readmore, yang tak muncul pada halam postingan.

3. <b:if cond='data:blog.pageType == &quot;item&quot;'> ... </b:if>
Kode yang digunakan untuk menjalankan kode hanya ada pada halaman postingan;
Contoh : Kolom komentar.

4.<b:if cond='data:blog.url != data:blog.homepageUrl'> ... </b:if>
Untuk menjalankan kode selain pada halaman depan / home.

5.<b:if cond='data:blog.url == &quot;url postingnya disini&quot;'> ... </b:if>
Untuk menjalankan kode hanya pada alamat url tertentu, misal daftar isi.

7. <b:if cond='data:blog.pageType == &quot;static_page&quot;'>... </b:if>
Menjalankan kode hanya pada halaman page.

8. <b:if cond='data:blog.pageType == &quot;archive&quot;'>...</b:if>
Menampilkan kode hanya pada halam archive

Read Post | komentar

Modifikasi Tampilan Judul Posting Sebuah Label

Kamis, 04 November 2010

Setelah memposting "judul post pada sebuah tabel", namun tampilan judul posting tersebut mengikuti default background dalam kode CSS "main" untuk memodifikasinya seperti ini :



berikut caranya :
Login ke account blogger kamu.
Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Cari kode di bawah ini.

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :
Kode HTML di atas akan terlihat dalam blog kamu setelah kamu melakukan trik klik label yang tampil judul posting saja.

Ganti kode yang berwarna merah dengan kode berikut.

<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
<data:post.title/></div></a>

Catatan :
Silakan rubah kode yang berwarna hijau dengan kode warna yang sesuai dengan blog kamu.

Cara menambahkan image panah biru di depan title post adalah dengan trik menyisipkan kode berwarna biru di bawah ini, ke dalam kode yang baru ditambahkan sebelumnya. Kode selengkapnya :

<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
<img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk0uVbve6q4tbY4pqHYoyxMZ1aMGep_girgPo5a3zEcmKcqe9ZWZjr-xW2kIbvD7onfrglD1UV0nr_ayM3Zw_5hbilY1xOrDYiWY5eg5bjHfdxQPLBdIM4mrwRaU0imlkdp-S-2pZeEuE/s144/Arrobblue.png'/>
<data:post.title/></div></a>

Simpan template dan lihat hasilnya...
selamat berkreasi...
sumber : http://optimasi-blog.blogspot.com

Read Post | komentar

Judul Post Pada Sebuah Tabel

Menampilkan judul posting saja ketika pengunjung meng-klik sebuah label :

Caranya :
Login dulu ke account blogger kamu.
Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Cari kode di bawah ini :

<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Ganti semua kode yang berwarna merah dengan kode berikut :

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Simpan template dan lihat hasilnya... :)
selamat berkreasi...

Read Post | komentar

Buat Garis Pinggir Pada Postingan

Untul menambah garis pinggir kiri kanan atas dan bawah pada sebuah postingan seperti ini :

Caranya :
Masuk ke Rancangan > Edit HTML > centang Expand Template Widget
cari code .post-body { biar cepet kamu bisa pakai ctrl+f.
Copy kode berikut :

Padding:15px; /* Jarak text post dengan garis pinggir */

Border-top: 2px solid #000000; /* warna garis pinggir atas */

Border-bottom: 2px solid #000000; /* warna garis pinggir bawah */

Border-left: 2px solid #000000; /* warna garis pinggir kiri */

Border-right: 2px solid #000000; /* warna garis pinggir kanan */

Margin-bottom: 30px; /* jarak antara post yang satu dengan yang lainnya */

dan pastekan dibawah Kode .post-body { yang kita cari tadi...
Simpan template... dan lihat hasilnya...
edit warna dan tebal garis sesuai selera...
Selamat berkreasi...

Read Post | komentar

Menghilangkan Garis Pinggir Pada Gambar

Jika kamu merasa terganggu dengan garis pinggir pada sebuah gambar di templatmu dan ingin menghilangkannya menjadi seperti ini :


berikut caranya :
1. Login ke Blogger , Klik Tata Letak -> Edit HTML
2. Cari kode .post img atau .post-body img. Biasanya dibawahnya akan dikuti dengan kode seperti contoh dibawah ini.

.post img {
padding: 1px;
margin: 0px 15px 15px 0px;
border: 1px solid #f0f0f0
}

Untuk template yang sekarang saya pakai saya melakukan perubahan pada :

#main-wrapper img{border: 1px solid #D3EAF3;padding: 5px;}

menjadi,

#main-wrapper img{border: 0px solid #D3EAF3;padding: 5px;}

3. Jika sudah, klik Save Template
4. Selesai. Silahkan lihat hasilnya.

sumber : http://www.kangismet.com/2009/12/menghilangkan-garis-pinggir-atau-border.html

Read Post | komentar

Membuat Background Warna Dalam Post

Untuk membuat Background warna di dalam sebuah postingan yang perlu kamu lakukan hanya menambah kan kode seperti ini :

<div style="background:#FCDFFF;">tulis postingan kamu disini
</div>

hasilnya seperti ini :

tulis postingan kamu disini

untuk ubah warnanya kamu edit kode warna ( #FCDFF = warna pink )sesuai keinginan kamu...
kode warna yang lain dapat kamu lihat disini...

Read Post | komentar

Kode Warna Html

• Untuk menerapkan warna di dalam sebuah postingan caranya klik [ini]

Read Post | komentar

Membuat Page Navigation Blogger

Membuat page navigasi seperti ini :



Caranya :
Masuk ke Rancangan > Edit HTML > centang Expand Template Widget
copy kode ini :

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #FF8C00;
margin:0 5px;
padding:5px;
}
.showpageNum a:hover {
border: 1px solid #FF8C00;
background-color:#FF8C00;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #FF8C00;
background: #FF8C00;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #FF8C00;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

lalu pastekan diatas kode :

]]></b:skin>

Kemudian cari kode di bawah ini

</body>

dan ganti kode tadi dengan kode dibawah ini

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://woxwox.googlecode.com/files/blogger-page-navi.wox.js'
type='text/javascript'/>
</b:if>
<!--Page Navigation Ends-->
</body>

klik simpan template...
Lihat hasilnya
Selamat berkreasi...

Read Post | komentar

Recent Post Blog dengan gambar thumbnails

Selasa, 02 November 2010

Untuk membuat Recent posts blogger dengan thumbnails
seperti gambar



Caranya :
Masuk ke Rancangan > Edit HTML > centang Expand Template Widget
copy kode ini :

#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

lalu pastekan diatas kode :

]]></b:skin>

klik simpan template...


Lalu tambahkan gadget :


kodenya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.woxwox.info/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://woxwox.googlecode.com/files/relatedthumbs21.js' type='text/javascript'></script>
</div>

Ganti url woxwox.info warna merah dengan url alamat blog kamu...



simpan dan lihatlah hasilnya... :)

Read Post | komentar

Ubah Ukuran Kotak Komentar Blog

Senin, 01 November 2010

Untuk merubah Ukuran Kotak Komentar pada Blog seperti ini :



berikut caranya...

Masuk ke Rancangan > Edit HTML > centang Expand Template Widget
cari kode :

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>
<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
</div>
</b:includable>

Lalu hapus dan ganti dengan kode berikut :

<b:includable id='comment-form' var='post'>
<div class='comment-form-block'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor'
scrolling='auto' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</b:includable>

Selanjutnya copy kode CSS berikut :

div.comment-form-block{
width: 420px; /* Untuk merubah ukuran sesuai keinginan */
margin: 0 auto;
}
div.comment-form-block p{
color: #000;
font-family: 'Georgia';
font-size: 14px;
text-align: left;
}

dan paste-kan diatas kode :

]] > </b:skin>

Ganti angka yang berwarna orange dengan angka atau ukuran yang kamu inginkan...
Simpan tempalte dan lihat hasilnya kotak komentar kamu sudah berubah ukurannya.

Read Post | komentar

Cara link diklik buka tab baru

Rabu, 20 Oktober 2010

Berikut adalah tutorial atau cara supaya link jika di klik akan membuka tab baru otomatis contoh :

• COBA KLIK

kodenya seperti ini :

<a href='http://feeds.feedburner.com/woxwox' target='_blank'>COBA KLIK</a>

kamu hanya menyisipkan kode target='_blank' seperti kode diatas mudah kan... :)

selamat berkreasi... :)

Read Post | komentar

Update artikel muncul di twitter

Untuk menampilkan artikel yang dipostingkan pada blog kita tampil pada Twitter hanya bermodalkan RSS feed kita dapat membuat Twitter kita ter-update dengan posting yang ada pada blog kita. Nah sekarang,berikut caranya:

1. Buat akun dulu di TwitterFeed dengan klik tombol Register Now.

2. Masukkan email dan password anda pada kotak yang disediakan.

3. Isikan feed blog kamu, seperti ini:

http://woxwox.blogspot.com/feeds/posts/default

4. Kemudian pilih Twitter.

5. Klik Authenticate Twitter kamu.

6. Login, Twitter, dan tekan Allow.

7. Terakhir klik tombol Create Service.



Selesai sekarang coba kamu posting dan lihat post kamu ada pada twitter...
Selamat berkreasi... :)

Read Post | komentar

buat artikel terkait dengan gambar

Seperti pihak ketiga LinkWithin kita juga bisa membuat artikel terkait dengan gambar tanpa embel-embel LinkWithin di pojok...



berikut caranya...
Masuk ke Rancangan > Edit HTML > centang Expand Template Widget
Cari kode </head> sudah ketemu ganti kode tersebut dengan Kode berikut:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://woxwox.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

Kemudian copy kode ini:

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://woxwox.blogspot.com/2010/10/buat-artikel-terkait-dengan-gambar.html' style='display:none;'>Artikel Terkait dengan gambar</a><a href='http://woxwox.blogspot.com' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults="5";
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Dan pastekan di atas kode:

<div class='post-footer-line post-footer-line-1'>

Simpan template... dan lihat hasilnya...
selamat berkreasi... :)

Read Post | komentar

membuat image hover

Selasa, 19 Oktober 2010

membuat image hover seperti ini (Arahkan mouse ke gambar) :



Caranya :
Masuk ke Rancangan > Edit HTML > centang Expand Template Widget
copy kode ini :

a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}

pastekan diatas kode :

]]></b:skin>

klik simpan template...

untuk menerapkkan kode CSS diatas. Untuk menerapkkannya ganti kode HTML image Anda dengan kode HTML dibawah ini :

<a class="pic" href="LINK YANG AKAN DITUJU">
<img class="image1" src="URL IMAGE ASLI DISINI"/>
<img class="image2" src="URL IMAGE HOVER DISINI"/></a>

selamat berkreasi... :)

Read Post | komentar

menyimpan file js di hosting code google

Untuk menyimpan file .js di code.google sebagai laternatif yang patut dicoba. Jika ingin menyimpanya Anda bisa mengikuti langkah seperti ini :

1. Login ke Akun Gmail kamu.

2. Masuk kehalaman code.google.com



4. Project Name, isi saja dengan nama halaman kamu.


5. Project Summary, isi dengan judul proyek kamu.


6. Project Description, berikan deskripsi/keterangan sesuka kamu.


7. Version Control System, pilih "Mercurial".


8. Source Code Licenses, pilih "GNU General Public License v3".


9. Beri centang Use a Separate Content License dan pilih salah satu (terserah saja), dan isi labels (jika diperlukan).


10. Kemudian klik Create Project.


11. Muncul halaman baru klik menu tab Download dan pilih New download



12. Pilih Browser/Choose file untuk mengupload file .js atau java script-nya.


13. Jika sudah, klik Submit File.



14. Untuk mendapatkan kode url dari hasil java script yang sudah kamu upload tadi, silahkan klik hasil dari upload tadi seperti gambar ini :



6. Lalu Selanjutnya silahkan klik kanan pada file java script-nya, lalu klik Copy Link Location. contoh pada Gambar dibawah ini :



7. Atau bisa juga dengan klik kanan, lalu pilih properties dan copy semua code Link yang ada, contoh :

http://woxwox.googlecode.com/files/wox.js

selamat berkreasi... :)

Read Post | komentar

text area dalam post

text area bisa dipakai untuk menyimpan text atau kode HTML yang tidak bisa di tulis langsung ke dalam postingan pada blog. Jadi fungsi dari text area ini kurang lebih untuk memudahkan pengunjung mengcopy seluruh isi text.

kodenya seperti ini :

<p align="center"><textarea name="code" rows="2" cols="15"> Tulis text atau kode HTML kamu disini </textarea></p>

maka hasilnya :

Tulis text atau kode HTML kamu disini Tulis text atau kode HTML kamu disini

Selamat berkreasi... :)

Read Post | komentar

judul post saja dalam pencarian

Pada template standard, jika kita melakukan pencarian, maka yang akan kita temukan adalah judul postingan berserta urainnya yang panjang lebar moler-moler, sehingga hasilnya kurang efisien dan memakan tempat.Berikut cara menampilkan judul post saja dalam pencarian seperti gambar berikut search "mp3" maka hasilnya hanya judulnya saja :



caranya :
Masuk ke Rancangan > Edit HTML > centang Expand Template Widget
Cari kode ini :

<b:include data='post' name='post'/>

lalu hapus dan ganti dengan kode ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

simpan template dan lihat hasilnya...
coba kamu search di kolom search...
selamat berkreasi... :)

Read Post | komentar

parse kode html converter

Tools parse kode html converter...

Read Post | komentar

simple tab view tanpa edit html

Membuat tab view seperti ini:



ikuti langkah-langkah berikut:
Buka Layout (Tata Letak) » Page Elements (Elemen Laman).
Klik Add a Gadget (Tambah gadget).



Pilih gadget HTML/JavaScript.


Copy-paste script berikut ke dalam gadget tadi.

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* 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: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

klik simpan...

Read Post | komentar