Selasa, 31 Juli 2012

Membuat Foto Profil Google + (Plus) Menjadi Lebih Menarik

Google + (Plus) adalah jejaring sosial media yang sekarang bisa di bilang wajib hukumnya untuk di miliki oleh para blogger.
Tapi masih sering sekali kita temukan para blogger yang masih menggunakan profil blogger dan belum imigrasi ke profil Google + (Plus), saya tidak ingin membahas masalah itu karna tidak sesuai tema. Untuk kali ini saya akan membahas Membuat Foto Profil Google + (Plus) Menjadi Lebih Menarik.

Dari judulnya saja kita sudah tau bahwa postingan kali ini saya ingin memberitahu Anda tentang membuat foto google plus Anda menjadi lebih menarik dan keren, dan dalam Membuat Foto Profil Google + (Plus) Menjadi Lebih Menarik ini kita menggunakan situs dari google plus yang di rancang khusus untuk pengguna akun google plus.
Untuk contohnya bisa Anda lihat gambar di samping kiri.

Sebenarnya di situs ini Anda juga bisa membuat foto time line google plus, tapi karna yang akan kita bahas adalah Membuat Foto Profil Google + (Plus) Menjadi Lebih Menarik jadi kita akan membahas tentang foto profilnya saja, dan bila Anda sudah tau Membuat Foto Profil Google + (Plus) Menjadi Lebih Menarik maka anda pasti juga akan bisa membuat foto time linenya juga.

Untuk cara membuatnya sendiri juga sangatlah mudah, Anda hanya perlu mengikuti langkah-langkah berikut.
Langkah-langkah di bawah ini saya sertakan gambar yang berukuran besar agar lebih mempermudah Anda.


Membuat Foto Profil Google + (Plus) Menjadi Lebih Menarik


1. Pertama-tama silahkan menuju gpluspic.com

2. Maka akan terlihat halaman seperti berikut:


3. Lalu ambil foto yang ada pada komputer Anda dengan menekan Browse.

4. Tunggu sampai upload selesai.

5. Setelah upload foto selesai makan Anda akan melihat halaman seperti berikut.


6. Untuk memodifikasi Anda perhatikan halaman yang telah saya beri angka di atas berikut ini adalah rincian dari Angka di atas:
  • Untuk menyesuaikan foto Anda.
  •  Adalah priview dari penyesuain gambar.
  • Untuk memilih custom dari foto Anda.,silahkan pilih sesuai selera Anda.
  •  Untuk melihat Priview dan Download dari hasil foto Anda.
  • Adalah tab untuk memilih pic yang lain.
7. Setelah Ada menekan Priview dan Download makan akan muncul halaman view seperti ini:


8. Untuk menyimpannya pada komputer Anda klick kanan "Save Image As" seperti gambar di atas dan pilih di folder mana Anda ingin menyimpan foto tersebut.

9. Pada waktu menyimpan di komputer tambahkan teks, .jpg , .png, atau .gif agar gambar yang Anda simpan berbentuk gambar atau foto di komputer Anda, seperti pada gambar.


10. Setelah itu baru klick Save.

Sekarang Anda telah berhasil Membuat Foto Profil Google + (Plus) Menjadi Lebih Menarik.


Apa Selanjutnya???


Sekarang Anda telah berhasil Membuat Foto Profil Google + (Plus) Menjadi Lebih Menarik, untuk langkah selanjutnya silahkan Anda upload foto tersebut di akun Google + (Plus) Anda atau di akun sosial media Anda yang lainnya terserah Anda.

Mengganti Tulisan Poskan Komentar Dengan Gambar Keren

Di Tutorial ini saya akan menunjukkan kepada Anda Bagaimana mengubah / menghapus / mengganti teks "Post a Comment" atau "Poskan Komentar" Dengan Gambar Keren.
Saya akan memberikan beberapa gambar yang dapat Anda gunakan atau Anda dapat menambahkan gambar Anda sendiri.

Sebelumnya saya pernah membahas Mengganti Tulisan Poskan Komentar Pada Blog.
Mungkin tidak perlu berlama-lama lagi silahkan ikuti tutorial berikut untuk mulai Mengganti Tulisan Poskan Komentar Dengan Gambar Keren.


Mengganti Tulisan Poskan Komentar Dengan Gambar Keren


1. Pergi ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Lalu centang Expand Template Widget ➨ Backup template Anda.

4. Untuk Mengganti Tulisan Poskan Komentar Pada Blog sekarang dalam Edit HTML temukan kode:

<data:postCommentMsg/>

Bila kesulitan mencari Kode HTML klick DISINI.

5. Bila sudah ketemu sekarang ganti kode tersebut dengan salah satu kode berikut:

Bila Anda menemukan kode tersebut lebih dari satu makan cukup ganti kode yang pertama, atau anda juga bisa mengganti semuanya.


Picture Post Comments


Di sini kita berbagi beberapa koleksi Picture Post Comments yang keren yang dikumpulkan oleh  Wanti . Anda juga dapat mengedit kode dan mengubahnya sebagai Picture Post Comments.

Sample 1
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8XNWkvLGxnpRk5H-XNOoQ6l37_GaNipuNzAgv1ZqfW0nI6ggJbFKR7rs0wDHSDpqS5IiO5yCvYoIFV5aoxZD6KsNd3Abr4zzEpny4AEnBxawwQVJWn9fKvnfy5JYNLDVHwDtXvthBw/s1600/ow-kom1.png" />


