Trik Blogger

Membuat Box Shadow Dengan CSS 3

2011-09-15T10:06:00.001+07:00

Salam persahabatan, sudah lama trik blogger ga update trik untuk sobat-sobat blogger, pada kesempatan ini trik blogger mau berbagi tentang membuat box shadow dengan css 3.

Coba perhatikan contoh box shadow, di bawah ini,

Tulisan dengan efek box dan drop shadow

Salah satu contoh kegunaan CSS

mungkin sobat pernah melihat blog atau website yang memiliki kotak dengan efek bayangan (drop shadow) sekilas mungkin sobat bepikir, bahwa sobat memerlukan software Photoshop untuk membuat gambar kotak berbayang. Namun, ternyata sobat dapat melakukannya tanpa menggunakan gambar apapun, murni CSS.
Hal ini dimungkinkan melalui fitur baru CSS 3, yang mendukung property box-shadow, contoh kode di bawah ini adalah class untuk membuat kotak berbayang tersebut

.shadow {
box-shadow: 8px 8px 4px #0c0c0c;
background-color:#00ff00;
}

Perhatikan, baris box-shadow: 8px 8px 4px #0c0c0c; yang membentuk efek kotak berbayang.
Property box-shadow memiliki empat parameter/ atribut sebagai berikut :

1.   Offset Horizontal Bayangan
8px seperti contoh berarti bayangan kotak bergeser sebesar 8 pixel secara horizontal ke sebelah kanan. Jika parameter negatif, bayangan akan tampil di sebelah kiri kotak.

2.   Offset Vertikal Bayangan
8px seperti pada contoh berarti bayangan kotak bergeser sebesar 8 pixel secara vertikal ke bawah. Jika parameter bernilai negatif, bayangan akan tampil pada atas kotak.

3.   Radius Blur
Semakin besar nilai, , bayangan akan semakin blur. Jika 0px, akan didapatkan bayangan yang solid tanpa ada efek blur. Pada contoh digunakan radius blur sebesar 4 pixel.

4.   Warna Bayangan
Pada contoh ditentukan warna bayangan adalah #0c0c0c.

Baris kedua, yaitu background-color: #00ff00; berfungsi untuk mendefinisikan warna background.
Bagaimana penggunaannya sehingga menghasilkan tampilan seperti pada contoh di atas?
Berikut ini kode lengkapnya.

<html>
<head>

<style type='text/css'>
.shadow { box-shadow: 8px 8px 4px; #0c0c0c; background-color:#00ff00;}
</style>

</head>
<body>

<div class=shadow style="width:200px">
Tulisan dengan efek box dan drop shadow
</div>
<div class=shadow style="width:180px">
Salah satu contoh kegunaan CSS
</div>

</body>
</html>

Seperti kode di atas, class .shadow didefinikan dalam tag <head>, diawali dengan tag <style type='text/css'>. Penulisan CSS dengan cara ini disebut Internal Style Sheet. Jika cukup banayk kode CSS yang ingin disertakan pada halaman tersebut, umumnya web developer akan menyimpan CSS pada file terpisah (dengan ekstensi *.css) dan memanggilnya dengan tag <link> yang juga diletakkan pada bagian <head>.
Penulisan CSS dengan cara ini disebut dengan External Style Sheet.

Contoh penulisan :
<link rel="stylesheet" type="text/css" href="style.css"/>
Sobat dapat menggunakan class .shadow yang telah didefinisikan tersebut dengan perintah <div class=shadow> lalu mengetikkan teks yang merupakan konten di dalam kotak tersebut. Permasalahan selanjutnya adalah bagaimana membuat lebit dari satu kotak berbayang dengan lebar (width) berbeda?
Tentu sobat memiliki alternatif, misalnya table dengan width tertentu. Namun, cara yang cukup praktis adalah kembali menggunakan CSS.
Perhatikan kembali kode HTML lengkap di atas. Baris <div class=shadow style="width:200px">
merupakan pemanggilan class .shadow dengan membatasi isi konten dalam div sebesar 200 pixel. Pemanggilan CSS dengan atribut style ini disebut dengan Inline Style.

Sekian, semoga bermanfaat buat sobat-sobat blogger, salam

Selamat Hari Raya Idul Fitri 1432 H

2011-08-29T17:25:00.000+07:00

Trik Blogger mengucapkan Selamat Hari Raya Idul Fitri 1432 H, untuk sobat-sobat blogger yang merayakan.

Minal 'aidin wal faizin Mohon maaf lahir batin

Cara menguninstall Program Dengan Klik Kanan

2011-08-19T15:55:00.002+07:00

Salam persahabatan, mungkin sobat-sobat penah menguninstall program di pc dan biasanya harus membuka control panel dan membuka Add or Remove Program setelah itu baru sobat pilih program mana yang akan sobat uninstall.
Kali ini trik blogger share tentang Cara Menguninstall Program Dengan Klik Kanan, dengan bantuan menu Unistall ini dapat mempermudah sobat-sobat untuk mengunistall program yang tidak terpakai dengan mudah, untuk lebih jelasnya mari kita ikuti tutorial berikut ini :

1.   Sobat download program Menu Unistall di sini, setelah itu extract progam tersebut dengan Winrar, kemudian klik kanan pada file intaller MenuUnistall kemudian pilih Install,

2.   Setelah muncul jendela instalasi MenuUnistall klik tombol next

3.   Pada halaman selanjutnya, akan muncul jendela Confirm Installation, kemudian klik tombol next.

4.   Jika proses instalasi selesai klik tombol close.

5.   Untuk mencobanya, lihatlah desktop pada layar monitor sobat, pilih salah satu shortcut program yang ingin sobat unistall, lalu klik kanan pada shortcut tersebut lalu pilih Uninstall

6.   Akan muncul jendela Uninstall Confirmation, klik menu yes

7.   Biarkan proses pencarian uninstall program berjalan setelah menemukan program yang akan dihapus, klik next

8.   Pada halaman Repair or Remove Instalation, pilih menu Remove lalu klik next

9.   Biarkan proses Uninstall berjalan setelah selesai klik tombol Finish

Sekian semoga bermanfaat buat sobat-sobat blogger

Selamat mencoba..

Award Trik Blogger

2011-08-13T10:29:00.005+07:00

Salam persahabatan, terima kasih buat sobat-sobat blogger yang telah memberikan award ini untuk trik blogger, terutama untuk sobat Bin Hakim yang telah memberikan 3 award yaitu :
Majapahit Award, Aul Award dan Creative Award, ( maaf ya sob baru sempat sekarang dipostingnya ) dan trik blogger berterima kasih juga untuk sobat Dot Xp yang telah memberikan Blogger Ramadhan Award 2011.

3 Award Dari Bin Hakim

Blogger Ramadhan Award Dari Dot-XP

Berikut ini koleksi award yang telah trik blogger terima dari sobat-sobat blogger

Award Pertama Dari Kakak Dan Abel

Award Kedua Setetes Embun Dari Blue Zone 69 Award Kedua Setetes Embun Dari Menjelma Award Kedua Setetes Embun Dari Belajar Komputer Award Kedua Setetes Embun Dari Komputer Jaringan Award Setetes Embun Dari Bin Hakim

Award Ketiga Blogger Choice Award Dari Menjelma

Award Ketiga One Lovely Blog Award Dari Menjelma

Award Keempat Best Friend Award Dari Tutorial Komputer
Award Keempat Friendship Award Dari Tutorial Komputer
Award Keempat Best Friend Award Dari Jalan-Jalan Dingin

Award Keempat Blogger Award 2011 Dari Jalan-Jalan Dingin Award Keempat Blogger Award 2011 Dari Anak Kos Entertainment Award Keempat Blogger Award 2011 Dari Belajar Blogging Award Keempat Blogger Award 2011 Dari Berbagi Kreativitas

Cara memasang Highlight Author Comment

2011-08-12T13:47:00.003+07:00

Salam persahabatan, kali ini trik blogger mencoba update artikel tentang mempercantik kotak komentar dan udah banyak juga artikel trik blogger untuk mempercantik tampilan kotak komentar, seperti membuat show hide komentar, memasang adsense di kotak komentar, memasang nomor urut komentar, dan trik kali ini highlight author comment yang berfungsi agar komentar author (admin pemilik blog) berbeda dengan komentar pembaca. Untuk membuatnya mari kita ikuti tutorial berikut ini :

    1.     Login ke Blogger.

    2.     Di halaman Dasbor, kita pilih Design.

    3.     Kemudian pilih Edit HTML

    4.     Beri tanda centang pada Expand Template Widget

    5    Sebelum meng-editnya terlebih dahulu Backup template sobatuntuk jaga2 kalau gagal meng-edit templatenya.

    6.     Kemudian cari kode ]]></b:skin>

    7.    Copy dan pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

