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.


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.


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.

Alhamdulillah masih diberi nikmat semangat..
Semoga nikmat ini memotifasi diri ini untuk selalu bersyukur Kepada-Nya..
Amin..

Mengulas recent posts atau artikel terbaru dan berbagai macam bentuk dan kreasinya,
kali ini ane akan berbagi model recent posts generasi ke (mungkin) 206.. karena sangking banyaknya..
yaitu recent post accordion..

Bingung ?? langsung saja lihat demonya..


Selain dapat menampilkan artikel terbaru dari semua artikel blog kita, juga dapat menampilkan
artikel berdasarkan category yang kita inginkan.
Selain itu dapat juga menampilkan artikel-artikel blog teman kita di blog kita..

Cara memasang nya cukup mudah..
Hanya dengan memasukan semua kode/script dibawah ini ke sebuah gadget HTML/Java Script

Kode/Script 1

<style type="text/css">
#acrec-post{
 font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
 background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;
 padding:2px 0;
 border:1px solid #339DC6;
}
.acrecpost-label{
 background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
 font-weight:bold;
 line-height:1.4em !important;
 overflow:hidden;
 vertical-align: baseline;
 margin: 1px 3px;
 outline: none;
 cursor: pointer;
 text-decoration: none;
 padding: 2px 10px;
 color: #FFF;
 text-shadow: 0 1px 1px rgba(0,0,0,.3);
 border:1px solid #2F94BA;
}
.acrecpost-label:hover{
 background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
 color:#003366;
}
#acrecpost{
 overflow:hidden;
 line-height:1.3em;
 margin:1px 3px !important;
 padding:2px !important;
 border:1px solid #339DC6;
 background-color:#FFF;
}
#acrecpost li{
 height:65px;
 padding:5px;
 list-style:none;
}
#acrecpost .news-title{
 display:block;
 font-weight:bold;
 margin-bottom:4px;
 font-size:11px;
}
#acrecpost .news-text{
 display:block;
 text-align:justify;
 padding:0 5px 0 70px;
}
#acrecpost a{
 text-decoration:none !important;
 color:#FF0000;
}
#acrecpost img{
 float:left !important;
 margin-right:5px !important;
 padding:4px !important;
 border:solid 1px #339DC6;
 width:55px !important;
 height:55px !important;
}
</style>

Terus.. tambahkan kode dibawah ini tepat dibawah kode diatas..

Kode/Script 2

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

Script diatas adalah merupakan script loader framework jQuery, jika sobat sudah pernah
memasangnya pada template sobat, maka Kode/Script 2 diatas tidak perlu disertakan..

Kode/Script 3
Tambahkan kode/script dibawah ini setelah script diatas.

<script type="text/javascript" src="http://daftarisi-girant.googlecode.com/files/accrecpost-pack1.js"></script>
<script style="text/javascript">
var numposts = 10;
var numchars = 200;
</script>

Perhatikan angka 10 dan 200 diatas.

• angka 10 pada var numposts adalah untuk menentukan jumlah artikel yang akan ditampilkan.
• angka 200 pada var numchar adalah untuk menentukan jumlah karakter yang akan ditampilkan.

Rubahlah angka-angka diatas sesuai keinginan sobat..

Kode/Script 4
Tambahkan pula kode/script dibawah ini setelah kode/script 3 diatas.

<script src="http://agoezimoetz.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>

Rubahlah kode/script yg berwarna merah dengan URL blog sobat.
Sava gadget dan lihat hasilnya..

Nb.

---

Jika sobat ingin menampilkan artikel berdasarkan category/label di blog sobat,
sobat cukup mengganti script pada kode/script 4 dengan script dibawah ini :

<script src="http://agoezimoetz.blogspot.com/feeds/posts/default/-/label?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>

Script yg berwarna kuning adalah script tambahan,
gantikan label dengan label yg ada di blog sobat..

contoh yang ane gunakan pada demo diatas adalah hanya menampilkan artikel dari label Tips n Trick
Maka script yg digunakan pada kode/script 4 nya adalah seperti ini :

<script src="http://agoezimoetz.blogspot.com/feeds/posts/default/-/Tips n Trick?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>

Selamat mencoba..
dan Semoga bermanfaat..

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..

