Your Adsense Link 728 X 15
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

2 Trik Mengecilkan Gambar/Foto Cara Photoshop

Posted by Achmad Zaelani Jumat, 28 September 2012 0 komentar
 Artikel komputer kali ini akan membahas cara mengecilkan gambar maupun foto dengan menggunakan Photoshop. Karena ukuran file gambar yang terlalu besar dapat memboroskan harddisk dan jika di upload di website akan menghabiskan bandwith ditambah dengan loading yang lama banget.


Berikut 2 trik photoshop yang biasa bintang lakukan untuk mengecilkan gambar :
Mengurangi ukuran gambar berdasarkan dimensinya, Dalam hal ini untuk mengurangi ukuran width dan height pada foto :
  1. Buku software photoshop anda (Kayaknya semua versi dari 6 sampai CS3, CS4 sudah ada)
  2. File- Open, untuk membuka file gambar milik kamu. Sebelumnya Kamu bisa menggunakanZoom Tool lalu klik Actual Pixels untuk melihat ukuran sebenarnya.
  3. Image – Image size (Alt + Ctrl + I), kemudian akan muncul image size windows. Lihat pada bagian Pixel Dimensions. Silahkan nilainya diubah-ubah pada bagian widht dan height. Bintang biasanya mengubah dulu satuannya ke persen untuk memudahkan mengecilkan foto.
Mengurangi ukuran gambar berdasarkan ukuran filenya, dalam hal ini dihitung menggunakan satuan Kb,Mb dsb. Dan berikut triknya jika menggunakan photoshop :

  1. Pertama tentu saja buka gambar atau foto yang kamu miliki. Kalau nggak! gimana cara mengecilkannya kalau nggak ada file yang mau dikecilkan.
  2. File – Save For Web and Devices (Alt + Shift + Ctrl + S), Anda akan melihat 4 layar kecil yang menunjukkan ukuran file yang berbeda. Anda cukup memilih salah satu! Tapi jika ingin dioptimalkan lagi mengecilkan gambarnya… silahkan ubah sendiri nilainya pada bagian Preset.
  3. Jika sudah klik save, Jangan Lupa! Pada bagian Save as Type pilih “images only”. Dan selesai.
Nah dengan begitu foto narsis anda ukurannya dapat mengecil. Dan jika di upload akan cepat dan dapat menghemat bandwith. Bintang juga selalu melakukan cara diatas  setiap kali posting di blog ini, terlebih dahulu bintang mengecilkan gambar dengan trik photoshop tersebut.

Cara Buat/Pasang Share Buttons di Posting Blogger (Like, Tweet, +1)

Posted by Achmad Zaelani Jumat, 14 September 2012 0 komentar
Facebook like, tweet, Google +1 buttons
Share buttons adalah tombol-tombol yg dapat digunakan pengunjung untuk menilai & membagikan link atau konten tertentu yg mereka sukai ke social media, baik Facebook,Twitter, Google+, dll. Banyak sobat Buka Rahasia Blogspot yg menanyakan tentang share buttons yg saya gunakan di bawah judul posting. Saya menggunakan 3 buttons milik 3 social media yg disusun sedemikian rupa menjadi satu bagian widget. Dulu saya pernah share cara pemasangan Facebook Like Button & Google +1 Button, namun Tweet Button belum. Tetapi karena banyak sobat yg meminta 3 button (tombol) share itu sekaligus menjadi satu widget, oke deh Tweet Button saya lompati dan akan langsung share cara membuat & memasang ketiganya.
buka rahasia blogspot
Masih seperti dua cara sebelumnya, widget ini hanya akan ditampilkan di bagian postingketika halaman posting dibuka secara utuh serta tidak tampil pada jenis halaman lain (homepage, label, search, archive). Agar susunan, jarak serta tampilan tidak kacau, saya membuat ukuran-ukuran tersendiri pada masing-masing button lalu menyusunnya dengan tabel. So, jangan mengubah nilai apapun di dalam masing-masing button.