*/ Comment Body Author /*

.comment-body-author {margin:5px 0;
    line-height:18px;
    padding:10px;
    border:1px solid #eeead9;
    background:#eee;/* Warna Background */

    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border:2px solid #BF6553;}

8. Kemudian cari kode-kode yang mirip seperti di bawah ini. Mungkin kode ini dengan kode di HTML sobat akan beda, tapi walaupun beda usahakan semirip mungkin dengan kode berikut ini :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

Kode Highlight Author Comment di sini

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Kode penutup di sini

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

9. Copy dan pastekan kode Highlight Author Comment

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

10. Copy dan pastekan kode penutup di bawah ini

</b:if>

Catatan : Ganti kode warna background yang sesuai dengan template sobat, untuk melihat kode warna sobat bisa lihat di sini

Selamat mencoba semoga berhasil

Cara Memasang Float Share Box

2011-07-29T11:25:00.007+07:00

Salam persahabatan, trik blogger kali ini share tentang cara memasang float share box pada blog, dan untuk menjawab pertanyaan dari sobat Romantic song Lyrics yang menanyakan bagaimana cara membuat float share box seperti yang ada pada blog trik blogger. Mudah-mudahan tutorial ini bermanfaat buat sobat-sobat blogger, baiklah untuk lebih jelas cara memasang share box ini mari kita ikuti tutorial berikut ini:

Seperti biasa sobat harus login dahulu ke blogger, lalu pilih tab Design >> Edit HTML >> Centang Expand Widget Templates

Setelah itu pastekan kode di bawah ini tepat di bawah <head> sebelum kode </head>

Kemudian cari kode ]]></b:skin> Copy kode di bawah ini dan pastekan sebelum kode ]]></b:skin>

#sharebox { background-color:#FFFFFF; border-color:#C1CDCD; border-style:solid; border-width:1px; right:103px; bottom:40px; margin-top:10px; position:fixed; width:64px;-moz-box-shadow: inset 1px 1px 10px #2586d7; -webkit-box-shadow:1px 1px 10px #2586d7; } #sharebox .float {margin:7px} .FBConnectButton_Text { font-size: 8px; padding:2px 4px 3px !important; }

Setelah itu sobat cari kode

<div class='post-footer-line post-footer-line-1'>

copy kode di bawah ini dan pastekan tepat di bawah kode tadi

<b:if cond='data:blog.pageType == "item"'> <div id='sharebox'> <div class='float'><a class='twitter-share-button' data-count='vertical' data-via='andreas_234' href='http://twitter.com/share'>Tweet</a></div> <div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div> <div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/> <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div> <div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div> </div> </b:if>

Catatan : Ganti warnanya sesuai keinginan sobat untuk mengetahui kode warna sobat bisa lihat di sini

Dan untuk meletakkan di kiri sobat ganti tulisan right dengan left. Ganti juga tulisan data-via='andreas_234 dengan akun twitter milik sobat

Setelah selesai simpanlah template sobat dan lihat hasilnya

Selamat mencoba semoga berhasil dan sukses buat semua sobat-sobat

Cara Membuat Dropdown Menu

2011-07-23T14:42:00.009+07:00

Salam persahabatan, pada artikel yang lalu trik blogger membahas tentang membuat menu dtree dan untuk artikel kali ini trik blogger membahas tentang cara membuat dropdown menu, apa sih dropdown menu itu? Dropdown menu berbentuk sepeti contoh gambar di bawah ini.

Dengan menambahkan dropdown menu pada blog, kita bisa menghemat space atau ruang pada blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan teks yang banyak, dropdown menu bisa diisi dengan arsip, blogroll dan lain-lain.
Untuk mengetahui cara membuat dan memasangnya pada blog mari kita ikuti langkah-langkah berikut ini.

Seperti biasa sobat login dulu ke Blogger, kemudain masuk ke menu Design >> Add a Gadget >>HTML/Javascript kemudian pastekan kode di bawah ini ke dalam gadget sobat

Ganti tulisan Link 1 dengan link artikel sobat dan teks 1 dengan judul artikel sobat

