Cara Membuat Widget Popular Post Warna Warni Di Blog

Widget popular post merupakan widget yang sangat penting bagi blog kita,widget yang satu ini berfungsi untuk mendongkrak pageviews atau memperbanyak klik per halaman oleh para pengunjung karena mereka akan penasaran "apa sih yang populer di blog ini?" jadi mereka akan melihat popular poast yang ada di dalam blog anda.Dan pada kesempatan kali ini saya akan membahas tentang Cara Membuat Widget Popular Post Warna Warni Di Blog.

Sebenarnya banyak model yang dapat kita gunakan untuk diterapkan di widget popular post,namun saya lebih suka dengan widget yang satu ini karena selain SEO Friendly widget yang warna warni ini juga dapat mempercantik tampilan Popular Post blog anda degan keanekaragaman warna yang digunakan,anda dapat merubah warna widget tersebut sesenang hati anda.

Pada tutorial yang akan saya berikan kali ini terdapat 2 versi widget popular post warna warni,Jika Versi 1 akan terlihat pada bagian sudut terlihat lebih melengkung dan rata antara 1 post dengan post lain,sedangkan untuk yang Versi 2 terlihat sangat berbeda dengan versi 1,perbedaan yang ditunjukan adalah jika Versi 2 tidak terlihat lengkungan di bagian sudut dan adanya efek hover,jadi gambar post akan berputar jika disentuh.

Dan berikut adalah perbedaaan antara versi 1 dan versi 2 melalui gambar berikut

Bagi anda yang berminat memasang widget popular post dengan model warna warni,silahkan ikuti cara berikut :

1.Login ke blogger
2.Klik tata letak
3.Tambahkan widget baru
4.Carilah entri populer dan tambahkan

5.Kemudian silahkan anda isi datanya sesuai selera anda

6.Jika sudah klik Simpan
7.Kemudian klik tab Template dan klik Edit HTML
8.Carilah kode ]]></b:skin>
9.Letakan kode berikut tepat di atas kode ]]></b:skin>

Jika anda ingin memasang yang versi 1 gunakan script atau kode yang ini

/*Rainbow Popular Post by http://belajarweb.blogspot.com/*/
#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}
/* Rainbow Popular Post by http://belajarweb.blogspot.com//

Dan jika anda ingin memasang yang versi ke 2 silahkan gunakan kode berikut

 /* Rainbow Popular repost by  http://belajarweb.blogspot.com/*/#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#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:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#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:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;}#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}
/* Rainbow Popular repost by http://belajarweb.blogspot.com/*/

10.Jika sudah, klik Simpan
11.Selesai,silahkan anda cek di blog anda


Sekian ulasan yang dapat saya sampaikan,semoga tutorial ini sangat berguna bagi anda dan terima kasih sudah memaca ulasan saya pada kesempatan kali ini.

Source

»»  read more

Memasang Google Maps di Website atau Blog

Untuk meningkatkan kredibilitas website, kita dapat meletakkan peta kantor kita. Kita dapat membuat sendiri peta, atau memakai Google Maps. Keuntungan memakai Google Maps adalah sifatnya yang interaktif. Pengunjung dapat memperbesar maupun memperbesar peta untuk melihat lokasi tempat secara tepat. Berikut akan disajikan langkah-langkap memasang Google Maps untuk membuat peta lokasi di website

1. Masuk ke http://maps.google.com
   Browse hingga lokasi kantor anda bisa dilihat dengan jelas
   
   Untuk memperkecil(zoom out), tarik slider ke arah -, untuk memperbesar tarik slider ke arah +
   
2. Setelah itu klik tombol Link
   Masukkan source yang ditunjukkan ke dalam website kita
   
   Anda bisa minta bantuan web developer anda untuk memasukkan source code ini.

Sebagai contoh bisa dilihat di www.prowebpro.com/contact/.
Untuk memasukkan perusahaan anda di Google Maps, anda bisa daftar, kemudian menandai di peta. Untuk menandai di peta, ada suatu kode verifikasi yang akan dikirim melalui SMS ke hp yang telah didaftarkan. Jadi persiapkan juga sebuah HP GSM untuk menerima kode verifikasi ini.



sumber :  www.prowebpro.com

»»  read more

Setting VirtueMart Setelah Migrasi Hosting

Setting VirtueMart Setelah Migrasi Hosting

http://anbu-files.blogspot.com - Setting VirtueMart Setelah Migrasi Hosting - untuk rekan-rekan blogger yang suka dengan virtumart pasti kadang-kadang mengalami kesulitan seperti ini :) , yaitu link virtumart tidak masuk ke domain yang kita miliki setelah pemindahan dari Host lain atau dari localhost ke online.
berikut beberapa langkah yang bisa rekan-rekan coba untuk Setting VirtueMart Setelah Migrasi Hosting :

Set VirtueMart dari SKRIP

1. Login ke control panel hosting Anda (Spanel/cPanel)
2. Masuk ke direktori root Anda (folder www untuk sPanel dan folder public_html untuk cpanel)
3. Masuk ke direktori administrator/components/com_virtuemart/ dan edit file virtuemart.cfg.php
4. Rubah bagian di bawah ini

 // these path and url definitions here are based on the Joomla! Configuration
 define( 'URL', 'http://localhost/namafolder/' );
 define( 'SECUREURL', 'http://localhost/namafolder/' );

menjadi

 // these path and url definitions here are based on the Joomla! Configuration
 define( 'URL', 'http://tokoku.com/' );
 define( 'SECUREURL', 'http://tokoku.com' );

• Jangan lupa Klik tombol Save untuk menyimpan perubahan

Set VirtueMart dari Backend Joomla

Jika Anda tidak begitu paham dengan skrip, bisa via Backend Joomla Anda. Caranya:

1. Login ke Backend Joomla
2. Arahkan Mouse ke menu Component dan pilih VirtueMart
3. Klik menu Configuration di sebelah kiri dan klik tab Security di sebelah kanan.
4. Rubah Site URL dan SECUREURL menjadi nama domain Anda. Contoh: http://tokoku.com
5. Simpan untuk merubah.

nah semoga tips Setting VirtueMart Setelah Migrasi Hosting dapat bermanfaat bagi rekan-rekan

source: http://kb.masterweb.net/beta/index.cgi/read/Set_VirtueMart_Setelah_Migrasi_ke_Server_Hosting

»»  read more

Belajar membuat Blog dengan Free Domain dan Hosting

Cara instalasi Joomla / Wordpress dengan mendapatkan nama domain co.cc 100% gratis
1. check yang yang akan dipakai domain di http://www.co.cc/?id=176839 ( ga semua domain gratis lo… pilihlah nama domain yang unik atau nama kamu sendiri, Insya Allah GRATIS  :)  )
2.setelah ketemu domain ..domainkamu.co.cc
3. Create an account now untuk memulai pendaftaran, sudah tau sendiri kan gag usah dijelaskanlah.
4. Setelah selesai langsung ke http://www.000webhost.com/328599.html

»»  read more