Girant_31

Template Girant News

noreply@blogger.com (Girant_31) — Sat, 30 Jun 2012 19:53:00 +0000

Girant News, Template style bola.kompas.com

This template has more sections for news, sport news, breaking news, and gallery.

easy installed and customized categories in homepage, to show more categories.

Live Demo TemplateClick here to view demo Template Girant News

Shirenia Violla Putri

noreply@blogger.com (Girant_31) — Wed, 26 Oct 2011 02:35:00 +0000

Name

Shirenia Violla Putri

Gender

Female

Father

Agus Adi S, S.Kom

Mother

Ike Perawati

Born

01.23 pm Wednesday, 19 Oktober 2011

Clinic Midwife Maniskidul

Weight

2.7 Kg

Body Length

4.9 Cm

Obstetrician

Titi, Amd. Keb

Selamat Idul Fitri

noreply@blogger.com (Girant_31) — Mon, 29 Aug 2011 07:32:00 +0000

Meniti hari menabur khilaf
Menyongsong fitri menuai maaf

Semoga tiada tersisa khilaf dan dosa

Taqabbalallahu Minna Wa Minkum
Shiyamana Wa Shiyamakum

Minal Aidin Walfaidzin
Mohon Maaf Lahir & Batin

Selamat Idul Fitri

Elastis Effect Thumbnail Membesar

noreply@blogger.com (Girant_31) — Mon, 02 Aug 2010 17:36:00 +0000

Alhamdulillahirobbil'alamin..

Masih bisa update disela-sela. . . .

Menyambung dan mengupdate tentang memberi effect gambar didalam postingan, jika sebelumnya ane pernah share sedikit tentang Effect Image Corner pada postingan, kali ini masih sama tentang effect-effectan pada gambar yang kita pasang didalam postingan. bedanya Effect kali ini adalah effect elastis Thumbnail membesar disaat dilewati oleh Cursor/Pointer. atau lebih detailnya effect kali ini memiliki dua fungsi tergadap gambar, pertama Membuat ukuran gambar menjadi thumbnail lebih kecil dari ukuran aslinya ketika halaman pertama kali dimuat, kedua Memberi efek animasi dengan mengembalikan gambar kembali ke ukuran sebenarnya ketika mouse kita lewatkan diatasnya.

Demo Elastis Effect ThumbnailKlik disini untuk melihat demo Elastis Effect Thumbnail Membesar

Pada demo tersebut, coba lewati gambar yang ada disana dengan cursor/pointer sobat, dan lihat apa yang terjadi?! nah effect yang seperti itulah yang ane maksud..

Langsung saja ke cara penerapan nya.

Langkah 1

Seperti biasa untuk kode CSS, diletakan diatas kode ]]></b:skin> pada Rancangan - Edit HTML blog sobat.

.menuitem{display:inline-block;}

Langkah 2

Dan untuk kode Java Script, diletakan diatas kode </head> pada Rancangan - Edit HTML blog sobat.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.menuitem img&#39;).animate({width: 100}, 0);
$(&#39;.menuitem&#39;).mouseover(function(){
gridimage = $(this).find(&#39;img&#39;);
gridimage.stop().animate({width: 200}, 150);
}).mouseout(function(){
gridimage.stop().animate({width: 100}, 150);
});
}); 
</script>

Perhatikan kode pada baris ke 1, kode tersebut adalah kode Framework jQuery dari Java Script diatas, jika sebelumnya sobat semua pernah memasang jQuery Framework tersebut pada template sobat, maka kode pada baris ke 1 dihapus saja.

Langkah 3

Save template sobat, lalu menuju ke halaman posting.
Upload lah satu contoh gambar kedalam postingan.

Langkah 4

Pindahkan mode editor postingan sobat ke mode Edit HTML. dan cari kode gambar yg sudah di upload sebelumnya. untuk kode gambar biasanya akan seperti ini bentuk kode nya :

<a href="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

Langkah 5

Jika sudah ketemu kode gambarnya, maka tinggal tambahkan kode dibawah ini pada kode gambar tersebut.

class="menuitem"

dan akan membentuk kode gambar secara keseluruhan seperti dibawah ini :

<a href="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s1600/tooltip+jquery+girant_31.jpg" class="menuitem" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

kode yang berwarna merah adalah kode yang disisipkan diantara kode gambar dalam postingan sobat, sisipkan sebelum kode "><img Lalu terbitkan entri postingan sobat, dan lihat hasilnya disaat cursor/pointer sobat melewati gambar yang telah diterbitkan dalam postingan sobat..

Langkah 6

Selesai.
Selamat Mencoba dan semoga bermanfaat.

Sedikit Informasi, kode-kode atau trik diatas dapat juga sobat gunakan untuk membuat menu dengan menggunakan gambar dan effect seperti yang dimaksud diatas.

Different Background Post

noreply@blogger.com (Girant_31) — Fri, 30 Jul 2010 15:37:00 +0000

Sedikit share tentang memodifikasi postingan.. yaitu menambah background image pada postingan dengan berbeda-beda background di setiap postingan, tanpa merubah ataupun ngutak-atik template. mungkin trik ini sudah banyak yang mengetahui, makanya share kali ini ane khususkan bagi yang belum mengetahui trik ini dan berminat memodifikasi postingan di setiap memposting.

Untuk DEMO, sobat bisa lihat sendiri pada postingan ini.. dan hanya pada postingan ini, tidak merubah background postingan keseluruhan blog sobat.

Langsung ke cara pembuatan nya.

Langkah 1
Letakan kode dibawah ini pada editor Edit HTML postingan blog sobat.

<div style="background: url(URL GAMBAR) no-repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:50px;
-webkit-border-top-right-radius:50px;
-moz-border-radius-bottomright:50px;
-webkit-border-bottom-right-radius:50px;
-moz-border-radius-topleft:50px;
-webkit-border-top-left-radius:50px;
-moz-border-radius-bottomleft:50px;
-webkit-border-bottom-left-radius:50px;">

CONTENT ARTIKEL

</div>

Perhatikan kode diatas!

Rubah URL GAMBAR dengan URL gambar yang sobat kehendaki.
Kode no-repeat adalah kode untuk tidak menampilkan gambar berulang-ulang, jika memang menghendaki gambar yang ditampilkan berulang sampai ke bawah postingan, maka tinggal digapus saja kode no- nya.
CONTENT ARTIKEL adalah isi dari artikel/post sobat keseluruhan. jadi integrasinya kode diatas adalah mengapit keseluruhan isi artikel sobat. sebagai bayangan, kode pada baris ke 1 s.d 11 diletakan paling atas isi post sobat, dan kode pada baris ke 15 diletakan di akhir setelah semua isi post sobat.

Langkah 2

Ada baiknya sebelum post tersebut diterbitkan, maka sebelumnya di Pratinjau terlebih dahulu.

Langkah 3

Setelah semuanya OK, maka terbitkanlah postingan sobat.. dan lihat hasilnya..

satu postingan sobat memiliki background sesuai dengan keinginan sobat.

Ribet memang.. tapi tak ada salahnya untuk pembelajaran, siapa tau dikemudian hari trik ini sangat dibutuhkan.

Oia, jika di postingan selanjutnya sobat ingin background postingan yang berbeda, maka tinggal dirubah saja URL GAMBAR pada kode diatas dengan URL gambar milik sobat yang lain nya, agar tidak bosan melihat background yang sama di setiap postingan.

Selesai.

Selamat mencoba dan semoga bermanfaat.

Auto Caption pada Gambar

noreply@blogger.com (Girant_31) — Mon, 26 Jul 2010 08:36:00 +0000

Update kembali disela-sela kesibukan KKN.
Pada postingan kali ini, ane sedikit update tentang Effect Image Corner pada postingan sebelumnya. sama hal nya dengan Effect Image Corner, Auto Caption pada Gambar ini masih membahas sekitar modifikasi gambar pada postingan dengan sentuhan effect auto caption sebagai keterangan pada gambar tersebut agar terlihat lebih menarik dan lebih elegant.

Demo Auto Caption pada GambarKlik disini untuk melihat demo Auto Caption pada Gambar

Auto Caption pada Gambar adalah effect pada gambar dipostingan yang mana effect tersebut membungkus gambar dan memberikan wadah untuk keterangan dari gambar, kurang lebih keterangan gambarnya seperti ini:

Tertarik ??

