BLOG SI PALUI: Blog Stuff

Showing posts with label Blog Stuff. Show all posts

Friday, January 29, 2010

Membuat Efek Tulisan Dengan CSS Text Shadow

By Unknown Posted at 10:51 AM Tutorial Blogspot No comments

Kali ini saya akan coba membahas bagaimana cara membuat text shadow menggunakan CSS3. Dari namanya saja sudah bisa ditebak bahwa text yang dimaksud memiliki bayangan.

Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.

Safari 3.1 (Mac/Win)	yes, but no multiple shadows
Safari 4 (Mac/Win)	yes, full support
Opera 9.5 (Mac/Win/Lin)	yes, full support
Firefox 2/3 (Mac/Win/Lin)	no
Firefox 3.1/3.5 (Mac/Win/Lin)	yes, full support
Google Chrome 1 (Win)	no
Google Chrome 2 (Win)	yes, full support
IE 7/8 (Win)	no
Shiira (Mac)	yes, but no multiple shadows
Safari on iPhone	yes, but no multiple shadows
Opera Mini 4.1	yes, no blur radius

Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :

color: #000; background: #fff; text-shadow: 1px 1px 1px #424242;

color : #000 adalah warna dasar tulisan
background: #fff adalah warna latar
1px 1px 1px #424242 untuk warna bayangannya (shadow)

Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.

	`color: #000; background: #fff; text-shadow: 2px 2px 3px #000;`
	`color: #000; background: #fff; text-shadow: 2px 2px #000;`
	`color: #000; background: #fff; text-shadow: 2px -2px 3px #000;`
	`color: #000; background: #666; text-shadow: 0px 1px 1px #fff;`
	`color: #666; background: #000; text-shadow: 0px 1px 0px #ccc;`
	`color: #fff; background: #666; text-shadow: 0px 1px 1px #000;`
	`color: #fff; background: #000; text-shadow: 1px 1px 6px #fff;`
	`color:#FFE9C7;` `background:#FF6C17; text-shadow: 2px 2px 2px #A6250C;`
	`color:#823210;` `background:#FF6C17; text-shadow:1px 1px 1px #FF9924;`
	`color: #fff; background: #fff; text-shadow: 1px 1px 4px #000;`
	`color: #000; background: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;`

Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup. Thumbs-up

Saturday, January 23, 2010

Optimalkan Feedburner Dengan Memasang Pageflip

By Unknown Posted at 9:31 AM widget No comments

Menjawab pertanyaan sobat Taufik pada komentarnya di postingan elegant style template, yang menanyakan cara membuat gambar di pojok kanan atas seperti kertas di lipat dan memasang feedburner di dalamnya. Mungkin maksudnya adalah cara membuat pageflip, semoga benar perkiraan saya.

Dan kebetulan saya belum pernah buat postingan ini, tidak ada salahnya kita bahas sama-sama, walaupun tutorial ini sudah basi dan usang. Buat yang belum tau apa itu pageflip, bisa melihat contoh demonya disini.

Gambar hidup yang dipojok kanan atas itulah yang disebut pageflip, jika disorot dengan mouse akan terbuka dan jika di klik akan menuju ke halaman yang dimaksud. Dan halaman yang dimaksud tersebut adalah feed kita yang sudah kita daftarkan di feedburner. Dibawah ini adalah 2 gambar yang akan kita gunakan untuk membuat pageflip.

Sebelumnya saya mohon maaf jika saya mengambil gambar pageflip ini tanpa seijin yang empunya. Karena saya sendiri tidak tau persis siapa yang mempunyai hak paten atas gambar pageflip ini, dan saya mengambilnya lewat search engine. Begitu saya lihat, sangat banyak gambar yang sama sehingga saya tidak tau dan tidak bisa mencantumkan sumber pemilik gambar yang asli.

Buat sobat blogger, ini tutorialnya semoga bermanfaat :

Setelah login ke blogger, langsung saja tuju Edit HTML.
Letakkan kode css berikut ini sebelum kode ]]></b:skin>