Menyambung postingan terdahulu tentang Recent Post News Ticker,
Kali ini masih sama tentang recent post atau lebih pas nya mengenai widget daftar isi.
Recent Post News Scrolling adalah sama halnya dengan recent post pada umumnya.
hanya saja ada penambahan sedikit kode/script yg membuat recent post ini automatic scrolling,
dan auto stop on mouse over.


Untuk membuat seperti itu, langsung saja CoPas kode/script dibawah ini,
dan masukan ke halaman add gadget HTML/Java Script.

<marquee behavior="scroll" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<script>
function rp(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
</script>

<script>
var numposts = 500;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

<script src="http://agoezimoetz.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script></marquee>

Ganti http://agoezimoetz.blogspot.com dengan URL Blog sobat.

Lalu tambahkan kode/script dibawah ini tepat sebelum kode diatas.

<style type="text/css">
ul { cursor: pointer;  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); background:; list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONY5RW6vBlG6ZLWT2tDPwjPMWnWFsFeQbI7UACEcBJwZhyDKf97EWk9PzbL69_6euX5RK6epFeiiBRTQtDA-U4Ff0mQRpUnJq4LmGNN8WukICpFN1q0zltW5621M7mwtU5Y02b6LKRYY/)}
ul a{text-decoration:none;}
ul a:hover {background:;text-decoration:none; color: red;"}
</style>

Sobat bisa ganti gambar sebagai pengganti nomor atau icon list dengan gambar sesuka sobat,
caranya, cari kode dibawah ini pada kode diatas.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONY5RW6vBlG6ZLWT2tDPwjPMWnWFsFeQbI7UACEcBJwZhyDKf97EWk9PzbL69_6euX5RK6epFeiiBRTQtDA-U4Ff0mQRpUnJq4LmGNN8WukICpFN1q0zltW5621M7mwtU5Y02b6LKRYY/

Lalu ganti dengan URL gambar yg sobat punya.
Save, dan lihat hasilnya.

---

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

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 :


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.

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 :


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.

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 ???



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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM6NmnJ05w9lhX15UjF8cBYrbsRSE4hE1Zt2D3HWTiJ-NY9w0fOL9o1wj_8VkXrGQQp7dnsGID1D3b0y0GHnnwXO375lwx3moxY3iX2UFUlo-0ObGB5in3uXLwmeqJwOV9oMsFb8YHzJXi/") 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhldr9OF28xOpeU0caleSBd4ZZnJahY0CvEzSEiK9TLz2zxs5sijAp_2wg5uj-uInhCOr6U9I8hmbTkreGJP3j3sfIXM0QTaVevUwJy96BaykNGSmsBRr1Co7KDaspMoqXhrrt6DXqLVHM/") no-repeat;
 left: 46px;
 top: 133px;
}
#menu .home span {
 width: 150px;
 height: 60px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFX0y6N2BgJ_bicoEjJVT9OhOfFlJ8QqjWLMHZjhOijbvl6PRJBgY6FhklKTs6nlD1YoBDeDBHE4Ur98h7EznH0qNcDfzb7l8uGZogkgru0Q1D9P9I8uBcdeqCdA9RSkFW9pVxNfNxlI/") no-repeat;
 left: 210px;
 top: -25px;
}
#menu .design {
 width: 210px;
 height: 54px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW5LF4shsPXLO703rmVcAaYnmNess0B2Y-Nyo1StbxLLYXuRHjlt3dfqR9HYY_9qH5KXHHvCOyjKlTiDVA_KnZQ1CpVStU2XnLEW4-v-L-p3JtPmo1fFY7Iy6fRKczc2Je9CAeSmq14Fw/") no-repeat;
 left: 55px;
 top: 197px;
}
#menu .design span {
 width: 180px;
 height: 40px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrfMVFG7VgRAaU3VaRkUrZ-N5ONEUXRzzPHzwP4sJitffdMfDrfd4t_ptsTDUx7T8MG0AhSdtZycQQDuBWSyJYWrCMcGFFtXKpWkswKaYg89Re50UN8A5Iz4uZsWL78AkX4Q1QFqs30jg/") no-repeat;
 left: 184px;
 top: 10px;
}
#menu .tut {
 width: 210px;
 height: 55px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB2i5qHGmw1PZuS2zizNtFoEibKPzy3wdaFlH_MtXYaZcI-rNRRit0Oc99vvxCzDWzkTOai8JaUn_aQcsKF7yhvUKqlW2I413HOaLeoNuaBRFuYUicWw4rkX32ReTwn2E0e5qil3EuZsk/") no-repeat;
 left: 60px;
 top: 260px;
}
#menu .tut span {
 width: 180px;
 height: 40px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgezF3G0Yb7eMb4dPvcLW0Bsna3AO_4s9AcASUKcDDbN9KQEN5jFf34nXPd9Ho85kysweZTekIQnFOeeXlnfMAxxx3Xo2w9TyK1PD0JOogdLKyH_7iSr7gUyS1QCjig4suLxwZkArV4Q/") no-repeat;
 left: 206px;
 top: -10px;
}
#menu .rss {
 width: 210px;
 height: 53px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjutCglWcUDXqFQvV4rMFhMa_WDGV8GQFbNCXqPboarzzoy9GO_T6C_w0nzFh8se3moePQULVRpKG8M_ZaRFE5rs6k8mMyCjPur7dNMqeSya5saoeGEoU1BtY0xKjvTYYtGuhJBuR9Q4/") no-repeat;
 left: 70px;
 top: 325px;
}
#menu .rss span {
 width: 130px;
 height: 30px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg9TiW7_HkGdJjlmZ2MvPgYlHrF10lD_74oHsuAPQSHTCgCGeLi18hkAHYTQyZvgmypKd_9X75DStAWNeruayCSkmSEANBpkch23ciPczKgcL3zAjqPn7cr3ej_ulb35rVpaDWUSSy3aY/") 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.


