02.2010 ~ Trik Blogger

This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Sabtu

Pasang link

By dedi ponky15:09No comments

Powered by

Share: Facebook Twitter Google+

Membuat Buku Tamu "Tersembunyi"

By dedi ponky14:53No comments

Kalau kamu ga tau lagi mau taruh buku tamu kamu di mana, buat aja buku tamu kamu "tersembunyi", dan kalau diklik akan langsung terlihat.
Contohnya kamu bisa lihat di bagian sebelah kanan layar kamu, dan klik tab yang berwarna hijau tersebut. Dan buku tamu itu akan bergerak keluar, sehingga yang tadinya tidak kelihatan akan jadi terlihat.

Caranya:

Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements",
Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
Copy-paste kode di bawah ini

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">



<br/>
Mau seperti ini?<br/>
Klik di
<a href="http://ponkytrikblogger.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">
sini (Info Blog)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

4. Pada kode di atas, cari kode dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya,
5. Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu.
6. Selamat mencoba!

Catatan: di kode di atas aku pasang backlink ke post ini, kalau kamu mau berbaik hati, tolong backlink-nya jangan dihapus, ya! :D

Share: Facebook Twitter Google+

Membuat menu horizontal

By dedi ponky00:26No comments

Menu horizontal/vertikal memang dibutuhkan karena bisa membuat blog kamu menjadi tampak lebih proffesional dan salah satu alternatif dimana kamu bisa menghemat tempat dengan menampilkan label atau link URL kamu sesuai dengan tema / label blog kamu.

Disini kamu bisa membuat menu dengan langkah sederhana dan sudah tentu hasilnya juga sederhana, tapi dengan sedikit kreativitas kamu bisa membuat menu ini jadi tampil lebih bagus.
Nah..! kalau kamu pingin ikuti langkah2 berikut :

Langkah Pertama

* Login ke akun Blogger kamu.
* Dari halaman dashboard, pilih Edit HTML.
* Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
* Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut..

/* Menu Horizontal
----------------------------------------------- */
.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #000000;}
.menuhorisontal ul{margin:0; padding:0; padding-left:0px; font:13px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#ffffff; background:#000000;}
.menuhorisontal li a:hover{color:#FFFFFF; background:#2E2EFE}

Pada bagian yang diberi warna merah, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada warna huruf maupun background sesuai dengan blog kamu.

Langkah Kedua
* Pilih tab Elemen Halaman ( Page Element ).
* Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
* Copykan script berikut dan letakkan pada kotak Content yang tersedia:

<div style="overflow:no; width:10%px; height:100%px; padding:0px; border:1px solid #FFFFFF; background:#FFFFFF;">

<div class="menuhorisontal">
<li>

<a href="http://bikinwebprofesional.blogspot.com/" target="_blank">HOME</a>

<a href="#" target="_blank">menu 1</a>

<a href="#" target="_blank">menu 2</a>

<a href="#" target="_blank">menu 3</a>

<a href="#" target="_blank">menu 4</a>

<a href="#" target="_blank">menu 5</a>

<a href="http://kibagus-homedesign.blogspot.com/" target="_blank">Kibagus-com</a>

</li>
</div>
</div>

Pada tulisan yang tercetak merah dapat kamu ubah disesuaikan dengan Alamat URL kamu tuju. Begitupun dengan judul Menu-1, dst dapat kamu buat sendiri sesuai dengan isi blog kamu.

Selain itu kamu juga bisa menambahkan menu-menu lain asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara mengatur ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

simpan dan lihat hasilnya... contohnya adalah menu yang ada di blog punyaku ini...!!
Selamat Mencoba...!

Share: Facebook Twitter Google+

Jumat

Membuat Menu Horizontal dengan drop menu horizontal

By dedi ponky23:53No comments

Membuat menu horizontal memang sangat menarik karena menu merupakan bagian dari kelengkapan website yang merupakan ringkasan atau bisa dikatakan mewakili isi dari website tersebut.

sample - 1

Sample - 2

Kali ini menu yang akan kita buat prinsipnya sama dengan menu horizontal yang lain tapi dengan variasi background dan drop menu akan menambah daya tarik yang tersendiri.

Kita langsung ke TKP saja biar jelas
Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
Copykan script berikut dan letakkan di atas kode ]]> tersebut.

.pro_linedrop {
height:35px;
width:1000px;
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_0.gif);
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
z-index:500;
}

.pro_linedrop .select {
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
}

.pro_linedrop li {
float:left;
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_1.gif);
}

.pro_linedrop li.lrt {
float:right;
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/blue_1.gif);
}

.pro_linedrop .select a {
display:block;
height:35px;
float:left;
background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_0.gif);
padding:0 0 0 15px;
text-decoration:none;
line-height:33px;
white-space:nowrap;
color:#fc0;
}

.pro_linedrop .select li.lrt a {color:#0ff;}

.pro_linedrop .select a b {
display:block;
padding:0 30px 0 15px;
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_0.gif) right top;
}

.pro_linedrop .select li.line a b {
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_0a.gif) right top;
}

.pro_linedrop .select a:hover,
.pro_linedrop .select li:hover a {
background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_1.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#fff;
}

.pro_linedrop .select li.lrt a:hover,
.pro_linedrop .select li.lrt:hover a {
background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/blue_1.gif);
}

.pro_linedrop .select a:hover b,
.pro_linedrop .select li:hover a b {
display:block;
padding:0 30px 0 15px;
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_1.gif) right top;
cursor:pointer;
}

.pro_linedrop .select li.line a:hover b,
.pro_linedrop .select li.line:hover a b {
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_1a.gif) right top;
}

.pro_linedrop .select li.lrt a:hover b,
.pro_linedrop .select li.lrt:hover a b {
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/blue_1.gif) right top;
}

.pro_linedrop .select li.lrt a:hover b.arrow,
.pro_linedrop .select li.lrt:hover a b.arrow {
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/blue_1a.gif) right top;
}

.pro_linedrop .sub {
display:none;
}
.pro_linedrop ul ul {display:none;}

/* IE6 only */
.pro_linedrop table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.pro_linedrop .sub {
margin:0;
padding:0;
list-style:none;
}

.pro_linedrop .sub li {background:transparent;}

