Membuat menu dropdown di blogspot - bagian 1

Membuat menu dropdown di blogspot yang beredar pada blog-blog tutorial selama ini saya amati ada dua type menu dropdown yang dibahas, yaitu menu dropdown di sidebar yang bisa digunakan untuk menu archive, blogrool dll, ada juga menu dropdown yang ditempatkan di bawah Header blog sebagai pengganti dari laman page. Menu dropdown yang dipasang di sidebar sangat bermanfaat khusunya bagi anda yang ingin menghemat tempat, sedangkan menu dropdown yang diletakan dibawah header berfungsi untuk fungsi membuat lebih banyak dan lebih professional karena tidak terlihat seperti pada blog umumnya tetapi sudah seperti website.

Pada kesempatan kali ini saya akan menerangkan cara membuat menu dropdown blogspot yang bisa anda manfaatkan untuk menghemat tempat. Untuk pembuatan dropdown menu sebagai pengganti page dibawah header akan diterangkan apa artikel selanjutnya (bagian2)

Langsung saja, caranya adalah:

1. Masuk ke Dashboard Blogger anda dengan Login terlebih dahulu. 
2. Klik Tata letak > Elemen Halaman > tambah Gadget 
3. Pilh HTML/Javascript dan copypaste script dibawah ini:

<select onchange="document.location.href=this.options[this.selectedIndex].value;"><option value="0" selected="selected">MENU</option><option value="http://jasapembuatanblog-murah.blogspot.com/2012/02/cara-memasang-mp3-di-blog.html">Cara memasang MP3 di blogspot </option><option value="http://jasapembuatanblog-murah.blogspot.com/2012/02/cara-mempercantik-blogspot.html"> cara mempercantik blogspot </option><option value="http://jasapembuatanblog-murah.blogspot.com/2012/01/cara-mengganti-kursor-blog.html"> Cara mengganti kursor blog</option><option value="http://jasapembuatanblog-murah.blogspot.com/2012/01/cara-membuat-efek-salju-di-blog.html"> Cara membuat efek salju di blog</option><option value="http://jasapembuatanblog-murah.blogspot.com/2011/12/jasa-pembuatan-blog-murah.html"> Jasa pembuatan blog murah </option></select>

Keterangan :

• Ganti Link warna biru dengan link sesuai dengan keinginan anda. 
• Ganti Teks yang berwarna merah dengan Teks yang anda inginkan. 
• Apabila menu diatas masih kurang, anda dapat menambah menu lainnya dengan menambahkan kode dibawah dan tempatkan diatas kode </select>.

<option value="URL link">Teks</option>

Setelah anda merubah link warna merah dan text warna biru, jangan lupa klik Save untuk menyimpan hasil pekerjaan anda.

Hasil dari cara membuat dropdown menu blogspot diatas maka anda akan mendapatkan hasilnya seperti ini:

MENUCara memasang MP3 di blogspot cara mempercantik blogspot Cara mengganti kursor blog Cara membuat efek salju di blog Jasa pembuatan blog murah

Bagaimana dengan blog anda? Apakah sudah mempunyai dropdown menu seperti sample/hasilnya di atas? Saya rasa sangat mudah mempraktekan cara diatas ^_^, akhir kata itulah cara membuat dropdown menu di blogspot dan selamat mencoba.

Read more »

Cara membuat efek daun berjatuhan pada blog

Satu lagi artikel cara membuat efek pada blog yaitu cara membuat efek daun berjatuhan di blogspot, cara ini sangat gampang sekali di praktekan dan mesih menggunakan javascript. Tapi perlu diingat sesuai dengan artikel saya tentang cara mempercantik blogspot, disarankan anda bijak menggunakan efek blogspot ini, jika blog anda sudah menggunakan efek lain seperti efek salju berjatuhan di blog, jikalau terasa berat loading blog anda, maka pilihlah salah satu efek saja.

Berikut cara membuat efek daun berjatuhan pada blogspot anda.

1. Pastikaln anda sudah login ke blogger anda

2. Pada halaman dashboard klik rancangan > Edit HTML

3. Jangan lupa centang Expand widget template.

4. Dengan menggunakan Ctrl+ F, atau tekan F3 cari kode</head>

5. Copy code dibawah dan letakan kode tersebut tepat diatas kode </head> tadi.

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

6. Simpan pekerjaan adan dengan menekan tombol SAVE

7. Lihat hasilnya.. bagus kan? ^_^

Demikianlah ke-7 langkah cara membuat efek daun berjatuhan pada blogspot anda, sangat mudah diikuti atau dipraktekan. Selamat mencoba dan Happy blogging.

Read more »

Cara mempercantik blogspot

Banyak cara mempercantik blogspot anda, template bawaan dari blogger kalau kita bisa mempercantiknya dengan tepat maka akan terlihat lebih professional dan pengunjungpun  akan betah berlama-lama singgah di blog anda. Trik mempercantik blog atau memperindah blog anda  dapat dimulai dengan pemberian Header yang tepat, penambahan beberapa menu navigasi, widget,  efek-efek blog, dan lain sebagainya.

Cara mempercantik  dan memperindah blogspot dengan pemberian header yang tepat. 
Pada umumnya sebuah blog atau website mempunya sebuah header, baik itu berupa teks atau sebuah gambar. Header ini sangat penting dalam sebuah blog atau website, kenapa? Karena sebuah header akan pertama kali dilihat oleh pengunjung ketika masuk ke blog anda sebuah header juga berfungsi sebagai penyampai informasi awal tentang isi keseluruhan blog anda. header yang cantik dan informative  maka pengunjung akan penasaran ingin segera mengetahui apa isi blog anda. Bagaimana cara memasang header pada blogspot , silahkan anda baca kembali artikel sebelumnya tentang  membuat header blog dengan gambar. 

 

Cara mempercantik dan memperindah blogspot dengan widget. 

Banyak sekali widget blogspot yang bisa anda pakai, baik widget bawaan dari blogger ataupun widget yang disediakan oleh pihak ketiga. Widget-widget yang biasa dipakai oleh para blogger seperti: new article, popular post, random post, guest book atau buku tamu, widget social bookmark dan network (facebook, twitter, lintas berita, dll), statistic, banner, dan lain-lain.  Artikel yang pernah saya tulis berkaitan dengan widget seperti: 4 Cara mempercantik blogspot dengan widget, cara memasang widget twitter blogspot, Cara membuat buku tamu di blogspot, dll.

 

Cara mempercantik memperindah blogspot dengan efek blog. 

Pastikan anda bijak dalam memilih efek untuk blog anda. Efek-efek blog yang berlebihan bisa membuat pengunjung malah tidak betah karena blog menjadi terlalu rame, juga terkadang efek blog bisa membuat blog anda menjadi berat dan lama untuk loading. Efek blog yang sering ditemui seperti: mengganti kursor menjadi icon tertentu atau di tambah dengan efek bintang bertaburan, efek salju, efek link berwarna- warni, efek text, dan lain-lain. Artikel yang pernah saya buat seputar efek blog seperti:  flash animasi dengan jam, efek salju pada blog, cara mengganti kursorblog.

 

Demikian sedikit pembahasan cara mempercantik blogspot yang bisa saya sampaikan, mudah-mudahan blog anda semakin cantik dan indah sehingga pengunjung blog anda semakin betah.

Read more »

Cara membuat breadcrumb pada blogspot

Sebelum masuk ke cara membuat breadcrumb pada blogspot baiknya anda mengetahui definisi dan fungsi dari Breadcrumb tersebut. Breadcrumb adalah sebuah navigasi menu horizontal pada sebuah blog yang biasanya berada pada posisi atas blog di bawah judul atau header blog dan berfungsi mempermudah bagi pengunjung untuk mengetahui sedang berada di halaman mana berada dan memudahkan ketika akan kembali ke menu sebelumnya.

Membuat breadcrumb pada sebuah blog sepertinya sesuatu yang wajib diadakan, kenapa? karena selain dari fungsi di atas, sama halnya seperti sitemap, breadcrumb juga sangat baik bagi SEO blog karena akan memperkaya kata kunci dalam postingan.

Bagi anda yang memakai template bawaan blogger breadcrumb ini tidak disediakan dan anda harus menginstalnya sendiri. Tetapi untuk template-template gratisan dari penyedia template yang banyak beredar terkadang fungsi breadcrumb ini sudah terpasang otomatis. 

Nah sekarang bagaimana cara membuat breadcrumb pada blogspot? Gampang sekali kok ^_^, caranya adalah:

1.      Log in ke blogger

2.      Masuk ke rancangan >  Edit HTML > centang “Expand Template Widget”

3.      Untuk amannya adan download dulu templatenya sebagai antisipasi apabila ada kesalahan.

4.      Dengan CTRL F cara kode ]]></b:skin>

5.      Copy kode dibawah ini dan paste tepat diatas kode  ]]></b:skin>

.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

6.   Kemudian copy kode dibawah ini dan paste tepat dibawah kode <div class='post hentry'> atau cari kode ini <b:includable id='post' var='post'> Paste kode dibawah tepat dibawahnya.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda disini &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

7.    Selesai. Simpan dam lihat hasilnya dengan mengklik salah satu postingan.

Bagaimana mudah bukan cara memasang breadcrumb pada blogspot? Selamat mencoba.

Read more »

Cara memasang widget twitter blogspot

Pernakah anda melihat burung tweeter terbang pada halaman blogger? menclok ke-sana-kemari menyesuaikan pergerakan halaman blog? tampak unik dan blog pun terlihat cantik. Bagaimana caranya ya? nah pada pembahasan kali ini saya akan menjelaskan cara memasang widget twitter blogspot baik yang sifatnya diam dengan menampilkan status twitter, maupun widget burung twitter yang terbang.

Fungsi widget ini sama halnya dengan widget facebook yang sudah saya tulis sebelumnya seperti "Cara Membuat Widget Melayang Facebook Like Box". widget ini juga berguna untuk:
1. Menampilkan Status twitter anda di blog
2. Mempromosikan blog anda melalui twitter
3. Sebagai cara mempercantik blog anda.

Singkat cerita :) cara memasang widget twitter adalah sebagai berikut:

1. Masuk ke situs twitter, atau cepatnya masuk ke link berikut: https://twitter.com/about/resources/widgets. 
2. Kemudian pilih "situs web saya".
3. Pilih "widget profile" > pada kolom nama pengguna, isikan ID twitter anda.
4. Anda bisa mengatur tampilan widget twitter anda melalui tab Preferensi, Tampilan dan ukuran.
5. Setelah dirasa cukup Klik tombol "selesai & ambil kode".
6. Ada dua pilihan yang diberikan yaitu mengambil atau copy kode scriptnya dan nantinya dipasang/paste sendiri pada gadget blog anda, atau dengan meng-klik tombol "add to blogger" yang secara otomatis nanti dituntun masuk ke gadget blog anda secara otomatis.
7. Dari langkah 6 di atas misalkan anda memilih copy code scrpitnya cara pasang nya adalah pada langkah 8 berikut:
8. Masuk dan log in ke akun blogspot anda.
9. Klik tombol rancangan > tata letak
10. Tambah gadget > HTML/JavaScript
11. Kemudian copy kode script pada langkah 6 tadi.
12. Simpan pekerjaan anda dan lihat hasilnya..

Sekarang bagaimana cara memasang widget burung twitter melayang di blog? caranya adalah:

1. Ikuti langkah 8 sampai 10 pada penjelasan di atas. 
2. Copy kode di bawah ini dan ikuti seperti langkah 11 dan 12 di atas.

Widget Twitter Terbang Di Blog burung twitter warna biru

        <script src="http://imemovaz.googlecode.com/files/tripleflap.js" type="text/javascript">
</script>
        <script type="text/javascript">
        var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2N7x6r33nB7rPdckogSUBcrdvob1eRXWGOOhn4GsXXYyK7UdkSwrJI5g-Onq6XLNANf__-9IIZ0kzug-wj21du0rejiMNGVUPBHaUoA0EQjabF1uIhd_wDrQ1Toi-QcslEJ9vo9bCRl0/"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
      
</script>

Widget Twitter Terbang Di Blog burung twitter warna merah

        <script src="http://imemovaz.googlecode.com/files/tripleflap.js" type="text/javascript">
</script>
        <script type="text/javascript">
        var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ7NuC9-A5EIPZzcf-uN36rhB_0-lG-7ASEdAs3FYadWyE20fYDbgVfZBMy_mi8z-7sbkEokmtQr8SHDx1pe7gJZ2TlALvu8g0YwM01hu_epqJA_ZuIhA1zkU8cI3S56pb3bc6gmpRiLU/"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
      
</script>

Keterangan: tulisan yang berwarna merah, silahkan ganti dan sesuaikan dengan alamat akun twitter dan alamat situs blog anda.

Demikian kupas tuntas cara memasang widget twitter blogspot - blogger, baik yang sifatnya diam (status twitter) atau dengan animasi burung twitter yang terbang di blog. Bagaimana dengan blog anda, apakah sudah dipasang twitternya?

Mau berlangganan artikel dari kami, silahkan daftar dengan mengisi alamat email anda pada kotak dibawah kemudian Klik DAFTAR


Mau tau cara membuat fungsi ini Klik disini

Read more »

8 situs background blogspot terbaik dan gratis untuk Web Designers

Terkadang kita merasa bosan dengan tampilan blogspot kita, sering kali kita ingin me-refresh blog kita agar lebih segar sehingga baik anda sendiri maupun pengunjung setia atau pengunjung baru semakin betah berlama-lama nongkrong di blog kita. Selain mengganti template blogspot pada artikel yang kemarin, salah satu cara mudah untuk menyegarkan blog anda adalah merubah tampilan background blogspot, dan caranya pun sangatlah mudah.

Secara default background dari blogger sudah lumayan banyak, anda tinggal pilih saja. Tapi tentu saja background yang didapat dunia maya luar sana amatlah banyak dan bervariasi sehingga kita bisa lebih dalam berkreasi.

Dibawah ini adalah 8 Daftar penyedia backgound blogspot terbaik dan gratis untuk mempercantik blog anda:

1. Din Pattern (www.dinpattern.com/)

2. Squidfingers (www.squidfingers.com/patterns/)

3. milleseicentopercento (http://www.noqta.it/dromoscopio/)

4. Tile Machine (www.tilemachine.com/)

5. Everyday Icons (www.playground.everydayicons.jp/)

6. Citrus Moon (www.citrusmoon.typepad.com/patterns/)

7. Alice Grafixx (www.alice-grafixx.com)

8. Koller Media (www.kollermedia.at/index.php/pattern4u/)

Bagaimana sangat unik-unik kan background nya? dan mengundang segera merubah tampilan background blog anda.
Setelah anda memilih background blogspot dari ke-8 situs diatas, sekarang saatnya menginstall ke blog anda. cara merubah background blogspot adalah sebagai berikut:

1. Log In ke Blogger anda
2. Klik Rancangan > Perancang template
3. Cari yang namanya "Latar belakang"
4. Pilih gambar latar dengan mengunggah dari komputer anda (gambar yang tadi anda pilih)
5. Simpan pekerjaannya dan lihat hasilnya.

Dengan cara merubah tampilan background blogspot, mudah-mudahan blog yang sudah mulai merasa bosan dilihat kembali menarik dan cantik.
Bagaimana dengan tampilan background blogspot anda????

Mau berlangganan artikel dari kami, silahkan daftar dengan mengisi alamat email anda pada kotak dibawah kemudian Klik DAFTAR


Mau tau cara membuat fungsi ini Klik disini

Read more »

Cara mengganti template blogspot

Hi!.. senang rasanya kembali menulis.. kali ini saya akan menjelaskan bagaimana cara mengganti template blogspot anda. caranya sangat mudah sekali, tapi pastikan anda terlebih dahulu menyiapkan template baru anda terlebih dahulu. silahkan download template baru di berbagai penyedia template blogspot.

anda tinggal tanya saja sama si mbah google, InsyaAllah nemu deh template barunya :).
Template baru anda nanti berbentuk zip file dan pastikan setelah di extract dalam bentuk XML template.
cara mengganti template blogspot anda sebagai berikut:

1. Log in ke Blogger Dashboard anda 
2. Klik Rancangan > Edit HTML 
3. Untuk Jaga-jaga terjadinya problem setelah install template baru anda nanti, amankan blog anda dengan download terlebih dahulu template anda yang lama, Klik "Download Template Lengkap". 
4. Setelah download centang "Expand Template Widget" 
5. Upload sebuah template dari sebuah file pada hard drive Anda, Klik "Telusuri" dan "Unggah". 
6. Ketika muncul konfirmasi widget, Klik "Keep Widget" 
7. Save dan lihat tampilan Template baru anda..

Bagaimana template blog anda? saatnya ganti template dengan yang baru..semoga artikel cara mengganti template blogspot ini bermanfaat untuk anda.

Mau berlangganan artikel dari kami, silahkan daftar dengan mengisi alamat email anda pada kotak dibawah kemudian Klik DAFTAR


Mau tau cara membuat fungsi ini Klik disini

Read more »

Cara membuat Energy Saving Mode pada blogspot

Trik blogger kali ini cukup menarik, dan mudah sekali untuk di implementasi kan yaitu: Cara membuat Energy Saving Mode pada blogspot, sesuai arti dari bahasa inggris nya, Energy saving mode berguna untuk menghemat penggunaan energy (listrik), pada jangka waktu tertentu ketika blog anda tidak ada aktivitas maka layar PC/ blog anda akan blank/gambar hitam polos. Bagaimana mau coba? Ikuti langkahnya berikut ini:

• Log in ke blogger anda 

• Pada halaman dashboard > rancangan >Edit HTML 
• Centang Expand Template Widget 
• Cari kode </head> tag, gunakan fasilitas pencarian dengan menekan tombol F3 
• Copy kode dibawah dan pasang sebelum kode </head>

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

• Simpan pekerjaan anda atau Save template 
• Kalau sudah tersimpan, kembali lagi kehalaman Dashboard anda 
• Setelah klik Rancangan > Design --&-- Page Elements. 
• Klik “tambah Gadget” pada salah satu sidebar. 
• Pilih ‘HTML/Javascript” dan tambahkan kode dibawah:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

Keterangan:
Ganti yang ditandai biru yaitu ?time=120 dengan waktu yang sesuai dengan keinginan anda, 120 berarti setelah 120 seconds atau 2 menit, tanpa aktivitas di blog anda, Energy saving mode akan bekerja.
Menarik bukan? Bagaimana dengan blog anda? Sudah terpasang Energy Saving Mode? - Cara membuat Energy Saving Mode pada blogspot-close-

Mau berlangganan artikel dari kami, silahkan daftar dengan mengisi alamat email anda pada kotak dibawah kemudian Klik DAFTAR


Mau tau cara membuat fungsi ini Klik disini

Read more »

cara mengganti kursor blog

Agar blog terlihat lebih bervariasi, terkadang para blogger mengganti tampilan kursor blog nya ke kursor sesuai yang disenanginya. secara default kursor blog adalah berbentuk panah putih, cara mengganti kursor blog bermacam-macam bisa dengan ikon gambar atau menambahkan efek seperti bintang berjatuhan dll. Apabila anda tidak punya gambar pengganti untuk kursor anda, anda bisa memanfaatkan http://www.totallyfreecursors.com, karena pada situs tersebut terdapat ratusan/ribuan kursor yang unik.

Untuk menggantinya, berikut caranya:

• Log in ke Blogger anda 
• Klik Rancangan > Edit HTML 
• Cari kode </head> 
• Letakan kode CSS dibawah ini diatas </head>

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>

• Jangan lupa simpan pekerjaan anda

Catatan:
Teks yang berwarna kode diatas adalah alamat kursor baru, anda bisa menggantinya dengan alamat kursor yang akan anda gunakan.
Demikan cara menganti kursor pada blog, semoga berhasil, Happy blogging

Mau berlangganan artikel dari kami, silahkan daftar dengan mengisi alamat email anda pada kotak dibawah kemudian Klik DAFTAR


Mau tau cara membuat fungsi ini Klik disini

Read more »

Membuat header blog dengan gambar

Membuat header blog dengan gambar- Header pada sebuah situs baik itu berjenis blog atau website di ibaratkan wajah pada manusia. ketika seorang pengunjung yang masuk ke sebuah blog maka yang pertama kali dilihat adalah Header. Oleh karena itu elemen ini merupakan bagian yang cukup penting dari keseluruhan blog. Apabila tampilan header blog anda kurang menarik atau malah terkesan acak-acakan, maka kemungkinan kecil pengunjung akan betah/simpati terhadap blog anda. Tampilan Header para blogger di blogspot bermacam-macam, ada yang menggunakan header...

apa adanya (default), ada juga dengan memakai gambar yang sudah didesign sebelumnya. Itu tergantung selera anda.

Nah, kali ini saya akan membahas bagaimana cara membuat header blog dengan gambar, caranya adalah:

1. Log in ke blogger > Rancangan> elemen laman
2. Pada elemen Header klik link EDIT 
3. Pada jendela konfigurasi Header terdapat row isian untuk: Judul blog, Deskripsi blog, Gambar, dan penempatan gambar 
4. Isi Judul blog dan deskripsi blog, jangan lupa judul dan deskripsi anda ter muat keyword utama dari blog anda. 
5. Pada bagian gambar pilih Browse mengupload gambar Header dari komputer anda 
6. Untuk menghasilkan gambar yang sesuai dengan tampilan template blogger anda aktifkan tanda periksa Susut kan agar sesuai 
7. Atur lah posisi gambar dengan memilih posisi penempatan sesuai dengan keinginan anda, ada tiga opsi penempatan, yaitu Di balik judul dan keterangan, selain judul dan keterangan, dan Tempatkan keterangan setelah gambar. Karena kali ini kita akan menjadikan gambar diletakkan di depan judul blog dan deskripsi dan tertutup oleh gambar,  maka aktifkan pilihan kepada “selain judul dan keterangan”. 
8. Selain mengambil gambar pada komputer, anda juga bisa mengambil gambar secara link, dan anda bisa memanfaatkan media hosting save dan share salah satunya adalah: http://imageshack.us/

Demikian cara membuat header blog dengan gambar, semoga dengan gambar yang sudah anda persiapkan sebelumnya menjadikan blog anda tambah menarik dan bikin nyaman bagi pengunjung anda.

Read more »

Cara membuat efek salju di blog

Dari sekian banyak efek-efek pada blog, efek salju di blog merupakan salah satu yang paling diminati para blogger, selain loading yang cepat juga efeknya menyebar keseluruh ruang blog, tampilan blog pun lebih menarik dari sebelumnya. Tapi karena warna salju adalah putih mungkin tidak cocok bagi anda yang mempunyai background blog yang berwarna putih, tentu saja efek salju tidak akan kelihatan dengan sempurna.

Paling cocok bagi anda yang mempunyai background yang gelap, efek salju pun terasa maksimal. Bagaimana bagaimana dengan weblog anda? Mau efek ini?

Berikut ini adalah cara membuat efek hujan salju di blog:

• Login ke dashboard blogger anda. 
• Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript). 
• Copy script efek hujan salju dibawah ini  dan paste pada gadget

    <script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>

• Jangan lupa save ya…

Selain efek salju masih banyak efek-efek lainnya yang bisa anda terapkan dalam blog salah satunya adalah efek daun berjatuhan, efek bintang bertaburan pada kursor dengan pilihan warna yang berbeda, InsyaAllah dalam waktu dekat saya akan buat tutorialnya.

Demikian cara membuat efek salju di blog, semoga berhasil.

Read more »

cara membuat share box di blogspot- blogger blog anda

Alhamdulillah, tulisan ini adalah tulisan pertama saya di awal tahun 2012, menyenagkan sekali rasanya ^_^ , Oke, kembali kebahasan, pada kali ini saya ingin menunjukan kepada anda cara membuat share box untuk blogspot- blogger blog anda, didalamnya terdapar fungsi-fungsi:

1. official tweet button dengan counter 
2. oficial Google Buzz dengan counter 
3. official Stumbleupon button dengan counter 
4. Blog This! 
5. Email this! 
6. Print this! 
7. Comment count link 
8. dan terakhir Facebook like button.

bagaimana cukup complete bukan?semuanya dapat diramu jadi satu dan bisa ditambahkan dengan cepat pada blog anda.
tampilannya kira-kira seperti ini nih:

cara membuat share box untuk blogspot- blogger blog adalah sebagai berikut:

• Log in pada blogger anda 
• pilih Rancangan --> Edit HTML 
• Klik "Expand Widget Templates" 
• Cari kode berikut <div class='post-header-line-1'/>
• Copy dan pasang kode share box tepat dibawah kode <div class='post-header-line-1'/>

Perhatian: jika anda tidah dapat menemukan kode <div class='post-header-line-1'/> , anda juga bisa sebelum kode <data:post.body/>
Kode share boxnya adalah:

<b:if cond='data:blog.pageType == "item"'>


<style type='text/css'>
.multisharebox {
 background: none repeat scroll 0 0 #EFEFEF;
 float: right;
 margin: 5px 0px 3px 10px;
 padding: 0 5px 0;
 text-shadow: 0 1px 0 #FFFFFF;
 width: 260px;
 border:4px solid #d8dfea;
}
.fb-like-boxtop {
 background: none repeat scroll 0 0 #EDEFF4;
 border: 1px solid #D8DFEA;
 color: #000000;
 float: right;
 font-size: 11px;
 margin: 0 0;
 padding: 5px 10px;
 text-align: left;
 width: 230px;
}
.fb-like-boxtop a {
 color: #000000;
 text-decoration:none;
}
.fb-like-boxtop a:hover {
 color: #000000;
 text-decoration:underline;
}
.fb-like-box {
 background: none repeat scroll 0 0 #EDEFF4;
 border: 1px solid #D8DFEA;
 color: #000000;
 float: right;
 font-size: 11px;
 height: 60px;
 margin: 5px 0;
 overflow: hidden;
 padding: 5px 10px;
 text-align: left;
 width: 230px;
}
</style>


<!-- Perfect Share Box : Created by www.bloggertipandtrick.net  -->
<div class='multisharebox'>
<table><tr>
<td><table><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<b:if cond='data:post.isFirstPost'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</b:if></td>
<td><script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.url'/></td>
<td><a class='google-buzz-button' data-button-style='normal-count' data-locale='en_IN' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' rel='nofollow' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td>
<td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
</tr></table></td>
</tr><tr>
<td><div class='fb-like-boxtop'><a expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>BlogThis!</a> | <a expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>Email This!</a> | <a href='javascript:window.print();'>Print This!</a> | <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> comments</b:if></a></b:if></div></td>
</tr><tr>
<td><div class='fb-like-box'>
Do you like this post?
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=230&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/>
</div></td>
</tr></table>
</div>
<!-- Perfect Share Box : Created by www.bloggertipandtrick.net  -->


</b:if>

Setelah terpasang, jangan lupa save pekerjaan anda dan lihat hasilnya.
Demikian cara membuat share box untuk blogspot- blogger blog anda, awali hari-hari diawal tahun 2012 ini denga hal yang bermanfaat, Happy Blogging..

Read more »

Cara Menghilangkan Navbar Blogspot

Sebelum kita mengulas bagaimana cara menghilangkan navbar blogspot, alangkah baiknya kita tau apa itu Navbar blogspot? bagi yang Newbie mungkin sebagian masih tidak tau yang namanya Navbar ini. Oke langsung saja, Navbar Blogspot adalah suatu tab atau frame yang berada di bagian atas sebuah blog, ukurannya sih kecil dan navbar ini berfungsi untuk memudahkan para blogger untuk log in ke blogger, menginformasikan blog yang dikunjungi ke pihak blogger apabila blog tersebut mengandung yang tidak diizinkan oleh pihak blogger

seperti: melangggar TOS blogger, mengandung unsur SARA dan Fornografi. Sebenarnya sih menghilangkan Navbar ini bisa jadi melanggar dari TOS blogger sendiri, jadi pikir-pikir dulu yah..^_^ sebelum menghilangkannya. Baca TOS nya lagi yah..
 
Gimana sudah baca TOS nya blogger? mau keukeuh (apa itu keukeuh ya..?) menghilangkan Navbar blogspot, ya sudah.. caranya gampang kok, anda 2 (dua) cara untuk menghilangkannya yaitu: menambahkan pada style sheet CSS nya dan dibawah kode <body>, jelasnya:

kode pada style sheet CSS:

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

kode dibawah kode <body>

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Lebih jelasnya lagi:

• Sign in pada blogger anda 
• Rancangan --> edit HTML 
• Download template dulu untuk berjaga-jaga jikalau ada masalah saat edit kode 
• centang "Expand Template Widget" 
• cari kode </style> dan letakan kode dibawah ini tepat diatasnya: (template klasik)

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

• Atau cari kode ]]></b:skin>  dan  letakan kode dibawah ini tepat diatasnya: (template baru)

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

• Jangan lupa simpan pekerjaan anda.

bagaimana mudah bukan cara menghilangkan Navbar blogspot ini, kini tampilan blog anda kelihatan lebih cantik. selamat mencoba. happy blogging.

Read more »

4 Cara mempercantik blogspot dengan widget

Mempunyai blog yang menarik tentu akan memberikan rasa nyaman bagi pengunjung, dengan menempatkan fitur-fitur khususnya widget yang pas maka akan memberikan lebih pada blogspot anda. Dalam artikel “4 Cara mempercantik blogspot dengan widget” akan saya paparkan 4 kategori widget yang biasa digunakan para blogger dalam mempercantik blognya. 

Widget yang dijelaskan sangat mudah sekali dalam pemasangannya pada blog sobat khususnya yang newbie. (memang artikel ini khusus yang newbie saja..he..)

Mempercantik blogspot dengan Widget Interaksi
Sesuai fungsi dari blog yaitu sarana untuk publikasi catatan harian atau pengalaman, dll, tentu akan sangat menarik apabila publikasi informasi tersebut juga mendukung aspek interaksi antara anda sebagai pemilik blog dengan pengunjung.  Anda bisa mengunjungi situs-situs berikut ini untuk mendapatkannya:
a.    Komentar Shotmix, alamat situs: http://www.shoutmix.com
b.    Komentar Cbox, alamat situs: http://cbox.ws/
 

Memparcantik blogspot dengan Widget Statistik
Widget ini berfungsi untuk mengetahui seberapa banyak pengunjung pada blog anda dan mengetahui peringkat blogspot sobat didunia maya, widgetnya bisa anda dapatkan di:
a.    Statistik Statcounter, alamat situs: http://www.statcounter.com
b.    Alexsa counter, alamat situs: http://www.alexa.com
c.    Google page rank, alamat situs: http://www.prchecker.info/check_page_rank.php
 

Mempercantik blogspot dengan Widget Multi media
Tampilan photo atau gambar tentu akan membuat blog anda menjadi menarik dan interaktif, dengan widget ini anda bisa memamerkan produk-produk anda, widget nya bisa anda dapatkan di:
a.    Menambahkan Flickr Badge, alamat situs:  http://flickr.com/badge.gne
b.    Menggunakan Picknik badge, alamat situs: http://www.picnik.com 

mempercantik blogspot Widget Social Network
Widget ini berfungsi untuk menghubungkan antara blog dengan situs atau jejaring social lain yang anda miliki, seperti Facebook, twiiter, Plurk, Multiply, dll
a.    Memanfaatkan SucioFluid, alamat situs: http://www.sociofluid.com/blogger-widget.php
b.    Facebook Badge, alamat situs: http://www.facebook.com/facebook-widgets/pagebadges.php
c.    Facebook Like, alamat situs: http://developers.facebook.com/docs/reference/plugins/like-box/

Demikian 4 widget cara mempercantik blogspot anda, silahkan berekspresi…

Read more »