Mari kita lihat cara membuatnya :

Langkah 1

Masukan kode dibawah ini diatas kode ]]></b:skin> pada halaman Rancangan - Edit HTML template blog sobat semua.

div.gambar {
margin:2px 1px 10px;
padding:5px;
text-align:center;
background:url() repeat-y scroll left center #E3C7EF;
border:1px solid #6A2D86;
display:inline-block;
}
div.gambar img {
display:block;
}
div.gambar span{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
background:url() repeat-x scroll 0 0 #6A2D86;
color:#fff;
margin:5px 0 0;
display:block;
padding:2px;
border:1px solid #6A2D86;
}

Langkah 2

Pasang Framework jQuery dibawah ini diatas kode </head> pada halaman Rancangan - Edit HTML template blog sobat semua.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

Seperti biasa, jika Framework jQuery tersebut sebelumnya sudah sobat pasang di template sobat, maka Langkah 2 dilewat saja.

Langkah 3

Letakan kode dibawah ini diatas kode </head> pada halaman Rancangan - Edit HTML template blog sobat semua, atau setelah kode Framework jQuery diatas bagi yg belum pernah memasang Framework jQuery tersebut.

<script style='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(".gambar").each(
 function() {
  $(this).wrap("<div></div>");
  $(this).parent().attr("class", "gambar");
  $(this).attr("class", "");
  $(this).parent().append("<span>" + $(this).attr("alt") + "</span>");
  $(this).removeAttr("style");
  $(this).parents("a").removeAttr("href");
 }
);
});
//]]>
</script>

Langkah 4

Save template sobat, dan dilanjut membuat satu postingan dengan mengupload gambar pada postingan tersebut.

Langkah 5

Cari kode HTML gambar yg sudah diupload pada mode Edit HTML new entry post sobat, biasanya kode HTML dari gambar akan membentuk seperti ini :

<img border="0" height="300" src="http://3.bp.blogspot.com/_JhWRxKBSF24/TE0_eucp3oI/AAAAAAAAB-w/DPAcXyea8v4/s400/autocaption-girant.jpg" alt="Ket Gambar" width="400" />

Setelah ketemu. lalu. . .

Langkah 6

Sisipkan kode class="gambar" pada kode HTML gambar diatas, sehingga akan membentuk keseluruhan kodenya seperti dibawah ini :

<img class="gambar" border="0" height="300" src="http://3.bp.blogspot.com/_JhWRxKBSF24/TE0_eucp3oI/AAAAAAAAB-w/DPAcXyea8v4/s400/autocaption-girant.jpg" alt="Keterangan Gambar" width="400" />

Langkah 7

Lantas bagaimana dengan memberikan keterangan pada gambar tersebut??
biasanya sudah secara otomatis terpasang atribut alt="ket gambar" pada kode HTML gambar tersebut. namun saran ane, sesuaikanlah dengan keterangan gambar yg kita kehendaki dengan mengisi atribut tersebut.

Langkah 8

Terbitkan entri posts sobat, dan lihat hasilnya..
Terciptalah secara otomatis Auto Caption pada Gambar di postingan sobat.
menarik bukan ??

Selesai.
Selamat mencoba dan semoga bermanfaat.

Tooltips Menu Hover

noreply@blogger.com (Girant_31) — Wed, 21 Jul 2010 07:23:00 +0000

Mengenal Tooltips, mungkin sudah tidak asing lagi bagi sobat blogger semua. banyak cara dalam memasang tooltips di blog dan berbagai macam pula menempatkan tooltips tersebut. Kali ini ane akan sedikit share tentang Tooltips Menu Hover yang mana membuat menu dengan effect tooltips di saat cursor melintas diatasnya.

Seperti apa Tooltips Menu Hover ?

mari kita lihat demo nya.

Demo Tooltips Menu HoverKlik disini untuk melihat demo Tooltips Menu Hover

Cara membuat Tooltips Menu Hover :
Langkah 1

Letakan kode dibawah ini tepat diatas kode ]]></b:skin> pada halaman Rancangan-Edit HTML akun blog sobat.

