Breaking

Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Tuesday, October 3, 2017

October 03, 2017

Cara Membuat Judul Blog Muncul Satu Kata

Kali ini Arlina Design akan memberikan tips Cara Membuat Judul Blog Muncul Satu Kata. Tips ini bekerja jika sobat ingin memotong atau menyembunyikan judul blog yang terlalu panjang dan hanya satu kata pertama saja dari judul blog yang ingin dimunculkan.

Cara Membuat Judul Blog Muncul Satu Kata

Seperti contoh misalkan judul blog sobat adalah Tutorial Blogger 2017, maka dengan trik ini akan otomatis memotong judul blog menjadi Tutorial saja. Meskipun judul blog panjang agar terlihat rapi bisa diatasi dengan mengganti judul dengan logo, namun tidak ada salahnya untuk mencoba cara lain seperti yang akan saya berikan berikut ini.
Selengkapnya »
By at
Labels: ,

Saturday, January 28, 2017

January 28, 2017

Membuat Tombol Demo dan Download Material Design

Membuat Tombol Demo dan Download Material Design - Seperti yang kita ketahui, kini Material Design sudah menjadi tren sebagai antarmuka web atau UI (User Interface) baik itu pada perangkat mobile maupun desktop dalam sebuah halaman website. Antarmuka web ini pun disambut baik oleh pengguna maupun pengembang website karena memiliki segudang fitur yang bermanfaat serta tampilan yang lebih menarik.

Membuat Tombol Demo dan Download Material Design

Pada kesempatan ini Arlina Design akan memberikan contoh tombol demo dan download yang ditambahkan dengan efek animasi ripple (gelombang) pada saat kita menekan tombol tersebut yang merupakan salah satu fitur seperti efek animasi dari Material Design.
Selengkapnya »
By at
Labels: , , ,

Sunday, September 4, 2016

September 04, 2016

Membuat Efek Ripple Berbasis Material Design Menggunakan jQuery


Pada kesempatan kali ini saya akan membahas tentang bagaimana cara membuat efek ripple seperti yang ada pada Google Material Design. Disini saya menggunakan jQuery untuk mempermudah dalam pembuatan efek ripple, versi yang saya gunakan adalah versi 1.9.1.

Saya akan sedikit menjelaskan keseluruhan konsep yang akan digunakan dalam pembuatan efek ripple ini. Jadi ketika sebuah element HTML di klik kita akan menambahkan element baru dimana nantinya di dalam element baru ini terdapat element yang akan kita ingin beri efek. Element baru yang dibuat ini nantinya akan di berikan efek scale dengan warna background tertentu, dan ketika klik mouse selesai efek akan di fade-out(dipudarkan).

Pertama-tama kita akan membuat element yang akan kita beri efek, buatlah file baru beri nama index.html.


<html>
<head>
</head>
<body>
<h1>
Ripple Click Effect</h1>
<ul>
<li><a class="ripple" href="#">Dashboard</a></li>
<li><a class="ripple" href="#">My Account</a></li>
<li><a class="ripple" href="#">Direct Messages</a></li>
<li><a class="ripple" href="#">Chat Rooms</a></li>
<li><a class="ripple" href="#">Settings</a></li>
<li><a class="ripple" href="#">Logout</a></li>
</ul>
</body>
</html>


Sekarang kita akan membuat file CSS untuk mengubah tampilannya serta membuat keyframes untuk animasi ripple, buatlah file baru dan beri nama style.css.

/*basic reset*/

* {
  margin: 0;
  padding: 0;
}

body {
  background-size: cover;
}

h1 {
  font: normal 32px/32px Bitter;
  color: black;
  text-align: center;
  padding: 85px 100px;
}


/*nav styles*/

ul {
  background: white;
  border-top: 6px solid hsl(180, 40%, 60%);
  width: 200px;
  margin: 0 auto;
}

