kawangkoan

Free Icon Untuk Blog Dan Website

noreply@blogger.com (jany) — Mon, 25 Apr 2011 08:31:00 +0000

Bagi anda yang suka menghiasi blog atau website dengan berbagai macam icon agar terlihat lebih cantik, di bawah ini ada beberapa website yang menyediakan icon-icon cantik untuk bisa di download secara free atau gratis. So pasti anda tidak perlu lagi besusah payah hanya untuk sekedar urusan icon, download dan pasang dengan sesuka hati di blog anda.

1. http://icontexto.blogspot.com

Contoh icon yang bisa di download :

Dan masih banyak lagi koleksi icon yang sangat cantik, sayang jika di lewatkan, coba kunjungi saja blognya.

2. http://jwloh.deviantart.com

Contoh icon yang bisa di download :

Silahkan kunjungi situsnya, dan download berbagai icon yang cantik secara gratis.

3. http://marcelomarfil.deviantart.com

Contoh icon yang bisa di download :

Siapa yang mau lihat-lihat dan sekaligus mendoanload icon cantik-cantik ini?

4. http://www.webappers.com

Contoh icon :

Dan masih banyak lagi icon-icon cantik lainnya.

5. http://www.zeusboxstudio.com

Contoh icon yang bisa di download :

6. http://www.vistaicons.com

7. http://itweek.deviantart.com

8. http://lecoupdulapin.deviantart.com

9. http://csscreme.com

10. http://stinky9.deviantart.com

Dan banyak lagi icon-icon yang bisa anda dapatkan secara free atau gratis, caranya sangat mudah, anda tinggal tulis keyword Free Icon pada search engine google yang ada di sebelah kanan atas blog ini. Selamat berdownload ria

EFEK LINK DISENTUH MEMBESAR DAN BERPIJAR

noreply@blogger.com (jany) — Thu, 21 Apr 2011 02:05:00 +0000

Satu Lagi Trik untuk mempercantik Blog, yaitu memperbesar dan ada efek berpijar pada Tulisan Link yang ditunjuk. Caranya :

* Login dahulu ke Akun blogger
* Buka tata letak/Layout
* Edit html
* Expand template widget
cari aja kode yang ini :