.menu {
margin:100px 10px 10px 10px;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(http://lh6.ggpht.com/_JhWRxKBSF24/TBUfkXV_-OI/AAAAAAAABMA/xpP0YvRDEQY/button.gif) no-repeat center center;
}
.menu li em {
background: url(http://lh6.ggpht.com/_JhWRxKBSF24/TBUeMfTbzhI/AAAAAAAABL4/aJxkPGpJB5I/hover.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

Langkah 2

Pasang Framework jQuery dibawah ini pada template sobat, tepatnya pada halaman Rancangan-Edit HTML diatas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Jika sebelumnya sobat pernah memasang Framework jQuery tersebut pada template sobat, maka Langkah 2 dilewat saja.

Langkah 3

Letakan kode dibawah ini tepat diatas kode </head> pada halaman Rancangan-Edit HTML akun blog sobat.

<script type='text/javascript'>
$(document).ready(function(){
  $(".menu a").hover(function() {
    $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
  }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
  });
});
</script>

Langkah 4

Save template sobat dan langsung menuju halaman Rancangan-Elemen Laman.

Langkah 5

Tambahkan kode dibawah ini pada halaman Add Gadget HTML/Java Script blog sobat.

<ul class="menu">
  <li>
    <a href="URL LINK 1">MENU 1</a>    
    <em>TIPS 1</em>
  </li>
  <li>
    <a href="URL LINK 2">MENU 2</a>
    <em>TIPS 2</em>
  </li>
  <li>
    <a href="URL LINK 3">MENU 3</a>
    <em>TIPS 3</em>
  </li>
</ul>

Perhatikan kode yg dicetak besar, gantilah dengan ketentuan menu yang sobat pasang.

URL LINK [1, 2, 3,] = Menentukan URL link yang sobat tuju.
MENU [1, 2, 3,] = Menentukan nama pada menu.
TIPS [1, 2, 3,] = Menentukan nama didalam Tooltips.

Langkah 6

Drah drop gadget yg sudah ditambahkan ke atas postingan, atau di header, terserah keinginan sobat.

Disarankan ditempatkan pada gadget yang memiliki width besar, agar hasilnya lebih maximal.

Langkah 7

Save template sobat dan lihat hasilnya.
Personally I dont think this is the right way to do it,
if you have better ideas to develop it, please comment !!

Selesai.
Selamat mencoba dan semoga bermanfaat.

Windows 7 Star Menu

noreply@blogger.com (Girant_31) — Fri, 16 Jul 2010 18:50:00 +0000

Kali ini ane tidak akan sharing tentang tutorial.. tapi hanya ingin sedikit menginformasikan kepada sobat blogger semua.. karena. . . . . Girant_31 blog kini memiliki menu baru. bukan bermaksud sombong, tapi hanya sedikit bangga ( Bangga bangets sih sebenarnya :D ) karena menu kali ini yang ane buat memang barang baru di dunia blogger. bisa dibilang ane yang pertama kali neg di dunia dot Blogspot, dot co.cc, dot baby dsb.. (Seneng nya..).

Penasaran seperti apa Windows 7 Star Menu ?!

Ok langsung saja lihat demo nya di pojok kiri bawah blog ini.

Click tombol Star Menu seperti gambar diatas. maka. . .

Munculah menu seperti menu pada Windows Seven khan ?? ya walaupun tidak sama 100%, tapi setidaknya 99% lah.. :D.

Apakah sampai disitu doang neg mas ??

Eiiiiitss.. tunggu dulu, tentunya ane bubuhi sedikit jQuery didalamnya agar sedikit lebih menawan tentunya. mau tau buktinya ?? cobalah sobat click menu Chat Room dan My Document !!

Contoh pertama cobalah sobat click menu Chat Room !!

Maka menu baru akan terbuka dengan widget Shoutmix didalamnya.. pada menu Chat Room ini sengaja ane pasang kembali Shoutmix, agar senantiasa lebih mempererat tali silaturrahmi diantara kita (jiaaaaaaaaah..). ya tidak salah nya kan kalo berharap.. apalagi berharapnya dalam kebaikan..

Jika sudah selesai dengan menu Chat Room atau lebih jelasnya Widget Shoutmix yang telah disediakan, maka click tombol X seperti pada gambar untuk menutup menu/widget tersebut.

Contoh kedua, cobalah sobat click menu My Document !!

Seperti contoh pertama, kali ini pun muncul menu baru dengan isi widget daftar isi dari blog Girant_31. setidaknya lebih mudah untuk mengubek-ubek blog ini nantinya. ya walaupun banyak yang tidak bermutu, tapi setidaknya ada sedikit yang bermanfaat Insya Allah.

Setelah semua dijelajah, gimana ada pertanyaan atu cacian ??

Silahkan curahkan di Chat Room atupun di kolom komentar..

Oy.. mengenai kolom komentar, ane lupa ada sedikit perubahan juga loh..

Tercipta dengan kesadaran penuh tentunya, dan bukan maksud menyembunyikan kolom komentar, hingga membuat sobat semua tersesat, tapi ini hanya meminimalis agar tidak terlalu berantakan az dengan widget-widget dibawah postingan.
Jika masih ada sobat yang masih bingung ingin berkomentar disini, maka saran ane, jangan bimbang dan jangan bingung, click az tab Comments, maka. . . .

Munculah kolom komentar.. dan berkomentar lah :D.

Mungkin cukup sekian dari ane..
Semoga ini bukan menjadi benih dari kesombongan ane, tapi harus dan wajib menjadi langkah awal untuk terus belajar dan berkarya kedepan nya agar menjadi lebih baik lagi..
Amiiiiiiiiiiin..

Terimakasih.

Neon Text Color jQuery

noreply@blogger.com (Girant_31) — Thu, 15 Jul 2010 11:30:00 +0000

Sudahkah sobat melihat tulisan diatas ?? ya itulah yang dimaksud Neon Text Color jQuery.. Effect flashing didalam text adalah murni dari pengaruh java script, tanpa menggunakan CSS sama sekali.

Neon Text Color jQuery ini dapat digunakan di postingan maupun di sidebar, guna mempercantik tampilan blog/website sobat.

Tertarik ??!! Langsung saja ke langkah-langkah membuat Neon Text Color jQuery. Masukan kode java script dibawah ini pada postingan ( pd mode Edit HTML ) atupun di sidebar ( dg menambahkan add gadget HTML/Java Script pd widget sidebar sobat).

<center><h1><script language="JavaScript1.2">
var message="DEMO"
var neonbasecolor=""
var neontextcolor="#FD3D3A"
var neontextcolor2="#FF8080"
var flashspeed=50       // kecepatan flashing dalam milliseconds
var flashingletters=5    // jumlah huruf yg di flashing dlm neontextcolor
var flashingletters2=1  // jumlah huruf yg di flashing dlm neontextcolor2 (0 to disable)
var flashpause=0        // pause diantara flash-cycles dlm milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script></h1></center>

Perhatikan kode yang di highlight. kode pada baris kedua, ganti kode DEMO dengan tulisan yang akan diberikan effect. kode pada baris keempat dan kelima, ganti kode warna dengan kode warna yg sobat suka. kode pada baris keenam, angka 50 adalah kecepatan flashing effect neon. lebih besar angkanya maka akan lebih lambat kecepatan flashing nya. kode pada baris ketujuh, angka 5 adalah merupakan jumlah huruf yang di flashing. kode pada baris kedelapan, angka 1 adalah jumlah huruf yg di flashing setelah kode pada baris ketujuh. Selesai. Terbitkan postingan sobat dan lihat hasilnya.

Neon Text Color jQuery ini tidak berlaku bagi text yg dimodifikasi.. seperti di bold atau di warnai.

Selamat mencoba dan semoga bermanfaat.

Tab Vanilla Slick

noreply@blogger.com (Girant_31) — Mon, 12 Jul 2010 17:50:00 +0000

Hampir sama dengan postingan ane terdahulu tentang Tab View Slider, dimana Tab view jQuery kali ini adalah salah satu Tab view jQuery ter-simple.. dengan memakai fungsi click untuk membuka isi content, juga tetap menggunakan framework dalam kendali proses kerja nya.

Tab view jQuery kali ini kita sebut saja Tab Vanilla Slick, yang berfungsi untuk mengumpulkan beberapa konten terpisah seakan menjadi satu bagian, dan untuk menampilkannya, cukup klik salah satu judul konten tersebut.

Demo Tab Vanilla SlickKlik disini untuk melihat demo Tab Vanilla Slick

Ketika sobat klik salah satu judul konten maka konten yang dimaksud akan ditampilkan dan konten yang lainnya akan disembunyikan, selain itu ditambah efek slide down dan slide up agar perpindahan konten lebih menarik.

Cara membuat dan memasang Tab Vanilla Slick :

Langka 1

Pasang framework dibawah ini pada template sobat, tepatnya diatas kode </head> pada rancangan-Edit HTML blog sobat.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Perhatikan framework jQuery diatas, jika sebelumnya sobat pernah memasang framework tersebut di template sobat, maka untuk Langkah 1 di lewat saja.

Langka 2

Tambahkan kode Java Script dibawah ini, tepat setelah kode pada Langkah 1 atau diatas kode </head> pada rancangan-Edit HTML blog sobat.

<script  type='text/javascript'>
$(document).ready(function(){
    $('#archive, #blog').hide();    
    $("ul.slick li").click(function () {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(".content-slick").slideUp();
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });
 });
</script>

Langka 3
Tambahkan kode CSS dibawah ini, tepat diatas kode ]]></b:skin> pada rancangan-Edit HTML blog sobat.

#slick_area {
  border:1px solid #dedbd1;
  background-color:#f3f1eb;
  padding:8px;  
  margin:10px 0;
  line-height:18px;
  width:310px;
}
#slick_area  a{
  color:#222;
  text-decoration:none;
}
.slick_area a:hover{
  color:#009;
}
ul.slick {
  margin:2px 5px 8px 0;
  padding:0px;
}
ul.slick li {
  list-style:none;
  display:inline;
  background-color:#dedbd1;
  padding:5px 14px;
  text-decoration:none;
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
  cursor:pointer;
  border:1px solid #dedbd1;
}
ul.slick li:hover {
  color:#009;
}
ul.slick li.active {
  background-color:#fff;
  border:1px solid #585858;
}
.content-slick {
  background-color:#fff;
  border:1px solid #585858;
  color:#dedede;
  min-height:40px;
  padding:7px 13px 5px;
  text-align:justify;
}  
.content-slick ul {
  margin:2px;
  padding:0;
}
.content-slick ul li {
  list-style:none;
  border-bottom:1px solid #585858;
  padding:4px;
}
.content-slick ul li:last-child  {
  border-bottom:none;
}
.content-slick  ul li:hover, .content-slick  ul li a:hover {
  display:block;
  background-color:#dedbd1;
}
.content-slick  ul li a {
  text-decoration:none;
  color:#000;
  display:block;
}
#archive, #blog { display:none; }

Langka 4

Save template sobat.

Semua kode sudah terpasang, lantas bagaimana untuk menampilkan Tab Vanilla Slick tersebut ??

Langka 5
Tambahkan halaman widget sidebar sobat dngan cara memasukan kode dibawah ini pada halaman add gadget HTML/Java Script.

<div id="slick_area">
<ul class="slick">
<li title="label" class="slick  active">Label</li>
<li title="archive" class="slick">Archive</li>
<li title="blog" class="slick">Blog</li>
</ul>

<div id="label" class="content-slick">
<ul>
<li><a href="#">Link 1-1</a></li>
<li><a href="#">Link 1-2</a></li>
<li><a href="#">Link 1-3</a></li>
</ul>
</div>

<div id="archive" class="content-slick">
<ul>
<li><a href="#">Link 2-1</a></li>
<li><a href="#">Link 2-2</a></li>
<li><a href="#">Link 2-3</a></li>
</ul>
</div>

<div id="blog" class="content-slick">
<ul>
<li><a href="#">Link 3-1</a></li>
<li><a href="#">Link 3-2</a></li>
<li><a href="#">Link 3-3</a></li>
</ul>
</div>
</div>

Terdapat 4 bagian pada kode Langkah 5.

- Bagian pertama adalah merupakan judul konten dari masing-masing tab.

- Bagian ke 2 - 4 adalah merupakan isi konten.

- Kode yg diberi tanda merah, adalah kode yang dapat dirubah oleh sobat, baik itu judul konten maupun dalam penempatan URL link.

Source Code Tab Vanilla SlickKlik disini untuk mengambil source code Tab Vanilla Slick

Langka 6
Save template sobat.. dan lihat hasilnya.

