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.