Selamat Datang di Blog Karrysta buat Sobat semua
Kunjungan Anda ini sangat bermanfaat sekali untuk kelangsungan dan ke lestarian Blog Karrysta,
Semoga apa yang saya Bagikan di sini senantiasa bisa bermanfaat dan memberikan motivasi dan apresiasi untuk kita semua
Mudah-mudahan silaturrahmi dan Ukhuwah antar blogging semakin erat untuk tetap saling berbagi Terima kasih .. Salam hormat.

Mempercantik Gambar Dengan Style CSS

Mempercantik Gambar Dengan Style CSS


Untuk membuat tampilan blog menarik juga enak  di pandang mata maka harus berupaya
Dan berusaha walau  keberadaanya  tidak  ada  kaitanya  dengan  SEO  namun  stidak nya
Tutorial ini akan  memperbaiki  sekor di  Chkme,  karena  script  yang akan  saya  publikasi
Pada pertemuan kali ini, sengaja saya lengkapi dengan title , alt dan caption pada gambar
Di blog anda. Dan tentunya  selain  lebih  SEO  sudah  pasti  lebih menarik  dengan effects
Style CSS  yang sekarang  yang akan  saya share  untuk sobat blogging silahkan di simak

Mempercantik Gambar Dengan Style CSS
Mempercantik Gambar Dengan Style CSS

Sebelum melanjutkan tutorial ini silahkan untuk melihat demo di bawah ini :
                        
                                                       DEMO

Untuk membuat  Gambar di blog  lebih  bervariatif  unik,  appear  attractive style
Yang akan menghiasi homepage blog anda tentunya script ini bisa bermanfaat
Buat anda yang berminat mendesain tampilan  yang baru dengan  gaya artistic
Nah untuk memasang scripts diatas silahkan anda  simak berikut di bawah ini

Cara memasangnya :

Sign in di accaount blog anda masuk dasboard, pilih template lalu pilih edite template
Cari kode  <head>  tekan Ctrl + f  untuk  memudahkan  pencarian  kodenya. copy kode
CSS di bawah ini  kemudian  anda pastekan   kodenya  tepat  di bawah kode   <head>

<style type="text/css">.mode8{
border: 3px solid #F7A808;
border-style:double;
margin:10px auto;
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
padding-top:5;
padding-left:5;
padding-bottom:5;
padding-right:5;
}
.mode8:hover{
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);   
}</style>
<style type="text/css">
.mode12{
    box-shadow: 1px 1px 13px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}
.mode12:hover {
    border-radius: 33px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 33px 0 30px 0;
    -o-border-radius: 33px 0 33px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}</style>
<style type="text/css">
.mode6 {   opacity:0.5;   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);   -moz-opacity:0.5;   -khtml-opacity:0.5; } .mode6:hover {   opacity:1.0;   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);   -moz-opacity:1.0;   -khtml-opacity:1; }
</style>
<style type="text/css">
.mode13 {-webkit-transition-duration:.4s;}
.mode13:hover {filter: alpha(opacity=60);opacity: .9.9;border-radius:50px;border: 1px #FF66CC;-webkit-box-shadow: 0px 0px 20px #FF66CC;-moz-box-shadow: 0px 0px 20px #FF66CC;}</style>

Setelah penerapan kode CSS nya terpasang dengan benar klik save - simpen template

Untuk memasang effects pada gambar copy kode Html, di bawah ini pada saat anda membuat
Artikel baru, disini saya memberikan 4 karakter effects gambar dengan CSS dan nantinya anda
Tinggal memilih tampilan dengan keunikan 4 karakter effects style CSS copy kode  di bawah ini
Pada artikel blog baru anda, pada posisi mode HTML, jangan pada kolom compose


Copy - paste kode Html di bawah ini di artikel baru blog anda :

<div class="separator" style="clear: both; text-align: center;"><img alt="Mempercantik Gambar Dengan Style CSS" class="mode6" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdjob-Mn0hp0G_S1HBur-TuPgOyxVzGPVAf1JyKHiQKKaLpaeu2rI3PI2ROePqwTLX0d5DiQ2S45ttaJPi5oBPrdIrF3Qk5OMF9i98ZjDzw8lqiUPF4kiDen8SF6rwYDAH8jWUQbwKZ5o/s1600/DEMO2.jpg" title="Mempercantik Gambar Dengan Style CSS" width="320" /></div>

Keterangan kode diatas :

Yang berwarna Biru ganti  dengan tag  Alt - Title  atau dengan  judul  artikel anda
Yang berwarna Merah  silahkan  ganti  dengan  URL Gambar,  yang  anda  sukai
Yang berwarna Hijau silahkan sesuaikan  gambar sesuai yang  anda kehendaki
Yang berwarna Orange,  pilihan number  Effects  ganbar  kode nya  ada 4 mode
Setelah semuanya tertata dengan benar silahkan anda publikasi artikel barunya

Kesimpulan :

Ada 4 jenis karakter effects CSS ini contoh lists nya seperti di bawah ini

* Mode8   = Effects rotasi spining atau berputar kemudian Zoom
* Mode12 = Effects Ketupat melengkung atas, kanan bawah border
* Mode6   = Effects Fade in gambar menjadi blur ligth di sorot mouse
* Mode13 = Effects Melingakar bundar menyerupai gelembung baloon

Demikianlah artikel saya semoga bermanfaat buat anda semua...


Berlangganan lewat email pada post baru Blog : Karrysta.

Next
« Prev Post
Previous
Next Post »

82 komentar

wuss.. pertamax hehe.
btw itu foto yang ada di demo siapa ya mas? :D
mungkin saya akan terapkan style nya mas lain waktu, tipsnya keren mas mantap! :)