Jika sobat ingin menambahkan jumlah tab-nya, silahkan memodifikasi kode java script dan HTML nya pada Langkah 2 dan Langkah 5.

Selesai..
Selamat mencoba dan semoga bermanfaat.

Button Gradient CSS3

noreply@blogger.com (Girant_31) — Sat, 10 Jul 2010 05:43:00 +0000

Melanjutkan postingan sebelum-sebelumnya tentang Button Shapes CSS3, kali ini kita bahas tentang macam button CSS3 yg lain nya yaitu Button Gradient CSS3. sama halnya dengan Button Shapes CSS3 baik itu dari penerapan kode CSS nya maupun dari kode pemanggil dalam postingan ataupun dalam sidebar, hanya saja ada ada sedikit dibedakan dalam kode pemanggilnya. seperti apa Button Gradient CSS3, silahkan lihat dulu bentuknya.

Demo Button Gradient CSS3Klik disini untuk melihat demo Button Gradient CSS3

Ada sedikit yg berbeda di Button Gradient ini dibanding dari Button Shapes sebelumnya, seperti nama nya, maka tampilan nya pun berupa mode color Gradient, ditambah effect hover yg membuat pesona button nya lebih menarik.

Bagi yang sudah menerapkan Button CSS3 ini sebelumnya, maka :

LANGKAH 1
Tambahkan kode css dibawah ini tepat dibawah kode css sebelumnya atau diatas kode ]]></b:skin> pada halaman Rancangan - Edit HTML blog sobat.

