Girant_31: Design

Tampilkan postingan dengan label Design. Tampilkan semua postingan

Template Girant News

By Girant_31

Girant News, Template style bola.kompas.com

This template has more sections for news, sport news, breaking news, and gallery.

easy installed and customized categories in homepage, to show more categories.

Live Demo TemplateClick here to view demo Template Girant News

More►►

Elastis Effect Thumbnail Membesar

By Girant_31

Alhamdulillahirobbil'alamin..

Masih bisa update disela-sela. . . .

Menyambung dan mengupdate tentang memberi effect gambar didalam postingan, jika sebelumnya ane pernah share sedikit tentang Effect Image Corner pada postingan, kali ini masih sama tentang effect-effectan pada gambar yang kita pasang didalam postingan. bedanya Effect kali ini adalah effect elastis Thumbnail membesar disaat dilewati oleh Cursor/Pointer. atau lebih detailnya effect kali ini memiliki dua fungsi tergadap gambar, pertama Membuat ukuran gambar menjadi thumbnail lebih kecil dari ukuran aslinya ketika halaman pertama kali dimuat, kedua Memberi efek animasi dengan mengembalikan gambar kembali ke ukuran sebenarnya ketika mouse kita lewatkan diatasnya.

Demo Elastis Effect ThumbnailKlik disini untuk melihat demo Elastis Effect Thumbnail Membesar

Pada demo tersebut, coba lewati gambar yang ada disana dengan cursor/pointer sobat, dan lihat apa yang terjadi?! nah effect yang seperti itulah yang ane maksud..

Langsung saja ke cara penerapan nya.

Langkah 1

Seperti biasa untuk kode CSS, diletakan diatas kode ]]></b:skin> pada Rancangan - Edit HTML blog sobat.

.menuitem{display:inline-block;}

Langkah 2

Dan untuk kode Java Script, diletakan diatas kode </head> pada Rancangan - Edit HTML blog sobat.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.menuitem img&#39;).animate({width: 100}, 0);
$(&#39;.menuitem&#39;).mouseover(function(){
gridimage = $(this).find(&#39;img&#39;);
gridimage.stop().animate({width: 200}, 150);
}).mouseout(function(){
gridimage.stop().animate({width: 100}, 150);
});
}); 
</script>

Perhatikan kode pada baris ke 1, kode tersebut adalah kode Framework jQuery dari Java Script diatas, jika sebelumnya sobat semua pernah memasang jQuery Framework tersebut pada template sobat, maka kode pada baris ke 1 dihapus saja.

Langkah 3

Save template sobat, lalu menuju ke halaman posting.
Upload lah satu contoh gambar kedalam postingan.

Langkah 4

Pindahkan mode editor postingan sobat ke mode Edit HTML. dan cari kode gambar yg sudah di upload sebelumnya. untuk kode gambar biasanya akan seperti ini bentuk kode nya :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

Langkah 5

Jika sudah ketemu kode gambarnya, maka tinggal tambahkan kode dibawah ini pada kode gambar tersebut.

class="menuitem"

dan akan membentuk kode gambar secara keseluruhan seperti dibawah ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" class="menuitem" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

kode yang berwarna merah adalah kode yang disisipkan diantara kode gambar dalam postingan sobat, sisipkan sebelum kode "><img Lalu terbitkan entri postingan sobat, dan lihat hasilnya disaat cursor/pointer sobat melewati gambar yang telah diterbitkan dalam postingan sobat..

Langkah 6

Selesai.
Selamat Mencoba dan semoga bermanfaat.

Sedikit Informasi, kode-kode atau trik diatas dapat juga sobat gunakan untuk membuat menu dengan menggunakan gambar dan effect seperti yang dimaksud diatas.

More►►

Different Background Post

By Girant_31

Sedikit share tentang memodifikasi postingan.. yaitu menambah background image pada postingan dengan berbeda-beda background di setiap postingan, tanpa merubah ataupun ngutak-atik template. mungkin trik ini sudah banyak yang mengetahui, makanya share kali ini ane khususkan bagi yang belum mengetahui trik ini dan berminat memodifikasi postingan di setiap memposting.

Untuk DEMO, sobat bisa lihat sendiri pada postingan ini.. dan hanya pada postingan ini, tidak merubah background postingan keseluruhan blog sobat.

Langsung ke cara pembuatan nya.

Langkah 1
Letakan kode dibawah ini pada editor Edit HTML postingan blog sobat.

<div style="background: url(URL GAMBAR) no-repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:50px;
-webkit-border-top-right-radius:50px;
-moz-border-radius-bottomright:50px;
-webkit-border-bottom-right-radius:50px;
-moz-border-radius-topleft:50px;
-webkit-border-top-left-radius:50px;
-moz-border-radius-bottomleft:50px;
-webkit-border-bottom-left-radius:50px;">