hehe nanti malah pada suka sama gambar-gambarnya saja mas. Saya mohon maaf masih jarang bw ya hehe maklum mas.
PERTAMAX

haha keduluan hahaha.

saya izin liat demonya dulu aja deh. ^^

Silahkan Mas Intan, dapet nemu foto nya Mas hhhhh
Hahha Mas Ikerenki keduluan Mas Intan, wessss hh ngebut
Silahkan Mas KT, di simak dulu Demo nya. Terima kasih sudah berkunjug

Wah ternyata gambar posting juga bisa dibuat cantik ya mas. Kalau gambar foto artis cantik, pasti udah cantik mas karis hehehe :D
Tapi boleh juga nich dicoba tutorialnya agar blog semakin cantik aja hehe ^^

Sampai lupa untuk mengucapkan selamat pagi mas karis ^^
Have a nice day ^^

Bisa narsis terus di blog nih
Tambahan ilmu yang berguna sekali buat saya...ya mungkin bisa terus narsis..

wah keren banget nih, ijin save scrif nya deh :)

Dengan CSS bisa menjadi apa aja yang kita mau ya kang...keren.......
Photonya keren jadi tambah keren lagi :D

mlm sob. wau tentunya makin bagus y sob kalu ada efek Css nya. trmksih sob tutornya

wah.. unik sekali effect pada gambarnya.. mungkin satu masa nanti saya akan mencubanya.. terima kasih sharing tutorialnya.. :D

ada tiga style.., keren jg ni pak.., makasih! *smile

Oke deh Mbak Rin terima kasih atas kunjunganya Mbak

Terima kasih buat Mas dan Mbak yang sudah berkunjung di sini
Hum saja yah semua sobat blogging, .

setelah saya lihat demonya keren juga yah mas Karysta, jadi pengen nyoba nih hehe...

Selamet hari Minggu pagi mas hehe...

Kalau gambarnya mbak Ririn sih udah pasti cantek lah heheh...

wah keren ya gambarnya bisa muter2 gitu hehehe

Keren banget mas..dan nambah variasi di gambarnya..jadi keliat gimana gituh...hehe ;)

Sarapannya ndak di bawaain sekalian :)

widihh keren banget mas ... sampe geter2 bgitu ya ... penasaran langsung pengen praktek niih ... ^_^

Wah gambarnya bisa jadi keren ya gan terimakasih tutornya

Iya kan cewek, udah pasti cantik lah. Kalau mas anthonie sama mas budi ya cakep, soalnya cowok hehe :)

sarapannya sambil ngeblog mas, lauknya jquery sama css hehe :D

Kalau gambar posting nya cantik, pasti blog nya ikutan cantik ya mas karis hehe :)

Selalu keren dah tipsnya :'D makasih.