/* global link attributes */
a {color: $mainLinkColor; text-decoration: underline;} a:hover {color: $mainHoverLinkColor; text-decoration: underline;} a:visited {color: $mainVisitedLinkColor; text-decoration: underline;} a:hover {

kemudian tambahkan kode ini

color: #000fff; text-transform: uppercase; font-weight: bolder; font-size: 15px; background-image: url(http://i909.photobucket.com/albums/ac297/heryymanjala/th_stars1.gif); }

sehingga menjadi seperti ini

/* global link attributes */
a {color: $mainLinkColor; text-decoration: underline;}
a:hover {color: $mainHoverLinkColor; text-decoration: underline;}
a:visited {color: $mainVisitedLinkColor; text-decoration: underline;}
a:hover {
color: #000fff; text-transform: uppercase; font-weight: bolder; font-size: 15px; background-image: url(http://i909.photobucket.com/albums/ac297/heryymanjala/th_stars1.gif); }

O....ya sebelum di simpan (simpan template) ada baiknya di pratinjau dulu siapa tau ada error... setelah semua beres baru deh di simpan dan lihat hasilnya.

MEMBUAT IKLAN MELAYANG DENGAN TOMBOL CLOSE

noreply@blogger.com (jany) — Thu, 21 Apr 2011 02:01:00 +0000

Membuat iklan melayang merupakan salah satu cara menghemat ruang diblog anda. Selain itu, cara ini merupakan suatu strategi untuk mengiklankan sebuah iklan di blog anda. Dimana kemungkinan mengkilik iklan yang ada diblog anda semakin besar karena kesalahan klik terjadi. Namun penempatanya pun harus memikirkan pertimbangan agar hal tersebut terjadi. Ikuti langkah2nya dibawah ini ;

1. Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
2. Masuk ke Tab Tata Letak
3. Pilih Elemen Halaman
4. Tambah Gadget Pilih HTML / JAVASCRIPT
5. Dan Copy kode di bawah ini kedalamnya yah

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYm2TWHydg3B_9-AGfQ7epN3BL5o_EnuoRM84VS4YYRUX3uABEcuspGPGgMmrte08gQ7ALpVSFBDYh1SEEYXmnl88zUyIkj70MrcuBP3ggSTO7HLL5M_lfJH-X77-3LpRp-EZhI1f95U/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYm2TWHydg3B_9-AGfQ7epN3BL5o_EnuoRM84VS4YYRUX3uABEcuspGPGgMmrte08gQ7ALpVSFBDYh1SEEYXmnl88zUyIkj70MrcuBP3ggSTO7HLL5M_lfJH-X77-3LpRp-EZhI1f95U/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>

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

.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
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.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

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

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukan Kode iklan atau Gambar yang anda inginkan di sini

</center>

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

Membuat Background Pada Judul Postingan

noreply@blogger.com (jany) — Thu, 21 Apr 2011 01:53:00 +0000

Membuat postingan lebih keren dan memikat pengunjung.....

caranya gini....

Postingan anaa kali ini masih tentang modifikasi background pada template kalau sebelumnyatrik membuat background pada judul sidebar sekarang anaa ingin berbagi trik sederhana lagi, bagaimana membuat background pada judul atau titel posts yang contohnya bisa dilihat pada gambar berikut atau aplikasi nyatanya disini

Mudah saja, berikut langkah langkah membuat background pada titel posts:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
text-align:center;
}

kalau sudah dapat sisipkan kode berikut

background: url(alamat image anda)repeat-x;

Sehingga keselurahannya menjadi seperti ini:

.post h3 {
background: url(alamat image anda)repeat-x; margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
text-align:center;
}

Terakhir klik save/ simpan.

Nah benar mudah bukan? Kalau hanya ingin mengganti background judul postingan dengan warna cukup sisipkan kode warna pada background seperti contoh berikut:

background: #5FB404;

noreply@blogger.com (jany) — Thu, 21 Apr 2011 01:50:00 +0000

caea memasang gambae tetap di pojok kiri blog

Caranya :

Lalu menuju ke Rancangan >> Edit HTML.

Cari kode ]]></b:skin> ( Ctrl+F )

Lalu coPpas kode dibawah ini tepat di atas kode ]]></b:skin>

#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); }

Kemudian cari lagi kode </body>. CopPas kode ini tepat diatasnya :

<div id="trik_pojok">
<a href="http://janyselalubahagia.blogspot.com/">
<img src="http://i.picasion.com/pic40/23ef268604bc264ca6593d08d39c3cde.gif" border="0" /></a>
</div>

Kemudian ganti http://janyselalubahagia.blogspot.com/ dengan alamat blog anda. Dan juga gantihttp://i.picasion.com/pic40/23ef268604bc264ca6593d08d39c3cde.gif dengan alamat gambar yang ingin anda jadikan gambar tetap di kiri halaman blog anda.

Lalu saVe.., dan liatlaH hasilnya.., bagus kan.., hehe..,
JangaN lupA berI komEntar ya..,

BegitULah cara memasang gambar tetap di kiri halaman blog..,

Dropdown Menu (Navigasi Horizontal) dengan CSS3

noreply@blogger.com (jany) — Thu, 21 Apr 2011 01:47:00 +0000

“Salam persahabatan”,

mungkin seperti itulah salam pembuka atau salam penutup dari sang empu tutorial ini. Anda mungkin kenal, bahkan mungkin juga telah menjadi salah satu sahabatnya dalam GFC.

Gambar 1. Screenshot dropdown menu horizontal dengan CSS3.

Trik blogger ini mungkin agak berbeda dengan posting aslinya¹ (sama caranya), karena menu horizontal di sini tidak menggunakan image & ditambahkan form pencarian — mempercantik search button dengan CSS3 oleh Rudy — di kanannya.

Letakkan kode CSS3 berikut di atas ]></b:skin>.

