Membuat Efek Zoom Otomatis Pada Semua Gambar Di Posting Blog

Sempat tidak melakukan update terhadap blog ini selama dua minggu alasannya yakni sibuk dengan acara di kampus kesudahannya kali ini saya memiliki waktu luang untuk memperbaharuinya. Dalam tutorial kali ini saya akan menyampaikan bagaimana cara membuat Zoom Effect atau dalam Bahasa Indonesianya ialah efek memperbesar pada setiap gambar maupun foto yang ada di dalam postingan blog anda.

Keuntungan yang anda mampu dengan memasang Zoom Effect ini ialah membuat blog anda terlihat lebih elok dan Pro. Dan jikalau merujuk pada trends dikala ini khususnya di dunia web design yang terus membicarakan dan meneliti ihwal kehebatan CSS3 maka tidak ada salahnya juga kita membalut design template blogger kita dengan sentuhan kode CSS didalam gambar-gambar postingan blog. Semua kodenya sendiri murni menggunakan CSS tanpa ada tambahan JavaScript atau jQuery, sehingga tidak akan terlalu berpengaruh terhadap Page Loading pada blog anda.

Efek memperbesar gambar ini akan muncul atau bekerja saat cursor dari pengunjung melakukan hover terhadap gambar-gambar di blog anda. Dan yang lebih penting lagi anda tidak perlu membuat markup tambahan apapun didalam postingan blog alasannya yakni Zoom Effect ini akan bekerja secara otomatis terhadap semua gambar dan foto yang ada dipostingan blog hanya saja saat pengunjung blog melakukan hover pada gambar anda tersebut, efek ini akan mengambil sedikit akselerasi tambahan dari CPU komputer maupun laptop dari pengunjung blog.

 Demo

---

Persiapan :

---

Salin semua kode yang ada dibawah ini

Klik ganda untuk menyalin

 .post img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 2px 2px 0; } .post img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; } 

---

Langkah-langkah :

---

1) Masuk ke akun blogger anda kemudian klik Template

2) Lakukan Back up kemudian klik Edit HTML

3) Cari kode ]]></b:skin> (gunakan Ctrl + F) kemudian paste semua kode yang sudah anda salin tadi tepat di atasnya

4) Klik Simpan Template

Jika dikala ini anda mengaktifkan fitur lightbox resmi dari Blogger, efek ini akan tetap berjalan dan tidak berpengaruh terhadap satu sama lainnya. Dan sekarang coba anda lihat konten dari gambar dan foto yang ada di postingan blog anda sudah memiliki Zoom Effect dan membuatnya terlihat lebih menawan. Enjoy & Happy Coding!

Sumber https://8tutorialandroid.blogspot.com/

Fungsi-Fungsi Toolbox Pada Photoshop Lengkap

Fungsi-fungsi toolbox pada photoshop lengkap

Para pembaca yang budiman terkhusus penggemar aktivitas aplikasi adobe photoshop, kali ini aku akan menyebarkan seputar aplikasi photoshop tepatnya Fungsi-fungsi toolbox pada photoshop secara lengkap, sebelum anda mengenal lebih dalam perihal aplikasi adobe photoshop ini ada baiknya anda mengenal fungsi-fungsi toolbox yang ada pada aplikasi ini secara rinci semoga anda nantinya tidak galau lagi dalam berkreasi dengan aktivitas photoshop, Ok eksklusif saja demikianlah Fungsi-fungsi toolbox pada photoshop lengkap.

1. Fungsi toolbox move tool pada photoshop

 

• Move Tool = Berfungsi untuk memindah sebuah objek, layer aktif secara bebas

2. Fungsi Toolbox Rectangular Marquee Tool serta sub-subnya

• Rectangular Marquee Tool : berfungsi untuk membuat  seleks segi empat
• Elliptical Marquee Tool : untuk menciptakan seleksi berbentuk lingkaran
• Single Row Marquee Tool : untuk menciptakan seleksi secara horizontal 1 pixel
• Column Marquee Tool : untuk menciptakan seleksi secara vertikal 1 pixel

3. Fungsi Toolbox Lasso tool serta sub-subnya Pada Photoshop

• Lasso Tool : berfungsi untuk menciptakan seleksi secara bebas
• Polygonal Lasso Tool : untuk menciptakan seleksi berbeentuk poligon
• Magnetic Lasso Tool : untuk menciptakan seleksi secara otomatis dengan mengikuti warna yang serupa

4. Fungsi Toolbox Quick Selection Tool, magic wand tool

• Quick Selection Tool : berfungsi untuk menciptakan sebuah seleksi secara otomatis pada warna yang sama
• Magic Wand Tool : untuk menciptakan seleksi  menurut warna yang sama

5. Fungsi Toolbox crop tool Pada Photoshop

• Crop Tool : berfungsi untuk memotong sebuah objek / gambar

6. Toolbox slice tool dan slice select tool Pada Photoshop

• Slice Tool : berfungsi untuk menciptakan sebuah pecahan objek atau gambar
• Slice Select Tool : untuk menentukan sebuah pecahan pada objek / gambar