.pro_linedrop .select :hover .sub {
height:25px;
display:block;
position:absolute;
float:left;
width:900px;
top:35px;
left:0;
text-align:center;
background:#fff url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/fade.gif);
border:1px solid #aaa;
}

.pro_linedrop .select :hover .rt li {float:right;}

.pro_linedrop .select :hover .sub li a
{display:block; height:25px; line-height:22px; float:left; background:transparent url(line/transparent.gif); padding:0 16px; margin:0; white-space:nowrap; color:#333;font-size:10px;}

.pro_linedrop .select :hover .sub li.subline a {color:#c00;}

.pro_linedrop .select :hover .sub li a:hover,
.pro_linedrop .select :hover .sub li:hover
{color:#000; line-height:20px; position:relative; background:#fff url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/fade.gif) left bottom;}

Keterangan :

Warna Merah, Tinggi dan Lebar menu, sesuaikan dengan blog yang ada.
Warna kuning, URL untuk image background menu. ( bila kamu ingin menyesuaikan dengan warna blog kamu silakan diganti dengan punya kamu sendiri )

Langkah kedua

Klik Page Element
Klik Add Gadget
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

<div class="pro_linedrop">
<ul class="select">
<li><a href="#"><b>Home</b></a></li>

<li class="line"><a href="#"><b>Menu</b></a>

<ul class="sub">
<li><a href="#" target="_blank">Blogger Trick</a></li>
<li><a href="#" target="_blank">Template</a></li>
<li><a href="#" target="_blank">Konsep Design</a></li>
<li><a href="#" target="_blank">Construction</a></li>
<li><a href="#" target="_blank">Green House</a></li>
</ul>

</li>
<li class="line"><a href="#" target="_blank"><b>Services</b></a>

<ul class="sub">
<li><a href="#" target="_blank">Perencanaan</a></li>
<li><a href="#" target="_blank">Konsultasi</a></li>
<li><a href="#" target="_blank">Gallery</a></li>
<li><a href="#" target="_blank">pasang Iklan</a></li>
</ul>

</li>
<li class="lrt"><a href="#" target="_blank"><b>Daftar Isi</b></a></li>

<li class="line lrt"><a href="#" target="_blank"><b class="arrow">Shop</b></a>

<ul class="sub rt">

<li><a href="#" target="_blank">Online</a></li>
<li><a href="#" target="_blank">Shopping center</a></li>
<li><a href="#" target="_blank">Mail Order</a></li>
</ul>

</li>
<li class="line lrt"><a href="#" target="_blank"><b class="arrow">Contacts</b></a>

<ul class="sub rt">

<li><a href="#" target="_blank">Facebook</a></li>
<li><a href="#" target="_blank">Twitter</a></li>
<li><a href="#" target="_blank">Guest Book</a></li>
<li><a href="#" target="_blank">Chatting</a></li>
<li><a href="#" target="_blank">Profil</a></li>
</ul>


</li>
</ul>
</div>

Simpan dan lihat hasilnya.

Keterangan :

* Warna Merah, Nama nama menu sesuai dengan kebutuhan
* Warna Hijau, Alamat URL yang akan kamu tuju sesuai dengan nama menu

________________________________________________________
Untuk beberapa jenis template, silakan kamu pasang kode diatas dibawah kode </head> atau dibawah <body> ________________________________________________________
Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Share: Facebook Twitter Google+

Membuat menu horizontal dengan variasi tab animasi

By dedi ponky17:36No comments

Membuat menu horizontal dengan animasi tentu akan sangat menarik, kali ini kita coba membuat menu horizontal dengan animasi tab.

jenis menu ini hanya untuk single line, tidak ada drop menu.

Kita langsung ke TKP saja biar jelas
Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
Copykan script berikut dan letakkan di atas kode ]]> tersebut.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}

.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/tab-blue-right.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */

.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

Simpan dan lihat hasilnya.

Keterangan :

Warna Merah, Backgroun image menu
Warna Hijau, Lebar menu dan besar jenis huruf

Langkah kedua

Klik Page Element
Klik Add Gadget
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

<div class="animatedtabs">
<ul>
<li><a href="#" title="Home"><span>Home</span></a></li>

<li class="selected"><a href="#" title="Menu"><span>Menu</span></a></li>

<li><a href="#" title="Profil"><span>Profil</span></a></li>

<li><a href="#" title="Contact"><span>Contact</span></a></li>

<li><a href="#" title="Tools"><span>Tools</span></a></li>

<li><a href="#" title="HTML"><span>HMTL</span></a></li>

</ul>
</div>

Simpan dan lihat hasilnya.

Keterangan :

Warna Merah, Alamat URL yang akan kamu tuju sesuai dengan nama menu
Warna Hijau, Nama nama menu sesuai dengan kebutuhan

________________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Sumber : Web design and Assistance-css play

Share: Facebook Twitter Google+

Membuat Galery foto

By dedi ponky17:31No comments

Untuk menampilkan foto / image dalam blog ada beberapa cara diantaranya dengan menampilkan image secara individu ( satu image ), akan sangat menarik bila kita dapat menampilkan image secara bersama dalam satu foto album yang menyatu dalam blog.

SAMPLE BLOG ( Preview )

Kali ini kita akan membuat Gallery foto / image yang menyatu secara horizontal.

Kita langsung ke TKP saja biar jelas
Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
Copykan script berikut dan letakkan di atas kode ]]> tersebut.

#galleryh {
padding:0;
margin:0 auto 5em auto;
list-style-type:none;
overflow:hidden;
width:495px;
height:240px;
border:1px solid #888;
background:#fff url(http://lh6.ggpht.com/_wC8_9aR_6uE/S272aNA7urI/AAAAAAAACN4/e6jc1jjglA0/gallery%20cover%20h.gif);
}
#galleryh li {
float:left;
}
#galleryh li a {
display:block;
height:240px;
width:28px;
float:left;
text-decoration:none;
border-right:1px solid #fff;
cursor:default;
}
#galleryh li a img {
width:28px;
height:240px;
border:0;
}
#galleryh li a:hover {
background:#eee;
width:320px;
}
#galleryh li a:hover img {
width:320px;
}

Keterangan :

Warna Merah, Background Gallery.
Warna kuning, Tinggi dan lebar gallery ( menyesuaikan dengan foto / image yang akan kita tampilkan )

Langkah kedua

Klik Page Element
Klik Add Gadget
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