Langkah 4
Save template sobat dan lihat hasilnya.

Langkah 5
Selesai

Selamat mencoba dan semoga bermanfaat.

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..


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.


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.

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


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



3. Free SMS to All



4. Free SMS Service

Dan Masih banyak lagi..

Ok khan sob??

Sekian dulu dari ane..
Semoga bermanfaat..

Huffss..
Selsai juga neg pesenan..

Slide Show Humble Sticker ini adalah pembaruan dari Slide Show Humble jQuery yang
ternyata jauh diluar permintaan..
Maklum, namanya jg newbie..
ya bikin nya juga sampe mentok az.. hehe..

Ok.. Slide Show Humble Sticker kali ini Insya Allah sudah kumplit dibanding dg yg kemarin..
Cocok banget buat yg punya segudang banner.. yg dilengkapi dg :
1. Auto Slide
2. Auto Break
3. Auto Hover Pause
4. Auto Link
5. Keterangan Banner or Gambar yg dipasang
6. dan tetek bengek yg lain nya.. hehe..

Penasaran seperti apa ???
Lihat demonya :


Gimana ???
Masih ada yang kurang ???
Low ada, Sampaikan saja di kolom komentar di blog Girant_31 ini, Ok !!

To the point..
Langkah 1
Letakan Kode dibawah ini diatas kode ]]></b:skin>

* { margin:0; padding:0; }
#newsticker-demo {
width:310px;
background:#EAF4F5;
border:3px solid #000;
-moz-border-radius-topleft:25px;
-moz-border-radius-topright:25px;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:25px;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}
#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }
#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}
.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:300px; }
.newsticker-jcarousellite .info { float:right; width:0px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }
.clear { clear: both; }

Langkah 2
Cari kode </head> lalu Letakan Kode dibawah ini diatasnya

<link href='style.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://daftarisi-girant.googlecode.com/files/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://daftarisi-girant.googlecode.com/files/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;.newsticker-jcarousellite&#39;).jCarouselLite({
vertical: true,
hoverPause:true,
visible: 1,
auto:500,
speed:1000
});
});
</script>

Langkah 3
Save template

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

<div id="newsticker-demo">   
<div class="title">Slide Show Humble Sticker</div>
<div class="newsticker-jcarousellite">
<center><ul>
<li><div class="thumbnail">
<a href="LINK-IMAGE-1"><img src="URL IMAGE-1" /></a><br />
<a href="LINK">INFO LINK</a>
</div></li>
<li><div class="thumbnail">
<a href="LINK-IMAGE-2"><img src="URL IMAGE-2" /></a><br />
<a href="LINK">INFO LINK</a>
</div></li>
</ul></center>
</div></div>