.purple {
color: #ffffff;
border: solid 1px #8560a8;
background: #8560a8;
background: -webkit-gradient(linear, left top, left bottom, from(#b6a3c8), to(#8560a8));
background: -moz-linear-gradient(top,  #b6a3c8,  #8560a8);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b6a3c8', endColorstr='#8560a8');
}
.purple:hover {
background: #633d87;
background: -webkit-gradient(linear, left top, left bottom, from(#9f8fae), to(#633d87));
background: -moz-linear-gradient(top,  #9f8fae,  #633d87);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9f8fae', endColorstr='#633d87');
}
.purple:active {
color: #e6e6e6;
background: -webkit-gradient(linear, left top, left bottom, from(#8560a8), to(#b6a3c8));
background: -moz-linear-gradient(top,  #8560a8,  #b6a3c8);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8560a8', endColorstr='#b6a3c8');
}

Bagi yang belum pernah memakai nya, maka sebelumnya perhatikan dan pelajari terlebih dahulu postingan ane sebelumnya tentang Button Css disini.

LANGKAH 2
Kode dibawah ini adalah kode pemanggil untuk Button Gradient CSS3 diatas, terserah selera sobat ingin memakai jenis button gradient yg seperti apa, tinggal masukan kode pemanggil untuk jenis button gradient yang bersangkutan pada mode Edit HTML postingan sobat ataupun pada sidebar sobat.

Untuk Button Gradient jenis Besar

<a href="#" class="button purple besar">Besar</a>

Untuk Button Gradient jenis Sedang

<a href="#" class="button purple">Sedang</a>

Untuk Button Gradient jenis Kecil

<a href="#" class="button purple kecil">Kecil</a>

Untuk Button Gradient jenis Kotak

<a href="#" class="button purple kotak">Kotak</a>

Untuk Button Gradient jenis Bulat

<a href="#" class="button purple bulat">Bulat</a>

Untuk Button Gradient jenis Lonjong

<a href="#" class="button purple lonjong">Lonjong</a>

Untuk Button Gradient jenis Persegi Panjang

<a href="#" class="button purple persegi">Persegi Panjang</a>

Ganti kode yang berwarna merah dengan URL Link yang sobat tuju, juga perhatikan pada kode purple, inilah kata kunci dari kode pemanggil button gradient tersebut.

Untuk mengetahui jenis-jenis Button Gradient, terlebih dahulu lihat Demo nya.

Selesai lah untuk Button Gradient CSS3 kali ini, Personally I dont think this is the right way to do it, if you have better ideas to develop it, please comment !! Selamat mencoba dan semoga bermanfaat.

Effect Image Corner

noreply@blogger.com (Girant_31) — Wed, 07 Jul 2010 11:19:00 +0000

Huuffs.. Setelah sempet kesel, marah, kecewa, bingung dikerjai oleh si mBah Google kemarin, dimulai dari hilangnya semua komentar sobat semua, juga sempet penghapusan blog tercinta ini selama 3 jam. dan ternyata seluruh blogger di dunia ini pun sebagian besar mengalami nya,.. ga percaya? lihat disini. rata-rata dari mereka mengeluh komentar di blog nya tidak muncul, tapi laporan di eMail mereka sudah banyak yang berkomentar. akhirnya ane menyimpulkan bahwa masalah kemarin tersebut adalah bukan dari human error blog kita masing-masing, tapi ulah dari blogger yg sedang carmuk. jadi saran saya, biarkan saja.. karena tidak ada solusi or Tips n Trick untuk masalah tersebut, hanya tinggal masalah waktu.. biarkanlah itu menjadi urusan keprofesionalan mereka.

Ok.. Sebelum masuk ke berbagi ilmu disini, ane mengajak sobat semua untuk sejenak memperhatikan beberapa image dan effect nya dibawah ini satu persatu :

Image Asli tanpa Effect	Image dg Effect Reflex
Image dg Effect Corner	Image dg Effect Glossy

Adakah salah satu effect image diatas yang menarik buat anda ??

Perlu diketahui, Effect image diatas tanpa editan Photoshop, Corel, 3D Studio MAX dll. Itu semua murni dg script jQuery !! dan sebenarnya masih banyak lagi jenis effect nya loh.

Gimana menarik bukan??
atau masih bingung??

Jadi Effect Image ini adalah effect yang tercipta didalam postingan stelah kita memasukan script jQuery didalamnya, tanpa terlebih dahulu diedit di Photoshop, Corel, 3D Studio MAX dll. lantas fungsi nya buat apa?? memberatkan blog ga?? melihat dari fungsi nya, agar isi postingan kita terkesan lebih menarik dan profesional (ciee..), tapi memang aga sedikit memberatkan blog kita, karena ada fungsi pemanggil plugin java Script yang sebelumnya kita pasang terlebih dahulu di template kita. so.. terserah sobat semua mempertimbangkan nya.

Pada bahasan kali ini, kita coba dengan Effect Image Corner dan macam-macam nya. bisa lihat contohnya diatas seperti apa effect nya, atau lihat demonya.

Demo Effect Image CornerKlik disini untuk melihat demo Effect Image Corner

Cara menerapkan di blog :

LANGKAH 1
Masukan kode dibawah ini tepat diatas kode </head> pada halaman Rancangan - Edit HTML blog sobat.

<script src='http://daftarisi-girant.googlecode.com/files/corner.js' type='text/javascript'/>

LANGKAH 2
Save template sobat, lalu menuju ke halaman posting.
Upload lah satu contoh gambar kedalam postingan.

LANGKAH 3
Pindahkan mode editor postingan sobat ke mode Edit HTML. dan cari kode gambar yg sudah di upload sebelumnya. untuk kode gambar biasanya akan seperti ini bentuk kode nya :

<a href="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

LANGKAH 4

Jika sudah ketemu kode gambarnya, maka tinggal tambahkan kode dibawah ini pada kode gambar tersebut.

class="corner iradius16"

dan akan membentuk kode gambar secara keseluruhan seperti dibawah ini :

<a href="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img class="corner iradius16" border="0" height="200" src="http://2.bp.blogspot.com/_JhWRxKBSF24/TDKfqOChMnI/AAAAAAAABoA/Hiwyx6SbXNU/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

kode yang berwarna merah adalah kode yang disisipkan diantara kode gambar dalam postingan sobat, sisipkan setelah kode <img . Lalu terbitkan entri postingan sobat, dan lihat hasilnya.

Itu salah satu contoh dari Effect Image Corner, lantas bagaimana dengan contoh Effect Image Corner yang lainya ?? Perhatikan demo dari Effect Image Corner !!

Untuk masing-masing effect pada demo Effect Image Corner tersebut memiliki kode yg berbeda-beda, dan inilah kode dari masing-masing effect tersebut :

Effect Image Corner 1

class="corner iradius16"

Effect Image Corner 2

class="corner iradius24 ishadow33 inverse"

Effect Image Corner 3

class="corner iradius20 ishadow33"

Effect Image Corner 4

class="corner iradius32 ishade50 ishadow25"

Effect Image Corner 5

class="corner iradius48 ishade33"

Sama seperti Langkah 4, sisipkan salah satu kode diatas pada kode gambar sesuai dengan effect yang di inginkan.

Kini sobat dapat menampilkan Image dalam postingan dengan Effect yang mengesankan tanpa harus editing gambar dulu melalui Photoshop dan teman-teman nya.. dan ane yakin setelah ini para ahli editing/design photo akan kehabisan job.. wkwkwkwk.. :D. karena ada cara yg lebih simple mengedit gambar seperti contoh diatas.

Selesai.
Semoga bermanfaat dan selamat berkreasi.

Ga Jadi di Hapus

noreply@blogger.com (Girant_31) — Tue, 06 Jul 2010 17:33:00 +0000

Alhamdulillahirobbil'alamin...

Thanks God..

Thanks mBah Google..

Setelah kerja keras selama 3 jam..

Bingung, apa yg harus dilakukan..

Berawal dari jam 21:00 WIB.
Blog Girant_31 secara tidak sengaja tidak bisa menampilkan komentar yg sudah masuk dari sobat Girant_31 semuanya, padahal laporan di eMail ane sudah ada..

Jam 21:30 WIB.
Girant_31 bertanya kesana kemari guna mencari tau apa yg terjadi..

Jam 21:50 WIB.
Tak ada masalah yang tak ada solusi, blog Girant_31 dapat menampilkan semua komentar sahabat Girant_31 semuanya.. dengan catatan 3 menit kemudian . . . . . . . . . .

Jam 22:07 WIB.
blog Girant_31 dihapus/di non aktifkan tanpa sebab.

Jam 22:07 - 22:30 WIB.
Bingung.

Jam 22:30 - 22:45 WIB.
Girant_31 bertanya kesana kemari guna mencari tau apa yg terjadi.. (Part 2)
dan tak ada yg menjawab..

Jam 22:45 - 23:59 WIB.
Merengek ke mBah Google..
"Plis mBah.. beri ane kesempatan sekali lagi.. sebentar saja pun tak apa-apa untuk sekedar membeck-up semua akun blog ane.. plisssss.. ".

Jam 24:00 - 00:03 WIB.
mBah Google mikir keras..
Semenit kemudian, si mBah menanyakan No HP ane..

Mulai genit neg si mBah.. :D
Karena lagi ngerayu, ta kasih tuh No HP.
dan secepat kilat si mBah memberi kode verifikasi (padahal ane berharapnya sih kode voucher pulse or apa gitu..). dg no : 79xxx.

Jam 00:04 WIB lebih sedikit.

HOREEEEEEEEEEEEEEEEEEEEEE...

http://agoezimoetz.blogspot.com/

(Girant_31 blog)

bisa di akses lagi..

Thanks God..

Thanks mBah Google..

Thanks juga bt Semuanya..

Mohon Maaf jika para Sahabat yang sudah ane tanya,

dan dikemudian waktu atau sudah kemari,

dan blog ini ternyata

tidak dihapus/di nonaktifkan.

Sungguh ini bukan rekayasa, tapi ini nyata,

dan akhirnya Girant_31 blog dapat diakses lagi

dan dapat berbagi lagi dengan sobat semua..

Thanks buat semuanya..

Button Shapes CSS3

noreply@blogger.com (Girant_31) — Tue, 06 Jul 2010 15:28:00 +0000

Sedikit mengenal CSS3, kali ini kita kupas tentang macam-macam button css3.
ditambah sedikit fungsi hover agar terkesan lebih menarik.
mari kita liahat contoh-contohnya :

Demo Button Shapes CSS3Klik disini untuk melihat demo Button Shapes CSS3

Untuk menerapkan pada blog kita, sebenarnya cukup dengan 2 cara..
Yaitu :

LANGKAH 1
Masukan kode CSS dibawah ini pada Rancangan Edit HTML blog sobat,
tepatnya diatas kode ]]></b:skin>

.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .6em 2em .6em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.besar { font-size:16px; }
.kecil { font-size:9px; }
.lonjong { -webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em; }
.persegi { -webkit-border-radius: .0em;
-moz-border-radius: .0em;
border-radius: .0em; }
.kotak { padding: 2.5em 2em 2.5em; }
.bulat { -webkit-border-radius: 4em;
-moz-border-radius: 4em;
border-radius: 4em; 
padding: 2.5em 1.8em 2.5em; }
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f7941d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top,  #f88e11,  #f06015);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Save template, lalu berlanjut ke langkah selanjutnya.

LANGKAH 2
Jika ingin menampilkan didalam postingan, maka masukan kode pemanggil Button dibawah ini,
dan masukan ke halaman posting dengan mode Edit HTML.
tapi jika ingin menampilkan nya di sidebar, maka pilihlah add gadget HTML/Java Script untuk memasukan
kode pemanggilnya.

dan inilah kode pemanggil Button tersebut :
Untuk Button jenis Besar

<a href="#" class="button orange besar">Besar</a>

Untuk Button jenis Sedang

<a href="#" class="button orange">Sedang</a>

Untuk Button jenis Kecil

<a href="#" class="button orange kecil">Kecil</a>

Untuk Button jenis Kotak

<a href="#" class="button orange kotak">Kotak</a>

Untuk Button jenis Bulat

<a href="#" class="button orange bulat">Bulat</a>

Untuk Button jenis Lonjong

<a href="#" class="button orange lonjong">Lonjong</a>

Untuk Button jenis Persegi Panjang

<a href="#" class="button orange persegi">Persegi Panjang</a>

Ganti kode yang berwarna merah dengan URL link yang sobat tuju.

Source Code Button Shapes CSS3Klik disini untuk mengambil source code Button Shapes CSS3

Tergantung semua selera sobat ingin memakai jenis button apa..
kalo mau digunakan semua jenisnya pun, monggo..
tidak ada larangan. bahkan kalo sobat sudah mengerti CSS,
tinggal sobat rubah saja warna or bentuknya, sesuai dengan selera sobat.

Untuk mengetahui jenis Button,
Silahkan lihat demonya
terlebih dahulu.

Ok, jika langkah-langkah diatas sudah dijalankan sesuai aturan,
maka setelah itu, lihatlah hasil nya..
menarik bukan ??

cukup sekian dari ane..
semoga bermanfaat..

Ini baru jenis Shapes dari banyak contoh button CSS3.. Selanjutnya, Insya Allah kita bahas jenis lain nya.. Penasaran seperti apa jenis Button selanjutnya??!! Tongkrongin az terus disini.. :D

Message Plus Plus

noreply@blogger.com (Girant_31) — Sat, 03 Jul 2010 15:32:00 +0000

Message Plus Plus ini adalah merupakan berbagai bentuk pesan dalam postingan.
Pesan yang secara otomatis terpasang apabila kita panggil kode/script pesan tersebut.
Seperti pesan warning dibawah ini :

Bukan Plus Plus Sebenarnya

itu adalah salah satu bentuk pesan yg ane buat.
dan itu cukup dengan memanggil kode/script yg sudah ane pasang ditemplate blog ini,
tanpa harus membuat seperti itu seketika setiap memposting.

Ni dia contoh-contoh bentuk Message Plus Plus yg sudah ane design.
yang nantinya tergantung selera sobat semua mengembangkan nya..
tinggal diatur az kode/script CSS nya..

Info Message

Sukses Message

Warning Message

Error Message

Ok.. langsung az ke cara pembuatan nya..

LANGKAH 1
Masukan kode/script dibawah ini diatas ]]></b:skin>
pada halaman Rancangan, Edit HTML blog sobat.

.info, .sukses, .warning, .error {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url(http://lh3.ggpht.com/_JhWRxKBSF24/TC25OtPjFLI/AAAAAAAABdY/wdQdqdHUG74/Info-box-blue-32.png);
}
.sukses {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url(http://lh3.ggpht.com/_JhWRxKBSF24/TC25OuU7ZeI/AAAAAAAABdQ/duw0AwA1zDQ/Checked-shield-green-32.png);
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url(http://lh4.ggpht.com/_JhWRxKBSF24/TC25O7vXrwI/AAAAAAAABdc/vjYSwjfdVCo/Warning-32.png);
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url(http://lh6.ggpht.com/_JhWRxKBSF24/TC25ObPXlaI/AAAAAAAABdM/yXTRQvXPR3Q/Cancel--red-32.png);
}

Pada kode/script diatas terdapat :
background-color: #FEEFB3;
kode/script berwarna merah adalah kode warna HTML, Sesuaikan saja dengan kode warna kesayangan sobat.

background-image: url(http://lh4.ggpht.com/_JhWRxKBSF24/TC25O7vXrwI/AAAAAAAABdc/vjYSwjfdVCo/Warning-32.png);
dan kode/script berwarna biru adalah URL gambar, bisa sobat ganti dengan URL gambar punya sobat.
tapi disarankan yg berukuran 32 x 32 pixel, agar sesuai dengan ukuran Message diatas.

LANGKAH 2
Masukan kode/script pemanggil dibawah ini kedalam postingan, pada mode edit HTML.
Perhatikan bentuk-bentuk message dan kode/script nya satu persatu.

<div class="info">Info message</div>

<div class="sukses">Sukses message</div>

<div class="warning">Warning message</div>

<div class="error">Error message</div>

kode/script yang dicetak tebal adalah isi pesan dari tiap masing-masing message.
Rubahlah sesuai kehendak sobat.

Seandainya sobat ingin menampilkan type Message Warning, maka kodenya seperti ini :
<div class="warning">Warning message</div>
Warning message adalah isi pesan nya.

Begitu juga seterusnya.
Sesuaikan masing-masing kode/script dengan bentuknya, seperti contoh diatas.

LANGKAH 3
Simpan dan terbitkan postingan.
Lihat hasilnya..
Cukup menarik kan ??

Silahkan sobat kembangkan lagi kode/script Message Plus Plus diatas.

Personally I dont think this is the right way to do it,

if you have better ideas to develop it, please comment !!

Selesai.
Selamat mencoba dan semoga berhasil dan bermanfaat.

Oiya.. ada yg lupa..

Menu blog Girant_31 sekarang baru loh !!

Setelah kemarin2 menggunakan menu yg berkapasitas berat bangets,
sekarang lumayan (ga kalah beratnya jg sih.. wkwkwk..).
dengan tidak menghilangkan fungsi dari menu yg kemarin,
masih ada Link Home, Tips n Trick, Archive, Info Author, Forum (Guest Book) dll.
pengen tau seperti apa??

Letakan cursor sobat di atas Header blog ini !!

That's not Header or Banner.. That's a Menu !!

Final Effect tulisan 3D

noreply@blogger.com (Girant_31) — Tue, 29 Jun 2010 04:16:00 +0000

Masih ingat dengan artikel blog ini tentang Effect Tulisan 3D dengan CSS3 ??
dimulai dari part 1 trus dilanjut dengan part 2 nya..

Kini Final dari effect kedua trik tersebut ditambah satu effect lagi,
yang akhirnya membentuk sebuah kubah 3D seperti ini.

Atau bisi dilihat demo nya.

Demo Final Effect tulisan 3DKlik disini untuk melihat demo Final Effect tulisan 3D

Sama halnya dengan trik sebelumnya, point penting nya hanya membulak-balik posisinya saja.
dengan mengatur SkewY dan SkewX nya, ditambah penempatan satu bentuk sisi lagi diatasnya.

Agar lebih mudah difahami baca lagi artikel blog ini tentang Effect tulisan 3D sebelumnya part 1 trus dilanjut dengan part 2 nya.

bagi yang sudah menerapkan trick ini sebelumnya,
ane sarankan agar menghapus kode/script yg sudah dipakai,
agar memudahkan dalam pengimplementasian nantinya.

Langkah 1
Masukan kode/script dibawah ini di atas kode ]]></b:skin>
pada halaman Rancangan Edit HTML.

.cube {
        position: relative;
        top: 80px;
}
.rightFace,
.leftFace,
.topFace div {
        padding: 10px;
        width: 180px;
        height: 180px;
}
.rightFace,
.leftFace,
.topFace {
        position: absolute;
}
.leftFace {
        -webkit-transform: skewY(30deg);
        -moz-transform: skewY(30deg);
        background-color: #EEFC9B
}
.rightFace {
        -webkit-transform: skewY(-30deg);
        -moz-transform: skewY(-30deg);
        background-color: #9BFCDD;
        left: 200px;
}
.topFace div {
        -webkit-transform: skewY(-30deg) scaleY(1.16);
        -moz-transform: skewY(-30deg) scaleY(1.16);
        background-color: #FC9BFB;
        font-size: 0.862em;
}
.topFace {
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        top: -158px;
        left: 100px;
}

Langkah 2
Save template sobat, lalu masuk ke halaman Rancangan Elemen Laman.
dan tambahkan gadget HTML/Java Script jika sobat ingin memasang Effect tulisan 3D ini di sidebar.
dan jika sobat ingin memasang nya di postingan, sobat masuk pada kolom Edit HTML untuk menaruh kode nya.
Dan inilah kode pemanggil dari kode diatas yang sudah dipasang :

<div class="cube">
<div class="topFace">
<div>
Isi conten dari sisi atas
</div>
</div>
<div class="leftFace">
Isi conten dari sisi kiri
</div>
<div class="rightFace">
Isi conten dari sisi kanan
</div>
</div>

Isikan conten yang sobat kehendaki dengan mengganti tulisan/kode diatas pada
Baris 4 untuk isi conten di sisi atas.
Baris 8 untuk isi conten di sisi kiri.
Baris 11 untuk isi conten di sisi kanan.

Langkah 3
Save.. lalu lihat hasilnya.
Effect nya akan membentuk sebuah kubah 3D.

Source Code Final Effect tulisan 3DKlik disini untuk mengambil source code Final Effect tulisan 3D

Oya sobat juga dapat berkreasi sendiri dengan mengedit atau mengutak atik kode CSS nya
pada langkah pertama, baik itu kode warna, ukuran widht atau pun yang lain nya.

Selamat mencoba dan berkreasi..
Semoga bermanfaat.

Specials For You

noreply@blogger.com (Girant_31) — Fri, 25 Jun 2010 09:09:00 +0000

Setelah melihat grafik diatas, ternyata benar prediksi ane slama ini..
Bahwa tidak ada yg bermutu di blog ini.. !!

Hampir seminggu lebih sengaja berdiam diri,
Kini ane tau kelebihan dan kekurangan blog ini..

Mudah-mudahan ini menjadi motifasi untuk lebih segalanya tuk kedepan nya.. Amiin.

Dan untuk semua yg masih sempet nyempetin kemari Karena isi dari blog ini,
Bukan karena merasa memiliki hutang kunjungan,

Terimakasih banyak buat semuanya..

This Specials For YouKlik disini untuk melihat Something From Me

Jenuh

noreply@blogger.com (Girant_31) — Sat, 19 Jun 2010 17:08:00 +0000

Ada yg tau ga Obat jenuh tuh apa ??

Dan beli nya dimana??

Plis.. Help Me.. !!

Untuk membuat tulisan seperti diatas secara otomatis

Ni dia kodenya sob :

<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">Ane Jenuh ");
document.write("</h" + i + ">");
}
</script>

Masukan az langsung ke dalam postingan.

Effect Tulisan 3D dengan CSS3 Part2

noreply@blogger.com (Girant_31) — Fri, 18 Jun 2010 00:57:00 +0000

Gimana sob dg Effect Tulisan 3D dengan CSS3 yg kemarin??
Ada yg kepikiran ga gmn caranya kalow Effect Tulisan 3D dengan CSS3,
yg kemarin, skew atau bentuk nya dibalik??

Gimana caranya??
Langsung az dech ya..
Ada penambahan sedikit kode, agar tidak merusak penggunaan Effect Tulisan 3D dengan CSS3
yg kemarin.

Contohnya seperti ini :

INI ADALAH CONTOH TULISAN YG DITAMPILKAN PADA EFFECT 3D PART 2 INI ADALAH CONTOH TULISAN YG DITAMPILKAN PADA EFFECT 3D PART 2 INI ADALAH CONTOH TULISAN YG DITAMPILKAN PADA EFFECT 3D PART 2

Atau Lihat Demo nya :

Demo Effect 3D dg CSS3 Part 2Klik disini untuk melihat demo Effect Tulisan 3D dengan CSS3 Part 2

Gimana ??

Ni die sob kode yg ditambahkan nya :

Langkah 1
Pada penempatan kode diatas ]]></b:skin> pada halaman tata letak / rancangan edit HTML.
yg kemarin, tambahkan kode dibawah ini dibawah kode yg kemarin.

.cuby 
{padding: 10px;
width: 180px;
height: 180px;
margin:10px 10px 10px 10px;
}
.rightFace div {
width: 180px;
height: 180px;
padding:10px 10px 10px 10px;
}
.rightFace {
-webkit-transform: skewY(-30deg);
-moz-transform: skewY(-30deg);
background-color: #ddd;
}

Langkah 2
Save template dan masukan ke Lemari dech sekarang mah. :D

Langkah 3
Nah untuk kode pemanggil yg diterapkan di Postingan or di Sidebar.

Caranya, ganti kode yg kemarin dg kode dibawah ini :

<div class="cuby">
<div class="rightFace">
TULISAN YG AKAN DITAMPILKAN
</div>
</div>

Ganti kode TULISAN YG AKAN DITAMPILKAN dengan tulisan yg sobat inginkan tentunya.

Langkah 4
Save dan terbitkan..
Lalu lihat hasilnya.

Selesai dech memuat Effect Tulisan 3D dengan CSS3 Part2
Berbeda kan hasilnya dg membuat Effect Tulisan 3D dengan CSS3 seperti yg kemarin??

Kuncinya hanya di leftFace dan rightFace az sob..
juga penambahan [ - ] pada posisi skew pada kode Effect Tulisan 3D dengan CSS3 yg sebelumnya.

Selamat mencoba dan semoga bermanfaat.

Effect Tulisan 3D dengan CSS3

noreply@blogger.com (Girant_31) — Wed, 16 Jun 2010 06:18:00 +0000

Waduh maaf neg bt sobat semua..
Ane telat updat.. Ane Lupa neg.. :D

Langsung az dech ya..

Kali ini ane akan sedikit share tentang membuat Effect Tulisan 3D dg CSS3.
Contohnya seperti ini :

INI ADALAH CONTOH TULISAN YG DITAMPILKAN PADA EFFECT 3D INI ADALAH CONTOH TULISAN YG DITAMPILKAN PADA EFFECT 3D INI ADALAH CONTOH TULISAN YG DITAMPILKAN PADA EFFECT 3D INI ADALAH CONTOH TULISAN YG DITAMPILKAN PADA EFFECT 3D

Atau Lihat Demo nya :

Demo Effect Tulisan 3D dengan CSS3Klik disini untuk melihat demo Effect Tulisan 3D dengan CSS3

Gimana sobat semua ??
Menarik kan???

Langsung az ke cara membuatnya.

Langkah 1
Cari kode ]]></b:skin> pada halaman tata letak / rancangan edit HTML.
Letakan kode dibawah ini tepat diatasnya.

.cube 
{padding: 10px;
width: 180px;
height: 180px;
margin:50px 10px 10px 10px;
}
.leftFace div {
padding: 10px;
width: 180px;
height: 180px;
padding:10px 10px 10px 10px;
}
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #ccc;
}

Langkah 2
Save template dan masukan ke gudang. :D

Langkah 3
Untuk mengimplementasikan nya (jiaaah gaya).
Sobat bisa langsung menerapkan di sidebar ataupun di postingan..
Suka-suka sobat az mw dmn.

Caranya :
Masukan kode dibawah ini pada postingan ataupun di sidebar.
Hanya saja untuk menerapkan di postingan, sobat Wajib menggunakan kolom Edit HTML.

<div class="cube">
<div class="leftFace">
TULISAN YG AKAN DITAMPILKAN
</div>
</div>

Ganti kode TULISAN YG AKAN DITAMPILKAN dengan tulisan yg sobat inginkan.

Langkah 4
Save dan terbitkan..
Lalu lihat hasilnya.

Selesai.
Selamat mencoba dan semoga bermanfaat.

Menu Image CSS

noreply@blogger.com (Girant_31) — Sun, 13 Jun 2010 11:24:00 +0000

Udah pusing neg sama js..
Sedikit beralih ke CSS neg..

Kali ini ane akan share tentang Menu Image CSS.. (Apa tuh??)
Menu Image CSS ini adalah merupakan menu Vertical kalo dilihat dari bentuknya sih..
Tapi kalo dilihat dari penataan kode/scriptnya, Menu Image CSS ini
lebih ke Eksplorerisasi dari effect gambar az..

Penasaran kaya gimana bentuknya ???

Atau langsung lihat demo nya :

Demo Menu Image CSSKlik disini untuk melihat demo Menu Image CSS

Gimana ?? ada yg tertarik ?? (Layangan kalee..)
Begini neg sob cara membuatnya :

Langkah 1
Cari kode ]]></b:skin> pada Rancangan Edit HTML akun blog sobat.
Letakan kode dibawah ini diatas kode tersebut.