<ul id="galleryh">
<li><a href="#">
<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/SjnEMWmzE4I/AAAAAAAAAG8/W1bMtjiRhN4/s128/Dolphin.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#">
<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/Sk-BzKk-LwI/AAAAAAAAARo/TpU0OXHgKIo/s128/blue%20bird%20of%20paradise.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#">
<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/Sk-B6YpJMqI/AAAAAAAAARw/v8Gs89YufXM/s128/blue-bird-of-paradise2.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#">
<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/SjnELl2eISI/AAAAAAAAAGk/A6RBjIL-fNY/s128/cat.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#">
<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/SmbIu2bUlfI/AAAAAAAAAf8/MgO-E-n5WRY/s128/red%20panda%203.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#">
<img src="http://lh4.ggpht.com/_wC8_9aR_6uE/SpqssB0hGEI/AAAAAAAABOI/7DSe25HalOg/s128/Superb%20Fairy-wren3.jpg" alt="#6" title="#6" /></a></li>
<li><a href="#nogo">
<img src="http://lh4.ggpht.com/_wC8_9aR_6uE/Spqu77YGCZI/AAAAAAAABOo/wrHrSYK_sNU/s128/Superb%20Fairy-wren5.jpg" alt="#7" title="#7" /></a></li>
</ul>

Read more: http://kibagus-homedesign.blogspot.com/2010/02/membuat-gallery-foto-type-horizontal.html?utm_source=Arkayne.com&utm_medium=Plugin&utm_campaign=Home%20Design%20Ideas#ixzz0gdYRWU1u

Simpan dan lihat hasilnya.

Keterangan :

Warna Merah, Nama / judul foto / image.
Warna Limau, Alamat URL foto / image ( gunakan foto / image dengan ukuran yang sama = bila tidak sama, tidak masalah tapi akan membuat foto / image jadi agak kabur karena akan secara otomatis ukuran menyesuaikan dengan gallery yang ada )

________________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Sumber : Web design and Assistance-css play

Read more: http://kibagus-homedesign.blogspot.com/2010/02/membuat-gallery-foto-type-horizontal.html?utm_source=Arkayne.com&utm_medium=Plugin&utm_campaign=Home%20Design%20Ideas#ixzz0gdYflnE3

Share: Facebook Twitter Google+

Membuat Daftar Isi Otomatis

By dedi ponky17:00No comments

Salah satu bagian yang cukup penting dalam sebuah artikel adalah daftar isi, karena dengan itu pembaca bisa melihat isi dari artikel secara global tanpa harus membaca ( sudah tentu hanya judul saja ).

Pada website juga seperti itu, dengan adanya daftar isi atau minimal label posting, kita bisa membuat pengunjung / pembaca untuk tertarik berlama - lama.oke langsungsaja........

Langkah Pertama

* Login ke akun Blogger kamu.
* Dari halaman dashboard, pilih Edit HTML.
* Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]>
* Copykan script berikut dan letakkan di atas kode ]]> tersebut.
* Tekan Control F atau F3 untuk mencarinya.

#toc { border: 0px solid #8A4B08; background: transparent; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #8A4B08; color: transparent; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background: transparent;}

Keterangan :

* Warna hijau menunjukan kode warna yang bisa kamu ganti sesuai dengan warna blog kamu.

Simpan Template.

Langkah Kedua

1. Klik Page Element
2. Klik Add Gadget

Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

<div id="toclink"><a href="javascript:showToc();">LIHAT DAFTAR ISI</a><br /><br /></div>
<script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/blogtoc.js"></script>
<script src="http://bikinwebprofesional.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

<br />

<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; background: transparent url(#) no-repeat scroll 0 0 ; border: 1px solid rgb(204, 204, 204); height: 150px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: center; width: auto;">

<div id="toc"></div>

</div>

Keterangan :

* Pasang widget tersebut diatas posting, karena daftar isi ini membutuhkan tempat yang cukup lebar, kalau kamu ingin di pasang pada tempat lain dengan lebar minim tidak menjadi masalah karena pada script ini telah aku tambah script fungsi scroll ( warna kuning ) agar bisa fleksible dengan konsekuensi scroll akan muncul karena lebar template tidak cukup.

* Ganti kode >LIHAT DAFTAR ISI< style="border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; overflow: auto; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-color: rgb(221, 242, 252); height: 150px; text-align: left; width: auto;">
<div id="toclink"><a href="javascript:showToc();">LIHAT DAFTAR ISI</a><br /><br /></div>
<script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/blogtoc.js"></script>
<script src="http://kibagus-homedesign.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
"LIHAT DAFTAR ISI"

<div id="toc"></div>

* Kode kedua adalah Isi dari daftar isi yang akan muncul pada saat kamu klik pada link
Oke...selamat mencoba ya...

Share: Facebook Twitter Google+

Membuat Menu Horizontal Sederhana

By dedi ponky16:48No comments

Menu horizontal/vertikal memang dibutuhkan karena bisa membuat blog kamu menjadi tampak lebih proffesional dan salah satu alternatif dimana kamu bisa menghemat tempat dengan menampilkan label atau link URL kamu sesuai dengan tema / label blog kamu.

Disini kamu bisa membuat menu dengan langkah sederhana dan sudah tentu hasilnya juga sederhana, tapi dengan sedikit kreativitas kamu bisa membuat menu ini jadi tampil lebih bagus.
Nah..! kalau kamu pingin ikuti langkah2 berikut :

Langkah Pertama

* Login ke akun Blogger kamu.
* Dari halaman dashboard, pilih Edit HTML.
* Pada halaman Edit HTML, cari kode ]]> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
* Copykan script berikut dan letakkan di atas kode ]]> tersebut..

