Tutorial Lengkap Mendesain Header Blog Dengan Photoshop

    Bagi sebagian blogger termasuk saya bahwa mendesain tampilan blog semenarik mungkin adalah kepuasan tersendiri sehingga memacu kita untuk terus dan terus mencari dan mendesain seindah mungkin tampilan blog kita termasuk dalam menampilkan header yang menarik. Oleh karena itu bagi teman-teman blogger yang ingin mendesai blognya dan belum bisa mendesainnya dengan menggunakan aplikasi photoshop (maaf bagi teman-teman yang udah mahir dengan photoshop), jika anda kepingin mendesain header seperti   di atas, ikutilah tutorial ini dengan seksama biar kita dapat berbagi ilmu yang bermanfaat. Nex...!

Langkah-langkahnya sbb:

1. Buka Aplikasi Adobe Photoshop > new (atur    ukuran width dan heigt, yang saya pakai width  
    1260px   dan    heigt 150px). lihat gambar 1, kemudian layer nya akan tampak seperti gambar 2

2. Pilih warna yang sesuai dengan keinginan anda sebagai background (lihat gambar 3)

3. Anda dapat menempatkan warna lain di atas warna background  dengan cara klik kanan pada menu   
    sebelah kanan lalu pilih duplicate layer dan atur besarnya layer tersebut (lihat gambar 4)

4. Kembali klik kanan pada menu sebelah kanan di layer duplikat (dalam tutorial ini layer berwarna merah  
    maron) >pilih blending options (lihat gambar 5) > texture - untuk mengubah tekstur gambar

   (lihat gambar 6) 

Cara Membuat Animasi Gambar

Tutorial tentang cara membuat animasi gambar/huruf ini sudah bukan hal baru lagi dan sudah sangat umum, namun   saya akan coba berbagi ilmu dengan teman-teman yang masih baru terhadap dunia computer lebih-lebih tentang animasi. Bagi teman-teman yang udah mahir tolong kasih koment / kritikannya buat kemajuan saya pribadi.

Ok,,kita langsung saja ke pokok persoalannya.

Anda harus memiliki terlebih dahulu aplikasi Adobe Photoshop dangan tipe apa saja dan Photoscape,   bagi yang sudah punya langsung saja ikuti langkah-langkah berikut, (maaf, berhubung kamera saya sudah rusak, jadi saya tidak bisa memberika tutorialnya dengan melampirkan gambar/foto) tapi saya yakin teman-teman bisa langsung memahaminya.

Langka-langkahnya sbb:

Cara Membuat Blogroll Di Sidebar

   Dalam postingan cara membuat blogroll di sidebar ini, terinspirasi dari keinginan saya untuk berbagi pengalaman dengan shobat blogger tentang cara membuat tampilan blog yang menarik dan praktis. Kita selalu merasa tidak puas terhadap tampilan blog dan sering kali kita rubah agar memperoleh hasil maximal, apalgi ketika link arsip blog yang tampil di sidebar yang terus memanjang dan memanjang  ke bawah ketika kita menambahkan entri baru dan itu sangat memakan tempat dan menjemukan bagi pengunjung blog.

Oleh karena itu shobat blogger, coba perhatikan secara saksama dan dalam tempo yang sesingkat-singkatnya (Proklamasi kaleeee!!!). Tutorial ini sangat mudah untuk diterapkan dan tidak perlu masuk ke edit html segala yang membuat sebagian orang merasa bosan dan menghindarinya termasuk saya sendiri.

Ok...shobat, kita langsung saja ke tutorialnya.

- Klik desain (di pojok kanan atas halaman blog anda) lalu pilih Tata Letak (Layout)  selanjutnya klik tulisan add a gadget >cari

  HTML/JavaScript - klik tanda (+) 

- Pastekan kode dibawah ini  di dalam JavaScript tersebut

<div style="background-color: none; border: 1px solid #CCC; height: 300px; margin: auto; overflow: auto; padding: 2px; text-align: left; width: 95%;">
<div align="center">
<span style="font-size: medium;"><span style="font-weight:bold;">Blog Archive</span></span></div>
<script src="http://saungweb.googlecode.com/files/TOCcategory.js"></script>
    <script src="http://ana-nazamuddin.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    <br /></div>