/*-- NAV --*/
nav {
width:100%;
background:#585858;
font:14px Sans-Serif;
letter-spacing:0.03em;
position:relatif;
overflow:hidden;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0, .4);
-moz-box-shadow: 0 2px 4px rgba(0,0,0, .4);
}
/* main level */
#menu-nav{
width:500px;
float:left;
margin:0;
padding: 7px 6px 0;
position:absolute;
}
#menu-nav li {
line-height:1.5em;
float:left;
list-style:none;
margin:0 auto;
padding:0 5px 8px;
position:relatif;
}
#menu-nav a, #menu-nav a:visited {
color:#e7e5e5;
text-decoration:none;
padding:  3px 16px;
border:solid 1px transparent;
display:block;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#menu-nav a.current, #menu-nav li:hover > a {
background:#E6E6E6;
color:#444444;
text-decoration:none;
border:outset 1px #f2f2f2;
-webkit-box-shadow: 0 1px 1px #585858;
-moz-box-shadow: 0 1px 1px #585858;
box-shadow: 0 1px 1px #585858;
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#menu-nav ul li:hover a, #menu-nav li:hover li a {
color:#666666;
background:none;
border:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-nav ul a:hover {
background: #0078ff !important;
color: #fafafa !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 0 #dddddd;
}
/* dropdown */
#menu-nav li:hover > ul {
display: block;
z-index:1;
}
/* level 2 list */
#menu-nav ul {
display: none;
margin: 0;
padding: 0;
width: 180px;
position: absolute;
top: 40px;
left:auto;
background:#f2f2f2;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#menu-nav ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-nav ul a {
text-shadow: 0 1px 0 #fafafa;
}
/* level 3+ list */
#menu-nav ul ul {
left: 90px;
top: auto;
position: absolute;
}
/* rounded corners of first and last link */
#menu-nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#menu-nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#menu-nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-nav {
display: inline-block;
}
html[xmlns] #menu-nav {
display: block;
}
* html #menu-nav {
height: 1%;
}

/*-- SEARCH --*/
#search {
width: 240px;
float: right;
margin: 0;
padding: 3px 8px; }

.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #5e6366;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #71787b;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}

.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}