Yah begitu adanya Mas Anthonie, silahkan semoga Bermanfaat Mas Anthonie
Bener Nico di mode6 effects nya Rotari spining dan Zoom
Variasi dikit Mas Budi, supaya gak bosen tampilan gambar postinganya
Mas Note apa yang geternya, kaya Hp aja silahkan Mas
Oke Mas Rahmat, sama-sama terima kasih Mas?

Yah begitu Mbak Rin, menghilangkan jenuh pada gambar postingan
Sobat @Rian makasih kembali.

izin serap scriptnya mas bagus efek nya :d

wah, keren bro,,,
btw, code ini bisa bisa bikin berat loading blog kita gk bro???

sebenarnya kalau bahas kode html saya agak ribet mas, soalnya cepat pusing hehehehe, tapi sangat membantu artikelnya mas:)

wah keren banget mas efek2nya...sampai ceeweknya ada yang muter2 hehe.
kalau saya di blog hanya pakai yang node zoom asaja mas...tapi sudah agak bosan sih ingin ganti efeknya

si akang ieu hebat waelah postingan na .. keren kang

Cari aman.saya di belakang saja xixi...

Seperti biasa mas script nya di bungkus dulu.ntar klo di perlukan bisa langsung di pasang.trims!

Silahkan Mas Sopyan semoga bermanfaat yah Mas?
Gak bikin berat koq Mas Aan, script CSS gambar ini.
Kalau sudah terbiasa, nanti enak Lho Mas Yobert Parai.? :)
Silahkan Mas Bayu, oke Mas langsung terbang ke TKP hh :D
Mangga Kang WS, Di jamin pakai effects ini ada 4 jenis yah lumayan Unik hhh
Silahkan Mas Uda, gak bikin ngaruh error pada Chkme script ini Mas Uda.
Biasa we Kang Ruly, di ajar berbagi siapa tau ada gunanya buat Sobat semua.
Silahkan Mas Agus, anu bageur,,hh mugia bisa bermanfaat yah salam Kota Ciamis.
Terima kasih buat sobat blogging semua yang sudah berpartisipasi disini. :q

tipsnya kren banget ni gan, tapi contohnya yang lebih cantik. hahaha

kunjungan baliknya sukses gan

Wah suka main di belakang ya?

Keren mass, , ,
izin coba . . .

jangan lupa mampir diblog q ya , , ,

Terima kasih atas pendapat nya Mas Bayu, siip atas kerja samanya :)
Oke Mas yang gak pake Nama terimakasih sudah berkunjung salam yah. :D

Itu kan foto nya artis-artis dangdut mas karis hehehe :D
Cantik-cantik dan seksi-seksi. Luar biasa mas karis. Bisa bikin awet mda ya mas hhehe :D

ternyata gambar juga bisa dibuat cantik ya mas. Kalau gambar itu memang aslinya juga cewek cantik tapi gimana jadinya yang di poto gambar sayah bisa berubah cantik malah bahaya kang heheheh.

tadinya sayah mau nyoba praktek, tapi ada yang harus utak atik daleman templat blog yah, sayah palinggak bisa sekarang utak atikdaleman blog, dah disimpan scripnya tapi pas di cek eh tidak tersimpan... bingung deh sayah

mbak master ndak tau ya, kang karis itu punya grup dangdut namanya Karista dangdut, penyanyinya cantik cantik seperti mbak master Eka .... hehehe

di demonya malah lebih cantik cantik sob hehehe

ditambah lagi aja kang efeknya, tapi asal jangan tambah cewek aja, bisa ada panci melayang nanti hehehe

katanya begitu... saya juga mau pasang gambar yang cantik ah... biar sayah cantik... ups blog sayah yang cantik.

mas budi, yuk kita pasang hehehe

liat demonya luarbiasa keren banget ya, cuman cara pakenya rada ribet juga ya, karena koneksi lemot, saya kalau mosting satu artikel butuh 2 jam, kalau make gambar yang model keren ginih...bakal lebih lama lagi ya dong?

Lumayan banyak juga skripnya ya mas,,, oke dech saya pelajari dulu ntar saya praktekkan, hehehe :)
makasih sharingnya ^_^

Keren juga ini sob, gambarnya bisa diapaain aja nih?

sama mangga gedong gincu mbak hehe...