Contohnya seperti di bawah ini

<form><select name="menu" onchange="window.open (this.options[this.selectedIndex].value,'_blank') "size=1 name=menu>
<option>- Arsip Blog -</option>< !-- change the links with your own -->
<option value="http://trik-blogger-andreas.blogspot.com/2011/07/cara-membuat-menu-dtree.html">Cara Membuat Menu Dtree</option>
<option value="http://trik-blogger-andreas.blogspot.com/2011/07/cara-membuat-autoblog-di-blogspot.html">Cara Membuat Autoblog di Blogspot</option> </select></form>

Hasilnya seperti contoh di bawah ini

Untuk menambahkan link lagi masukan script seperti ini

sebelum kode </select>

Link dalam dropdown menu di atas jika diklik akan membuka window baru tanpa menutup blog sobat.

Selesai sudah tutorial membuat dropdown menu
Selamat mencoba, semoga berhasil....

Cara Membuat Menu Dtree

2011-07-21T17:14:00.008+07:00

Salam persahabatan, ada banyak macam-macam menu untuk mempercantik tampilan blog, seperti menu horizontal, meu vertikal dan menu tab view, kali ini trik blogger membahas tentang cara membuat menu dtree. Menu Dtree (D-Tree) adalah menu yang memiliki struktur seperti pohon, yang punya banyak cabang-cabang, seperti Windows Explorer pada komputer.
Menu Dtree ini sangat berguna jika sobat memiliki postingan yang banyak, karena dengan menggunakan menu Dtree, maka akan bisa menghemat space/ ruang yang ada di blog sobat.
Bagaimana cara membuatnya? Mau tahu cara membuatnya? mari kita ikuti langkah-langkah berikut ini:

1. Login ke blogger, terus pilih " Tata letak -> Edit HTML".

2. Taruh kode berikut ini di atas kode <head>

<div class="dtree">

3.    Simpanlah template sobat

4.    Pilih tab Page Elemens >> Add Gadget >> HTML/Javascript

5    Copy dan pastekan kode script di bawah ke dalam Gadget

6. Simpan Gadget sobat dan lihat hasilnya.

Keterangannya :

- Ganti tulisan "Judul Artikel" dengan Judul Artikel sobat dan HTML dengan Link sobat (link posting sobat)

- Sobat bisa menambahkan ikon agar lebih menarik tampilannya, contoh script-nya akan seperti ini:

d.add(8,0,'Folder;,'judul artikel','link.html',",",'url ikon sobat')

Silahkan pasang widget ini, dimohon untuk tetap menyertakan kode berwarna merah di akhir script,
terimakasih atas perhatian dan kerjasamanya.

Selamat mencoba dan semoga tips ini bermanfaat bagi sobat-sobat blogger

Silahkan pasang widget ini, dimohon untuk tetap menyertakan kode yang dicetak merah di akhir script, terimakasih atas perhatian dan kerjasamanya.

Membuat Form Kontak Admin Menggunakan Google Docs

2011-07-19T18:05:00.005+07:00

Salam persahabatan, ada banyak cara untuk membuat form kontak sepert yang pernah trik blogger share tentang membuat form contact me atau dengan memanfaatkan situs pembuatan form seperti emailmeform.com, formlogix.com, mycontactform.com, dan lain-lain.

Pada artikel ini trik blogger share tentang cara membuat form kontak admin dengan menggunakan google docs, mau tahu caranya?, mari ikuti tutorial berikut ini :

Buka google docs, sign in menggunakan account google anda.
Setelah sobat masuk dalam google docs, klik pada tombol ‘New’ di sebelah kiri atas kemudian pilih ‘SpreadSheet’.
Setelah masuk pada lembar spreadsheet klik menu ‘Form’ kemudian pilih ‘Create a Form’.
Ganti tulisan ‘Untitled Form’ dengan judul form sobat, misalnya ‘Hubungi Admin Trik Blogger’. Isikan kotak di bawahnya dengan kata pembuka kontak form anda, misalnya ‘Sobat-sobat dapat menghubungi admin Trik Blogger dengan menggunakan kontak form di bawah’.
Buat elemen yang akan sobat masukkan pada kontak form, misalnya form akan mempunyai 5 elemen di antaranya ; “Nama, eMail, Website/ Blog, Subject Pesan, dan Isi Pesan”.
Cara membuat elemen nama pengirim pesan. Ganti tulisan ‘Question Title’ pada lembar kerja form dengan ‘Nama’. Kotak isian ‘Help Text’ dapat sobat kosongkan, ‘Question Type’ pilih ‘Text’, centang checkbox ‘Make this a requeired question’ jika kotak isian nama tidak boleh dikosongkan (wajib diisi).
Membuat elemen alamat pengirim email. Klik pada tombol ‘Add Question’ sebelah kiri atas kemudian pilih ‘Text’, cara sama seperti pembuatan elemen nama namun isikan ‘Question Title’ nya dengan ‘eMail’.
Membuat elemen Website/ Blog. Klik pada tombol ‘Add Question’ sebelah kiri atas kemudian pilih ‘Text’, cara sama seperti pembuatan elemen nama namun isikan ‘Question Title’ nya dengan ‘Website/ Blog’
Membuat elemen subject pesan. Ada dua cara yang dapat di lakukan, pertama sama seperti kedua cara di atas hanya saja ‘Question Title’ sobat isikan dengan ‘Subject Pesan’, kedua dengan menggunakan ‘Multiple ChoiPesan Biasace’. Untuk multiple choice cara pembuatannya, klik ‘Add Question’ pada tombol sebelah pojok kiri atas kemudian pilih ‘Multiple Choice’. Isikan ‘Question Title’ dengan ‘Subject Pesan’. Seumpama ‘Option 1′ anda isikan dengan ‘Pesan Biasa’, kemudian klik pada kotak di bawahnya dan isikan ‘option 2′ dengan ‘Saran’, klik kotak dibawahnya lagi dan isikan ‘option 3′ dengan ‘Request’. Kemudian klik pada tulisan ‘add “Other”‘ di bawahnya, klik ‘Done’.
Terakhir membuat kotak isi pesan. Caranya klik pada tombol ‘Add Question’ sebelah kiri atas kemudian pilih ‘Paragraph Text’, isikan ‘Question Title’ dengan ‘Tulis Pesan Anda Di Sini’, klik ‘Done’.
Selanjutnya klik pada tombol ‘More Action’ sebelah pojok kanan atas kemudian klik ‘Edit Confirmation’. Ketikkan kalimat ucapan penutup sobat misalnya ‘Terima kasih telah menghubungi Admin Trik Blogger
Pesan sobat akan dibalas secepatnya’.Klik pada tombol ‘Save’ sebelah pojok kanan atas.
Next, Klik pada ‘More Action’ pilih ‘Embed’. Copi code HTML dan taruh di website atau blog sobat. Sekarang coba test kontak form yang baru saja sobat buat, isikan datanya terserah, klik tombol ‘kirim (send)’.
Selesai. Jika ingin melihat kotak pesan yang telah masuk cukup login ke account google sobat kemudian buka google dock. Buka spreadsheet sobat, lihat pesan-pesan yang dikirimkan melalui kontak form sobat.

Selamat mencoba...semoga berhasil

Cara Membuat Halaman Maintenance Pada Blogspot

2011-07-18T09:42:00.005+07:00

Salam persahabatan, hari ini trik blogger update lagi postingan untuk sobat-sobat, pada postingan yang lalu trik blogger pernah share tentang cara mambuat halaman blog melipat dan kali ini trik blogger akan mambahas tentang cara membuat halaman miantenance yang mungkin akan berguna buat sobat-sobat trik blogger saat me-maintenance blog sobat. Jadi saat sobat me-maintenance blog, pengunjung tidak dapat melihat halaman utama bahkan mungkin isi keselurahan blog sedang berantakan saat me-maintenance blog. Jadi halaman apa yang akan ditampilkan? Ya, halaman ini.seperti contoh gambar di bawah ini

Ingin tahu cara membuatnya, mari ikuti tutorial berikut ini:

1. silahkan login ke akun blogger kamu -> pilih Rancangan -> Edit HTML -> centang "Expand Widget Template" supaya keselurahan script terlihat.

2. kemudian cari kode ]]>< /b :skin> untuk memudahkan dalam pencarian code tersebut, tekan (Ctrl+F) -> masukan code di atas dalam kotak pencarian dan enter

3. kalau sudah ketemu copy kode di bawah ini kemudian pastekan tepat diatas code tadi.

html { height: 100%; background: url(http://4.bp.blogspot.com/-CMQT6ZSS_KQ/TiOZ5cXRzhI/AAAAAAAAAp4/817DMWuG1Bg/s320/Membuat+Halaman+Maintenance+Pada+Blogspot.JPG) no-repeat center 50%; margin: 0; } body { display: none; }

Catatan : kode yang berwarna merah bisa sobat ganti dengan URL image sobat sendiri.

Jika sudah selesai, simpan template sobat dan lihat hasinya

Jika sudah selesai mainatenance blog hapuslah script yang tadi, maka blog akan kembali seperti semula.

Selamat mencoba, semoga berhasil dan sukses selalu, salam blogger

Cara Membuat Autoblog di Blogspot

2011-07-16T15:56:00.004+07:00

Salam persahabatan, artikel trik blogger kali ini ditujukan bagi sobat-sobat blogger semua, yang memiliki sebuah blog tapi jarang update artikel secara teratur, untungnya blogspot punya fasilitas autoblog
Autoblog adalah sebuah blog dimana konten artikelnya akan selalu ter-update secara otomatis. Bagaimana penasaran ingin tahu cara membuatnya? kalau gitu mari kita ikuti tutorial cara membuat Autoblog di Blogspot

1. Masuk ke akun blogspot sobat.

2. Pilih menu setting lalu pilih tab email & mobile

3. Pada kolom email posting address, buatlah sebuah nama email yang baru. Formatnya akan seperti ini : namaakunblogspotsobat.namayangdiinginkan@blogger.com. Jangan lupa untuk pilih Publish email immediately.

4. Klik save setting.

5. Langkah selanjutnya adalah berlangganan newsletter yang sesuai dengan topik blog sobat dengan menggunakan email yang sudah dibuat pada langkah 3 di atas. (silahkan berlangganan newsletter sebanyak-banyaknya)

6. Autoblog sobat sudah jadi dan akan terisi secara otomatis setiap ada newsletter yang terkirim ke email sobat tersebut.
Ada cara yang lain sob, kita menggunakan fasilitas filter email yang masuk ke autoblog kita. Nah Caranya:

1. Lakukan langkah 1 sampai 4 di atas.

2. Buatlah akun email baru di gmail, masuk ke akun gmail sobat

3. Klik Setting >> Filters >> Create New Filter

4. Pada kolom To diisi alamat email gmail sesuai langkah 2 di atas, lalu klik next step.

5. Selanjutnya pilih Forward it to dan diisi dengan alamat email di akun blogger sobat sesuai dengan langkah 3 diatas lalu klik Create Filter.

6. Sekarang saatnya mencari RSS sebanyak-banyaknya sesuai dengan tema atau topik blog anda.

7. Autoblog sobat sudah siap, jadi begitu ada kiriman RSS feed ke inbox anda maka secara otomatis akan diforward ke email akun blogger sobat yang akan langsung mempostingnya di blog sobat.

Selamat mencoba ya sobat..

*Gunakan akun gmail yang telah dibuat pada langkah 2 hanya untuk autoblog saja, karena semua email yang masuk akan ditampilkan di blog sobat.

Selamat mencoba

Cara Memasang Music Di Blog

2011-07-13T19:40:00.004+07:00

Salam persahabatan, kali ini trik blogger sedikit share cara memasang musik atau lagu di web/ blog. Jika kita ingin menampilkan lagu di blog. Jangan memasang sebagaiabackground, sehingga tidak otomatis dimainkan saat blog dibuka. Jika otomatis dijalankan, saat membuka blog, maka blog akan terasa berat loadingnya.
Ada beberapa website yang menyediakan layanan free audio yang bisa sobat tambahkan untuk blog antara lain :

1. Musik-Live

Kelebihan:
- Lagu sudah tersedia, tinggal pasang
- Banyak model skin yang bisa anda pilih

Kelemahan:
- Tidak bisa upload lagu sendiri

2. eSnips

Kelebihan:
- Bisa upload lagu dari komputer
- Tersedia lagu yang bisa anda putar

Kelemahan:
- Hanya 2 model skin yang bisa dipilih
- Tampilannya kurang menarik

Itulah kelebihan dan kelemahannya masing-masing, silahkan sobat tentukan sendiri mana yang lebih cocok dengan kebutuhan sobat.

berikut adalah langkah-langkah pemasangannya:

1. Musik-Live.Net

Kunjungi http://musik-live.net/ lalu klik Skin Mp3 Player
Pilih tampilan player yang anda inginkan. Untuk melihat tampilannya klik Preview Skin
Copy kode dalam kolom 'Embed code' lalu buka blogger. Klik menu Design -> Add Gadget
Paste kode tersebut ke menu HTML/ Javascript
Selesai dan simpanlah gadget sobat

Diatas adalah cara memasang musik player dengan lagu yang telah disediakan. Jika anda ingin memilih sendiri lagunya. Berikut caranya:

Pada halaman Musik-Live, cari lagu favorit anda dengan kotak pencari.
Lalu klik Play & Embed code untuk menampilkan kodenya
Copy kodenya lalu paste ke menu HTML/ Javascript blogger anda.
Selesai dan simpanlah gadget sobat

Catatan:
Cara ini hanya bisa untuk memutar 1 lagu saja. Jika anda ingin memutar banyak lagu maka gunakan eSnips.

2. eSnips

Kunjugi http://www.esnips.com/ Untuk bisa memanfaatkan fasilitasnya anda harus signup terlebih dahulu. Jika sudah, sign-in ke akunnya.
Klik Upload Files lalu klik Select Files
Pilih lagu yang mau anda putar lalu pilih folder dimana anda mau memyimpan lagunya. Pastikan folder yang anda pilih adalah bersifat Public. Karena kalau Private anda tidak bisa menambahkan lagunya kedalam playlist.
Jika sudah klik Upload Now Tunggu hingga proses upload selesai.
Jika sudah klik menu Folder. Pilih folder dimana anda menyimpan menyimpan lagunya
Pilih lagu-lagu yang ingin anda pasang dengan cara klik Add to quicklist
Jika sudah, scroll ke bagian atas halaman lalu klik Create playlist widget esnips create playlist
Pilih skin yang anda inginkan. Lalu copy kodenya yang ada pada kotak.esnips widget
Buka blogger. Paste kodenya pada menu HTML/ Javascript lalu klik Save
Selesai, simpan gadget sobat dan lihat hasilnya.

Jika ukurannya tidak pas anda bisa mengatur ukurannya dengan mengedit nilai width-nya pada kodenya masing-masing.

Selamat mencoba..

Cara Mendapatkan Uang Dari Komisi Gratis

2011-07-09T18:43:00.004+07:00

Salam persahabatan, ada banyak cara untuk mencari uang lewat internet, ada yang harus menggunakan modal dan ada juga yang gratis tanpa modal sepeserpun.dalam artikel ini trik blogger akan berbagi cara mendapatkan uang dari internet tanpa modal sepeserpun alias gratis.
Nama program ini adalah Komisi Gratis.dan sesuai dengan namanya, proses pendaftaran dan promosinya serba gratis. tapi tetap bisa memberikan keuntungan
Komisi Gratis merupakan sebuah program berbasis PAY PER LEAD (PPL) yang artinya sobat DIBAYAR UNTUK MEREKRUT, sobat hanya perlu mengajak Orang Mendaftar Secara GRATIS dan sobat boleh merekrut sebanyak-banyaknya (tanpa batas) untuk mendapatkan Komisi yang lebih besar.

Bagaimana cara kerjanya sehingga member mendapatkan keuntungan dari program bisnis Komisi Gratis ini?
Cara kerjanya sederhana saja. Jika sobat sudah terdaftar sebagai member pada Komisi Gratis, sobat cukup mencari dan mendapatkan downline, setiap kali mendapatkan satu orang downline, sobat mendapat komisi Rp.500,-. dan komisi akan ditransfer kerekening sobat antara tanggal 1 s/d 10 diawal bulan setelah mencapai minimal Rp.50.000,-

Untuk registrasi, silahkan KLIK DISINI

Tingkatkan Trafic Dengan Submit Artikel Ke Lintas Berita

2011-07-08T20:01:00.008+07:00

Salam persahabatan, untuk meningkatkan traffic di blog sobat, adalah dengan cara submit artikel ke berbagai situs blog direktori. Tapi kali ini trik blogger sekedar share tentang submit artikel ke Lintas Berita, atau dengan kata lain sobat mempublikasikan artikel sobat langsung ke Lintas Berita. Sehingga artikel sobat dapat di baca oleh ribuan netters. Dan semua itu bisa berdampak dengan banyaknya traffic ke blog sobat, atau mungkin jika ada pengunjung yang senang dengan artikel sobat dan membagikannya lewat Lintas Berita kepada sobat-sobat pencari berita, akan sangat berguna bagi sobat dan semua pencari berita.

Bagaimana apa sobat mau coba untuk memasangnya?
Mari kita ikuti langkah-langkah berikut ini :

Sebelum sobat memasang tombol LintasBerita, sobat harus mendaftarkan diri dulu ke situs Lintas Berita , agar bisa mensubmit artikel blog sobat

Untuk mendaftar Klik di sini

Setelah selesai mendaftaran di situs Lintas Berita masuklah ke blogger

Pilih Design >> Edit HTML >> Centang Expand Widget Template

Copy paste kode berikut ini dan letakkan tepat di bawah <data:post.body/>

Catatan : Kalo ingin meletakan di kanan, sobat ganti tuliasan floatleft dengan floatright dan margin-left dengan margin-right

Setelah itu simpan template sobat dan lihat hasilnya

Selamat mencoba, dan semoga sukses selalu, salam Blogger

Memasang Tombol Follow Twitter Pada Postingan

2011-07-07T16:26:00.006+07:00

Salam persahabatan, udah lama ga update dan untuk sekedar update artikel, kali ini trik blogger share cara memasang tombol twitter pada setiap postingan, mau tahu caranya? mari kita ikuti langkah-langkah berikut ini :

Seperti biasa sobat login ke Blogger

Pilih Design >> Edit HTML >> Centang Expand Widget Templates

Cari kode <div class='post-header-line-1'/>

Copy dan pastekan kode di bawah ini tepat di bawah kode tadi

Kode Twitter Sobat

</div>

Smpanlah template sobat

Gantilah kode twitter sobat

Untuk mendapatkan kode twitter klik di Sini

Selamat mencoba

Software Untuk Bikin Foto Mozaic

2011-06-25T16:09:00.003+07:00

Software Untuk Bikin Foto Mozaic

Program ini awalnya dibuat sebagai proyek "coba-coba" untuk menciptakan gambar mozaic artistik di PC. Aplikasi ini memiliki beragam fitur yang sangat mendukung untuk pembuatan efek mozaic. Sobat dapat memilih jenis files atau gambar kecil yang akan digunakan untuk membentuk foto final, menentukkan jumlah tiles dan memilih foto final dari kumpulan foto tiles. Yang menarik dari aplikasi ini adalah kemampuannya untuk membuat tiles dari frame yang ada di dalam file video. Untuk menggunakan fitur ini, sobat perlu meng-install K-Lite Codec Pack atau codec video Vfw.

Kompatibel : Windows 2000/ XP/ 2003/ Vista/ 7

Lisensi : Freeware

Download From Easy Share

Download From Ziddu

7 Kota Yang Ter.. Di Dunia

2011-06-17T16:13:00.004+07:00

1.    Kota Terluas

Kota Hum dikenal sebagai kota terkecil, sedangkan kota Mount Isa sebaliknya. Kota Mount Isa dikenal sebagai kota dengan wilayah terluas di dunia. Kota yang teletak di barat laut Queensland, Australia, luasnya mencapai hampir 41.000 km². Kota Mount Isa juga memiliki jalan raya kota sepanjang 189 km yang menjadi jalan raya terpanjang di dunia. Jumlah penduduk yang tinggal di kota hanya 20.000 jiwa sedangkan 31.000 jiwa lainnya berada di distrik sekitarnya.

2.    Kota Dengan Petir Terbanyak

Salah satu kota di Indonesia terkenal sebagai kota dengan petir terbanyak. Kota Bogor, Jawa Barat telah lama dikenal sebagai kota hujan. Kota hujan tersebut dinobatkan sebagai kota petir terbanyak. Dalam satu hari, Kota Bogor mendapat sambaran petir hingga 322 kali di tahun 2009. Normalnya, petir yang menyambar hanya 80 kali. Gelar tersebut diberikan oleh Guinness Book of Record.

3.    Kota Terjangkung

Kota yang memiliki lebih dari 7.500 gedung pencakar langit ini sangat wajar disebut sebagai kota terjangkung. Gelar ini jatuh kepada Kota Hongkong. Jumlah gedung-gedung tinggi di Kota Hongkong lebih banyak dibandingkan jumlah gedung pencakar langit yang dimiliki Kota New York, Amerika. Gedung tertinggi di Hongkong hingga tahun 2009 adalah Two International Finance Center dengan tinggi 415 m. Namun tidak lama lagi gelar gedung tertinggi di Hongkong akan diambil alih oleh gedung International Commerce Center. Gedung tersebut rencananya dibangun dengan tinggi 484 m.

4.    Kota Tertua

Kota tertua di dunia adalah Kota Jericho yang oleh orang-orangArab disebut dengan Kota Ariha. Kota ini diperkirakan telah berumur lebih dari 10.000 tahun. Kota Jericho juga terkenal sebagai kota dengan dataran terendah di dunia. Kota Jericho berada di 260 m di bawah permukaan laut.

5.    Kota Terkecil

Kota yang jumlah penduduknya hanya 23 orang pastilah dinobatkan sebagai kota terkecil di dunia. Kota Hum, demikian nama kota tersebut, terletak di Kroasia. Kota tua ini dibangun pada tahun 1102. Dahulu Kota Hum bernama cholm. Arsitektur bangunan di Kota Hum masih menggunakan gaya arsitektur abad pertengahan.

6.    Kota Pertama Berpenduduk 1 Juta Jiwa

Saat ini ada ratusan kota yang junmlah penduduknya lebih dari 1 juta jiwa. Namun, kota pertama yang jumlah penduduknya 1 juta jiwa pada 133 SM (sebelum masehi) adalh Kota Roma di Itali. Kota London di Inggris baru memiliki 1 juta penduduk pada tahun 1810 dan disusul oleh Kota New York, Amerika, pada tahun 1875.

7.    Kota Berpenduduk Terbanyak

Kota berpenduduk terbanyak di dunia adalah Kota Tokyo. Jumlah penduduknya lebih dari 28 juta jiwa pada tahun 2008. Masih ada beberapa kota yang juga memiliki jumlah penduduk terbanyak. Setiap tahun, selalu ada perubahan nomor urut kota berpenduduk terbanyak karena populasi manusia selalu bertambah tiap tahunnya.

Sumber :

www.blog.mozilla.com
www.en.wikipedia.org
www.geography.about.com
www.nemoto911.blogspot.com
www.www.haruyahya.com
www.www.neatorama.com
www.www.popularmechanics.com
www.ananova.com
www.guinnessbookofrecrds.com
www.mupeng.com
www.wikipedia.com
www.xinhua.net

Cara Membuat Show Hide Untuk Widget

2011-06-13T15:04:00.005+07:00

Salam perahabatan, pada artikel yang lalu trik blogger pernah share tentang cara membuat show hide komentar yang berfungsi untuk menampilkan atau menyembunyikan komentar dari pengunjung blog, nah trik kali ini masih tentang show hide, tapi yang akan kita show hide adalah widget.
Jika masih penasaran dengan membuat show hide untuk widget, mari ikuti langkah-langkah berikut ini :

Langkah pertama, pilih widget yang akan kita jadikan Show/Hide Widget caranya dengan mencari ID widget tersebut.

Untuk mencari ID Widget, bukalah menu page element (Masuk ke blogger >> Design/rancangan >> page element ) .

Setelah itu cari widget yang ingin sobat Show/Hide Widget Kemudian klik Edit pada widget

Setelah terbuka, lihatlah pada address bar widget tersebut, di sanalah terdapat ID widget tersebut

Setelah ID Widget ditemukan, klik cancel untuk kembali.

Setelah ID Widget ditemukan, lalu pilih tab Edit HTML jangan lupa centang Expand Widget Templates

Setelah itu cari kode widget yang akan sobat show hide misalnya Recent Post

Kodenya seperti contoh dibawah ini

<b:widget id='HTML1' locked='false' title='Recent Post' type='HTML'>

        <b:includable id='main'>

          

          <b:if cond='data:title != ""'>

            <h2 class='title'><data:title/></h2>

          </b:if>

          <div class='widget-content'>

            <data:content/>

          </div>

          <b:include name='quickedit'/>

        </b:includable>

        </b:widget>

        </b:section>

        </div>

Setelah ketemu, ganti kode merah tersebut dengan kode berikut.ini

<h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:right;margin-right:0px;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>

* Setelah itu pastekan kode

tepat di atas kode </b:includable>

dan hasil akhirnya akan seperti ini,

<b:widget id='HTML1' locked='false' title='Recent Post' type='HTML'>

        <b:includable id='main'>

          

          <b:if cond='data:title != ""'>

        <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:right;margin-right:0px;"><b>[Show/Hidden]</b><\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>

          </b:if>

          <div class='widget-content'>

            <data:content/>

          </div>

          <b:include name='quickedit'/>

        <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>

        </b:includable>

        </b:widget>

        </b:section>

        </div>

Setelah selesai Save/Simpan template sobat, dan hasilnya

Selamat mencoba, semoga bermanfaat

Sumber http://prasutan.blogspot.com/2010/07/membuat-showhidden-widget-versi-2.html

Cara Memasang Indexed Pages Checker Pada Blog

2011-06-11T15:36:00.005+07:00

Salam persahabatan, kali ini trik blogger cuma sekedar share tentang cara memasang Indexed Pages Checker pada blog
Berikut ini cara memasang Indexed Pages Checker

Masuk ke Blogger, kemudian pilih Design >> Add Gadget >> HTML/JavaScript

Copy dan pastekan script di bawah ini ke dalam gadget sobat

Setelah itu simpan gadget sobat dan lihat hasilnya

Untuk menambahkan widget ini secara langsung ke blog sobat klik tombol di bawah ini

Atau sobat bisa mengeceknya langsung di sini.
Masukkan Url sobat dan klik check now

Cara Mematikan Program dan Service Pada Windows XP

2011-06-09T10:00:00.003+07:00

Salam persahabatan, setiap menjalan Windows XP, mungkin ada program dan service yang otomatis dijalankan tanpa sepengetahuan sobat.
Program yang berjalan saat startup ini membuat kompi sobat berjalan lambat. Nah, bersihkan program dan service yang tidak diperlukan agar kompi sobat kian kencang.
Kali ini trik blogger mecoba berbagi trik untuk mematikan program dan service pada Windows XP, mari ikuti langkah-langkah berikut ini :

1. RESTART KOMPUTER

Restart kompi sobat untuk memastikan adanya program pada taskbar yang dijalankan pada waktu startup. Notification terletak di ujung kanan Taskbar akan menampilkan icon program yang dijalankan pada waktu sobat menyalakan komputer.
untuk melihat semua icon program yang ada, klik panah kecil yang mengarah ke kiri, lalu arahkan kursor mouse ke atas setiap icon maka akan muncul nama program.

2. JALANKAN SYSTEM CONFIGURATION

Tidak semua program menampilkan dirinya pada Notification Area pada waktu dijalankan selagi startup. Beberapa program berjalan secara background. Untuk melihatnya, jalankan System Configuration Utility, klik menu Start | Run dan ketikkan "msconfig". lalu tekan Enter.
Pada waktu layar System Configuration Utility muncul, klik tab Startup.
Daftar program yang diberi tanda centang merupakan program startup.

3. MATIKAN PROGRAM

Hilangkan tanda centang untuk mematikan program. Namun, bisa jadi tidak mudah untukmengartikan daftar karena banyak banyak program yang tidak ditulis berdasarkan nama sebenarnya.
Cara terbaik adalah dengan melihat informasi pada kolom Command, untuk mambaca informasi mengenai program. Lihat nama folder dan nama file untuk membantu mengetahui program apa itu dan apa yang dilakukannya,

4. MERESTART SISTEM

Setelah menghilankan tanda centang pada program yang tidak ingin dijalankan saat startup, sobat klik OK dan Windows menampilkan pesan yang mengatakan bahwa perubahan tidak diterapkan sampai sobat me-restart komputer. Sobat klik tombol Restart.

5. JALANKAN SERVICES

Klik menu Start | Run untuk menjalankan boks dialog Run, lalu ketikkan "services.msc" dan tekan Enter. Services Microsoft Management Module akan menampilkan semua service yang tersedia pada komputer sobat.
Untuk melihat aktifitas suatu service, klik nama service pada daftar dan klik tab Expanded yang ada di bagian bawah layar, sobat akan melihat deskripsi service pada bagian kiri.

6. MATIKAN SERVICE

Mungkin tidak mudah bagi sobat untuk mengidentifikasi service yang diperlukan oleh sistem komputer dan yang tidak, karena deskripsinya samar. Hati-hati ketika sobat memilih service yang ingin dimatikan. Untuk mematikan service klik-dobel service yang ada di daftar service. Kotak dialog Properties service akan terbuka. Dari daftar Stratup Type pilih Disable dan kemudian klik OK.

Tips

Setiap program mempunyai cara berbeda untuk berjalan saat startup, jadi tidak mungkin memberikan instruksi sama untuk semua program. Sobat bisa menghentikan sebagian besar program dari boks dialog Options atau Preferences di bawah menu Tools.

Jika sobat ragu, pilihan terbaik adalah membiarkannya program Startup tetap berjalan, karena bisa saja merupakan program yang dibutuhkan oleh PC.

Untuk melihat service yang sedang berjalan, lihat pada kolom Status yang bertanda Started.

Semoga bermanfaat buat sobat-sobat

Sumber PCMedia Extra

Daftar Isi Trik Blogger

2011-06-08T13:38:00.003+07:00

Cara Memasang MooTools Image Slider Pada Blog

2011-06-07T14:09:00.005+07:00

Salam persahabatan, pada tutorial blogger yang lalu trik blogger pernah share membuat image slider dengan jquery, dan membuat image slide dengan css3 kali ini trik blogger share tentang Cara Memasang MooTools Image Slider Pada Blog yang sangat menarik tampilannya.

Penasaran untuk membuatnya, mari ikuti langkah-langkah berikut ini :

Masuklah ke Blogger pilih Design >> Edit HTML

Kemudian cari ]]></b:skin>

Copy kode di bawah ini dan pastekan setelah kode ]]></b:skin>

Setelah selesai simpan template sobat

Kemudian pilih Design >> add a Gadget >> HTML/Java Script

Patekan kode dibawah ini ke dalam Gadget sobat

<div id="slider-stage">

<ul id="slider-list">

<li id="l1"><a href="#" title="#"><img alt="#" width="200" src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxEB37QtNcI/AAAAAAAAAX0/pCTR9-G_eB8/1.jpg" height="200"/></a></li>

<li id="l2"><a href="#" title="#"><img alt="#" width="200" src="http://3.bp.blogspot.com/_4HKUHirY_2U/SxEB7oOhYOI/AAAAAAAAAX8/fUr3ZlPpS38/2.jpg" height="200"/></a></li>

<li id="l3"><a href="#" title="#"><img alt="#" width="200" src="http://2.bp.blogspot.com/_4HKUHirY_2U/SxEB_sqE6wI/AAAAAAAAAYE/w4jo11g5hBc/3.jpg" height="200"/></a></li>

<li id="l4"><a href="#" title="#"><img alt="#" width="200" src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxECDRFc_NI/AAAAAAAAAYM/Wx0LKwVEKW8/4.jpeg" height="200"/></a></li>

<li id="l5"><a href="#" title="#"><img alt="#" width="200" src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxECJ16VZmI/AAAAAAAAAYU/42yvYTr73fY/5.jpg" height="200"/></a></li>

<li id="l6"><a href="#" title="#"><img alt="#" width="200" src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxECNkV__aI/AAAAAAAAAYc/gLKK6geuCJw/6.jpg" height="200"/></a></li>

<li id="l7"><a href="#" title="#"><img alt="#" width="200" src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxECRhJHnwI/AAAAAAAAAYk/JuLnodmNxsA/7.jpg" height="200"/></a></li>

<li id="l8"><a href="#" title="#"><img alt="#" width="200" src="http://3.bp.blogspot.com/_4HKUHirY_2U/SxECVOyja0I/AAAAAAAAAYs/nqfSWp_GRoE/8.png" height="200"/></a></li>

<li id="l9"><a href="#" title="#"><img alt="#" width="200" src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxECdbX_-MI/AAAAAAAAAY8/qwr28O1jL6k/9.jpg" height="200"/></a></li>

<li id="l10"><a href="#" title="#"><img alt="#" width="200" src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxECj5CtPmI/AAAAAAAAAZE/n97iYa8Ee_Q/10.jpg" height="200"/></a></li>

</ul>

</div>

<div id="slider-buttons">
<a id="previous" href="#">Previous</a> | <a id="next" href="#">Next</a>
</div>

Simpan gadget sobat dan lihat hasilnya

Catatan :
Download mootools.svn.js disini dan uploadlah file mootools.svn.js ke Hosting sobat

Selamat mencoba semoga berhasil dan bermanfaat buat sobat-sobat Blogger

Sumber : http://www.bloggertipandtrick.net/2009/11/mootools-featured-content-slider-to.html

JQuery MultiTab View Widget Untuk Blogger

2011-06-06T15:58:00.007+07:00

Salam persahabatan, kali ini trik blogger share tentang JQuery MultiTab View Widget Untuk Blogger, sobat dapat menambahkan atau menghapus tab lebih mudah dan tampilannya lebih menarik.

Untuk membuatnya mari ikuti langkah-langkah berikut ini

Masuk ke Blogger pilih tab Design >> Edit HTML

Kemudian cari kode </head>

Setelah itu copy kode script di bawah ini tepat sebelum kode </head>

Setelah selesai simpan template sobat

Kemudian pilih tab Design >> Add a Gadget >> HTML/JavScript

Pastekan kode di bawah pada gadget sobat

<div id="tabsb" class="clearfix tabs">

<ul class="clearfix">

<li><h4><a href="#tag111">Popular</a></h4></li>
<li><h4><a href="#tag222">Recent</a></h4></li>
<li><h4><a href="#tag333">Categories</a></h4></li>
<li><h4><a href="#tag444">Comments</a></h4></li>

</ul>

<div id="tag111">

ENTER-TAB1-CONTENT-HERE

</div>

<div id="tag222">

ENTER-TAB2-CONTENT-HERE

</div>

<div id="tag333">

ENTER-TAB3-CONTENT-HERE

</div>

<div id="tag444">

ENTER-TAB4-CONTENT-HERE

</div>

</div>
<center><b>Get this Widget from <a target="_blank" href="http://trik-blogger-andreas.blogspot.com/2011/06/jquery-multitab-view-widget-untuk.html">here!!!</a></b></center>

Catatan :
Sobat dapat mengganti tulisan (Popular,Recent,Categories,Comments) sesuai dengan selera sobat
Ganti ENTER-TAB-CONTENT-HERE dengan konten widget sobat.

Smpan gadget sobat dan lihat hasilnya.

Selamat mencoba semoga berhasil

Sumber http://www.bloggertipandtrick.net/2010/01/jquery-multitab-view-widget-blogger.html

Free Download Carbon 12 Blogger Template

2011-06-06T11:11:00.006+07:00

Free Download Carbon 12 Blogger Template

Template Features

* Elegant Dark Blogger Templates
* This template for most blogs blogs
* Dark color, Dark Background.
* Fixed width, Right sidebar.
* 2 column, 1 sidebar
* this is amazing template with a very elegant design, two nice navigation bar, search box ready, social icons ready..
* Fast loading template (tested using only three widgets shown in the demo)
* Two navigation bars
* Stylish social share icons at the bottom of post
* Stylish post header
* Post image thumbnail

Template Settings

1. Top Navigation Bar

<div class='topnav'>
            <ul>
            <li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Posts RSS'>Posts RSS</a></li>
        <li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS'>Comments RSS</a></li>
        <li><a href='#' title='Edit'>Edit</a></li>
            </ul>

<div id='searchbox'>
<form expr:action='data:blog.homepageUrl + "search/"' id='searchthis' method='get'>
<div class='content'>
<input class='textfield' name='q' size='24' type='text' value=''/>
<input class='button' type='submit' value=''/>
</div>
</form>
</div>

</div>

2. Bottom Navigation Bar

<div class='botnav'>
           <ul>
        <li><a href='#'>Category 1</a></li>
    <li><a href='#'>Category 2</a></li>
    <li><a href='#'>Category 3</a></li>
    <li><a href='#' title='Edit'>Edit</a></li>
           </ul>
       </div>

3. Post date

Go to Design > Page Elements > Click on the ‘edit‘ button inside the ‘Blog Posts‘ widget. There, set the time format to DD/MM/YY in numbers (10.10.10).

4. Post thumbnails

You have to add a class=”thumbnail” to the <img> tag in the post editor. The thumbnail image should have a width and height of 200px.

<img class="thumbnail" alt="" src="YOUR_THUMBNAIL_URL_HERE">

Download From Easy Share

Download From Ziddu

Demo

Buku Tamu

2011-06-04T14:06:00.001+07:00