Tampilan : Daftar Grid

Smooth Scrolling Effect - Paling Simple BRO!

Haha , kenapa ane bilang paling simple? monggo sobat bukti.in sendiri yahh :D , pada kesempatan kali ini ane cuman mau re-share tutorial dari web nya abang ane "CSS-Tricks.com" wkwkwk, soalnya abang ane sama-sama tak berambut kaya author nya css-tricks.com :D hehe *bercanda ..

Untuk demonstransi nya , contoh kita akan membuat sebuah link/anchor text yang fungsinya ketika di klik link tersebut akan menggiring kita ( bukan menggiring bola ) untuk ke tempat/area divisi yang kita inginkan , contoh klik tombol tambahkan komentar dibawah ini :

Tambahkan Komentar


Markup seperti link di atas, ± Sepert ini :
<a href="#comment-form">Tambahkan Komentar</a>
 

Ekhm , belum beres bro! :D , sebelum bikin markup di atas jangan lupa pasang javascript di bawah ini tepat di atas kode </head> yaah bro, silahkan bro! jangan malu-malu :

<script type='text/javascript'>
//<![CDATA[
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
//]]>
</script>
#A3

Cara Menampilkan Jam, Hari & Tanggal dengan Javascript.

Icon Waktu dan Tanggal Kesempatan oh Kesempatan .. alhamdulillah akhirnya ada kesempatan juga buat sharing lagi! . kali ini saya ingin berbagi pengetahuan seputar bumbu Javascript.. tentang "Bagaimana Cara Menampilkan Jam dan Tanggal dan Hari dengan JavasScript" ..

Berikut Pilihan Javascript untuk Menampilkan Jam / Tanggal / Hari , sesuai dengan kebutuhan sobat :

Cara Menampilkan Tanggal dengan Javascript :


<script type='text/javascript'>
<!--
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(day + " " + months[month] + " " + year);
//-->
</script>
Hasilnya :

Cara Menampilkan Hari dan Tanggal dengan Javascript :

<script type='text/javascript'>
<!--
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum&#39;at', 'Sabtu'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var thisDay = date.getDay(),
thisDay = myDays[thisDay];
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year);
//-->
</script>
Hasilnya :

Cara Menampilkan Jam saat ini! dengan Javascript ( Pasif ) :

<script type="text/javascript">
<!--
var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1) {
curr_min = "0" + curr_min;
}
document.write(curr_hour + " : " + curr_min);
//-->
</script>
Hasilnya :

Dengan Format AM/PM :

<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12) {
a_p = "AM";
} else {
a_p = "PM";
}
if (curr_hour == 0) {
curr_hour = 12;
}
if (curr_hour > 12) {
curr_hour = curr_hour - 12;
}

var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1) {
curr_min = "0" + curr_min;
}
document.write(curr_hour + " : " + curr_min + " " + a_p);
//-->
</script>

Hasilnya :

Cara Menampilkan Jam saat ini! dengan Javascript ( Aktif ) :

<div id="clock"></div>
<script type="text/javascript">
<!--
function showTime() {
var a_p = "";
var today = new Date();
var curr_hour = today.getHours();
var curr_minute = today.getMinutes();
var curr_second = today.getSeconds();
if (curr_hour < 12) {
a_p = "AM";
} else {
a_p = "PM";
}
if (curr_hour == 0) {
curr_hour = 12;
}
if (curr_hour > 12) {
curr_hour = curr_hour - 12;
}
curr_hour = checkTime(curr_hour);
curr_minute = checkTime(curr_minute);
curr_second = checkTime(curr_second);
document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;
}

function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
setInterval(showTime, 500);
//-->
</script>
Hasilnya :

Silahkan berikan komentar jika ada pertanyaan :)

Baca Juga :

#A3

Cara Cepat Belajar Pure CSS3 Animation.

CSS3 Icon  PNGHello world, Pada kesempatan kali ini Kang Rian ingin berbagi ilmu secara instan di dalam 1 halaman membahas seputar CSS Animasi ( Support di semua Browser ).

Apa itu Pure CSS Animation ?
Maksud dari Pure sendiri adalah , Pembuatan Animasi yang hanya menggunakan satu metode yaitu CSS (Cascading Style Sheets) , tanpa di iringi dengan panggilan Bumbu Javascript, dsb .

Berikut Simple Demonstrasi-nya sob :



Dan berikut adalah contoh mudah Syntax CSS Animasi  :


.animasi {

position:relative;

animation:sukasuka 3s infinite; /*Safari*/

-webkit-animation:sukasuka 3s infinite; /*Chrome*/

}



@keyframes sukasuka

{

0% {top:0px; }

50% {top:50px;}

100% {top:0px;}

}



@-webkit-keyframes sukasuka /*Safari and Chrome*/

