Membuat Widget Popular Post Dengan Gambar Round Corner

Ternyata, widget popular post cukup di gemari oleh banyak blogger, hal ini terbukti dengan banyaknya situs web yang memasang widget tersebut. Jadi, sangatlah wajar kalau kita sering menemukan tutorial yang membahas tentang cara memodifikasi widget popular post dengan menawarkan style yang berbeda-beda. Saya sendiri, beberapa bulan yang lalu sempat juga membuat posting tentang cara membuat widget popular post berwarna warni di blog, bisa di baca melalui link ini.

Apa kelebihan widget popular post yang saya bawa kali ini?

1. Menggunakan Efek Hover
2. Thumbnail gambar tidak kotak (Menggunakan Round Corner)
3. Background terpisah di setiap judul posting dan menggunakan efek round corner (Sudut bulat)

Cara menerapkan kode widget Popular Post

• Sign in di blogger.com
• Pada menu drop down pilih template dan klik "Edit HTML"
• Cari kode ]]></b:skin> lalu tempatkan kode berikut sebelum kode ]]></b:skin>

/* Kode CSS tutorialblogspot.com */
.popular-posts ul{padding-left:0}
.popular-posts ul li{background:#FFF url() no-repeat scroll 5px 10px;list-style-type:none;border:1px solid #ddd;border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;-moz-box-shadow:3px 2px 5px #242424;-webkit-box-shadow:3px 2px 5px #242424;box-shadow:3px 2px 5px #242424;margin-bottom:5px;height:40px;padding:5px 5px 5px 20px !important}
.popular-posts ul li a{font-style:italic}
.popular-posts ul li:hover{border:1px solid #d10202;-moz-box-shadow:3px 2px 5px #d10202;-webkit-box-shadow:3px 2px 5px #d10202;box-shadow:3px 2px 5px #d10202}
.popular-posts ul
li a:hover{text-decoration:none}
.popular-posts .item-thumbnail img{height:40px;width:40px;webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.popular-posts .item-thumbnail img:hover{-moz-box-shadow:0 0 5px #d10202;-webkit-box-shadow:0 0 5px #d10202;box-shadow:0 0 5px #d10202}

• Simpan template.

Cara konfigurasi widget popular post

1. Setelah menerapkan kode di atas, klik Layout (Tata letak)
2. Klik add a gadget
3. Tambahkan widget Popular Post

4. Hilangkan tanda centang pada "Snippet" atau "Cuplikan"
5. Klik Save

Cara Membuat Teks / Tulisan Berjalan Di Blog

Ketika kita menonton program berita di stasiun Televisi baik itu Trans TV, Metro TV, RCTI, ANTV atau stasiun televisi yang lainnya, kita sering menemukan beberapa berita penting ditampilkan dalam bentuk teks yang berjalan. Teks yang berjalan itu di sebut dengan nama Running Text. Dalam dunia Webmaster, Running Text mempunyai istilah yang lain yaitu "Marquee".

Dengan menambahkan efek marquee pada teks, pusat perhatian pengunjung pada teks itu akan lebih terfokus. Jadi buat sobat blogger yang ingin membuat sebuah pengumuman, pembeitahuan atau catatan penting, sebaiknya menggunakan efek marquee.
Menambahkan efek marquee pada sebuah teks tidaklah sulit karena kode HTML yang digunakan sangat sederhana yaitu "<marquee> Teks Disini... </marquee>". Berikut ini kode marquee beserta contohnya:

Demo Marquee

Teks berjalan ke kiri

Selamat datang di tutorialblogspot.com

Teks Berjalan ke kanan

Happy blogging for all of Indonesians blogger

Teks berjalan ke atas

This is the best site to learn about blog

Teks berjalan ke bawah

Cara membuat teks bergerak di blog

Teks berjalan bolak balik (Ke kiri dan ke kanan)

Dapatkan tips trik komputer disini

Teks berjalan Zig-Zag

Teks Tulisan Berjalan Zig Zag

Kode Marquee

1. Teks berjalan ke kiri

<marquee> Teks disini... </marquee>

2. Teks Berjalan ke kanan

<marquee direction="right"> Teks disini... </marquee>

3. Teks berjalan ke atas

<marquee direction="up"> Teks disini... </marquee>

4. Teks berjalan ke bawah

<marquee direction="down"> Teks disini... </marquee>

5. Teks berjalan bolak balik (Ke kiri dan ke kanan)

<marquee behavior="alternate"> Teks disini... </marquee>

6. Teks berjalan Zig-Zag

<marquee direction="up" behavior="alternate"><marquee behavior="alternate"> Teks disini... </marquee></marquee>

Apakah kode marquee di atas bisa kita kostumisasi? Jelas bisa, kode HTML marquee di atas dapat disesuaikan dengan style atau keinginan sobat blogger. Perhatikan contoh di bawah ini!
1. Teks berhenti ketika diarahkan Cursor

Kode : onMouseOver="this.stop()" onMouseOut="this.start()"
Contoh penerapan kode : <marquee onMouseOver="this.stop()" onMouseOut="this.start()"> Teks disini... </marquee>

2. Menambahkan Background pada teks berjalan

Kode : bgcolor="blue" (Blue adalah kode warna, bisa diganti dengan warna favorite sobat)
Contoh penerapan kode : <marquee bgcolor="Blue"> Teks disini... </marquee>

3. Mengatur kecepatan teks berjalan

Kode : scrollamount="2" (Angka 2 adalah kecepatan teks berjalan, silahkan disesuaikan)
Contoh penerapan kode : <marquee scrollamount="2"> Teks disini... </marquee>

4. Mengatur lebar teks berjalan

Kode : width="300" (Atur sendiri lebarnya. Kalau sobat blogger ingin mengatur tingginya juga, sobat blogger tinggal mengganti kata width menjadi hight)
Contoh penerapan kode : <marquee width="300"> Teks disini... </marquee>

Teks marquee atau teks berjalan bisa juga diterapkan pada widget. Sobat cukup meletakkan kode widget DIANTARA kode marquee. Contoh:
<marquee direction="down"> Kode Widget disini.... </marquee>

Kode Simbol

Character Encoding

Decimal	Character	Example	Explanation
ƒ	ƒ	ƒ	latin small f with hook=function=florin
Α	Α	Α	greek capital letter alpha
Β	Β	Β	greek capital letter beta
Γ	Γ	Γ	greek capital letter gamma
Δ	Δ	Δ	greek capital letter delta
Ε	Ε	Ε	greek capital letter epsilon
Ζ	Ζ	Ζ	greek capital letter zeta
Η	Η	Η	greek capital letter eta
Θ	Θ	Θ	greek capital letter theta
Ι	Ι	Ι	greek capital letter iota
Κ	Κ	Κ	greek capital letter kappa
Λ	Λ	Λ	greek capital letter lambda
Μ	Μ	Μ	greek capital letter mu
Ν	Ν	Ν	greek capital letter nu
Ξ	Ξ	Ξ	greek capital letter xi
Ο	Ο	Ο	greek capital letter omicron
Π	Π	Π	greek capital letter pi
Ρ	Ρ	Ρ	greek capital letter rho
Σ	Σ	Σ	greek capital letter sigma
Τ	Τ	Τ	greek capital letter tau
Υ	Υ	Υ	greek capital letter upsilon
Φ	Φ	Φ	greek capital letter phi
Χ	Χ	Χ	greek capital letter chi
Ψ	Ψ	Ψ	greek capital letter psi
Ω	Ω	Ω	greek capital letter omega
α	α	α	greek small letter alpha
β	β	β	greek small letter beta
γ	γ	γ	greek small letter gamma
δ	δ	δ	greek small letter delta
ε	ε	ε	greek small letter epsilon
ζ	ζ	ζ	greek small letter zeta
η	η	η	greek small letter eta
θ	θ	θ	greek small letter theta
ι	ι	ι	greek small letter iota
κ	κ	κ	greek small letter kappa
λ	λ	λ	greek small letter lambda
μ	μ	μ	greek small letter mu
ν	ν	ν	greek small letter nu
ξ	ξ	ξ	greek small letter xi
ο	ο	ο	greek small letter omicron
π	π	π	greek small letter pi
ρ	ρ	ρ	greek small letter rho
ς	ς	ς	greek small letter final sigma
σ	σ	σ	greek small letter sigma
τ	τ	τ	greek small letter tau
υ	υ	υ	greek small letter upsilon
φ	φ	φ	greek small letter phi
χ	χ	χ	greek small letter chi
ψ	ψ	ψ	greek small letter psi
ω	ω	ω	greek small letter omega
ϑ	ϑ	ϑ	greek small letter theta symbol
ϒ	ϒ	ϒ	greek upsilon with hook symbol
ϖ	ϖ	ϖ	greek pi symbol
•	•	•	bullet = black small circle
…	…	...	horizontal ellipsis = three dot leader
′	′	′	prime = minutes = feet
″	″	″	double prime = seconds = inches
‾	‾	‾	overline = spacing overscore
⁄	⁄	⁄	fraction slash
℘	℘	℘	script capital P=power set=Weierstrass p
ℑ	ℑ	ℑ	blackletter capital I = imaginary part
ℜ	ℜ	ℜ	blackletter capital R = real part symbol
™	™	TM	trade mark sign
ℵ	ℵ	ℵ	alef symbol = first transfinite cardinal
←	←	←	leftwards arrow
↑	↑	↑	upwards arrow
→	→	→	rightwards arrow
↓	↓	↓	downwards arrow
↔	↔	↔	left right arrow
↵	↵	↵	corner leftwards = carriage return
⇐	⇐	⇐	leftwards double arrow
⇑	⇑	⇑	upwards double arrow
⇒	⇒	⇒	rightwards double arrow
⇓	⇓	⇓	downwards double arrow
⇔	⇔	⇔	left right double arrow
∀	∀	∀	for all
∂	∂	∂	partial differential
∃	∃	∃	there exists
∅	∅	∅	empty set = null set = diameter
∇	∇	∇	nabla = backward difference
∈	∈	∈	element of
∉	∉	∉	not an element of
∋	∋	∋	contains as member
∏	∏	∏	n-ary product = product sign
∑	∑	∑	n-ary sumation
−	−	-	minus sign
∗	∗	∗	asterisk operator
√	√	√	square root = radical sign
∝	∝	∝	proportional to
∞	∞	∞	infinity
∠	∠	∠	angle
∧	∧	∧	logical and = wedge
∨	∨	∨	logical or = vee
∩	∩	∩	intersection = cap
∪	∪	∪	union = cup
∫	∫	∫	integral
∴	∴	∴	therefore
∼	∼	∼	tilde operator = varies with = similar to
≅	≅	≅	approximately equal to
≈	≈	≈	almost equal to = asymptotic to
≠	≠	≠	not equal to
≡	≡	≡	identical to
≤	≤	≤	less-than or equal to
≥	≥	≥	greater-than or equal to
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	⊄	⊄	not a subset of
⊆	⊆	⊆	subset of or equal to
⊇	⊇	⊇	superset of or equal to
⊕	⊕	⊕	circled plus = direct sum
⊗	⊗	⊗	circled times = vector product
⊥	⊥	⊥	up tack = orthogonal to = perpendicular
⋅	⋅	⋅	dot operator
⌈	⌈	⌈	left ceiling = apl upstile
⌉	⌉	⌉	right ceiling
⌊	⌊	⌊	left floor = apl downstile
⌋	⌋	⌋	right floor
〈	⟨	[	left-pointing angle bracket = bra
〉	⟩	]	right-pointing angle bracket = ket
◊	◊	◊	lozenge
♠	♠	♠	black spade suit
♣	♣	♣	black club suit = shamrock
♥	♥	♥	black heart suit = valentine
♦	♦	♦	black diamond suit
"	"	"	quotation mark = APL quote
&	&	&	ampersand
&#60;	&lt;	<	less-than sign
&#62;	&gt;	>	greater-than sign
&#338;	&OElig;	Œ	latin capital ligature OE
&#339;	&oelig;	œ	latin small ligature oe
&#352;	&Scaron;	Š	latin capital letter S with caron
&#353;	&scaron;	š	latin small letter s with caron
&#376;	&Yuml;	Ÿ	latin capital letter Y with diaeresis
&#710;	&circ;	ˆ	modifier letter circumflex accent
&#732;	&tilde;	˜	small tilde
&#8194;	&ensp;		en space
&#8195;	&emsp;		em space
&#8201;	&thinsp;		thin space
&#8204;	&zwnj;	‌	zero width non-joiner
&#8205;	&zwj;	‍	zero width joiner
&#8206;	&lrm;	‎	left-to-right mark
&#8207;	&rlm;	‏	right-to-left mark
&#8211;	&ndash;	-	en dash
&#8212;	&mdash;	-	em dash
&#8216;	&lsquo;	'	left single quotation mark
&#8217;	&rsquo;	'	right single quotation mark
&#8218;	&sbquo;	‚	single low-9 quotation mark
&#8220;	&ldquo;	"	left double quotation mark
&#8221;	&rdquo;	"	right double quotation mark
&#8222;	&bdquo;	„	double low-9 quotation mark
&#8224;	&dagger;	†	dagger
&#8225;	&Dagger;	‡	double dagger
&#8240;	&permil;	‰	per mille sign
&#8249;	&lsaquo;	‹	single left-pointing angle quotation mark
&#8250;	&rsaquo;	›	single right-pointing angle quotation mark
&#8364;	&euro;	€	euro sign

This tool provided by Muhammad Septi Rosidi @ tutorialblogspot.com

Kiat Praktis Menggunakan Email Gmail

		Chat langsung dari kotak masuk Anda Chat dengan kontak dan mulai obrolan video dengan maksimal 10 orang di Google+ Hangouts.
		Bawa email Anda ke Gmail Anda dapat mengimpor email dari email web lain untuk sedikit memudahkan transisi ke Gmail. Pelajari caranya.
		Gunakan Google Drive untuk mengirim file berukuran besar Kirim file berukuran besar di Gmail (hingga 10 GB) menggunakan Google Drive. Selain itu, file yang disimpan di Drive selalu diperbarui secara otomatis sehingga semua orang memiliki versi terbaru dan dapat mengaksesnya dari mana saja.
		Simpan semuanya Dengan kapasitas ruang 10 GB, Anda tidak perlu menghapus email. Simpan saja semuanya dan temukan dengan mudah nanti.
		Temukan email dengan cepat Dengan kecanggihan Google Penelusuran langsung di kotak masuk, Anda dapat dengan cepat menemukan email penting yang dibutuhkan dengan saran berdasarkan email, penelusuran sebelumnya, dan kontak.

Mamfaat dan Bagaimana Page Speed - Google Developers Bekerja?

Mari daftarkan blog Anda di Page Speed - Google Developers. Uji betapa jauh lebih cepat halaman Anda akan di muat dengan Layanan PageSpeed. Lihat video di bawah ini! Video singkat yang di buat oleh Tim Google ini akan menjelaskan bagaimana layanan PageSpeed bekerja di blog Anda.

Apa mamfaat yang kita peroleh ketika menggunakan Layanan Page Speed?

1. Percobaan gratis tetapi terbatas
2. Sangat cepat dan mudah untuk di buat
3. Menjaga tepi blog Anda dengan teknologi optimasi terbaru
4. Cepat dan aman dengan Google infrastruktur
5. Pengguna bahagia karena konversi yang jauh lebih baik

Cara Menonaktifkan Akun Facebook

Sebelum menonaktifkan akun Facebook Anda, Anda perlu tahu bahwa "Krnologi, konten dan semua informasi yang terkait dengan akun Anda akan hilang atau terhapus secara permanen". Siapapun di Facebook tidak akan dapat mencari Anda, meskipun beberapa informasi seperti pesan yang Anda kirim masih dapat dilihat oleh orang lain. Menghapus akun FB (Facebook) tidaklah sulit, karena hanya sedikit proses yang harus kita lewati.

Cara Berhenti dari Facebook

1. Login ke akun Facebook Anda
2. Kunjungi URL berikut: https://www.facebook.com/help/delete_account
3. Jendela pop up akan muncul seperti gambar di bawah ini!

4. Klik tombol "Delete My Account"
5. Jendela pop up yang kedua akan muncul. Pada kolom pertama, masukkan password Anda dan pada kolom kedua, ketik ulang captcha yang tersedia.

6. Proses terakhir, klik "Okay"

Setelah proses penghapusan atau penonaktifan sudah dilakukan, akun Facebook Anda masih bisa dikembalikan (Reactive) dalam kurun waktu kurang dari 14 hari.

Tambahan :
Selain cara di atas, Anda juga dapat berhenti dari Facebook dengan cara mengirimkan tim Facebook sebuah Email ke alamat privacy@facebook.com

Cara Menghilangkan Header Blogger

Tidak bisa dipungkiri kalau Header, Footer dan Blog Post adalah bagian atau elemen penting dalam sebuah template. Tanpa ketiga elemen tersebut, blog tidak akan terlihat menarik. Tapi karena satu dan lain hal, ada saja blogger yang menghilangkan salah satu dari ketiga elemen. Nah...  Kesempatan kali ini, saya akan berbagi tips kepada sobat blogger yang ingin menghilangkan Header dari blog-nya.

Untuk menghilangkan Header blog, kita harus memahami kode yang terdapat di template kita, khusunya kode untuk header. Biasanya, kode Header seperti ini!

#header-wrapper {
background:#ffffff no-repeat 100% 100%; height:auto; margin:0; padding:10px;
}

atau

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

Kalau kita meletakkan kode "display : none;" setelah kode ".header-outer {" atau "#header-wrapper {" maka header blog akan langsung hilang. Untuk lebih jelasnya penerapan kode, lihat contoh di bawah ini!

#header-wrapper {
display : none;background:#ffffff no-repeat 100% 100%; height:auto; margin:0; padding:10px;
}

atau

.header-outer {
display : none;  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

Sangat mudah bukan? kita hanya menyisipkan kode display : none; pada kode header template kita.

Cara Membuat Widget Komunitas Di Blogger Menggunakan Widget Generator

Halo sobat blogger semua. Pada postingan kali ini, saya menyiapkan sobat blogger sebuah tool atau generator yang dapat membuat sebuah widget komunitas. Widget komunitas adalah sebuah widget yang menampilkan FaceBook Like dan Follow Twitter yang muncul di bagian sisi bawah blog. Widget komunitas ini muncul ketika Scroll Bar media browser di tarik ke bawah. Untuk melihat demo-nya, klik tombol di bawah ini!

Bagaimana? Cantik bukan tampilan widget komunitas ini? Untuk memasangnya, sobat blogger tidak perlu edit template. Yang perlu sobat blogger lakukan hanya, membuat kode menggunakan alat atau generator yang ada di bawah ini.

Cara menggunakan Generator Widget Komunitas

1. Pilih Warna Widget : Tentukan warna widget komunitas dengan cara meng-klik tombol yang terdapat disampingnya.
2. Kostumisasi : Kolom pertama diisi dengan nama akun FB dan kolom kedua dengan nama akun Twitter. Untuk posisi widget, gunakan arah panah yang tersedia untuk merubahnya (Left = Kiri dan Right = Kanan).
3. Aplikasi Tombol : Untuk mendapatkan kode widget komunitas klik tombol "Dapatkan kode". Untuk membuat ulang widget komunitas, tekan tombol "Reset"
4. Kode Widget : Ketika sobat blogger meng-klik tombol "Dapatkan Kode", secara otomatis kode akan muncul di kolom yang tersedia. Sobat tinggal copy paste kode yang di peroleh ke blog sobat.

Cara memasukkan kode Widget Komunitas ke Blogger

1. Masuk ke blogger.com
2. Pada menu drop down, pilih Layout (Tata Letak)

3. Klik Add a Gadget (Tambahkan gadget)
4. Pilih HTML/JavaScript

5. Masukkan kode yang diperoleh lalu klik tombol Save

Picasa Redirect ke Google Plus Foto

Saat ini Google berusaha keras untuk meyakinkan pengguna Album Web Picasa untuk berpindah ke Google+ Foto. URL http://picasaweb.google.com tidak lagi membawa kita ke Picasa Web Album melainkan mengarahkan kita ke laman Foto Google+. April lalu, Google menonaktifkan Picasa Web Album Uploader untuk Mac dan Picasa Web Album Plugin untuk iPhoto. Apakah untuk kedepannya, Google akan menonaktifkan Picasa untuk semua kategori? Belum ada penjelasan untuk semua ini.

Bagaimana cara mengunjungi laman Picasa Web Album?
Bagi Pengguna Picasa yang ingin tetap menggunakan Album Web Picasa, dapat mengakses situs yang lama dengan menggunakan URL https://picasaweb.google.com/lh/myphotos?noredirect=1 . Ketika kita mengunjungi URL tersebut, Google akan menyimpan cookie ke browser kita sehingga untuk kedepannya kita tidak akan diarahkan lagi ke laman Foto Google+.

Cara Menghapus Navbar Blog Secara Permanent

Ada banyak hal yang harus dirubah atau diedit ketika kita menggunakan template default blogger. Salah satunya adalah menghilangkan penampakan yang ada di atas blog (Maksud saya, menghilangkan Navbar). Sembilan dari 10 blogger, bisa dipastikan menggunakan template tanpa Navbar. Do you know, why? Karena Navbar mempunyai tampilan yang tidak bagus walaupun terdapat banyak fitur yang bermamfaat di dalam Navbar itu sendiri.

Google beberapa bulan yang lalu sudah memberikan kemudahan kepada blogger untuk menghilangkan Navbar yaitu dengan menambahkan fungsi "Off" pada navbar (Silahkan baca bagaimana penggunaannya disini). Sekarang, yang mau saya share ke sobat blogger adalah bagaimana cara menghapus navbar secara permanent di blog.

1. Login ke blogger
2. Pilih template dan backup template sobat (Bagaimana cara backup template, baca disini).
3. Klik tombol "Edit HTML"
4. Gunakan menu drop down "Lompat ke Widget" dan Pilih Navbar1 (Kita akan langsung diarahkan pada kode HTML navbar). Perhatikan Gambar!

5. Disebelah kode navbar, terdapat tanda panah. Jangan tekan tanda panah itu. Block saja kode itu dari arah kanan ke kiri lalu di hapus.
6. Pratinjau template sobat terlebih dahulu sebelum di simpan.

Kalau langkah-langkah di atas sudah dijalankan, silahkan menuju laman layout blogger. Sobat tidak akan menemukan elemen navbar lagi seperti gambar di bawah ini.

Cara disable atau menonaktifkan AntiVirus Defender pada windows 8

Salah satu alasan kenapa pengguna komputer banyak yang beralih dari Operating System yang lain ke Windows 8 adalah "Adanya AntiVirus Defender Full Version yang terdapat di dalamnya". Seperti yang kita ketahui, Defender merupakan salah satu AntiVirus terbaik di dunia selain Kaspersky, Avast, dan Avira. AntiVirus bawaan windows 8 ini dapat digunakan oleh pengguna windows 8 sepanjang waktu (All time) sacara gratis.

Bagi sebagian kecil pengguna komputer, keberadaan AntiVirus sangat menggangu karena keberadaanya membuat loading komputer lambat dan keberadaannya membuat beberapa aplikasi tidak bisa berjalan dengan semestinya, sehingga mereka lebih memilih untuk tidak memasang AntiVirus pada komputer atau laptop yang dimilikinya. Menginstall atau menguninstall AntiVirus sangat mudah dilakukan. Tapi yang jadi pertanyaan sekarang, bagaimana cara menonaktifkan atau menguninstall AntiVirus Defender bawaan windows 8? karena Antivirus ini tidak terlihat di Installed Program di Control Panel. Kalau itu adalah masalah yang Anda pikirkan, tidak perlu pusing lagi karena video di bawah ini akan menjelaskan Anda tentang bagaimana cara disable AntiVirus Defender pada Windows 8. Check it out...!!!