Cara Mempercantik Tampilan Entri Populer Di Blog

Halo...? Apa kabar sobat brain :) Kali ini saya akan memberikan tutorial bagaimana cara membuat tampilan desain Entri Populer pada blog agar terlihat lebih keren seperti gambar diatas. Langsung saja kita menuju ke langkah-langkahnya :

1. Login ke blog sobat
2. Klik Tata letak >> Tambah Gadget >> Entri Populer >> tampilkan entri populer hanya judulnya saja. Jangan menggunakan tubnail dan cuplikan. Atur jumlah judul posting yang akan dimunculkan.
3. Klik simpan
4. Selanjutnya klik Template
5. Klik Edit Html >>klik lanjutkan
6. Cari kode  "]]></b:skin>" Jika sudah ketemu kopi paste kode css berikut ini tepat diatas kode ]]></b:skin>

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

7.  Setelah itu sobat Pratinjau template dahulu, setelah berhasil baru di SAVE..

Nah sekian tutorial dari kami. Semoga bermanfaat bagi sobat yang belajar nge blog. . Sampai jumpa dengan tutorial lainnya ya. Jangan bosan-bosan untuk mampir lagi :)

Cara Membuat Efek Auto Zoom Image View Pada Blog

Membuat Efek Auto Zoom Image View - Efek auto zoom image view, maksudnya adalah jika kita mengarahkan cursor (pointer cursor) ke arah gambar maka secara otomatis gambar tersebut akan mengalami zoom (perbesaran ukuran). Hal ini dapat memberikan keunikan dan membuat daya tarik blog anda menjadi lebih bagus. Namun tetap ingat! Pastikan blog anda tidak memasang terlalu banyak widget atau pernak-pernik yang berbobot sedang atau bahkan berat. Karena jika hal itu tidak anda pedulikan dan anda tetap memasangnya secara berlebihan, maka bukan hasil yang bagus yang akan anda dapatkan. Justru hasilnya akan buruk dan berdampak negatif pada kualitas blog anda khususnya pada waktu loading.

Berikut tutorial  Cara Membuat Efek Auto Zoom Image View di Blog :


1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

?

1 2 3 4 5 6 7 8 9 10

.post img:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); }

5. Lalu klik save/simpan template, selesai...

Sekian tutorial Cara Membuat Efek Auto Zoom pada gambar di Blog saat di sentuh mouse. Semoga bermanfaat. Sampai jumpa pada tutorial-tutorial lainnya. Salam brainword21.. Jangan lupa tulis komentarmu ya, agar kami bisa lebih baik lagi dalam mengeposkan di blog ini..

Cara Membuat Energy Saving Di Blog

Memasang Energy Saving Mode di Blog - Untuk membuat kesan yang lebih menarik pada blog kita, maka energy saving mode ini bisa anda terapkan pada blog anda. Energy saving mode ini akan memberikan efek seolah-olah blog kita terkesan memiliki penghemat daya ketika pointer mouse tidak di gerakkan dalam jangka waktu beberapa detik. Sebenarnya energy saving mode ini lebih mirip atau menyerupai dengan screensaver yang ada pada hp atau komputer, kurang lebih cara kerjanya seperti itu.

Langsung saja saya akan memberitahu cara untuk memasang energy saving :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode </head> dan letakkan script kode berikut ini tepat di atasnya.

Energy saving mode dalam bahasa Inggris : 

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=30'
type='text/javascript'/>
<script>jQuery.noConflict();</script>

Energy saving mode dalam bahasa Indonesia :

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?lang=id'
type='text/javascript'/>
<script>jQuery.noConflict();</script>

5. Cukup pilih salah satu dari kedua script kode di atas, setelah itu klik save/simpan template. Selesai dan lihat hasilnya...

Sekian tutorial Cara Membuat Energy Saving di Blog dari saya. Semoga bermanfaat. Jangan lupa tulis komentarmu ya... Salam brainword21

Cara Membuat Scroll Bar Di Dalam Postingan Blog

Cara Membuat scroll bar di posting blog sangatlah mudah, Caranya hampir sama seperti saat kita menulis postingan blog. Namun yang paling penting adalah jangan lupa sobat copy/paste atau Tulis Kode script di bawah ini pada mode Edit HTML di bagian posting blog. Caranya:

1. Login ke Blogger.com

2. Pilih postingan / buat postingan baru

3. Pilih HTML yang terletak di sebelah kiri atas postingan

4. Cari tulisan yang ingin anda jadi scroll bar.

5. Copy dan Pastekan kode di bawah ini di HTML dalam postingan sobat
   

<div style="border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width:400px;">

Letakan Tulisan / Kode HTML Sobat Disini

</div>

6. Setelah meletakan kode HTML di atas pada halaman edit HTML, sobat bisa melakukan pengecekan pada halaman Compose. Apakah letaknya sudah sesuai dengan harapan sobat apa belum.

Dan hasilnya kira kira seperti ini :

Cara Membuat scroll bar di posting blog sangatlah mudah, Caranya hampir sama seperti saat kita menulis postingan blog. Namun yang paling penting adalah jangan lupa sobat copy/paste atau Tulis Kode script di bawah ini pada mode Edit HTML di bagian posting blog

Keterangan :

100px : Kode untuk mengatur tinggi pada kolom scroll.

400px : Kode untuk mengatur lebar pada kolom scroll.

Sekian Tutorial Blog dari saya. Karena saya sudah mulai ngantuk. Jadi saya tidak panjang-panjang membuat deskripsi penutupnya. Salam brainword21. Jangan lupa komentar ya :) Arigatou

Download Software Photoshop CS5

Photoshop adalah software dari Adobe yang merupakan software image editing yang paling populer. Hampir setiap digital desainer pernah melihat dan bahkan memakai software ini.

Tool dalam Adobe Photoshop yang dapat dipakai oleh pengguna, yang dapat membantu pengguna dalam mengedit foto/gambar terdiri dari berbagai macam tool dengan kegunaan yang spesifik.

Software Adobe Photoshop CS5 tidak memilki perbedaan interface atau antar muka yang jauh berbeda dengan pendahulunya, meski terdapat sedikit beberapa peningkatan di beberapa titik. Workspace switcher telah dimodifikasi sehingga Anda dapat menyeretnya dari drop-down menu. Dengan melakukan hal tersebut, maka menu bar akan turun pada tingkat kedua. Pre-existing workspace dapat dihapus, workspace custom dapat ditambahkan, dan pada umumnya konsep workspace menjadi lebih user-friendly. Selain itu, beberapa tampilan seperti icon toolbox dibuat lebih baik, sehingga terlihat lebih soft dan tidak kaku.

Fitur-fitur baru yang terdapat pada software Adobe Photoshop CS5 benar-benar dapat membuat software ini pantas disebut software image editing terbaik. Photoshop CS5 memperluas batasan editing, menyederhanakan task dan memperkenalkan beberapa fitur baru. Beberapa fitur baru yang terdapat pada software diantaranya adalah: complex selection menjadi lebih mudah dilakukan, HDR imaging yang superior, painting effect yang sangat biak, automatic lens correction, opsi printing yang lebih powerful, UI management yang lebih mudah, Puppet Warp, dan masih banyak lagi.

Udah gak sabar buat download Photoshop CS5?
Silahkan langsung downlaod Adobe  Photoshop CS5nya sob, buat sobat yang suka mengedit gambar software ini wajib hukumnya untuk dimiliki. 

Download Software Photoshop CS5 disini