Nb. Tulisan berwarna merah anda ganti dengan URL anda sendiri sedangkan height nya anda sesuaikan dengan ukuran sidebar yang telah anda buat

- Save

 selesai... dan lihat hasilnya. O..ya ! cara ini dapat juga anda lakukan untuk membuat Daftar isi Blog Berdasarkan Label di daftar isi seperti yang telah saya terapkan untuk daftar isi di atas.

Sekian Tutorial saya, semoga bermanfaat..!

Artikel Terkait

Cara Memasang dan Mengupload Gambar Header Blog

   
   " Khusus  Blogger Pemula"

  Header atau bagian kepala pada sebuah blog diusahakan semenarik mungkin, karena header sebagai simbul yang mewakili seluruh isi blog. Oleh karena itu, sebelum kita memasang header ke dalam blog tentunya kita perlu mendesain dulu seindah mungkin sehingga teman-teman blogger yang datang berkunjung bisa merasa nyaman dan kerasan berada lama-lama di blog kita.

  Proses mendesain ini dapat kita buat dengan "Photoshop atau CorelDRAW"tentunya (  ukuran gambar Photoshop yang saya pakai 1050px x 100px), anda bisa mencobanya sesuai ukuran blognya,  tapi bukan tentang desain header yang mau saya tutorialkan di sini tetapi tentang cara memasang header yang telah anda desain ke dalam blog.

   rekan-rekan blogger..! kita mulai saja menyimak isi tutorial ini supaya anda bisa lebih cepat mencobanya sendiri, Okey,,,,?

  Ikuti langkah-langkahnya :

Daftar Kode Warna HTML

   Supaya anda dapat mengedit sebuah tampilan blog sesuai desain warna kesukaan anda dengan menggunakan kode html, nah di bawah ini saya berikan daftar kode warna html. semoga bermanfaat bagi anda.
  Selamat mencoba....!

Whites
Color	Red	Green	Blue	Hexa Code	Sample
antique_white	250	235	215	#FAEBD7	Sample
azure	240	255	255	#F0FFFF	Sample
bisque	255	228	196	#FFE4C4	Sample
blanched_almond	255	235	205	#FFEBCD	Sample
cornsilk	255	248	220	#FFF8DC	Sample
eggshell	252	230	201	#FCE6C9	Sample
floral_white	255	250	240	#FFFAF0	Sample
gainsboro	220	220	220	#DCDCDC	Sample
ghost_white	248	248	255	#F8F8FF	Sample
honeydew	240	255	240	#F0FFF0	Sample
ivory	255	255	240	#FFFFF0	Sample
lavender	230	230	250	#E6E6FA	Sample
lavender_blush	255	240	245	#FFF0F5	Sample
lemon_chiffon	255	250	205	#FFFACD	Sample
linen	250	240	230	#FAF0E6	Sample
mint_cream	245	255	250	F5FFFA	Sample
misty_rose	255	228	225	#FFE4E1	Sample
moccasin	255	228	181	#FFE4B5	Sample
navajo_white	255	222	173	#FFDEAD	Sample
old_lace	253	245	230	#FDF5E6	Sample
papaya_whip	255	239	213	#FFEFD5	Sample
peach_puff	255	218	185	#FFDAB9	Sample
seashell	255	245	238	#FFF5EE	Sample
snow	255	250	250	#FFFAFA	Sample
thistle	216	191	216	#D8BFD8	Sample
titanium_white	252	255	240	#FCFFF0	Sample
wheat	245	222	179	#F5DEB3	Sample
white	255	255	255	#FFFFFF	Sample
white_smoke	245	245	245	#F5F5F5	Sample
zinc_white	253	248	255	#FDF8FF	Sample

Cara Membuat Animasi Gambar/ Huruf

Tutorial tentang cara membuat animasi gambar/huruf ini sudah bukan hal baru lagi dan sudah sangat umum, namun   saya akan coba berbagi ilmu dengan teman-teman yang masih baru terhadap dunia computer lebih-lebih tentang animasi. Bagi teman-teman yang udah mahir tolong kasih koment / kritikannya buat kemajuan saya pribadi.