#menu {
 list-style: none;
        color: #FFFFFF;
 width: 450px;
 height: 493px;
 background: url("http://lh3.ggpht.com/_JhWRxKBSF24/TBTBuhUwfDI/AAAAAAAABLU/OvLih_RmqlU/bg22.jpg") no-repeat;
 position: relative;
}
#menu span {
 display: none;
 position: absolute;
}
#menu a {
 display: block;
 text-indent: -900%;
 position: absolute;
 outline: none;
}
#menu a:hover {
 background-position: left bottom;
}
#menu a:hover span{
 display: block;
}
#menu .home {
 width: 210px;
 height: 54px;
 background: url("http://lh3.ggpht.com/_JhWRxKBSF24/TBCRxDmy7kI/AAAAAAAABJg/JTZqCk8itwc/home.png") no-repeat;
 left: 46px;
 top: 133px;
}
#menu .home span {
 width: 150px;
 height: 60px;
 background: url("http://lh6.ggpht.com/_JhWRxKBSF24/TBCRxHUJR6I/AAAAAAAABJk/co025iNwRZ0/home-over.png") no-repeat;
 left: 210px;
 top: -25px;
}
#menu .design {
 width: 210px;
 height: 54px;
 background: url("http://lh6.ggpht.com/_JhWRxKBSF24/TBCRo_v6ybI/AAAAAAAABJQ/Jjy76nuvd4Q/design.png") no-repeat;
 left: 55px;
 top: 197px;
}
#menu .design span {
 width: 180px;
 height: 40px;
 background: url("http://lh6.ggpht.com/_JhWRxKBSF24/TBCRo8TShbI/AAAAAAAABJU/01exMDitwUU/design-over.png") no-repeat;
 left: 184px;
 top: 10px;
}
#menu .tut {
 width: 210px;
 height: 55px;
 background: url("http://lh6.ggpht.com/_JhWRxKBSF24/TBCRxXYMX6I/AAAAAAAABJo/J1NSSD8Df2A/tutorials.png") no-repeat;
 left: 60px;
 top: 260px;
}
#menu .tut span {
 width: 180px;
 height: 40px;
 background: url("http://lh6.ggpht.com/_JhWRxKBSF24/TBCR3Rc42mI/AAAAAAAABJs/uCrOgr6EK7c/tutorials-over.png") no-repeat;
 left: 206px;
 top: -10px;
}
#menu .rss {
 width: 210px;
 height: 53px;
 background: url("http://lh5.ggpht.com/_JhWRxKBSF24/TBCRwzedqBI/AAAAAAAABJY/-i__vznz58k/feed.png") no-repeat;
 left: 70px;
 top: 325px;
}
#menu .rss span {
 width: 130px;
 height: 30px;
 background: url("http://lh4.ggpht.com/_JhWRxKBSF24/TBCRw7bEhcI/AAAAAAAABJc/HnmnRdZqqJI/feed-over.png") no-repeat;
 left: 200px;
 top: 0px;
}