/* Menu Horizontal
----------------------------------------------- */
.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #000000;}
.menuhorisontal ul{margin:0; padding:0; padding-left:0px; font:13px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#ffffff; background:#000000;}
.menuhorisontal li a:hover{color:#FFFFFF; background:#2E2EFE}

<div class="menuhorisontal">
<li>

<a href="http://bikinewbprofesional.blogspot.com/" target="_blank">HOME</a>

<a href="http://www.blogger.com/post-create.g?blogID=7580376175976000177#" target="_blank">menu 1</a>

<a href="http://www.blogger.com/post-create.g?blogID=7580376175976000177#" target="_blank">menu 2</a>

<a href="http://www.blogger.com/post-create.g?blogID=7580376175976000177#" target="_blank">menu 3</a>

<a href="http://www.blogger.com/post-create.g?blogID=7580376175976000177#" target="_blank">menu 4</a>

<a href="http://www.blogger.com/post-create.g?blogID=7580376175976000177#" target="_blank">menu 5</a>

<a href="http://kibagus-homedesign.blogspot.com/" target="_blank">Kibagus-com</a>

</li>
</div>
</div>

Pada tulisan yang tercetak merah dapat kamu ubah disesuaikan dengan Alamat URL kamu tuju. Begitupun dengan judul Menu-1, dst dapat kamu buat sendiri sesuai dengan isi blog kamu.

Selain itu kamu juga bisa menambahkan menu-menu lain asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara mengatur ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

simpan dan lihat hasilnya... contohnya adalah menu yang ada di blog punyaku ini...!!
Selamat Mencoba...!

Share: Facebook Twitter Google+

Cara Membuat tampilan Link Exchange lebih menarik

By dedi ponky15:40No comments

Tukar link adalah salah satu sarana agar blog kita bisa cepat dapat dikenal dan juga sebagai sarana menjalin komunikasi serta persahabatan antara sesama blogger.

kita akan membahas gimana caranya bisa punya blog dengan link exhange yang keren, seperti di blog punya -ku ini, keren khan... Nah..! saya kira kita langsung ke TKP biar tidak bingung.

<h>Tukar Link dan Promosi Website</h>
<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; background: transparent url(http://lh4.ggpht.com/_wC8_9aR_6uE/Sq_Qzv061nI/AAAAAAAABU4/CP87mCZ0DZA/s128/SLEEPING%20KOALA.jpg) no-repeat scroll center; font-size: 80%; padding: 10px; text-align: justify;">a
<h class="title"></h>
<div class="widget-content">
<div style="border: 0px solid rgb(153, 153, 153); height: 150px; overflow: auto; text-align: left; width: 100%;">

_____ A _____
<br/>
_____ B _____
<br/>
_____ C _____
<br/>
_____ D _____
<br/>
_____ E _____
<br/>
_____ F _____
<br/>
_____ G _____
<br/>
_____ H _____
<br/>
_____ I _____
<br/>
_____ J _____
<br/>
_____ K _____
<br/>
_____ L _____
<br/>
_____ M _____
<br/>
_____ N _____
<br/>
_____ O _____
<br/>
_____ P _____
<br/>
_____ Q _____
<br/>
_____ R _____
<br/>
_____ S _____
<br/>
_____ T _____
<br/>
_____ U _____
<br/>
_____ V _____
<br/>
_____ W _____
<br/>
_____ X _____
<br/>
_____ Y _____
<br/>
_____ Z _____
<br/>

<a href="http://bikinwebprofesional.blogspot.com/">Blogger style - inspirasi dan kreasi</a>
</div>
</div>
</div>

Ikuti langkah berikut untuk lebih jelasnya :

* Dari halaman Dashboard blog kamu pilih Tata Letak (Layout).
* Setelah masuk ke Elemen Halaman, klik Tambah Gadget.
* Setelah itu pilih HTML/JavaScript.
* Masukan kode script berikut :

_____ B _____

_____ C _____

_____ D _____

_____ E _____

_____ F _____

_____ G _____

_____ H _____

_____ I _____

_____ J _____

_____ K _____

_____ L _____

_____ M _____

_____ N _____

_____ O _____

_____ P _____

_____ Q _____

_____ R _____

_____ S _____

_____ T _____

_____ U _____

_____ V _____

_____ W _____

_____ X _____

_____ Y _____

_____ Z _____

Blogger style - inspirasi dan kreasi

Keterangan variabel:
Warna Merah

* Background = Ganti URL dengan alamat URL-gambar kamu sendiri.
* no-Repeat Scroll = bila kamu ingin gambar mengikuti scroll mouse ubah menjadi repeat scroll.
* font-size = 80%; artinya ukuran huruf yang ditampilkan adalah 80%.
* text-align = posisi text yang kamu inginkan left, right, center
* border: 0px = tampilan ketebalan border, sesuaikan dengan mengubah "0px" menjadi "1px", "2px",.. dst
* Height = tinggi tabel yang kamu inginkan.
* width: 100% = lebar menyesuaikan blog kamu.

Warna Hijau

* Lokasi tukar link sesuai abjad, bisa kamu isi dengan banner atau alamat teman blogger kamu. ( sesuai selera dan kreativitas kamu )
* contohnya :

_____ T _____

TEMAN KU SAYANG
_____ U _____

"ganti alamat URL diatas dengan alamat URL tujuan"

nanti akan muncul tampilan seperti ini :
_____ T _____

Teman ku sayang
_____ U _____

Warna kuning

* Itu adalah alamat blog punyaku. bisa kamu hapus kalau kamu kurang suka.. ( tapi tolong jangan dihapus ya...! biar blognya sederhana tapi keren lho..!! )

mudah sederhana tapi menarik... anda tertarik silakah mencoba...!!

By.kibagus

Share: Facebook Twitter Google+

Rabu

Manajemen Iklan: Random Banner Pada Satu Area

By dedi ponky15:35No comments

Ada sesuatu yang lucu jika ingat minggu lalu ketika sahabat karib (bukan blogger) menanyakan kepada saya bagaimana menampilkan iklan secara acak (Random banner) dalam satu area. Pertama kali ditanyakan hal ini saya juga kebingungan mau jawab apa, wong blog ini gak pernah ada iklan-nya apalagi mengelola pemasang iklan. Setelah lama bercuap-cuap sahabat saya langsung nyeletuk "katanya blogger mania masa buat koding untuk iklan aja gak bisa" Gubraaakkkk, gila.. nantang bener nih orang. saya balas bertanya "kalo om bisa dikasih apa??" teman saya menjawab "saya traktir makan di cak koting (tempat makan terkenal di yogya)" OK, kasih om waktu satu hari, kemudian kami pun bersalaman tanda sepakat. (akhirnya..om ditraktir makan hehehe)

Back ke laptop....sebenarnya membuat Iklan (Banner) satu tampilan dalam satu area tidak terlalu sulit, kita hanya tinggal mengarahkan saja ke lokasi gambar, namun yang jadi masalah bagaimana jika kita mempunyai 10 pemasang iklan yang ingin ditampilkan dalam satu lokasi area, ini yang munkin menjadi kendala utama pengelola iklan. Perlu diketahui bahwa banner yang kita buat nanti hanya pada Image Banner bukan sebagai Text Banner, iklan ini akan tampil secara acak jika pengunjung melakukan reload atau refresh pada halaman.

Contoh kode Dengan Javascript :

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Penjelasan:

Jika ingin menambah jumlah iklan tinggal menambahkan saja code script-nya, contoh diatas kita mempunyai 3 jumlah iklan yang ditampilkan, jika rencana menambah 1 iklan lagi jangan lupa juga menambahkan nilai baru dengan 4, begitupun seterusnya. Lihat contoh kode dibawah:

if (pasang_iklan==4) {
txt="Tulis Title";
url="Alamat URL";
alt="Alamat URL";
banner="Alamat URL Gambar";
width="468";
height="60";
}

Ups hampir lupa, jangan lupa menambah total jumlah iklan yang ditampilkan, Contoh: var jumlah_iklan = 4;

Selamat Mencoba,

Share: Facebook Twitter Google+

Membuat menu kontak pada blof

By dedi ponky15:07No comments

Panduan Membuat Menu Kontak Kami di Blog

Memasang fasilitas Menu Kontak Kami pada sebuah blog tentunya akan membuat blog tersebut terkesan lebih berisi, menarik serta akan tampak memiliki kelebihan tersendiri, ada banyak situs web yang memberikan layanan untuk membuat menu kontak kami ini dan dapat di pergunakan manfaatnya secara gratis, dan untuk membuatnyapun tidaklah begitu sulit, tutorial di bawah ini semoga dapat di manfaatkan bagi Anda yang berkeinginan untuk membuat Menu Kontak Kami untuk di pasangkan pada blog Anda.

Sebelum Anda memasang Kontak Form atau Menu Kontak Kami pada blog Anda, tentu ada baiknya untuk mempertimbangkan baik dan buruknya terlebih dahulu. Salah satu kebaikan atau kelebihan dari mamasang fasilitas Kontak Form yaitu mempermudah pengunjung untuk mengirimkan pesan kepada Anda, terlebih lagi apabila blog Anda merupakan blog bisnis online yang sangat membutuhkan fasilitas ini. Lalu kekukarangan atau keburukannya yaitu karena sangat mudahnya orang mengirimkan pesan, maka Anda harus bersiap-siap untuk kebanjiran email di inbox Anda dan tentunya Anda harus meluangkan waktu untuk membalasnya.

Dimanakah kita bisa mendapatkan kontak form ini? di luar sana banyak sekali website yang menyediakan fasilitas ini, selain yang berbayar ada juga yang gratisan. Nah tentunya Anda tinggal menentukan pilihan Anda mau yang berbayar [tentunya dengan fasilitas tambahan dan kelebihan] atau yang gratis. Web penyedia fasilitas pembuatan kotak form secara gratisan antara lain www.emailmeform.com, www.kontactr.com, www.zoho.com dan banyak lagi yang lainnya.

Kontak form yang akan Kami jelaskan pembuatannya di sini adalah kontak form seperti yang Kami gunakan yaitu berasal dari www.emailmeform.com, agar mudah di pahami dan pelajari maka tutorial yang Kami terangkan di sini adalah tentunya dari web ini. Berikut ini adalah langkah-langkah untuk membuat sebuah menu kontak form :

Tampilan halaman depan www.emailmeform.com ;

www.emailmeform.com

Anda dapat menggunakan fasilitas untuk membuat form kontak kami dari situs ini dengan gratis, ini juga sudah cukup baik dan dapat dimanfaatkan dengan maksimal, namun jika Anda menginginkan fasilitas yang lebih baik lagi dan tentunya dengan berbagai kelebihannya, situs inipun memberikan fasilitas untuk premium account, Kami tidak menganjurkan Anda untuk hal ini, karena tentunya ini akan menjadi pengeluaran tambahan untuk Anda dan akan menjadi sebuah beban. Untuk panduan membuat form kontak kami secara gratis Anda tinggal ikuti panduan langkah-langkah di bawah ini :

Silahkan kunjungi situs www.emailmeform.com.
Arahkan pandangan Anda ke sebelah kanan atas monitor.
Klik pada tulisan Sign up for free.
Isilah form yang ada dengan data diri Anda : First Name : » isi dengan nama depan Anda. Misalkan Nama Anda : Joko. Last Name : » isi dengan nama belakang Anda. Misalkan saja : Susilo. Username : » isi dengan username yang Anda di inginkan. Misal : joko25. Password : » isi dengan kata kunci yang Anda inginkan. Misal : juraganjengkol. Retype Password : » isi dengan kata kunci yang tadi Anda isikan. Misal : juraganjengkol. Your Email : » isi dengan alamat email anda. Misal : jokosusilo25@palembangcindo.web.id.
Klik tombol Sign up.
Setelah muncul tulisan terima kasih, silahkan cek email yang tadi di masukan oleh Anda untuk memeriksa email verifikasi.
Buka email kiriman dari EmailMeForm yang bertajuk Your new account information.
Klik link yang di berikan di email tersebut atau kalau tidak bisa, copy alamat URL tersebut lalu paste di address bar browser internet Anda untuk melakukan verifikasi bahwa email yang tadi di masukan adalah benar-benar milik Anda.
Setelah proses verifikasi selesai, silahkan klik tulisan click here untuk menuju halaman akun kontrol panel Anda.
Alihkan perhatian Anda ke sebelah kanan monitor. Klik tulisan Create new form.
Ada beberapa form yang perlu di sisi : Web form Name : » isi dengan nama yang Anda inginkan, atau biarkan saja (di sana sudah tertera Contact Webmaster). Recipients Emails : » isi dengan alamat email yang akan menerima pesan. Spam Email address : » isi dengan alamat email yang di inginkan untuk menerima pesan spam (email sampah, email iseng doank, email iklan, dll) atau kosongkan saja bila tidak mau menerima pesan email spam. Thank you page : » isi dengan alamat URL yang memuat tulisan terima kasih, contoh lihat postingan yang ini. Atau jika bingung, tulis saja alamat blog Anda. Number of fields : » biarkan 4 saja.
Klik tombol next yang ada di sebelah kanan.
Ada beberapa field name yang bisa di ganti sesuai keinginan, misal : Your Name jadi Nama, Your Email Address jadi alamat Email, dan seterusnya. Atau Anda biarkan saja seperti itu.
Klik tombol next yang ada di sebelah kanan.
Klik tombol next lagi.
Silahkan isi dengan keinginan Anda, atau biarkan saja seperti itu.
Klik tombol next lagi.
Klik tombol next lagi.
Akan di perlihatkan contoh tampilan kontak form yang tadi di buat oleh Anda.
Klik tombol Finish.
Klik tulisan Get the HTML codes.
Copy kode yang ada di text area, di bawah tulisan Copy and paste this HTML code into your page. Lalu paste pada notepad atau text editor lainnya.
Selesai.

Untuk membuat sebuah halaman kontak kami, Anda tinggal membuat sebuah postingan seperti biasa dan paste HTML kode pada postingan Anda. Untuk memasukan kode nyang tadi di dapat dari EmailMeForm, maka Anda pindah dulu dari menu compose ke edit HTML lalu paste di situ. kemudian tinggal di publish. Beres halaman Kontak Kami milik Anda telah selesai, untuk contoh jadi bisa lihat pada postingan yang satu ini.

Share: Facebook Twitter Google+

Cara menampilkan pesan pada jam tertentu di blog

By dedi ponky14:42No comments

Pernah terpikirkan untuk menampilkan pesan pada jam tertentu (Time Message) pada blog kita? tentu saja ya, Ada kalanya ketika sedang tidak online kita ingin memberikan pesan kepada pengunjung mengenai keadaan kita saat ini misalkan, "maaf, saya jam 1 ada rapat jadi gak bisa online" atau "jangan lupa ya sekarang pukul 13.00 jadi acara kumpul blogger akan dimulai" atau sebagai alarm plus pesan pengingat berguna.

Menampilkan pesan pada jam tertentu (Time Message) tentu saja sangat membantu, disisi lain pengunjung juga akan mengetahui informasi apa yang ingin kita sampaikan pada jam berikutnya tanpa harus online sekedar menulis pesan. Selain menambah nilai plus berupa pesan singkat, blog kita juga tentu saja terlihat berbeda :). Ok ikuti terus tutorial ini untuk cara pemasangan kodenya:

Cara Pasang Time Message:

Cara pasang pada blog tinggal copi-paste aja kode dibawah ini dengan menambahkan elemen halaman baru, kemudian jangan lupa mengedit pesan yang ingin ditampilkan yang ditandai dengan teks berwarna Biru dibawah ini.

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Kemungkinan yang ditanyakan:

if ((hr == 7) || (hr == 8) || (hr == 9) || (hr == 10))
document.write("pesan jam ini berlangsung pada jam 7,8,9,10 pagi")

Penjelasan code diatas, ini berarti kita membuat pesan yang sama pada jam yang sudah di tentukan misalnya pada jam 7,8,9,10 pagi. Jika ingin menampilkan pesan pada jam berbeda tinggal di lakukan sedikit perubahan pada kode seperti dibawah ini :

if ((hr == 7)

document.write("pesan jam 7 pagi")

if (hr == 8)

document.write("pesan jam ini 8 pagi")

if (hr == 9)

document.write("pesan jam ini 9 pagi")

if (hr == 10))

document.write("pesan jam 10 pagi")

Menambahkan permintaan teman kita mengenai bagaimana jika menampilkan ketika contoh jam antara 1:00 - 1:20 atau hanya tampil jam 1:20?

Berikut kode yang ditambahkan pada script sebelumnya:

now = new Date()

if (now.getMinutes() < 10) {
document.write("ini tampil jam antara jam 1:00 - 1:10")
}
else if (now.getMinutes() == 20) {
document.write("ini tampil jam 1:20")
}
else if (now.getMinutes() < 30) {
document.write("ini tampil jam antara jam 1:00 - 1:30 ")
}
else {
document.write("pesan jam 1 pagi")
}

Kode Selengkapnya:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Tinggal ditambah dan di modifikasi ya untuk jam yang lain. kalo masih bingung bisa tanya lagi

Share: Facebook Twitter Google+

Cara pasang jam di blog

By dedi ponky14:29No comments

Banyak sekali sahabat blogger baru yang menanyakan bagaimana cara pasang jam di blogger, aksesoris ini ternyata banyak juga peminatnya terutama kaum hawa yang sangat mengetahui akan arti kecantikan yang akan dituangkan dalam sebuah blog.Walaupun sudah banyak para blogger yang mengetaui cara pasang jam ini tapi tidak begitu bagi blogger pemula yang baru memulai membuat blog tentu perlu tahapan dan bimbingan jadi gak ada salahnya untuk memasang aksesoris ini jika dirasa berguna :). Layanan gratis aksesori jam sangat banyak, namun kali ini om hanya menjelaskan cara pasang jam menggunakan layanan gratis dan paling banyak digunakan http://www.clocklink.com/

Langkah-langkah pasang jam di blogger sebagai berikut:

1. Klik alamat http://www.clocklink.com/
2. Kemudian pilih tab Gallery atau klik aja disini http://www.clocklink.com/gallery.php
3. Pilih Gallery sesuai selera atau tema blog, misalnya sobat memilih animal lalu klik link "animal" tersebut
4. Pilih gambar yang ingin sobat gunakan, lalu klik "view html" dibawah gambar jam.
5. Kemudian akan keluar halaman box lisensi dari layanan ClockLink, pilih aja tombol "Accept"
6. Pada halamat box selanjutnya kalian dapat memilih salah satu code, sebaiknya pilih kode yang atas.
7. Copy atau Simpan kode yang telah dipilih untuk sementara waktu
8. Lalu kembali masuk kehalaman blogger, pilih Elemen halaman -> Tambahkan sebuah Elemen Halaman -> pilih HTML/JavaScript -> lalu Copy/Paste code tersebut, dan jangan lupa disimpan
9. Selesai :) dan lihat hasilnya.

