Design Own Image Effect for Blogger Posts

Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda? 

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding

2. Tidak Tahu Computer Programming

3. Tidak Paham Bahasa Pemrograman Android

4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...

Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan

2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan

3. Susun blok-blok kode programnya, dan

4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?

Mudah kok, karena sudah hadir untuk Anda Di Sini :

"Video Tutorial Android Tanpa Coding untuk Pemula"

Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2. 

We can fully customize our blogger blog template performancea using our coding ability. Just like changing Font-family of post pages,You can customize pictures in post pages simply by adding borders,shadows integrating hovering effects as on.To customize a picture you should use either a graphical editing software or styling language like CSS( Cascading-Style-Sheet ). Although as a web designer and practical blogger who likes to decrease site's loading time,You have to use web designing language to customize photos.Suppose you're going to add an image for your blog post and it is linked to another web page.Then you want to add different effects to the image in different occasions such as when it is just a link,hovering the image and user click on picture.So you have to add three images for an one task.Also is a tedious work to do,creating three images separately using photo editing software like Photoshop and upload them to the server or hosting account.Why we waste our valuable time for such a unnecessary matter? Now you understand why we should use styling languages to customize high quality images as we want.Just one month ago i described you How to use Image opacity in blogger blogs.In this time i'm going to render another picture effect that you can use for your blog's post page images.

By default in most of default blogger templates have added borders and shadows for images in post pages.You can Remove blogger Picture/Image shadow and border easily by adding piece of CSS code.Also we can design own images using CSS. Here i will show you how to customize pictures in blogger post pages easily.I recommend you to check out the demo first before following below instructions.

Demo

1: Sign in to your Blogger account.
2: Go to Dashboard >> Template >> Edit HTML.
3: Now search for below code in your template.

]]></b:skin>

4: After finding above code,just above it paste below one directly.

.post-body img {
padding:1px 1px 1px 1px;
border:2px solid #928D8D;
-moz-box-shadow:0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75);
-webkit-box-shadow:0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75);
box-shadow:0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75),0 0 2px 2px rgba(204,202,202,0.75);
-moz-transition:all 250ms cubic-beizier 10ms;
-webkit-transition:all 250ms cubic-beizier 10ms;
-o-transition:all 250ms cubic-beizier 10ms;
-ms-transition:all 250ms cubic-beizier 10ms;
transition:all 250ms cubic-beizier 10ms;
}
.post-body img:hover  {
border:2px solid #374BA5;
-moz-box-shadow:0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75);
-webkit-box-shadow:0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75);
box-shadow:0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75),0 0 2px 2px rgba(204,222,232,0.75);
-moz-transition:all .3s linear 50ms;
-ms-transition:all .3s linear 50ms;
-webkit-transition:all .3s linear 50ms;
-o-transition:all .3s linear 50ms;
transition:all .3s linear 50ms;
}

• #928D8D : Refer the color of borders around post images.You can change it with your desired color name or its hexadecimal number.
• Change #374BA5 with your wished border color which will be shown when mouse over.

5: Now Save your Template.

You're done.Now you just added pleasant image effect for pictures in post pages.View your blog and see how its works.If you have a knowledge about CSS,you can change above code and add more effects.Stay tuned with us,we have coded some curious blogger widgets.If you have any question in your mind, So don't hesitate to speak your words.Happy blogging buddies :)

Pengelola Blog : ABDUL WAHAB

Judul : Design Own Image Effect for Blogger Posts
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang Design Own Image Effect for Blogger Posts
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
https://kejutaninternet.blogspot.com/2013/08/design-own-image-effect-for-blogger.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.


Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.

Artikel Terkait