#pageflip { position: relative }
#pageflip img { border:none; width:50px; height:52px; z-index:99; position: absolute; right:0; top:0; -ms-interpolation-mode:bicubic }
#pageflip .msg_block { width:50px; height:50px; position:absolute; right:0; top:0;
background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/S1sO-qUjmxI/AAAAAAAACwU/DrjPrO1XXaU/page%20flip_thumb%5B1%5D.png) no-repeat right top; text-indent:-9999px }
Copy semua kode script yang ada disini dan kemudian letakkan sebelum kode </head>
Kemudian letakkan kode berikut ini tepat setelah kode <body>

<div id='pageflip'>
<a href='http://feeds.feedburner.com/MyBloggerThemes' target='_blank'>
<img src='http://lh6.ggpht.com/_7Y9pl24WpQY/S1sO3NyCTSI/AAAAAAAACwM/6DxgJaTzsdc/page%20flip%20image_thumb%5B1%5D.png'/>
<span class='msg_block'/>
</a>
</div>
Simpan Template.

Keterangan :

Ganti tulisan yang berwarna merah dengan ID feedburner sobat.
Tulisan yang berwarna biru adalah alamat url dari gambar pageflip, coba di klik untuk mengetahui gambar yang dimaksud.

Silahkan sobat kreasikan sendiri gambarnya dan jika ingin membuat pageflip dengan tujuan halaman yang lain sobat tinggal ganti kode :

<a href='http://feeds.feedburner.com/blog-zone' target='_blank'>

dengan alamat url yang lain, misalnya alamat url untuk mengajak pengunjung blog menjadi referral sobat dalam suatu bisnis online yang sobat ikuti.

Semoga tutorial ini bisa bermanfaat, selamat mencoba !

Sunday, January 3, 2010

Mengganti Background Dengan Gradient Image

By Unknown Posted at 7:37 AM Tutorial Blogspot No comments

Salah satu cara agar pengunjung betah berlama-lama di blog kita adalah dengan menggunakan template yang menarik. Selain kecepatan loading blog juga tentunya sangat berpengaruh pada pengunjung blog, template yang menarik tentu akan sedikit menambah bumbu dalam blog kita.

Untuk membuat template yang menarik, salah satunya dengan konsep pewarnaan judul postingan, background postingan atau judul sidebar dengan background template yang pas.

Untuk membuat background blog, kita bisa menggunakan fasilitas dari http://tools.dynamicdrive.com/gradient. Dengan tools tersebut, kita bisa membuat gambar gradasi, contoh gambar gradasi bisa sobat lihat dibawah ini :

Baiklah, daripada pusing kita langsung praktek aja ya !

Langsung saja tuju web layanan gradient image maker, masuk ke gradient dari dynamicdrive.
Pada halaman depan sobat, pilih model gradasi yang akan sobat gunakan
Pilih saja model yang pertama, kemudian isi gradient width dengan 10, dan gradient height dengan 800 ( angka ini tidak mutlak harus 10 dan 800, sesuaikan dengan keinginan sobat saja ).

Pilih warna untuk top color dan bottom color, ingat warna yang bottom color karena akan kita letakkan di template kita nantinya.
Jika sudah, sekarang klik Get full size image, dan sobat simpan gambar yang sudah jadi di komputer.
Upload gambar tersebut ke hosting yang akan sobat gunakan, bisa menggunakan photobucket, google sites atau jika ingin yang lebih mudahnya sobat bisa membuat blog baru dengan blogspot, khusus untuk menyimpan gambar, seperti yang selama ini saya lakukan.
Sebagai contoh gambar yang sudah jadi bisa sobat lihat dibawah ini :
Coba klik Kanan pada gambar diatas, lalu pilih properties. Perhatikan Image Properties, pada location ada url yang kemudian akan kita gunakan pada background blog nantinya.

Langkah selanjutnya adalah proses mengganti background template-nya :