{

0% {top:0px; }

50% {top:5px;}

100% {top:0px;}

}
Pengertian dari Syntax CSS Animation di atas :

1. @keyframes : keyframes berfungsi untuk menentukan gerak animasi ..

2. sukasuka : itu hanyalah sebuah nama animasi yang menentukan animasi yang dibuat melalui properti @keyframes seperti contoh di atas , bisa dirubah sesuka hati sobat.

3. % : Persentase , nah! didalam @keyframe / menentukan gerak animasi , sobat bisa menggunakan persentase agar lebih mudah , setiap persentase 0 - 100% bisa sobat kreasikan sesuka-hati sobat. :)

4. -webkit- : Hmm, untuk sobat yang paham Syntax CSS3 , itu pasti udah pada tau yah :D .. Untuk sobat yang belum tau , -webkit- sendiri berfungsi agar CSS Animasi berjalan pada Browser-browser baru, seperti Google Chrome & Safari.

5. 3s : 3 Second , maksud nya adalah untuk menentukan durasi / kecepatan animasi yang di buat dari @keyframes tadi . :)

6. infinite : Maksudnya adalah menentukan bahwa animasi yang dibuat dari @keyframes tadi bergerak terus-menerus ( tanpa henti ) . Hehe kalo Bahasa sunda nya tuh "Teu Eureun-eureun" :D hehe *kidding


* Sekian penjelasan seputar Pure CSS3 Animation menurut Kang Rian , semoga postingan "Cara Cepat Belajar Pure CSS3 Animation" ini bermanfaat. Kurang dan lebih nya mohon dimaafkan, karena si akang juga sama-sama masih belajar.! hehe , untuk pertanyaan seputar CSS3 Animasi silahkan Komentar pada Form Komentar dibawah postingan ini .

Referensi : http://w3schools.com/css/css3_animations.asp
#A3

NO HOAX! - Adobe Photoshop CS5 Portable Terbaru

Adobe Photoshop CS5 Portable IconHehe NO HOAX lagi .. setelah mondar-mandir di om gugel! akhir nya ane dapet nih link Download Adobe Photoshop CS5 Portable Terbaru dari blog tetangga! *colek http://rahmatdi99.blogspot.com .. di blog nya ane dapetin nih software ! lulus test / check / uji , dan 100% Top Markotop..

Berikut SS nya : 
Screen Shoot - Adobe Photoshop CS5 Portable Terbaru

Berikut ini fitur terbaru Photoshop CS5
  • Content Aware Fill
  • Intelligent selection technology
  • Advanced HDR processing
  • Improved raw processing
  • Extended painting effects
  • localised Warp tool
  • Auto lens correction
  • Workspace management
  • Advanced 3D options (CS5 Extended)
  • and 30 JDI (Just Do it) addition
System Requirements:
Windows
  • Intel® Pentium® 4 or AMD Athlon® 64 processor
  • Microsoft® Windows® XP with Service Pack 3; Windows Vista® Home Premium, Business, Ultimate, or Enterprise with Service Pack 1 (Service Pack 2 recommended); or Windows 7
  • 1GB of RAM
  • 1GB of available hard-disk space for installation; additional free space required during installation (cannot install on removable flash-based storage devices)
  • 1024×768 display (1280×800 recommended) with qualified hardware-accelerated OpenGL graphics card, 16-bit color, and 256MB of VRAM
  • Some GPU-accelerated features require graphics support for Shader Model 3.0 and OpenGL 2.0
  • DVD-ROM drive
  • QuickTime 7.6.2 software required for multimedia features
  • Broadband Internet connection required for online services

Mac OS
  • Multicore Intel processor
  • Mac OS X v10.5.7 or v10.6
  • 1GB of RAM
  • 2GB of available hard-disk space for installation; additional free space required during installation (cannot install on a volume that uses a case-sensitive file system or on removable flash-based storage devices)
  • 1024×768 display (1280×800 recommended) with qualified hardware-accelerated OpenGL graphics card, 16-bit color, and 256MB of VRAM
  • Some GPU-accelerated features require graphics support for Shader Model 3.0 and OpenGL 2.0
  • DVD-ROM drive
  • QuickTime 7.6.2 software required for multimedia features
  • Broadband Internet connection required for online services

Minat Download? tinggal klik tombol download dibawah ini, Semoga Bermanfaat!

Adobe Photoshop CS5 Portable ( Ukuran File : 85.96 MB ) *Tanpa Password

Source : http://rahmatdi99.blogspot.com/2013/08/download-photoshop-cs5-portable-terbaru.html

Download Juga :

#A3

Kumpulan FONT ICON Per-PACK Gratis Tinggal Sedot!