Sample 2
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Taiqe31poVn00xC6wAUwl4glR3pOuQW5v9SRvxCp5C6W3c7iLm9MgZQa38tFeS7ft_IlmGPY6loCscMJch7CafkWMLo3gLM1AceefglXhyphenhyphenUc6P-yDZWPSdkPm_MQQSsQPxS71Bjjjg/s1600/ow-kom2.png" />


Sample 3

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYciMpRSk-8bcOsPfgl8mpSmTu7vVw_Bv2dfCDdJ2eIj_-t8XRbF-U0eJWpDXxehhhRBHC8u3AxuWNnwQ4CFofqXbXqUKgRrrLHW1EnvooBgr74LfMqFbbSrEJzMlxjvz86e2q0vx01w/s1600/ow-kom3.png" />


Sample 4
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdfrwzxPpsAOEEcGSK9-J6ugiCn0S6KM2iQRLnCCbXNsifqoNL5VQofg3t0-uJdyRpb87ZxjmmeBYPSPUEDUvjRX8EGjcHSiVwLzyRcsg9bfoIqX_q6TgicbZfn4axLFz58ply6ZHkIA/s1600/ow-kom4.png" />


Sample 5

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDPncG0ZbCWLyKKc9Mv3Xtn1ft5f_89x_q5Z0ILo7Yy6k_nNds8rJL7b-rlUh3c6wzR89kR88bypL0czoIW_GhoFy9ERv9PADCAL6wN1PMa0eh-ZCtBPeqB21Mbl_IOcV6h0bzaIogZg/s1600/ow-kom5.png" />


Sample 6
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnCC-_CNCGmgruAITdg8WrUuTDVZmRqs0Tt2MeE7d4NPo_8ipa1fguMCix4uWHkCUOwm4M-9m7dQpocGC_K-unXMx2mMv2iPmchSwf_IdTiHZhd5cwTqsU_90w2LzQXCylaeKyPvE2Q/s1600/ow-kom6.png" />

6. Simpan template.

Sekarang Anda dapat melihat hasilnya pada kotak komentar Blog Anda.


Menemukan Kesulitan?


Bila Anda menemukan kesulitan dalam Mengganti Tulisan Poskan Komentar Dengan Gambar Keren jangan sungkan untuk bertanya saya akan dengan senang hati membantu Anda.


Senin, 30 Juli 2012

Membuat Link Nudging dengan jQuery atau CSS

T utorial kali ini saya akan membahas tentang Membuat Link Nudging dengan jQuery atau CSS.
Link nudding adalah link yang menyenggol atau bergoyang bila di sentuh oleh cursor.
Efek Link Nudging ini akan membuat link di blog Anda menjadi lebih menarik. dalam Membuat Link Nudging kita akan menggunakan bantuan dari jQuery atau CSS jadi Anda harus memilih salah satu cara ingin menggunakan jQuery atau CSS??? Untuk lebih jelasnya tentang Link Nudging silahkan lihat demo berikut.

Live Link Nudging Demo ↓


Perlu Anda ketahui sebelumnya Oto Website pernah membahas tentang Link Nudging juga yang berada di article Cara Membuat Link Bergoyang.
Jika Anda sudah paham dengan maksud tutorial kali ini mari kita bahas cara membuatnya pada blog Anda.
Pilih salah satu mana yang ingin Anda gunakan, Membuat Link Nudging dengan jQuery atau CSS ?


Membuat Link Nudging dengan jQuery


1. Login ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Dalam Edit HTML temukan kode </head> blia kesulitan mencarinya coba klick DISINI.

4. Bila sudah ketemu sekarang letakkan script jQuery berikut tepat di atas kode kode tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.ow').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>

5. Simpan template.

Kode Pemanggil Link Nudging dengan jQuery

Pada saat mengedit postingan masukkan kode berikut:

<a class='ow' href='http:/otowebsite.blogspot.com'>Oto Website</a>

Keterangan:
  • Ganti teks yang di block kuning dengan url tujuan.
  • Ganti teks yang di block biru dengan nama link.


Membuat Link Nudging dengan CSS


Dalam Membuat Link Nudging dengan CSS ini kita membaginya menjadi dua cara:
  • A. Link Nudging Untuk Semua Link (otomatis semua link)
  • B. Link Nudging Untuk Link Terpilih (kita yang menentukan)
Jadi silahkan pilih salah satu.

1. Login ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Dalam Edit HTML temukan kode ]]></b:skin> atau <style> blia kesulitan mencarinya coba klick DISINI.

4. Bila sudah ketemu sekarang letakkan salah satu kode CSS berikut tepat di atasnya.


A. Link Nudging Untuk Semua Link



a:link {
-webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms ease-out;
}
a:hover {
padding-left: 12px;}


5. Simpan template.


B. Link Nudging Untuk Link Terpilih



.ow {
-webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms ease-out;
}
.ow:hover {
padding-left: 12px;}


5. Simpan template.

Kode Pemanggil Link Nudging dengan CSS Untuk Link Nudging Terpilih (B)

Pada saat mengedit postingan masukkan kode berikut:

<a class="ow" href="http://otowebsite.blogspot.com">Oto Website</a>

Keterangan:
  • Ganti teks yang di block kuning dengan url tujuan.
  • Ganti teks yang di block biru dengan nama link


Bagaimana Selanjutnya?


Saya rasa cukup untuk kali ini, bila Anda kesulitan dalam Membuat Link Nudging dengan jQuery atau CSS silahkan bertanya, saya akan dengan senang hati membantu Anda!!!