Ok,,kita langsung saja ke pokok persoalannya.

Anda harus memiliki terlebih dahulu aplikasi Adobe Photoshop dangan tipe apa saja dan Photoscape,   bagi yang sudah punya langsung saja ikuti langkah-langkah berikut, (maaf, berhubung kamera saya sudah rusak, jadi saya tidak bisa memberika tutorialnya dengan melampirkan gambar/foto) tapi saya yakin teman-teman bisa langsung memahaminya.

Langka-langkahnya sbb:

Cara Pasang Jam Clocklink Pada Blog

       Agar tampilan blog kita lebih menarik, lebih elegant, maka perlu kiranya blogger di permak dengan pernak-pernik yang dapat memberikan kesan manis buat pengunjung. Salah satu hiasan yang bisa kita tampilkan dan memberikan kesan estetik pada blogger adalah jam clocklink. Kalau anda pengen menghiasi blognya dengan jam keren dari clocklink, akan saya coba berikan sedikit bantuan untuk membuat jam tersebut.
Kalau anda berminat, ikuti saja langkah-langkah berikut:

Cara Mengganti Header Blog

  Header atau bagian kepala pada sebuah blog diusahakan semenarik mungkin, karena header sebagai simbul yang mewakili seluruh isi blog. Oleh karena itu, sebelum kita memasang header ke dalam blog tentunya kita perlu mendesain dulu seindah mungkin sehingga teman-teman blogger yang datang berkunjung bisa merasa nyaman dan kerasan berada lama-lama di blog kita.

  Proses mendesain ini dapat kita buat dengan "Photoshop atau CorelDRAW"tentunya, tapi bukan tentang desain header yang mau saya tutorialkan di sini tetapi tentang cara memasang header yang telah anda desain ke dalam blog.

   rekan-rekan blogger..! kita mulai saja menyimak isi tutorial ini supaya anda bisa lebih cepat mencobanya sendiri, Okey,,,,?

  Ikuti langkah-langkahnya :

TUTORIAL CARA MEMBUAT EFEK MARQUEE ATAU TEKS BERJALAN

 Sebenarnya saya sedikit malu dengan postingan ini, karena saya sendiri masih belajar juga tentang tampilan blog, tapi saya coba-coba aja, terutama saya tujukan bagi teman-teman yang masih awam ngeblog. Saya sangant berterima kasih sama Mas ' Hermanblog' tempat saya menimba banyak ilmu ngeblog, sehingga hari ini saya coba buat satu postingan tutorial cara membuat efek maquee atau teks berjalan pada blog dengan satu harapan postingan ini dapat menarik pengunjung datang ke ArtBlog.

    Agar tidak membosankan dalam membaca tulisan saya, kita langsung saja ke tutorialnya:

TUTORIAL CARA MEMBUAT ANIMASI HURUF/GAMBAR

Dalam tutorial ini saya hanya ingin membagi ilmu tentang animasi sederhana kepada rekan-rekan yang masih baru dalam dunia animasi, bahkan yang belum mengerti sama sekali tentang animasi. Cara yang saya tutorialkan di sini amat sederhan dan mudah dipahami dan diikuti oleh rekan-rekan asalkan di komputer sobat sudah punya 'Photoshop' dengan 'PhotoScape'. Kalau belum punya program itu, silahkan didownload saja dulu.

    Oke, sobat! supaya ga bingung-bingung lagi, kita langsung aja ke tutorialnya :

1. Buka Photoshop nya, klik 'file'>'open' lalu pilih beckground sebagai latar sesuai seleranya.

2.Buatlah tulisan atau masukan gambar ke dalam layer.

CARA BUAT TAMPILAN FOTO BERGANTI-GANTI DENGAN PHOTOSCAPE

Untuk membuat tampilan beberapa foto secara berganti-ganti sangat gampang alias mudah.

Ga perlu banyak komentar, kita langsung aja dengan langkah-langkahnya, ok....?(maaf..! tutorial ini bukan bagi sobat-sobat yang udah pakar, khusus buat teman kita yang baru belajar)