FONT ICON Sedot dot dot .. buat yang butuh aja dah, kebetulan barusan surfing ke blog temen *colek dulu nih kang +Ridho Muhammad Firdaus  .. nah di blog nya ane dapet Kumpulan font icon awesome ini .. kebetulan ane lagi butuh buat design pamplet web offline :D hehe . terus ane share deh dimari.!

Nda usah banyak basa-basi yee , buat sobat yang bener2 butuh nih font icon sedot langsung dah keburu hosting tempat nyimpen nih icon #expire! haha *bercanda*

1. HEYDING ICONS



2. FOUNDATION ICON FONTS 2


3. PICTONIC


6. TYPICONS


7. JUST VECTOR SOCIAL ICONS SET


8. RAPHAËL ICON-SET


9. SOCIALICO



Semoga bermanfaat! Keep Blogging and Happy Moving sob .. ENJOY ^_^

Source : http://blog.ridhomf.web.id/2013/08/download-font-icon-gratis.html
#A3

CSS Box Shadow 3D Unyu-unyu! #Responsive

Icon CSS3 BOX SHADOW 3DHehe, Unyu-unyu .. Judul doang tuh sob! pada kesempatan kali ini si akang cuman niat koleksi / sharing Cara Membuat Box Shadow 3D dengan CSS ,

berikut demonstrasi nya :

Ini Adalah Demo BOX SHADOW 3D
Bukan Demo Mogok Makan ya sob! -___-
Kenapa Saya sendiri lebih suka share ginian dari pada share pemecahan masalah, dsb. karena saya sendiri lebih puas jika website yang saya buat, tampak nyaman dan unik dimata sang pengunjung ..

Hehe, gak perlu basa dan basi lagi ya sob, lanjut yuk ke cara bikin nya? ..

1. Simpan Kode CSS dibawah ini, tepat di atas tag </head> :

<link href="http://www.dreamtemplate.com/dreamcodes/css_shadows/css/tsc_css_shadows.css" rel="stylesheet" type="text/css"></link>

2. Berikut adalah Contoh & Kode untuk Memanggil CSS BOX SHADOW Unyu-unyu nya sob :


Lifted corners
Contoh ke-1

Curled corners
Contoh ke-2

Perspective
Contoh ke-3

Raised box
Contoh ke-4

Single vertical curve
Contoh ke-5

Vertical curves
Contoh ke-6

Single horizontal curve
Contoh ke-7

Horizontal curves
Contoh ke-8


<div class="css_image_shadows">


<!-- 1 -->
<div class="drop-shadow lifted" style="width:240px;height:70px;">
<p>Lifted corners<br /><small>Contoh ke-1</small></p>
</div>


<!-- 2 -->
<div class="drop-shadow curled" style="width:240px;height:70px;">
<p>Curled corners<br /><small>Contoh ke-2</small></p>
</div>


<!-- 3 -->
<div class="drop-shadow perspective" style="width:240px;height:70px;">
<p>Perspective<br /><small>Contoh ke-3</small></p>
</div>


<!-- 4 -->
<div class="drop-shadow raised" style="width:240px;height:70px;">
<p>Raised box<br /><small>Contoh ke-4</small></p>
</div>


<!-- 5 -->
<div class="drop-shadow curved curved-vt-1" style="width:240px;height:70px;">
<p>Single vertical curve<br /><small>Contoh ke-5</small></p>
</div>


<!-- 6 -->
<div class="drop-shadow curved curved-vt-2" style="width:240px;height:70px;">
<p>Vertical curves<br /><small>Contoh ke-6</small></p>
</div>


<!-- 7 -->
<div class="drop-shadow curved curved-hz-1" style="width:240px;height:70px;">
<p>Single horizontal curve<br /><small>Contoh ke-7</small></p>
</div>


<!-- 8 -->
<div class="drop-shadow curved curved-hz-2" style="width:240px;height:70px;">
<p>Horizontal curves<br /><small>Contoh ke-8</small></p>
</div>
</div>
Source : http://www.dreamtemplate.com/dreamcodes/documentation/css_shadows.html
#A3

NO HOAX! Microsoft NET Framework 4 4.0.30319.1

Pusing mondar-mandir nyari Microsoft NET Framework 4 4.0.30319.1 di Google! , dapet dari blog tetangga udah semangat nunggu download beres!! *eh file nya corrupt .. bagus sih niat sharing , tapi test dulu dong kalo bisa minn! kan kasian orang yang nyari kaya ane ini kecewa .. Yowes lah lupakan , sekarang ane cuman mau share ulang nih software! buat sobat yang mengalami problem yang sama dengan saya yang tampan ini!

Monggo dah , Download Microsoft .NET Framework 4 4.0.30319.1 nya langsung di Microsoft.com ( Yakin aman!! gak usah pake tested-tested! ) , tinggal klik tautan download dibawah ini :

Download Microsoft NET Framework 4 4.0.30319.1
#A3

Komentar Terbaru

Just load it!