7. Fungsi Toolbox spot healing brush tool Pada Photoshop

• Spot Healing Brush Tool : berfungsi untuk memperbaiki sebuha objek atau gambar yang rusak
• Healing Brush Tool : untuk menciptakan sebuh objek tu gambar dengan sampel tertentu
• Patch Tool : berfungsi untuk menciptakan sebuh objek atau gambar dengan sampel patern
• Red Eye Tool : untuk menghilnagkan warna merah pada mata sebab terkena pantulan sinar semoga menjadi hitam

8. Fungsi Toolbox Brush tool serta sub-subnya

• Brush Tool : berfungsi untuk menggambar/melukis gambar memakai kuas
• Pencil Tool : untuk menggambar/melukis gambar memakai pensil
• Color Replacement Tool : untuk mewarnai sebuah gambar memakai warna tertentu

9. Fungsi Toolbox clone stamp dan pattern stamp tool

• Clone Stamp Tool : berfungsi untuk menciptakan sebuah gambar menggunkan sample gambar yang telah tersedia
• Pattern Stamp Tool : untuk menciptakan sebuah gambar menggunkan teladan tertentu

10. Fungsi Toolbox history brushtool, art history tool

• History Brush Tool : berfungsi untuk menghapus objek/gambar menjadi transparan mengikuti warna berground / layer di belakangnya
• Art History Tool : untuk menciptakan gambar secara state history dari sebuah gambar model artistik

11. Fungsi Toolbox Erser tool sert sub-subnya

• Eraser Tool : berfungsi untuk menghapus sebuah objek atua gambar
• Background Eraser Tool : untuk menghapus sebuah objek atau gambar ynag ahirnya menjadi transparan
• Magic Eraser Tool : untuk menghapus sebuh gambar secra otomatis mengikuti warna yang sama yang ahirnya menjadi transparan

12. Fungsi Toolbox gradient dan paint bucket tool

• Gradient Tool : berfungsi untuk memberi warna sebuah objek atau gambar secara gradient
• Paint Bucket Tool : untuk member warna objek atau gambar yang  dipilih

13. Fungsi Toolbox blur tool serta sub-subnya

• Blur Tool : berfungsi untuk member efek kbur pada warna gambar
• Sharpen Tool : untuk memberi contras warna lebih tajam
• Smudge Tool : untuk menggosok-gosok gambar semoga lebih halus dari hasil seleksi yang tidak beraturan

14. Fungsi Toolbox dodge tool serta sub-subnya

• Dodge Tool : berfungsi untuk menciptakan sebuah gambar semoga lebih jelas/terang
• Burn Tool : untuk menciptakan sebuah gambar dengna efek lebih gelap
• Tool : untuk merubah sebuah saturasi pada area tertentu pada gambar

15. Fungsi Toolbox pen tool serta sub-subnya Pada Photoshop

• Pen Tool : berfungsi untuk menciptakan sebuah seleksi pada gambar
• Freeform Pen Tool : untuk menciptakan sebuah path dengan bentuk bebas
• Add Anchor Point tool : untuk menambah sebuah titik anchor point pada path
• Delete Anchor Point Tool : untuk menghapus sebuah titik anchor point yng telah anda tambahkan tadi pada path
• Convert Point Tool : untuk mengedit titik anchor point pada path

16. Fungsi Toolbox horizontal type serta sub-subnya

• Horizontal Type Tool : berfungsi untuk menciptakan sebuah text secara horizontal
• Vertical Type Tool : untuk menciptakan text/tulisan secara vertical
• Horizontal Type Mask Tool : untuk menciptakan seleksi tulisan/text dengan bentuk secara horizontal
• Vertical Type Mask Tool : untuk menciptakan seleksi tulisan/text dengan bentuk secara vertical

17. Fungsi Toolbox path selection tool Pada Photoshop

• Path Selection Tool : berfungsi untuk menciptakan sebuah path (bisa di konversi menjadi sebuah seleksi)
• Direct Selection Tool : untuk merubah anchor point pada path

18. Fungsi Toolbox rectangle tool serta sub-subnya

• Rectangle Tool : berfungsi untuk menciptakan objek berbentuk segi 4
• Rounded Rectangle Tool : untuk menciptakan objek bentuk segi 4 melengkung
• Ellipse Tool : untuk menciptakan objek dengan bentuk lingkaran
• Polygon Tool : untuk menciptakan sebuah objek dengan bentuk segi 3,4, 5 dan seterusnya
• Line Tool : untuk menciptakan garis lurus
• Custom Shape Tool : untuk menciptakan sebuah objek dengan bentuk yang sudah tersadia pada option bar

19. Fungsi Toolbox notes tool dan audio annotation tool

• Notes Tool : untuk menciptakan sebuah catatan pada gambar/image
• Audio Annotation Tool : untuk menciptakan sebuah audio/ bunyi pada gambar/image

20. Fungsi Toolbox eyedropper too serta sub-subnya