Silahkan sobat ganti URL gambar-gambarnya, dengan gambar yg sobat inginkan..

Langkah 2
Save template.

Langkah 3
Tambahkan kode dibawah ini pada Halaman Add Gadget HTML / Java Script

<ul id="menu">
<li><a class="home" href="LINK">Home<span></span></a></li>
<li><a class="design" href="LINK">About<span></span></a></li>
<li><a class="tut" href="LINK">Aboits<span></span></a></li>
<li><a class="rss" href="LINK">RSS<span></span></a></li>
</ul>

Ganti tulisan LINK dengan URL Link yg akan sobat tuju.

Source Code Menu Image CSSKlik disini untuk mengambil semua source code Menu Image CSS

Langkah 4
Save template sobat dan lihat hasilnya.

Langkah 5
Selesai

Selamat mencoba dan semoga bermanfaat.

Menu Nongol a Hover

noreply@blogger.com (Girant_31) — Fri, 11 Jun 2010 14:00:00 +0000

Judul yang aneh.. hehe..

Bicara jQuery memang tidak bakalan ada habisnya..
Maklum ane lagi seneng-seneng nya ngutak-atik jQuery neg..
Setelah bereksperimen, jadi juga neg Menu Nongol a Hover.. (apa jeh..).

Menu Nongol a Hover ini adalah seperti Accordion All In Widget yg sudah ane bahas dahulu..
Bedanya Menu Nongol a Hover ini tanpa Click loh..
Cukup kita lewati dg Cursor Mouse, maka akan muncul keseluruhan menunya.