CONTENT ARTIKEL

</div>

Perhatikan kode diatas!

Rubah URL GAMBAR dengan URL gambar yang sobat kehendaki.
Kode no-repeat adalah kode untuk tidak menampilkan gambar berulang-ulang, jika memang menghendaki gambar yang ditampilkan berulang sampai ke bawah postingan, maka tinggal digapus saja kode no- nya.
CONTENT ARTIKEL adalah isi dari artikel/post sobat keseluruhan. jadi integrasinya kode diatas adalah mengapit keseluruhan isi artikel sobat. sebagai bayangan, kode pada baris ke 1 s.d 11 diletakan paling atas isi post sobat, dan kode pada baris ke 15 diletakan di akhir setelah semua isi post sobat.

Langkah 2

Ada baiknya sebelum post tersebut diterbitkan, maka sebelumnya di Pratinjau terlebih dahulu.

Langkah 3

Setelah semuanya OK, maka terbitkanlah postingan sobat.. dan lihat hasilnya..

satu postingan sobat memiliki background sesuai dengan keinginan sobat.

Ribet memang.. tapi tak ada salahnya untuk pembelajaran, siapa tau dikemudian hari trik ini sangat dibutuhkan.

Oia, jika di postingan selanjutnya sobat ingin background postingan yang berbeda, maka tinggal dirubah saja URL GAMBAR pada kode diatas dengan URL gambar milik sobat yang lain nya, agar tidak bosan melihat background yang sama di setiap postingan.

Selesai.

Selamat mencoba dan semoga bermanfaat.

More►►

Windows 7 Star Menu

By Girant_31

Kali ini ane tidak akan sharing tentang tutorial.. tapi hanya ingin sedikit menginformasikan kepada sobat blogger semua.. karena. . . . . Girant_31 blog kini memiliki menu baru. bukan bermaksud sombong, tapi hanya sedikit bangga ( Bangga bangets sih sebenarnya :D ) karena menu kali ini yang ane buat memang barang baru di dunia blogger. bisa dibilang ane yang pertama kali neg di dunia dot Blogspot, dot co.cc, dot baby dsb.. (Seneng nya..).

Penasaran seperti apa Windows 7 Star Menu ?!

Ok langsung saja lihat demo nya di pojok kiri bawah blog ini.

Click tombol Star Menu seperti gambar diatas. maka. . .

Munculah menu seperti menu pada Windows Seven khan ?? ya walaupun tidak sama 100%, tapi setidaknya 99% lah.. :D.

Apakah sampai disitu doang neg mas ??

Eiiiiitss.. tunggu dulu, tentunya ane bubuhi sedikit jQuery didalamnya agar sedikit lebih menawan tentunya. mau tau buktinya ?? cobalah sobat click menu Chat Room dan My Document !!

Contoh pertama cobalah sobat click menu Chat Room !!

Maka menu baru akan terbuka dengan widget Shoutmix didalamnya.. pada menu Chat Room ini sengaja ane pasang kembali Shoutmix, agar senantiasa lebih mempererat tali silaturrahmi diantara kita (jiaaaaaaaaah..). ya tidak salah nya kan kalo berharap.. apalagi berharapnya dalam kebaikan..

Jika sudah selesai dengan menu Chat Room atau lebih jelasnya Widget Shoutmix yang telah disediakan, maka click tombol X seperti pada gambar untuk menutup menu/widget tersebut.

Contoh kedua, cobalah sobat click menu My Document !!

Seperti contoh pertama, kali ini pun muncul menu baru dengan isi widget daftar isi dari blog Girant_31. setidaknya lebih mudah untuk mengubek-ubek blog ini nantinya. ya walaupun banyak yang tidak bermutu, tapi setidaknya ada sedikit yang bermanfaat Insya Allah.

Setelah semua dijelajah, gimana ada pertanyaan atu cacian ??

Silahkan curahkan di Chat Room atupun di kolom komentar..

Oy.. mengenai kolom komentar, ane lupa ada sedikit perubahan juga loh..

Tercipta dengan kesadaran penuh tentunya, dan bukan maksud menyembunyikan kolom komentar, hingga membuat sobat semua tersesat, tapi ini hanya meminimalis agar tidak terlalu berantakan az dengan widget-widget dibawah postingan.
Jika masih ada sobat yang masih bingung ingin berkomentar disini, maka saran ane, jangan bimbang dan jangan bingung, click az tab Comments, maka. . . .

Munculah kolom komentar.. dan berkomentar lah :D.

Mungkin cukup sekian dari ane..
Semoga ini bukan menjadi benih dari kesombongan ane, tapi harus dan wajib menjadi langkah awal untuk terus belajar dan berkarya kedepan nya agar menjadi lebih baik lagi..
Amiiiiiiiiiiin..

Terimakasih.

More►►