Sebelum memasang share buttons, perhatikan beberapa hal berikut:
a.  Jika sudah memasang widget Facebook like atau Google +1, khususnya yg saya share di blog ini, hapus atau ambil terlebih dahulu kodenya. Lihat 2 posting terdahulu untuk mengetahui mana yg harus dihapus.
b. Jika sudah pernah memasang Google+ 1 Button, tidak perlu lagi memasang script plugin API Google +1 seperti berikut:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
c. Jika belum, pasang script plugin API Google +1 tersebut di atas </head> pada edit HTML/Edit Template.

Cara Memasang Share Buttons (Facebook Like, Tweet, & Google +1)
Setelah memastikan beberapa hal di atas, pasang widget share buttons dengan langkah-langkah berikut:
1. Copy script/kode berikut:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'><tbody><tr>
    <td><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="bukarahasiablog">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
    </b:if>
Ganti bukarahasiablog dengan nama akun twittermu.
2. Buka halaman edit HTML/Edit Template:
Design/Layout > klik Edit HTML/Edit Template > Centang (check) "Expand Widget Templates" 
2. Jika ingin memasang di bawah judul posting:
Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat di BAWAHnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/&gt; lalu letakkan script/kode tepat di ATASnya.
3. Jika ingin memasang di bawah posting/artikel:
Cari (Ctrl + F) <data:post.body/> lalu letakkan script/kode tepat di BAWAHnya.
4. Save template 'n lihat hasilnya.

Widget Recent Post dengan Lebih Banyak Pilihan

Posted by Achmad Zaelani Sabtu, 21 Juli 2012 0 komentar

Widget yang tampak berwarna hijau di atas adalah widget recent post/posting terbaru dengan begitu banyak pilihan. Anda bisa menyembunyikan gambar, komentar, bulan terbit dan ringkasan atau sebaliknya, menampilkannya. Menentukan apakah widget ini akan dianimasikan atau tidak juga bisa dilakukan. Cukup ikuti langkah-langkah di bawah ini dan pelajari tabel konfigurasinya:

Untuk membuatnya, Hanya masuklah ke Tab Rancangan kemudian tambahkan sebuah elemen halaman HTML/JavaScript:  



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> <style type="text/css"> div.spy-outer { border:2px solid white; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4); box-shadow:0px 1px 3px rgba(0,0,0,0.4); margin:0px auto; } div.spy-outer h2 { margin:0px 0px; padding:5px 10px;background:#008800; background:-webkit-linear-gradient(top, #008800, #037103); background:-moz-linear-gradient(top, #008800, #037103); background:-ms-linear-gradient(top, #008800, #037103); background:-o-linear-gradient(top, #008800, #037103); background:linear-gradient(top, #008800, #037103); color:white; font:bold 12px Arial,Sans-Serif; text-transform:none; text-shadow:0px 1px2px black; } ul.spy { margin:0px 0px; padding:0px 0px; font:normal 10px/12px Arial,Sans-Serif; color:#666; overflow:hidden; } ul.spy li { list-style:none; text-align:left; margin:0px 0px; padding:5px 7px; background:#AABD30; background:-webkit-linear-gradient(top, #AABD30, #9BB009); background:-moz-linear-gradient(top, #AABD30, #9BB009); background:-ms-linear-gradient(top, #AABD30, #9BB009); background:-o-linear-gradient(top, #AABD30, #9BB009); background:linear-gradient(top, #AABD30, #9BB009); border-top:1px solid #A7D101; border-bottom:1px solid #899D00; word-wrap:break-word; overflow:hidden; } ul.spy a {text-decoration:none;} ul.spy li em { font-weight:bold; color:#409540; } ul.spy a.header { font:bold 12px/14px 'Trebuchet MS',Arial,Sans-Serif; display:block;color:yellow; text-shadow:0px 1px 0px rgba(0,0,0,0.2); } ul.spy a.header:hover { color:white; text-decoration:underline; } ul.spy li .summ { margin-top:5px; overflow:hidden; } ul.spy li .imgwrap, ul.spy li img { float:right; margin:0px 0px 2px 7px; width:72px; height:72px; border:4px solid #899D00; background:#fff url('http://3.bp.blogspot.com/-Z0w4M80kNoE/Tz4_RrLC4fI/AAAAAAAACJY/2mQ2yk5hCdU/s1600/loading.gif') no-repeat 50% 50%; padding:0px; } ul.spy li .imgwrap { -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.7); -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.7); box-shadow:0px 0px 2px rgba(0,0,0,0.7); } ul.spy li img { border:none !important; float:none; margin:0px 0px; padding:0px 0px; display:none; } </style> <scripttype='text/javascript'> var spyTitle = "Artikel Terbaru", numposts = 7, numchars = 127, komentar = "Komentar", pBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg"; modeID = true; showSummaries = true; openNewTab = false; showPostDate = true; showComment = true; showThumbnails = true; animatedRecentPost = true; limitspy =4; intervalspy = 4000; tickspeed = 1000; </script> <script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/rp-spy-whatever-v1.js"></script> <script src=" http://zhaehtc.blogspot.com/ /feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

Ganti URL  http://zhaehtc.blogspot.com/  dengan alamat blog Anda lalu simpan.


Cara Membuat & Memasang Tanda Tangan di Blog

Posted by Achmad Zaelani Kamis, 19 Juli 2012 0 komentar
DI BLOG (BLOGGER), kita dapat membubuhkan tanda tangan (signature) sebagai sebagai identitas penulis blog (blog author). Dengan adanya tanda tangan ini, posting-posting blog terasa lebih khusus, karena memiliki tanda tangan sang penulis blog yg unik. Sobat Blogger bisa membuat dan memasangnya di blog Blogger dengan mudah. Kehadiran online signature maker memberikan kemudahan untuk membuat tampilan tanda tangan tersebut. Selain untuk digunakan di email, gambar tanda tangan ini bisa digunakan pula di blog sebagai blog author signature.

Cara Membuat Gambar Tanda Tangan Secara Online

Untuk membuat tanda tangan dengan online tool, saya memilih menggunakan MyLiveSignature, sehingga tutorial ini akan mengetengahkan langkah-langkah membuat signature dengan online tool tersebut.
1. Masuk ke mylivesignature.com.
2. Ada beberapa opsi disana, jika ingin membuat tanda tangan tanpa register, klik "Proceed". Jika ingin daftar, klik "register"
3. Setelah klik proceed, anda akan masuk ke halaman opsi jenis signature yang akan dibuat. Ada 4 cara membuat signature: dengan wizard, dengan menulis sendiri di screen tool, upload gambar yang di-scan, atau menggunakan font. sendiri. Saya sarankan untuk membuat dengan wizard (pilih opsi pertama), karena cara itu lebih mudah.
4. Tuliskan nama anda atau nama yg ingin dibuat sebagai tanda tangan. Klik 'next step'.

5. Langkah selanjutnya adalah memilih jenis font tanda tangan. Ada banyak jenis font dan langsung bisa dilihat melalui preview. Pilih font yang diinginkan dengan klik opsi di sebelah preview. Setelah itu 'klik next'.
6. Pilih warna tanda tangan dan background. Sesuaikan background dengan background halaman blog, atau pilih/centang "transparent".
7. Setelah gambar jadi, anda akan dibawa ke halaman hasil akhir gambar. Di halaman tersebut terdapat gambar tanda tangan/signature dan di bwahnya tertera ID dari tanda tangan tersebut. SImpan ID jika dibutuhkan kembali di kemudian hari. Untuk menyimpan gambar, klik kanan, lalu pilih 'save as' atau 'save image as'

Cara Memasang Tanda Tangan Di Bawah Posting Blog

1. Pastikan terlebih dahulu gambar tandatangan tadi telah di upload. Kemudian simpan direct url dari gambar tersebut.
2. Untuk menampilkan gambar di bawah posting kita bisa menggunakan dua cara:
  a. Dengan memasukkan html gambar di fitur blogger untuk menyisipkan widget di posting:
Dari Setting > Formatting > Lihat ke bagian kosong di sebelah kanan Post template di bagian bawah halaman.
Isikan script image ke dalamnya:
< img border="0" src="urlgambartandatangan.jpg" />
Ganti urlgambartandatangan.jpg dengan url gambar tandatangan sobat.
Kelemahan dari cara ini adalah susunan struktur pada badan post kadang-kadang bisa kacau, dan membutuhkan waktu load yang lebih lama

b. Dengan memasukkan gambar di bagian template HTML melalui Edit HTML Blogger:
Melalui Edit HTML, sobat dapat memasukkan script secara lebih leluasa dan juga dapat menambahkan aturan-aturan tertentu agar struktur tampilan lebih sempurna.
- Di beberapa tutorial, saya melihat script yang dimasukkan hanya dalam bentuk HTML gambar seperti ini:
< img border="0" src="urlgambartandatangan.jpg" />
Namun, jika hanya dengan HTML gambar, struktur gambar menjadi tidak independen karena dia mengikuti aturan (div) pada tulisan di atasnya (tulisan posting di bagian akhir/bawah). Sehingga kadang-kadang gambar betubrukan dengan tulisan atau bergeser.
- Untuk membuat gambar berstruktur independen maka tambahkan struktur sendiri pada tag gambar:
<div>< img border='0' src='urlgambartandatangan.jpg' /></div>
Dengan cara ini, gambar dapat berada di baris selanjutnya di bawah tulisan posting.
- Agar gambar bisa diatur posisinya, akhirnya gunakan aturan berikut:
<div style='padding:5px;float:right'>< img border="0" src='urlgambartandatangan.jpg' /></div>
- right akan menampilkan gambar di sisi kanan, ganti dengan left jika ingin gambar berada di sebelah kiri.Ganti urlgambartandatangan.jpg dengan url gambar tandatangan yg telah di-upload.
- Setelah selesai mengedit script, masuk ke dahsboard > design > Edit HTML.
- Jangan lupa centang "Expand Widget Templates"
- Cari <data:post.body/>
- Letakkan kode yang telah diedit tadi tepat di BAWAH-nya.
- Save Template.

Note: Jika blog telah menggunakan fitur auto readmore, ada lebih dari satu <data:post.body/>, letakkan kode tanda tangan di bawah <data:post.body/> yg kedua.

Cara Membuat Contact Us di Blog

Posted by Achmad Zaelani Selasa, 17 Juli 2012 0 komentar
Cara Membuat Contact Us di Blog  Kali ini saya akan memberikan tutorial cara membuat Contact Us di blogspot atau wordpress dengan bantuan situs pembuat kode html contact form. Saya rasa semua blogger pasti memberikan menu contact us pada blog mereka, mungkin ada sebagian yang kesulitan dalam membuat menu contact us. seperti contoh disini

  • Siapkan email anda untuk proses pendaftaran.
    Kunjungi http://123contactform.com dan lakukan pendaftaran disana, ingat pilihlah yang gartis.
  • Atau bisa juga langsung sign in mith google.
  • Klik "my form" >> klik "+New Form" >> klik "Contact Form"
  • Beri judul pada menu contact Anda lalu edit sesuka hati anda

  • Kalau sudah klik publish form dan pilih Blogger
 
  • Pastekan di postingan atau laman anda
  • Selamat anda sudah memiliki fitur Contact Us

Statistik Blog

Follow Me

Link Partner

Follow Via Email

Berlangganan Artikel Via Email