Contoh jam :
obj=new Object;obj.clockfile="2002-orange.swf";obj.TimeZone="NZT";obj.width=150;obj.height=150;obj.wmode="transparent";showClock(obj);

By.id-blogger

Share: Facebook Twitter Google+

Membuat Kotak Search Sendiri di Blogger

By dedi ponky14:22No comments

Oke langsung aja seperti biasanya langkah pertama

* Log in dulu ke Blogger kamu masing-masing
* Masuk ke Tata Letak --> Edit HTML
* Copy kode CSS di bawah ini

#search {

width: 260px;

font-size: 11px;

float: right;

margin: 0;

padding: 6px 0 0;

}

#searchform {

margin: 0;

padding: 0;

overflow: hidden;

display: inline;

}

#searchbox {

background: #7cfc00;

width: 180px;

color: #000;

margin: 0;

padding: 4px 0 3px 5px;

border: 1px solid #000000;

display: inline;

font: normal 12px Georgia, Times New Roman, Trebuchet MS;

}

#searchbutton {

background: #7cfc00 !important;

color: #000;

margin: 0 0 0 5px;

padding: 3px 3px 2px;

border: 1px solid #000000;

font: bold 11px Georgia, Times New Roman, Trebuchet MS;

}
}

* Pastekan di atas kode ]]>Lalu simpan template.
* Eits belum selesai! Masih ada yang belum dipasang yaitu kotak pencariannya.
* Copy kode di bawah ini tuk memasang kotak searchnya! dan paste di elemen halaman kamu