ul li {
  list-style-type: none;
  /*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
  position: relative;
  overflow: hidden;
}

ul li a {
  font: normal 14px/28px Montserrat;
  color: hsl(180, 40%, 40%);
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  cursor: pointer;
  /*since the links are dummy without href values*/
  /*prevent text selection*/
  user-select: none;
  /*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
  position: relative;
}


/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/

.ink {
  display: block;
  position: absolute;
  background: hsl(180, 40%, 80%);
  border-radius: 100%;
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
}

.fade-out {
  transform: opacity(0);
  -webkit-transform: opacity(0);
  -moz-transform: opacity(0);
}


/* animation effect keyframes */

.ink.animate {
  animation: ripple 0.65s forwards;
  -webkit-animation:ripple 0.65s forwards; /* For Chrome & Safari/Webkit based browser */
  -moz-animation:ripple 0.65s forwards; /* For Mozilla Firefox */
}

.ink.animate.end {
  transition: all 0.5s ease-in-out;
  background-color: rgba(255, 0, 0, 0.0);
  box-shadow: none;
  border-radius: 0px;
}
@-webkit-keyframes ripple{
  100% {
    -webkit-transform: scale(2.5);
    transform: scale(2.5);

  }
}
@-moz-keyframes ripple{
  100% {
    -moz-transform: scale(2.5);
    transform: scale(2.5);

  }
}

@keyframes ripple {
  /*scale the element to 250% to safely cover the entire link and fade it out*/
  100% {
    transform: scale(2.5);
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
  }
}


Selanjutnya kita akan menggunakan javascript dan jquery untuk membuat animasi efek Ripple. Buatlah file javascript baru dan beri nama ripple.js, setea itu deklarasikan semua variabel yang dibutuhkan untuk membuat efe ripple.

(function($){
var parent,ink,d,x,y;
}(jQuery);

Berikut sedikit penjelasan tentang variabel yang akan digunakan
variabelfungsi
parent digunakan untuk menyimpan objek html parent dari objek yang di klik
ink digunakan untuk menyimpan element html baru yang akan memberikan efek animasi ripple pada elemen yang diklik
d digunakan untuk menyimpan lebar atau tinggi element parent untuk mendapatkan diameter lingkaran untuk efek ripple
x digunakan untuk menyimpan posisi x dari parent element yang diklik
y digunakan untuk menyimpan posisi y dari parent element yang diklik
Sekarang kita akan membuat fungsi untuk melakukan animasi pada 2 event yaitu event mousedown dan mouseup, mousedown adalah event saat mousedown ditekan dan mouseup adalah event saat tombol mouse dilepas/selesai ditekan. Sebelumnya pada script html tiap element list saya beri nama class ripple sehingga kita akan menggunakan nama class untuk mengeksekusi animasi.
Note:
untuk mengeksekusi perintah yang melibatkan lebih dari satu element menggunakan javascript sebaiknya menggunakan class bukan id, karena id hanya akan mengambil 1 element pertama saja.

(function($){
var parent,ink,d,x,y;
$('.ripple').mousedown(function(e){

});
$('.ripple').mouseup(function(e)){

});
}(jQuery);

Selanjutnya kita akan mulai mengeksekusi perintah-perintah pada event mousedown terlebih dahulu. Didalam fungsi mousedown kita dapat mengakses objek yang sedang diklik dan menganimasikannya menggunakan css yang telah dibuat sebelumnya. Pertama kita perlu mendapatkan parent element dari element yang diklik.

var parent = $(this).parent();

Setelah mendapatkan element parent dari objek yang di klik kita perlu mengecek apakah element ink sudah ada pada element parent atau tidak, jika tidak ada maka buat element ink baru kemudian menyisipkannya kedalam parent element, kemudian simpan element ke variable ink.

if (parent.find(".ink").length == 0){
      parent.prepend("
");
}
ink = parent.find(".ink");

Agar efek ripple dapat selalu berjalan ketika mouse diklik kita perlu menghapus nama class animate dan end dari element ink jika memang pada element parent sudah terdapat element ink.

ink.removeClass("animate");
ink.removeClass("end");

Selanjutnya kita perlu mengatur ukuran dari element ink menggunakan lebar atau tinggi element parent untuk membuat diameter lingkaran yang bisa untuk menutupi element.

if (!ink.height() && !ink.width()) {
      d = Math.max(parent.outerWidth(), parent.outerHeight());
      ink.css({
        height: d,
        width: d
      });
}

Selanjutnya kita perlu mengatur posisi dari element ink namun kita harus mendapatkan kordinat x dan y saat mouse ditekan terlebih dahulu. Untuk mendapatkan kordinat x kita perlu mendapatkan kordinat x dari objek yang diklik relatif pada halaman kemudian dikurangi dengan posisi element parent relatif pada halaman dan dikurangi setengah dari lebar element ink, untuk kordinat y kita dapat menggunakan rumus yang sama yang berbeda hanya pada yang terakhir dimana untuk x kita menggunakan setengah dari lebar element ink sedangkan untuk y kita menggunakan setengah dari tinggi element ink.

x = e.pageX - parent.offset().left - ink.width() / 2;
y = e.pageY - parent.offset().top - ink.height() / 2;

Sekarang atur posisi dari element ink dan tambahkan class animate

ink.css({
      top: y + 'px',
      left: x + 'px'
}).addClass("animate");

Sekarang kita telah selesai membuat efek ripple pada event mousedown, sekarang kita perlu menambahkan 1 baris terahir di event mouseup untuk memberikan efek fade saat mouse selesai diklik dengan menambahkan nama class end pada element ink.

ink.addClass("end");

Sampai disini Anda telah selesai Membuat Efek Ripple Berbasis Material Design Menggunakan jQuery. Mungkin itu saja yang dapat saya berikan pada postingan kali ini.
Semoga Bermanfaat ...!!!

Full Code + Result
By at
Labels: , , , , , , ,

Friday, April 22, 2016

April 22, 2016

Membagi Konten Artikel Menjadi Beberapa Halaman dengan Efek Slide

Tutorial berikutnya Arlina Design akan memberikan sebuah tutorial Membagi Konten Artikel Menjadi Beberapa Halaman dengan Efek Slide. Di sini sobat hanya perlu menambahkan kode HTML di editor postingan yang nantinya akan muncul di blog sobat.

Membagi Konten Artikel Menjadi Beberapa Halaman dengan Efek Slide

Tutorial ini sangat cocok bagi sobat yang memiliki tulisan artikel yang cukup panjang di blognya, sehingga akan menghemat ruang di halaman posting. Oke, langsung saja silakan ikuti langkah-langkah berikut ini.

Membagi Konten Artikel Menjadi Beberapa Halaman

Selengkapnya »
By at
Labels: , , ,

Saturday, April 16, 2016

April 16, 2016

Memotong Snippet Popular Posts di Blogger

Memotong Snippet Popular Posts di Blogger - Kali ini Arlina Design akan berbagi tentang cara Memotong Snippet Popular Posts yang merupakan salah satu widget yang direkomendasikan untuk dipasang di blog.

Memotong Snippet Popular Posts di Blogger

Widget yang satu ini memberikan informasi kepada pembaca postingan atau artikel apa saja yang sering dilihat di blog yang bisa diatur berdasarkan 7 hari terakhir, 30 hari terakhir, atau setiap saat. Dengan begitu, pembaca mendapatkan lebih banyak pilihan untuk menjelajahi halaman blog kita. Yang pada akhirnya akan berdampak positif dan menambah pageview blog kita.
Selengkapnya »
By at
Labels: , ,

Saturday, February 27, 2016

By at
Labels: ,
By at
Labels: ,

Friday, February 26, 2016

February 26, 2016

Cara Memberikan Efek Animasi Loading Sederhana Saat Halaman Dimuat

Cara Memberikan Efek Animasi Loading Sederhana Saat Halaman Dimuat - Pada kesempatan ini Arlina Design akan berbagi tutorial memasang efek animasi loading saat halaman dimuat yang bisa sobat tambahkan di blog. Cara kerja dari trik ini sebetulnya sangat sederhana yaitu kode akan berjalan ketika sobat membuka blog saat proses memuat halaman dan akan berhenti secara otomatis ketika halaman tersebut telah termuat dengan penuh.

Cara Memberikan Efek Animasi Loading Sederhana Saat Halaman Dimuat

Bagi sobat yang ingin mencoba menambahkan Efek Animasi Loading Sederhana di blog, silakan ikuti langkah berikut ini

Memasang Efek Animasi Loading Sederhana di Blog

Selengkapnya »
By at
Labels: , , ,

Tuesday, December 22, 2015

December 22, 2015

Cara Membuat Sticky Widget di Sidebar Blog

Pada artikel sebelumnya saya pernah berbagi tutorial tentang Memasang Fungsi Sticky Pada Widget Blogger, kali ini saya akan berbagi tutorial dengan fungsi yang sama yaitu untuk membuat widget tertentu menjadi sticky atau melayang mengikuti halaman saat digulirkan ke bawah dan atas. Tutorial ini merupakan perbaikan sekaligus menjawab komentar sobat dari tutorial sebelumnya yang ketika halaman digulir ke bawah sticky widget akan melewati Footer Wrapper dan itu akan sedikit mengganggu karena menghalangi widget yang dipasang di area Footer.

Kode yang akan saya bagikan ini lebih cocok dipasang pada semua konten di Sidebar atau bisa juga dipasang pada salah satu widget tertentu.Bagi sobat yang ingin mencobanya, silakan ikuti tutorial Cara Membuat Sticky Widget di Sidebar Blog.

Cara Membuat Sticky Widget di Sidebar Blog
Selengkapnya »
By at
Labels: , ,

Wednesday, December 2, 2015

December 02, 2015

Aplikasi LiveChatSupport



Live Chat Support merupakan aplikasi web berbasis PHP, jQuery dan bootstrap yang dapat Anda gunakan untuk menambahkan fitur live chat pada situs atau web Anda. Live Chat sangat berguna bagi Anda yang berniat untuk membuat situs/web yang menyediakan jasa atau produk secara online. Kemudahan dalam berkomunikasi dengan customer merupakan elemen penting yang harus Anda miliki untuk semakin menunjang keberhasilan Anda untuk menjual produk atau jasa pada situs web Anda.
Fitur :
- Compatible dengan semua jenis web atau CMS termasuk Wordpress, Joomla, Drupal dll.
- Manajemen user/operator
- 9 jenis suara notifikasi yang dapat Anda pilih.
- Mudah dikostumisasi.
- Menyembunyikan widget saat tidak ada operator yang online.
- Menampilkan Form email saat tidak ada operator yang online.
- Chat Emoticon.
- Gambar profil operator yang dapat diedit.
- Pengaturan Jumlah koneksi.

Untuk penginstallan Anda dapat melakukannya sendiri atau saya akan membantu menginstall menggunakan TeamViewer.

Untuk Pemesanan Anda dapat menghubungi saya melalui kontak berikut :
E-mail :muhammad.sayuti94@gmail.com 
No Hp : 082148637533/085753259004
Pin BB : 519EE964
By at
Labels: , , , , ,