.searchform .searchfield {
background: #d5d5d5;
padding: 6px 6px 6px 8px;
width: 180px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #555;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

Sesuaikan kode yang berwarna merah (width) dengan lebar blog Anda. Kemudian silakan mengganti kode - kode yang berhubungan dengan pewarnaan, baik menggunakan hex triplet (ex: #ff0000), color name (ex: red), RGB {ex:rgb(255, 0, 0)}, atau RGBA {ex: rgba(255, 0, 0, 0.5)}.

Kemudian letakkan kode HTML seperti yang tampak di bawah ini, di sekitar elemen header blog Anda (bisa di atas, di dalam, maupun di bawah elemenheader tersebut).

<nav>
<ul id='menu-nav'>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Beranda'>Home</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Beranda'>Home</a></li>
</b:if>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Tentang Penulis'>About</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Tentang Penulis'>About</a></li>
</b:if>
<li><a href='#'>Untuk Percobaan</a>
    <ul>
    <li><a href='#'>kosong</a></li>
    <li><a href='#'>kosong</a>
        <ul>
        <li><a href='#'>kosong</a>
            <ul>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            </ul>
        </li>
        <li><a href='#'>kosong</a></li>
        <li><a href='#'>kosong</a></li>
        <li><a href='#'>kosong</a>
            <ul>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            </ul>
        </li>
        </ul>
    </li>
    <li><a href='#'>kosong</a></li>
    <li><a href='#'>kosong</a></li>
    </ul>
</li>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Daftar Isi'>Sitemap</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Daftar Isi'>Sitemap</a></li>
</b:if>
</ul>

<div id='search'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' type='text' value=''/>
<input class='searchbutton' type='submit' value='Go'/>
</form>
</div>

</nav>

Ganti kode yang diberi tanda ‘kres’ (#) dengan alamat tautan yang Anda tuju (ex: http://optimasi-blog.blogspot.com/2005/05/about-optimasi-blog.html).
Mau lihat tampilannya, klik di sini.

Membuat Tag Cloud

noreply@blogger.com (jany) — Wed, 20 Apr 2011 09:21:00 +0000

Tag Cloud merupakan sebuah box yang berfungsi sebagai wadah untuk sekelompok link dalam sebuah web.
Fungsi dari tag could kurang lebih sebagai wadah beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. lebih jelasnya liaht gambar dibawah ini.

Berikut cara membuat Tag Cloud menggunakan efek background :

1. Login ke akun blogger sobat

2. Masuk tata ltak

3. Edit HTML dan ceklist/centang "Expand Template Widget"

4. Biasakan sebelum sobat mengedit template, backUp dulu templatenya, dengan cara klik "download template lengkap"

5. Carikode berikut : ]]></b:skin>

6. Letakan kode css berikut dan taruh di atas kode ]]></b:skin>
.tagcloud {<br /> width:300px;<br /> font-family:Times;<br /> padding:15px 8px;<br /> border:solid 1px #eee; <br /> background:#fff;<br />}<br />.tcloud { <br /> padding:3px 6px;<br /> text-decoration:none;<br />}<br />.tcloud:link {<br /> color:#003EBA;<br />}<br />.tcloud:visited {<br /> color:#ff900;<br />}<br />.tcloud:hover {<br /> color:#ffffff;<br /> background:#003EBA;<br />}<br />.tcloud:active {<br /> color:#ffffff;<br /> background:#5D7CBA;<br />}

7. Simpan Template.

8. Kemudian masuk ke Elemen Halaman, Tambah gadget, pilih HTML javascript, dan pastekan kode berikut :
<div class="tagcloud"><br /><a style="font-size:10px" class="tcloud" href="Link-1" title="Title Link-1">Nama Link-1</a><br /><a style="font-size:16px" class="tcloud" href="Link-2" title="Title Link-2">Nama Link-2</a><br /><a style="font-size:18px" class="tcloud" href="Link-3" title="Title Link-3">Nama Link-3</a><br /><a style="font-size:14px" class="tcloud" href="Link-4" title="Title Link-4">Nama Link-4</a><br /><a style="font-size:27px" class="tcloud" href="Link-5" title="Title Link-5">Nama Link-5</a><br /><a style="font-size:22px" class="tcloud" href="Link-6" title="Title Link-6">Nama Link-6</a><br /><a style="font-size:14px" class="tcloud" href="Link-7" title="Title Link-7">Nama Link-7</a><br /><a style="font-size:18px" class="tcloud" href="Link-8" title="Title Link-8">Nama Link-8</a><br /><a style="font-size:10px" class="tcloud" href="Link-9" title="Title Link-9">Nama Link-9</a><br /><a style="font-size:14px" class="tcloud" href="Link-10" title="Title Link-10">Nama Link-10</a><br /></div><br /><br /><br /><br />
9. Edit dan simpan.

Keterangan :

1. Link-1 s/d Link-10 : bisa diperbanyak disesuaikan dengan dengan jumlah link yang akan ditampilkan.

2. Link-1 s/d Link-10 : link posting yang telah diterbitkan dengan URL seperti misalnya :
http://..../....../judul posting.html

3. Nama Link-1 s/d Link-10 = Judul Posting.

4. Title Link : berisikan penjelasan singkat Nama Link.

cara memasang funsi scrol pada arsip di blog

noreply@blogger.com (jany) — Wed, 20 Apr 2011 09:11:00 +0000

Dibawah ini adalah screenshot pada saat posting ini saya tulis:

Bagi sobat yang ingin menampilkan widgat Arsip / Daftar isi dengan fungsi scroll silahkan ikuti tips ngeblog berikut ini:

Login terlebih dahulu mengunakan akun bloger
Buatlah Arsip blog dengan menambah Gadget pada sidebar, beri nama dengan "Arsip" ( bisa diganti sesuai keingian ) pilih gaya hierarki
Simpan/save. sampai disini anda telah membuat Arsip( tanpa fungsi scroll ).
Utuk menambahkan fungsi scroll pada Arsip Sekarang tuju Tata letak -- -->>Edit HTML.
Beri tanda centang pada Expand Template Widgets.
Cari Arsip yang sudah di buat tadi, dengan CTRL+Fdan ketikkan kata “Arsip”, ( biasanya di pojok kanan bawah ). akan muncul kode hatml seperti di bawah ini:

<b:widget id='BlogArchive2' locked='false' title='Arsip' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho;height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
Perhatikan tulisan yang berkedip dan berwarna merahdi atas, kode itulah yang harus disisipkan kedalam arsip yang telah dibuat, sedangkan tulisan yang berwarna biru pada height:200px; adalah ukuran tinggi pada fungsi scroll ( ganti angka 200 sesuai dengan keinginan )
Intinya jangan cepat menyerah....
Simpan template dan lihatlah hasilnya