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.
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.
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.
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.
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWb8LVy3KXnbot0KZHUpx8kYC0ptdy9XFky1ZxWhtNIQ1kBaHuv-PWe5iUMaqOLxpOw5s_kUBKSzVqvqXjnPBRBwhT36AISeP5yP_MC8DgVU43A2hRKAz5FCE4zZEcZYRceQZhfjFCwNuc/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWb8LVy3KXnbot0KZHUpx8kYC0ptdy9XFky1ZxWhtNIQ1kBaHuv-PWe5iUMaqOLxpOw5s_kUBKSzVqvqXjnPBRBwhT36AISeP5yP_MC8DgVU43A2hRKAz5FCE4zZEcZYRceQZhfjFCwNuc/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.
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 ??
Terciptalah secara otomatis Auto Caption pada Gambar di postingan sobat.
menarik bukan ??
Selesai.
Selamat mencoba dan semoga bermanfaat.
Selamat mencoba dan semoga bermanfaat.
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 !!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 :
 | |
| |
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.
Cara menerapkan di blog :
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.
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img class="corner iradius16" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/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.
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..
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 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 :
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..
Ok.. langsung az ke cara pembuatan nya..
LANGKAH 1
Masukan kode/script dibawah ini diatas ]]></b:skin>
pada halaman Rancangan, Edit HTML blog sobat.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ9CaxZbgB0PQI0Dnj1dlBZD_dDCZnN8U84m_IpRTOE4wbV_01cxgU9PzuTZrTtNOunCC-rwIBCReZBXtmgZyiDnJjFEDrP8plt1CwvABx32bX5xutIEyTmMBNOayRLECN3DvbSgIFfl4/);
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.
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.
Selesai.
Selamat mencoba dan semoga berhasil dan bermanfaat.
Oiya.. ada yg lupa..
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 !!
More►►
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.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_dGRprDHEZC9_VNgghdasRbiG4AFNqrB86wyuJ0n0jnRfm_8L1MhUM-k_8wEwyAHTgZXtDAo0MvYet5Sbjue32TXJRpkUPuXUHIgUiQA48pamIP6-pLUh5eCitx1jfJ9H2ahHS1Jid8c/);
}
.sukses {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQOTDaG2d2VSkyRZFVdP0PNXOBezhHQ3w2cIVcYEots2l-7LMP4zga4SBOH4FI_scIOKyTI418wB2ya0gB4qp_L_CnLtJKplon0d3AO1zH_nDuz5sLWbxchfpdSbeywJ-J5l6xQQSsCrE/);
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ9CaxZbgB0PQI0Dnj1dlBZD_dDCZnN8U84m_IpRTOE4wbV_01cxgU9PzuTZrTtNOunCC-rwIBCReZBXtmgZyiDnJjFEDrP8plt1CwvABx32bX5xutIEyTmMBNOayRLECN3DvbSgIFfl4/);
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUE49EVaSlSK7b282fxKDtE6ak97axn6BR9FcnSfotjMEZ7evkg7I3sPCDxUvQmuE-wwix7lMI1F-_eWuI8_hK-02zObd6p_WB4ZH6UAmq7S7GLx9RqUqpl-2u3-0KSzZ_hvHOvhlKZ0/);
}
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ9CaxZbgB0PQI0Dnj1dlBZD_dDCZnN8U84m_IpRTOE4wbV_01cxgU9PzuTZrTtNOunCC-rwIBCReZBXtmgZyiDnJjFEDrP8plt1CwvABx32bX5xutIEyTmMBNOayRLECN3DvbSgIFfl4/);
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 !!
Girant_31
My Picture
My Code
Contact
Chat Room
RSS Feeds
Twitter
Facebook