• Eyedropper Tool : untuk mengambil warna yang dipilih untuk dijadikan warna pada fourground
• Color Sampler Tool : untuk mengambil (sampel warna) aneka macam warna pada gambar/ image
• Ruler Tool : untuk mengukur sebuah jarak /sudut pada gambar
• Fungsi Toolbox Hand tool, zoom tool Pada Photoshop
• Hand Tool : sanggup anda gunakan untuk memindah atau menggeser gambar/image
• Zoom Tool : untuk zoom in (memperbesar) atau zoom uot (memperkecil) sebuah tampilan gambar/ image

21. Fungsi Toolbox Hand tool, zoom tool

• Hand tool : berfungsi untuk memindah/menggeser gambar layaknya dengan tangan
• Zoom tool :berfungsi untuk memperbesar tampilan image /gambar

22. Fungsi Toolbox set foreground, set background

• Set Foreground Color : berfungsi untuk menentukan warna pada seleksi yang telah anda buat (pada warna foreground)
• Set Background Color = berfungsi untuk menentukan warna pada seleksi yang telah anda buat (pada warna begroung)

Ok demikianlah sharing kami kali ini perihal Fungsi-fungsi toolbox pada aplikasi adobe photoshop secara lengkap, semoga bermanfaat dan dapatkan juga sharing menarik lainnya pada post berikutnya hingga jumpa salam.

Cara Membuat Efek Bergoyang Pada Gambar Posting Blog

Sebelumnya anda mungkin sudah mencoba memasang efek zoom otomatis pada semua gambar posting blog. Nah kali ini saya akan membuat pengaruh shake atau pengaruh bergoyang yang di implementasikan didalam gambar kiriman blogspot tanpa ada komplemen mark up apapun dan hanya menggunakan pengaruh murni CSS3 yang tidak akan terlalu kuat terhadap beban loading blog anda.

Efek ini akan bekerja pada saat pengunjung melakukan mouse over atau melakukan hover baik itu terhadap gambar yang mempunyai anchor link maupun gambar yang tidak memilikinya. Efek shake yang membuat gambar blog anda bergoyang ini akan bekerja pada semua browser mirip IE, Firefox, Chrome, Safari, Opera bahkan saya telah mencoba melakukan hover pada browser di perangkat android dan pengaruh inipun bekerja sangat mulus tanpa ada kendala.

Demo

Langkah-langkah membuat pengaruh bergoyang pada gambarb di blog:

1) Masuk ke dashboard saya blogger anda
2) Klik Template kemudian back up
3) Klik edit tempalte kemudian cari aba-aba ]]></b:skin>
4) Salin kemudian pastekan semua css dibawah ini tepat diatas aba-aba tersebut

Klik ganda untuk menyalin

 .entry-content img {  transition-duration:0.5s;  transition-timing-function: ease;  transition-delay:0s;  -moz-transition-duration:0.5s;  -moz-transition-timing-function:ease;  -moz-transition-delay:0s;   -webkit-transition-duration:0.5s;  -webkit-transition-timing-function:ease;  -webkit-transition-delay:0s;  -o-transition-duration:0.5s;  -o-transition-timing-function:ease;  -o-transition-delay:0s;  }  .entry-content img:hover {  animation-name: goyang;  animation-duration: 0.8s;  transform-origin:50% 50%;  animation-iteration-count: infinite;  animation-timing-function: linear;  -moz-animation-name: goyang;  -moz-animation-duration: 0.8s;  -moz-transform-origin:50% 50%;  -moz-animation-iteration-count: infinite;  -moz-animation-timing-function: linear;  -webkit-animation-name: goyang;  -webkit-animation-duration: 0.8s;  -webkit-transform-origin:50% 50%;  -webkit-animation-iteration-count: infinite;  -webkit-animation-timing-function: linear;  }  @keyframes goyang{  0% { transform: translate(2px, 1px) rotate(0deg); }  10% { transform: translate(-1px, -2px) rotate(-1deg); }  20% { transform: translate(-3px, 0px) rotate(1deg); }  30% { transform: translate(0px, 2px) rotate(0deg); }  40% { transform: translate(1px, -1px) rotate(1deg); }  50% { transform: translate(-1px, 2px) rotate(-1deg); }  60% { transform: translate(-3px, 1px) rotate(0deg); }  70% { transform: translate(2px, 1px) rotate(-1deg); }  80% { transform: translate(-1px, -1px) rotate(1deg); }  90% { transform: translate(2px, 2px) rotate(0deg); }  100% { transform: translate(1px, -2px) rotate(-1deg); }  }  @-moz-keyframes goyang{  0% { -moz-transform: translate(2px, 1px) rotate(0deg); }  10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }  20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }  30% { -moz-transform: translate(0px, 2px) rotate(0deg); }  40% { -moz-transform: translate(1px, -1px) rotate(1deg); }  50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }  60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }  70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }  80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }  90% { -moz-transform: translate(2px, 2px) rotate(0deg); }  100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }  }  @-webkit-keyframes goyang{  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }  } 

5) Klik Simpan

Sekarang coba lihat salah satu posting blog yang terdapat gambar atau foto maka pengaruh bergoyang pun akan mengiringinya pada saat anda melakukan hover. Enjoy & Happy Coding!

Sumber https://8tutorialandroid.blogspot.com/