Neon Text Color jQuery

By Girant_31

Sudahkah sobat melihat tulisan diatas ?? ya itulah yang dimaksud Neon Text Color jQuery.. Effect flashing didalam text adalah murni dari pengaruh java script, tanpa menggunakan CSS sama sekali.

Neon Text Color jQuery ini dapat digunakan di postingan maupun di sidebar, guna mempercantik tampilan blog/website sobat.

Tertarik ??!! Langsung saja ke langkah-langkah membuat Neon Text Color jQuery. Masukan kode java script dibawah ini pada postingan ( pd mode Edit HTML ) atupun di sidebar ( dg menambahkan add gadget HTML/Java Script pd widget sidebar sobat).

<center><h1><script language="JavaScript1.2">
var message="DEMO"
var neonbasecolor=""
var neontextcolor="#FD3D3A"
var neontextcolor2="#FF8080"
var flashspeed=50       // kecepatan flashing dalam milliseconds
var flashingletters=5    // jumlah huruf yg di flashing dlm neontextcolor
var flashingletters2=1  // jumlah huruf yg di flashing dlm neontextcolor2 (0 to disable)
var flashpause=0        // pause diantara flash-cycles dlm milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script></h1></center>

Perhatikan kode yang di highlight. kode pada baris kedua, ganti kode DEMO dengan tulisan yang akan diberikan effect. kode pada baris keempat dan kelima, ganti kode warna dengan kode warna yg sobat suka. kode pada baris keenam, angka 50 adalah kecepatan flashing effect neon. lebih besar angkanya maka akan lebih lambat kecepatan flashing nya. kode pada baris ketujuh, angka 5 adalah merupakan jumlah huruf yang di flashing. kode pada baris kedelapan, angka 1 adalah jumlah huruf yg di flashing setelah kode pada baris ketujuh. Selesai. Terbitkan postingan sobat dan lihat hasilnya.

Neon Text Color jQuery ini tidak berlaku bagi text yg dimodifikasi.. seperti di bold atau di warnai.

Selamat mencoba dan semoga bermanfaat.

More►►

Effect Image Corner

By Girant_31

Huuffs.. Setelah sempet kesel, marah, kecewa, bingung dikerjai oleh si mBah Google kemarin, dimulai dari hilangnya semua komentar sobat semua, juga sempet penghapusan blog tercinta ini selama 3 jam. dan ternyata seluruh blogger di dunia ini pun sebagian besar mengalami nya,.. ga percaya? lihat disini. rata-rata dari mereka mengeluh komentar di blog nya tidak muncul, tapi laporan di eMail mereka sudah banyak yang berkomentar. akhirnya ane menyimpulkan bahwa masalah kemarin tersebut adalah bukan dari human error blog kita masing-masing, tapi ulah dari blogger yg sedang carmuk. jadi saran saya, biarkan saja.. karena tidak ada solusi or Tips n Trick untuk masalah tersebut, hanya tinggal masalah waktu.. biarkanlah itu menjadi urusan keprofesionalan mereka.

Ok.. Sebelum masuk ke berbagi ilmu disini, ane mengajak sobat semua untuk sejenak memperhatikan beberapa image dan effect nya dibawah ini satu persatu :

Image Asli tanpa Effect	Image dg Effect Reflex
Image dg Effect Corner	Image dg Effect Glossy

Adakah salah satu effect image diatas yang menarik buat anda ??

Perlu diketahui, Effect image diatas tanpa editan Photoshop, Corel, 3D Studio MAX dll. Itu semua murni dg script jQuery !! dan sebenarnya masih banyak lagi jenis effect nya loh.

Gimana menarik bukan??
atau masih bingung??

Jadi Effect Image ini adalah effect yang tercipta didalam postingan stelah kita memasukan script jQuery didalamnya, tanpa terlebih dahulu diedit di Photoshop, Corel, 3D Studio MAX dll. lantas fungsi nya buat apa?? memberatkan blog ga?? melihat dari fungsi nya, agar isi postingan kita terkesan lebih menarik dan profesional (ciee..), tapi memang aga sedikit memberatkan blog kita, karena ada fungsi pemanggil plugin java Script yang sebelumnya kita pasang terlebih dahulu di template kita. so.. terserah sobat semua mempertimbangkan nya.

Pada bahasan kali ini, kita coba dengan Effect Image Corner dan macam-macam nya. bisa lihat contohnya diatas seperti apa effect nya, atau lihat demonya.

Demo Effect Image CornerKlik disini untuk melihat demo Effect Image Corner

Cara menerapkan di blog :

LANGKAH 1
Masukan kode dibawah ini tepat diatas kode </head> pada halaman Rancangan - Edit HTML blog sobat.

<script src='http://daftarisi-girant.googlecode.com/files/corner.js' type='text/javascript'/>