<div id="search">
<form id="searchform" action="/search/" style="display:inline;" method="get">
<input id="searchbox" maxlength="255" onfocus="if (this.value == "Search...") {this.value = ""}" value="Search..." name="q" onblur="if (this.value == "") {this.value = "Search...";}" type="text" />
<input id="searchbutton" value="CARI" type="submit" />
</form></div>

Keunggulan dari cara ini adalah kita langsung dibawa ke posting posting dengan keyword yang kita ketikkan.
Selamat mencoba dan semoga berhasil.

Share: Facebook Twitter Google+

Membuat redmore

By dedi ponky02:33No comments

Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :

<p><data:post.body/></p>

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:

<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>
Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

<span class="fullpost">

</span>

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">

</span>

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
11. Ini yang paling penting diantara semua proses diatas yaitu ..... Selesai..... he..he..he.. :D
Selamat Mencoba...

By.trik-tips.blogspot.com

Share: Facebook Twitter Google+

Menghilangkan navbar blog

By dedi ponky00:07No comments

Setiap blog di Blogger sebenarnya memiliki sebuah navbar bawaan di paling atas blognya.
Mungkin beberapa blogger tidak suka dengan navbar tersebut, dan bermaksud menghilangkannya dari muka bumi ini.
Mungkin buat kamu yang berpikiran sama dan ingin menghilangkan navbar silahkan pelajari trik di bawah ini:

* Copy kode CSS di bawah ini:

#navbar-iframe {
display: none !important;
}

* Kamu login ke Blogger -Tata letak-Edit HTML Kemudian paste kode di atas tepat di bawah tag <b:skin><![CDATA[/*

* Simpan Template kamu,atau liat dulu klik pratinjau

Share: Facebook Twitter Google+

Jumat

Cara bikin blog

By dedi ponky18:01No comments

Langkah 1: Daftar Google

Daftarkan Diri Anda di Google

Lho koq? Koq di Google? Katanya mau ngajarin bikin blog di blogger.com, koq malah di Google? Tidak salah, karena untuk masuk ke blogger, Anda harus memiliki login google.com.

Silahkan kunjungi http://www.blogger.com. Anda akan mendapatkan halaman seperti pada gambar dibawah.

Jika Anda sudah memiliki login di Google, Anda tinggal login, maka Anda akan masuk ke Control Panel atau Panel Kontrol.

Oh ya, Anda bisa memilih bahasa, apakah Bahasa Indonesia atau bahasa Inggris.

Untuk kali ini saya anggap Anda belum memiliki login Google.

Klik tanda panah besar yang bertuliskan CIPTAKAN BLOG ANDA.

Sejauh ini sangat mudah dan akan terus mudah.

Halaman Pertama

Langkah 2: Daftar Blog

Lengkapi Pendaftaran Anda

Setelah Anda klik tanda panah besar yang bertuliskan CIPTAKAN BLOG ANDA, maka akan muncul formulir seperti yang ada pada gambar dibawah ini.

Proses ini akan menciptakan account Google yang dapat Anda gunakan pada layanan Google lainnya. Jika Anda sudah memiliki sebuah account Google mungkn dari Gmail, Google Groups, atau Orkut.

Satu account Google bisa digunakan untuk mengakses semua fasilitas yang disediakan oleh Google.

Jika Anda sudah memiliki accout google, Anda bisa langsung login (masuk). Untuk login ke Google, Anda harus login dengan menggunakan alamat email.

Silahkan lengkapi.

1. Alamat email yang Anda masukan harus sudah ada sebelumnya. Anda akan dikirim konfirmasi ke email tersebut. Jika Anda menggunakan email palsu atau email yang baru rencana akan dibuat, maka pendaftaran bisa gagal. Anda tidak perlu menggunakan email gmail.com. Email apa saja bisa.

2. Lengkapi data yang lainnya.

3. Tandai "Saya menerima Persyaratan dan Layanan" sebagai bukti bahwa Anda setuju. BTW Anda sudah membacanya?

Setelah lengkap, klik tanda panah yang bertuliskan lanjutkan.

Form Pendaftaran 1

Form Pendaftaran 2

Langkah 3: Membuat Blog

Memilih Nama Blog dan URL Blog

Jika Anda berhasil, Anda akan dibawa ke halaman seperti pada gambar dibawah. Jika gagal? Gagal biasanya karena verifikasi kata Anda salah. Itu wajar karena sering kali verifikasi kata sulit dibaca. Yang sabar saja, ulangi sampai benar. Saya sendiri sampai mengulang 3X.

Setelah Anda berhasil mendaftar, Anda akan dibawa ke halaman seperti yang ada pada gambar dibawah. Sekarang Anda mulai membuat blog dengan mengisi nama dan alamat blog Anda.

Sebagai contoh, saya menamakan blog tersebut dengan nama Hasna Zahidah. Sssst, jangan curiga, Hasna adalah putri saya. Saya memilih alamat blog dengan alamat http://hasna-zahidah.blogspot.com
sebagai alaternatif, bisa juga http://hasnazahidah.blogspot.com.

Jika Anda membuat lensa dengan tujuan mempromosikan produk Anda atau produk afiliasi, maka dalam memilih nama, harus berisi nama produk atau jasa yang akan Anda tawarkan. Misalnya jika Anda ingin menjual ebook saya, Anda bisa memilih kata kunci seperti motivasi, sukses, berpikir positif, dan kata-kata kunci lainnya yang sesuai.

Anda juga bisa meneliti kata kunci yang paling banyak dicari orang (tentu harus berhubungan dengan produk yang Anda jual) di
https://adwords.google.com/select/KeywordToolExternal

Anda bisa mengecek ketersidaan alamat blog yang Anda pilih. Jika tersedia bisa Anda lanjutkan. Jika tidak tersedia, maka Anda harus kreatif mencari nama lain atau memodifikasi alamat yang sudah ada, misalnya ditambahkan abc, xzy, 101, dan bisa juga dengan menyisipkan nama Anda.

Lanjutkan dengan klik tanda panah bertuliskan LANJUTKAN.

Proses Pembuatan Blog

Langkah ke 4 Blog Template

Pilih desain yang sesuai dengan selera Anda.

Berhasil? Tentu saja berhasil, memang mudah koq. Jika berhasil, Anda akan diarahkan ke halaman seperti yang ada pada gambar dibawah.

Pilihlah tema yang sesuai dengan selera Anda. Jika tidak ada yang sesui dengan selera Anda, jangan khawatir, nanti masih banyak pilihan tema yang bisa Anda install sendiri. Sekarang pilih saja tema agar proses pembuatan blog bisa diselesaikan. Anda bisa preview tema dengan klik gambarnya.

Untuk Memilih tema Anda klik (tandai) bulatannya o seperti pada gambar dibawah. Lihat yang saya tunjuk dengan panah merah buatan saya.

Setelah itu Anda klik tanda panah yang bertuliskan LANJUTKAN

Memilih Tema

Belajar Membuat Blog Selesai

Sekarang tinggal posting, pengaturan, dan tata letak

Selamat, sekarang Anda sudah memiliki sebuah blog. Sekarang Anda sudah mulai bisa memposting pemikiran Anda di blog dan dibagi ke seluruh dunia (eh Indonesia).

Memang masih ada beberapa hal yang harus Anda lakukan, yaitu pengaturan, tata letak, penambahan eleman, dan penggantian tema jika Anda menginginkan tema yang lain. Ini untuk tingkat lanjut.

Setidaknya, Anda sudah memiliki blog dan bisa posting. Hal ini sudah cukup untuk tahap awal. Untuk mendalami masalah Blog lebih dalam, saya anjurkan Anda membaca ebook Nge-Blog Dapat Duit.

Pada ebook tersebut, bukan hanya diajarkan cara nge-blog, tetapi juga bagaimana mendapatkan uang dari blog. Saya sendiri sudah membuktikannya, saya mendapatkan uang dari ngeblog. Jangan heran kalau saya rajin ngeblog.

Share: Facebook Twitter Google+

Rabu

Membuat link terbuka di tab baru

By dedi ponky16:37No comments

Link? Udah tahu kan link itu apa?
Beberapa pemilik blog ada yang malas menaruh link yang mengarah ke luar dari blognya, kenapa begitu? Sebab pemilik blog tidak mau pengunjung meninggalkan blognya.
Tapi... rasanya gak etis kalau sampai-sampai pemilik blog tidak mau memasang banner temannya hanya karena takut pengunjungnya hanya mampir sebentar di blognya (ciri-ciri seorang Blogger yang pelit tuh)
Kalau gitu, apa ada solusinya?
Tentu aja ada! Kita bikin aja link yang keluar dari blog kita terbuka di Tab baru, gampang kan?
Contohnya seperti link ini

* Baiklah, jika pada link biasa kodenya akan berbentuk seperti dibawah ini:

<a href='http://alamat-link.com'>klik disini</a>

* Maka untuk membuat agar link terbuka di tab baru kodenya:

<a href="#" target="_blank" rel="dofollow" onclick="window.open('http://alamat.com'); return false;">klik disini</a>

* Mudah kan? Jika pada banner biasanya memiliki kode:

<a href='alamat.com'><img src='alamat/gambar.jpg'></a>

* Tinggal ganti kode sebelum <img src... dengan <a href="#" target="_blank" rel="dofollow" onclick="window.open('http://alamat.com'); return false;">
* Eh iya! (hampir lupa) ganti huruf berwarna merah dengan alamat web yang ingin dibuka di Tab Baru

Share: Facebook Twitter Google+

Selasa

Membuat gambar di pojok

By dedi ponky23:15No comments

Apasih maksudnya membuat gambar di pojok ?...
Bingung ya...udah ga perlu bingung yang jelas contohnya seperti saya akan tetapi saya tidak menggunakan gambar,saya menggunakan tulisan yang berjalan di bawah itu,nah teman2 bisa menggantinya dengan gambar....jelaskan.

1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

<div id="trik_pojok">
<a href="http://nama blog kamu.blogspot.com">
<a href="http://mnsls.com/" title="Anime Myspace Comments"><img src="http://i.mnsls.com/800/80073.gif" alt="Anime Myspace Comments" border="0" /></a><br /><a href="http://mnsls.com/anime-80073.html" title="Anime Myspace Comments"><br /></a>
</div>

yang warna hijau ganti dengan nama blog kamu.
dan yang warna biru ganti dengan gambar kamu atau atau biarkan saja maka hasilnya seperti ini

Anime Myspace Comments

jika mau gambar animasi yang lain tinggal pilih di sini

5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna biru dengan script widget-widget tersebut.
6. Simpan dan lihat hasilnya...met mencoba...

Share: Facebook Twitter Google+

Senin

Kumpulan Gambar Animasi

By dedi ponky15:57No comments

Disini anda tinggal pilih aja dan tinggal kopi/paste codenya di bglog kamu kumpulan gambar2 animasi ini saya temukan dari ngorek2 di google he...he...he...

Anime Myspace Comments

Anime Myspace Comments

MyNiceProfile.com

Animated Pictures Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Animated Pictures Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Animated Pictures Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Animated Pictures Myspace Comments

MyNiceProfile.com

Animated Pictures Myspace Comments

MyNiceProfile.com

Anime Myspace Comments

MyNiceProfile.com

Animated Pictures Myspace Comments

MyNiceProfile.com

Share: Facebook Twitter Google+