kalau blog cowok masa cantik sih mbak hehe...

dipelajari dulu sampai ngerti baru praktek yah mbak Indri :)

biar tambah menarik yah mas Karysta hehe... :)

Waduh, kalo ngedit2 html aku nyerah. Kapok aku. Tapi salam kenal ya.....

selamat Pagi Mas, saya sudah lihat demonya dan memang terlihat bagus, tapi apa kode CSS ini tidak membuat blog berat Mas ? owgh iya ini kunjungan perdana saya jadi saya ijin ya Mas untuk follow blognya, kalau ada waktu ke sebelah juga di gubuk tua saya jalan jalan dan follback jika berkenan mas...terimakasih

Benar-benar keren sob effectnya,, CSS memang gudangnya penampilan.. hehe

bener jadi keren mas, gamarku selalu yg biasa2 saja

Betul Kang Adhy, kebetulan ini saya dalam masa belajar
otak atik template dengan CSS, Pengen pinter kaya Kang Adhy
Terima kasih Kang Adhy sudah berkunjung.

dari pagi sampai sekarang utak atik daleman blog tuh scripnya gak tersimpan terus... jadi pengen nangis rasanya ehehehe

ndak sob, paling berat dikit juga dikit.. coba aja

Betul ntu cover singers Band Dangdut crew saya Mbak Ririn, hh :)
Semoga aja dengan sarana hiburan semua rekan bisa awet muda

Mang Yono, leres Mang tapi saya gak bisa apa-apa lho? hanya bisa
jadi pengamat saja, kalau artis cewek emang cantik, tapi klw cowok?

Tuh kalau Mas Anthonie Artis cowok tambah menarik katanya hhh
Asal jangan tertarik sama artis cowok aja Mas? hh ketawa dulu akh

Malam jelang pagi, terima kasih atas pendapatnya Mas BL
Terima kasih juga Kang Mas Budi, yang ramah juga Murah hati

Yang belum sarapan silahkan Buat sobat blogging semua
Di Mbak Ririn ada goreng Adsesnse masih angetan tuh. hh

Di Mas Anthonie ada Vitamin C, Jika pada pegal badanya...
Kalau di Mas Budi masih ada Mangga Gedong Gincu, silakan
Manasuka pilih aja, di saya ada ni kukus script css sapa mau? hh

Silahkan Mas Budi Mang Yono, jika mau nyoba pasang CSS
Untuk gambar postingan ini, jangan lupa sambil makan kecil
Ubi Cilembu dan minumnya Juice Mangga Gedong Gincu hh :D

Kalau mau dapat pertamax 1 galon, harus nginep di rumah nya mas karis mas hehehe :D

GR itu kalah nggak salah kepanjangan dari kata Geseng Rumpeng lho mas hehehe :D

Wah lengkap banget ya mas menu nya. Kalau di gabung, bisa jadi gado-gado itu mas karis hehehe :D

Iya sama aja mas, soalnya kan blog itu nggak ada gender nya hehe :D
Jadi semua blog itu cantik hehehe :D

Mampir lagi mas karis untuk ikut mendengarkan lagu-lagu dangdut group nya mas karis. Luar biasa ya mas karis ini. Bisa punya group band dangdut :)

tutorial yg sangat membantu sobat, terima kasih sudah berbagi

iya mas Eka, musti dipahami dulu baru praktek agar bagus hasilnya ^^

tinggal kreatifitas sendiri, atur css nya agar sesuai keinginan.

Kok gak bisa-bisa, ya?

Wahhh Ilmunya keren Lagi nihhh pakkk saya jadi kepingin nyomot nihhh buat Koleksii hehe saya izin nyomot yah pak :D

keren om.... pingin coba ah...

Jangan Komentar Promosi, Link Hidup, Spam Karena akan terhapus
Silahkan untuk "Follower blog, atau Berlangganan Lainya" di blog ini
Untuk Mengkonversi kode dan icon Smiley silahkan Klik dibawah ini

Show Konversi KodeHide Konversi Kode Show SmileyHide Smiley Follower

Terima Kasih atas Kunjungan dan Komentar nya
Copyright © 2015. Karrysta - All Rights Reserved | Template Created by Kompi Ajaib | Modified : Saud Karrysta | Proudly powered by Blogger