• Ganti tulisan Slide Show Humble Sticker dengan judul slide show sesuai keinginan.
• Ganti tulisan LINK-IMAGE-1, dan LINK-IMAGE-2 dengan link banner or gambar punya sobat.
• Ganti tulisan URL IMAGE-1, dan  URL IMAGE-2 dengan URL banner or gambar punya sobat.
• Ganti tulisan LINK dengan link keterangan banner or gambar punya sobat.
• Ganti tulisan INFO LINK dengan tulisan keterangan banner or gambar punya sobat.

Langkah 5
Save dan Preview hasilnya.

Langkah 6
Selesai.

Semoga Bermanfaat bt sobat semua..
Terima kasih..

Pengen Software trial jadi gratis, bebas alias trial selama-lamanya ??
Pengen cari crack/keygen nya tapi susah. Apalagi untuk cari Serial Number nya, 
ehh ternyata ada juga solusi nya untuk mengatasi agar masa trial bisa jadi selamanya loh..
alias seumur hidup..

Sudah gak tahan ingin liat caranya? Begini cara nya… simak dan perhatikan….!

1. Download dulu aplikasinya.


2.Karena didalam nya ada 4 buah file maka pilihlah yang RunAsDate
3. Jika sudah silahkan di isi Browse program yang ingin di perpanjang masa trial nya..
4. Buatlah icon tiruan pada kolom yang telah tersedia dan boleh dikasih nama terserah..
5. Done…

Selesai
Selamat menikmati deh masa trial tanpa henti…
Tapi jangan bilang siapa-siapa ya.. janji loh..

Nb : 
Untuk membuka aplikasi yang sudah di download tadi terdapat passwordnya. 

Passwordnya : girant_31

Slide Show Humble jQuery ini ane share atas permintaan sobat Tukang Colong..
yg mengeluh karena banyaknya banner yg harus dipajang di halaman depan..

Baiklah.. 
Karena ane orang nya baik hati dan tidak sombong..
ane buat Slide show Humble jQuery ini..

Tapi kekurangan Slide Show Humble jQuery ini adalah :
Kita harus mengklick tombol star terlebih dahulu untuk melihat slide show gambar berikutnya.

Atau lihat demonya :


Gimana ???
Ada yang tertarik memasang slide show ini??
sebenarnya sangat mudah untuk memasang nya loh..

Begini neg caranya :
Langkah 1
Letakan kode di bawah ini diatas kode </head>

<script type='text/javascript'>
var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 &gt;= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == &quot;Stop&quot;) ? &quot;Start&quot; : &quot;Stop&quot;;
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == &quot;Stop&quot;) {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout(&quot;rotate()&quot;, rotate_delay);
   }
}
</script>

Simpan template dan lanjut ke tahapan selanjutnya.

Langkah 2
Tambahkan kode dibawah ini pada add gadget HTML/Java Script

<center>
<form name=slideform>
<tr>
<td align=center bgcolor="white">
<b>Slideshow Humble jQuery</b>
</td>
</tr>
<div style="border: 1px solid #ccc; padding-top: 10px; margin: 3px;
overflow: auto;
width: 350px;
height: 130px;
">
<tr>
<td align=center bgcolor="white">
<img src="images1.jpg" name="show">
</td>
</tr>
</div>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="images1.jpg" selected>Gambar 1
<option value="images2.jpg">Gambar 2
<option value="images3.jpg">Gambar 3
</select>
<input type=button onClick="first();" value="|<<" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
</tr>
</table>
</form>
</center>

- Ganti images1.jpg, images2.jpg, images2.jpg dengan url gambar/banner sobat.
- Aturlah ukuran Widht dan Hight nya sesuai dg sidebar or keinginan sobat.
- Kata-kata Slideshow Humble jQuery bisa sobat rubah sesuai keinginan sobat.


Langkah 3
Simpan dan lihat blog sobat.

Langkah 4
Selesai.

Langkah 5
Semoga bermanfaat..
Terimakasih.

Sesuai dg judul diatas,
Kali ini ane tidak membahas tips or trik.
Hanya sedikit mengulas tentang semua yg baru di Girant_31's Blog.


Dari template yg jadul yg buerat bngts, kini hadir template baru yg tidak kalah beratnya.. hehehe..
(Trus bt apa diganti ya..)
Intinya seh buat kenyamanan sobat semua.. agar tidak bosan berkunjung ke sini (Cieee..).