Penasaran???
Mari kita lihat demonya..

Demo Menu Nongol a HoverKlik disini untuk melihat demo Menu Nongol a Hover

Atau sobat bisa lihat langsung di sidebar blog ane ini, di widget Statistic..
Lewati dg cusror sobat ke arah salah satu yg terdapat di widget Statistic tersebut,
Lihat apa yg terjadi ???
Akan muncul seperti gambar diatas..
Mengerti kan maksud dari Menu Nongol a Hover ini??

Ok kalo sudah mengerti, ini die cara membuatnya :

Langkah 1
Sediakan kompor, kewali, panci dll.. (Mari kita masak..!! Hahaha..).

Serius-serius..
Seperti biasa cari kode ]]></b:skin> pada halaman Tata Letak - Edit HTML
Lalu letakan kode dibawah ini diatas nya.

ol {
        height:30px;
        width:255px;
        overflow:hidden;
        color: #fff;
        text-decoration: none;
 font-size:12px;
        font-weight: bold;
        line-height: 1;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       -moz-box-shadow: 0 1px 3px #999;
       -webkit-box-shadow: 0 1px 3px #999;
       text-shadow: 0 -1px 1px #222;
       border-bottom: 1px solid #222;
       padding: 8px 10px 6px;
       margin-top:5px;
       background-color:#a447cf;
}
ol p {
       margin-top:5px;
       padding-top:15px;
       font-size:12px;
       color:#6CF;
}

Langkah 2
Cari kode </head>
Lalu letakan kode di bawah ini diatas nya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Catatan :
Bagi sobat yang pernah menambahkan atau ditemplate sobat
sudah terdapat kode JQuery seperti di atas,
maka langkah kedua abaikan saja.

Langkah 3
Kemudian tambahkan pula kode dibawah ini,
dibawah kode JQuery tadi (pd Langkah 2)

<script src='http://daftarisi-girant.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    //When Mouse rolls over ol
    $(&quot;ol&quot;).mouseover(function(){
        $(this).stop().animate({height:&#39;60px&#39;},{queue:false, duration:600, easing: &#39;easeOutBounce&#39;})
    });
    //When Mouse cursor removed from ol
    $(&quot;ol&quot;).mouseout(function(){
        $(this).stop().animate({height:&#39;30px&#39;},{queue:false, duration:600, easing: &#39;easeOutBounce&#39;})
    });
});
</script>

Langkah 4
Simpan template kedalam Lemari sobat.. hehe..

Langkah 5
Tambahkan kode dibawah ini pada Add a Gadget HTML / Java Script

<div id="vnav">
<ul>
<ol><h1>Home</h1><p>Rumah</p></ol>
<ol><h1>About Me</h1><p>Tentang Saya</p></ol>
<ol><h1>Black</h1><p>Artinya Hitam</p></ol>
<ol><h1>Red</h1><p>Artinya Merah</p></ol>
</ul>
</div>

Kode yg berwarna Merah adalah Judul yg akan ditampilkan otomatis.
Ganti dg judul sesuai kehendak sobat.
Kode yg berwarna Biru adalah Keterangan yg disembunyikan,
dan akan tampil hanya bila dilewati oleh cursor sobat.
Ganti juga sesuai keinginan sobat.

Source Code Menu Nongol a HoverKlik disini untuk mengambil semua source code Menu Nongol a Hover

Langkah 6
Save dan lihat hasilnya.
Gimana?? Ok kan???

Nb.
Jika hasilnya tidak sesuai, mungkin ukuran font yg terlalu lebar, Warna, atau yg lain nya..
Trick nya, Sobat utak atik az lagi pada Padding, Background-color, Font-size
dan yang lain nya pada kode Langkah 1.

Sekian cuap-cuap ane kali ini..
Semoga berhasil dan Semoga bermanfaat.

Situs SMS Gratis

noreply@blogger.com (Girant_31) — Wed, 09 Jun 2010 14:00:00 +0000

Mungkin sudah banyak yg tw ya sebagian dari sobat blogger semua..
Tapi ga ada salahnya ane ingatkan kembali (Lumayan bt updae postingan.. hehe..)

Lumayan juga bisa membantu disaat tidak punya pulsa..

Ni die sob beberapa situs penyedia sms gratis..
Ane sdh coba semuanya, dan Alhamdulillah cuman satu yg berhasil.. xixixi..
yg lain nya lg error gitu sih katanya..

1. Free SMS 4 Us

Langsung Ke TKPKlik disini untuk mengunjungi situs freesms4us

Untuk mengirim sms nya, lihat tulisan Click 45.. nah disebelah kirinya jg ada angka 45 kan??
Click / Tekan yg angka 45 untuk mengirim sms, bukan yg tulisan Click 45.

2. ISMSC

Langsung Ke TKPKlik disini untuk mengunjungi situs ISMSC

3. Free SMS to All

Langsung Ke TKPKlik disini untuk mengunjungi situs Free SMS to All

4. Free SMS Service

Langsung Ke TKPKlik disini untuk mengunjungi situs Free SMS Service

Dan Masih banyak lagi..

Ok khan sob??

Sekian dulu dari ane..
Semoga bermanfaat..

Girant_31

Template Girant News

Shirenia Violla Putri

Selamat Idul Fitri

Meniti hari menabur khilaf
Menyongsong fitri menuai maaf

Semoga tiada tersisa khilaf dan dosa

Taqabbalallahu Minna Wa Minkum
Shiyamana Wa Shiyamakum

Minal Aidin Walfaidzin
Mohon Maaf Lahir & Batin

Selamat Idul Fitri

Elastis Effect Thumbnail Membesar

Different Background Post

Auto Caption pada Gambar

Tooltips Menu Hover

Windows 7 Star Menu

Neon Text Color jQuery

Tab Vanilla Slick

Button Gradient CSS3

Effect Image Corner

Ga Jadi di Hapus

Button Shapes CSS3

Message Plus Plus

Final Effect tulisan 3D

Recent Posts Accordion

Specials For You

Recent Post News Scrolling

Jenuh

Effect Tulisan 3D dengan CSS3 Part2

Effect Tulisan 3D dengan CSS3

Menu Image CSS

Menu Nongol a Hover

Situs SMS Gratis

Girant_31

Template Girant News

Shirenia Violla Putri

Selamat Idul Fitri

Meniti hari menabur khilaf Menyongsong fitri menuai maaf

Semoga tiada tersisa khilaf dan dosa

Taqabbalallahu Minna Wa Minkum Shiyamana Wa Shiyamakum

Minal Aidin Walfaidzin Mohon Maaf Lahir & Batin Selamat Idul Fitri

Elastis Effect Thumbnail Membesar

Different Background Post

Auto Caption pada Gambar

Tooltips Menu Hover

Windows 7 Star Menu

Neon Text Color jQuery

Tab Vanilla Slick

Button Gradient CSS3

Effect Image Corner

Ga Jadi di Hapus

Button Shapes CSS3

Message Plus Plus

Final Effect tulisan 3D

Recent Posts Accordion

Specials For You

Recent Post News Scrolling

Jenuh

Effect Tulisan 3D dengan CSS3 Part2

Effect Tulisan 3D dengan CSS3

Menu Image CSS

Menu Nongol a Hover

Situs SMS Gratis

Meniti hari menabur khilaf
Menyongsong fitri menuai maaf

Taqabbalallahu Minna Wa Minkum
Shiyamana Wa Shiyamakum

Minal Aidin Walfaidzin
Mohon Maaf Lahir & Batin

Selamat Idul Fitri