Login ke blogger dengan ID sobat
Klik tab Edit HTML
Cari kode seperti berikut (biasanya terletak di bagian atas) :
body { width:980px; background:#FFFFFF; font:12px verdana,arial,sans-serif; text-align:left; color:#000; margin:0 auto; padding:0 }
Kemudian ganti sehingga menjadi seperti berikut :
body { width:980px; background:#000000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/S0C5snca_2I/AAAAAAAACoo/9eZ3Rd5PIOE/gradasi%203_thumb%5B4%5D.jpg?imgmax=800) repeat-x; font:12px verdana,arial,sans-serif; text-align:left; color:#000; margin:0 auto; padding:0 }
Kemudian Simpan Template.

Eleman apa yang harus di tambahkan ?

#000000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/S0C5snca_2I/AAAAAAAACoo/9eZ3Rd5PIOE/gradasi%203_thumb%5B4%5D.jpg?imgmax=800) repeat-x;

Kode yang berwarna merah sobat ganti dengan url tempat sobat mengupload gambar gradasi-nya.

Mengapa saya mengganti warna putih (#FFFFFF) dengan warna hitam (#000000)? karena pada saat membuat gambar gradasi, saya menggunakan bottom color dengan warna hitam (#000000).

Baiklah, itu saja kira-kira tutorial blog kali ini, semoga berhasil mengganti background template dengan gambar gradasi-nya.

Wednesday, December 30, 2009

Lacak Copy Paste Artikel Via Tynt Insight

By Unknown Posted at 3:56 PM Link No comments

Hal yang paling menjengkelkan dalam dunia blog adalah adanya blogger yang tidak tau malu dengan seenaknya mengcopy paste artikel kita tanpa menyertakan link penulisnya.

Sebenarnya tidak bisa di salahkan juga jika ada yang melakukan hal tersebut, karena memang tidak ada aturan yang benar-benar melarang kita untuk copy paste artikel dari blog orang lain.

Tapi semua itu hanya akan menghentikan kreatifitas sobat sendiri, karena menurut saya copy paste adalah hal memalukan apalagi jika tidak menyertakan link sumber (penulis). Jadi saya sarankan, hentikanlah copy paste dari blog orang lain, karena lebih baik membuat postingan hasil karya sendiri walaupun ala kadarnya daripada melakukan copy paste.

Untuk hal tersebut, sobat yang ingin tau siapa saja yang pernah mengcopy paste artikel sobat, bisa menggunakan jasa Tynt Insight. Kita bisa mengetahui gambar atau artikel kita yang di copas, dan seberapa banyak artikel kita di copas. Untuk memasang script-nya, silahkan langsung saja kunjungi Tynt Insight.

Pada halaman depan, klik Get Started
Kemudian lengkapi form pendaftaran dengan mengisi nama domain, email, dan password.
Setelah selesai regitrasi, copy paste kode script yang ada di sebelah kanan bawah kedalam HTML template sobat. Letakkan kode tersebut sebelum </body>

Baiklah, selamat mencoba ! semoga dengan mengetahui siapa saja yang mengcopas artikel, sobat jadi tau bahwa artikel sobat menarik.

Monday, December 28, 2009

Gratis Download Icon RSS Feed

By Unknown Posted at 10:11 AM Icon No comments

Rasanya saya sudah kehabisan ide untuk memposting artikel tutorial blogspot, sejenak break dulu kita santai dengan artikel yang santai pula. Mungkin dengan mendownload icon rss feed secara gratis, sobat bisa menambah koleksi icon rss feed milik sobat, sekaligus mempercantik tampilan blog.

Icon-icon ini bisa diletakkan di samping “email subscribe” yang biasanya digunakan untuk mengundang pengunjung untuk berlangganan artikel via email. Karena dengan icon yang menarik, saya yakin pengunjung sangat berminat untuk berlangganan artikel dari blog sobat, selain tentunya blog berisi dengan postingan yang berbobot.

Dibawah ini ada bermacam situs yang menyediakan download icon rss feed secara gratis, silahkan sobat kreasikan blognya dengan icon-con cantik ini.