LANGKAH 2
Save template sobat, lalu menuju ke halaman posting.
Upload lah satu contoh gambar kedalam postingan.

LANGKAH 3
Pindahkan mode editor postingan sobat ke mode Edit HTML. dan cari kode gambar yg sudah di upload sebelumnya. untuk kode gambar biasanya akan seperti ini bentuk kode nya :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

LANGKAH 4

Jika sudah ketemu kode gambarnya, maka tinggal tambahkan kode dibawah ini pada kode gambar tersebut.

class="corner iradius16"

dan akan membentuk kode gambar secara keseluruhan seperti dibawah ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s1600/tooltip+jquery+girant_31.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img class="corner iradius16" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80cNJS4Kfz_WU6tuKDz7UgJcdYzLMjab6yM6sg5fPfAgS8FL8evWAUUvhYt9Hh107LLXd_VXj0_QfE13zxBUVQgEjMqsqE0kxUGN4TZKrqFT42ggFHTkI3nNC2YwSinvT6ulRMtXa-AeS/s400/tooltip+jquery+girant_31.jpg" width="400" />
</a>

kode yang berwarna merah adalah kode yang disisipkan diantara kode gambar dalam postingan sobat, sisipkan setelah kode <img . Lalu terbitkan entri postingan sobat, dan lihat hasilnya.

Itu salah satu contoh dari Effect Image Corner, lantas bagaimana dengan contoh Effect Image Corner yang lainya ?? Perhatikan demo dari Effect Image Corner !!

Untuk masing-masing effect pada demo Effect Image Corner tersebut memiliki kode yg berbeda-beda, dan inilah kode dari masing-masing effect tersebut :

Effect Image Corner 1

class="corner iradius16"

Effect Image Corner 2

class="corner iradius24 ishadow33 inverse"

Effect Image Corner 3

class="corner iradius20 ishadow33"

Effect Image Corner 4

class="corner iradius32 ishade50 ishadow25"

Effect Image Corner 5

class="corner iradius48 ishade33"

Sama seperti Langkah 4, sisipkan salah satu kode diatas pada kode gambar sesuai dengan effect yang di inginkan.

Kini sobat dapat menampilkan Image dalam postingan dengan Effect yang mengesankan tanpa harus editing gambar dulu melalui Photoshop dan teman-teman nya.. dan ane yakin setelah ini para ahli editing/design photo akan kehabisan job.. wkwkwkwk.. :D. karena ada cara yg lebih simple mengedit gambar seperti contoh diatas.

Selesai.
Semoga bermanfaat dan selamat berkreasi.

More►►

32 effect photoshop yang mengagumkan

By Girant_31

Sudah kita ketahui bahwa photoshop merupakan software edit foto yang sangat bagus dan mantap jika kita bisa memaksimalkan penggunaan photoshop itu sendiri. Nah sebelumnya saya sudah pernah memberikan link ke 60 tutorial photoshop, sekarang saya akan memberikan link ke 32 website yang memberikan tutorial membuat effect yang mengagumkan pada photoshop. Edit foto dengan photoshop ini membuta foto anda benar benar mengagumkan, sangat bagus sekali, layaknya tukang edit foto profesional,

berikut ini adalah 32 effect photoshop yang mengagumkan.

1. Using Ink Drops in Your Digital Compositions

2. Fairy Night Eye

3. Make your image look awesome with a few light effects

4. Compositing with Adjustment Layers

5.Add A Sparkle Trail To A Photo

6. Adding Light Streaks To A Photo

7. Make Perfume Commercial

8. Colorful Picture Style

9. Electrifying Energy Beams

10. The little mermaid Photo Effects

11.Coldplay / Apple Style Portrait

12. The Making of Mystic

13. How to make your own vector portraits

14. Photo Editing / Retouching

15. Blue glow dreamy portrait

16. Fire Lines Tutorial

17. Creating light motion trails & glowing sparks

18. Lighting effects in Photoshop

19. Sin City Photo Effect

20. Creating a Vector Composite Effect from a Photo

21. Photo to Pencil Sketch

22. Creating your own Fairytale Scene

23. Giving a Mafia-Look to a Business Photo

24. Dirty Grunge Poster

25. A Rather Different Photo Collage

26. Urban-Style Piece of Artwork

27. The Ocean Girl Photo Effect

28. The Guitar Photo Effect

29. Make photos sparkle

30. Good and Evil Photo Effect

31. Desaturated ‘Gothic’ Look

32. How to make your Twins (Clones) Bagaimana? cara edit foto dengan photoshop yang mengagumkan bukan? segeralah mencoba dan buat foto anda menjadi mengagumkan seperti foto foto di atas.
Selamat mencoba

More►►

Follow Us

Statistic

Selamat Datang

Sepintas Tentang Saya

My Blog

My Social Stuff


Posts	:
Comments	: