Tombol Berlangganan Melebar Ketika Mouse Diatas

Saya akan menyebarkan sebuah widget untuk berlangganan dengan blog kita. Widget CSS3 ini seperti sebuah daftar link berwarna dan dapat memperlebarkan background ketika mouse berada diatasnya (hover). Widget ini tersedia untuk ditambahkan 4 social link termasuk: Facebook, Twitter, Google+, dan Pinterest serta 1 link berlangganan untuk RSS.

Cara menambahkan:

• Masuk ke Dasbor Blogger > Tata letak > Tambah gadget > Html/Javascript
• Kemudian pastekan kode dibawah ini dan klik Simpan

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqwFeVHsDs0Ce0ZSQtEnIrrfcSqbTZmsTuNILkeYvJ3UtYDt5zwyLrHEJf4ciEkQPOeTZaQaMz7zimtFTKRx-mkGinyYVxjYij-3V4Lj02qF05UmMTO3FaFDW2H6vBoqbdiZJbNbxhsAc/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
#ibsurl{text-align:left;}
#ibsurl a{color:transparent;}
#ibsurl a:hover{color:#808080;}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<div style="padding-left: 45px; font-family: arial, sans-serif; font-size: 9px;" id="ibsurl">
<a href="http://istanablogger.blogspot.com" target="_blank">Widget oleh Istana Blogger</a></div>

Teliti kode diatas dan ganti # menjadi url yang kamu pilih.
Kemungkinan widget ini tidak kompatibel dengan browser tertentu (tidak ter-update) seperti IE karena widget ini menggunakan efek CSS3.

Baca selengkapnya

Faktor Penyebab Loading Blog Menjadi Berat

Sudah jelas sobat tidak mau loading blog jadi lambat kan? Tapi apa yang terjadi, loading blog semakin lama semakin berat. Biasanya itu disebabkan oleh ketidak-sadaran sobat yang menambahkan sesuatu diblog. Apa saja penyebab blog menjadi berat? ini kuberitahu beberapa penyebabnya..

Pemakaian Latar Belakang Gambar

Semakin besar dan rumit gambar latar belakang blog semakin lama loadingnya.
Karena itu, gunakanlah latar belakang yang menggunakan kode warna saja.

Memakai Widget Secara Sembarangan

Widget yang biasanya dipromosikan blog lain untuk mempercantikkan blog seperti animasi itu hanya bikin kecepatan blog berkurang.
contoh widget yang saya maksud adalah:

1. Widget yang mempercantikkan kursor mouse
2. Widget yang berekstensi flash
3. Widget yang membuat seakan-akan ada hujan diblog
4. Widget yang membuat link berwarna pelangi atau muncul glitter
5. dan masih banyak lagi...

Memakai Flash dan Gambar secara besar-besaran

File berekstensi Flash dapat ditemukan melalui video, iklan, ataupun widget seperti flashvortex. nah, flash seperti inilah yang memperlambatkan blog kita.
Sedangkan untuk gambar. Jangan memasang gambar yang terlalu besar ke blog. Usahakan gambarmu se-simpel mungkin. Gambar yang berekstensi .gif juga memperlambatkan blog.

Memilih Template yang Kotor

Bukan berarti ada sampahnya. Template yang kotor adalah template yang memakai gambar, widget, sidebar yang banyak. Biasanya template yang kotor berkategori Grunge.
Untuk mempercepatkan loading. disarankan memakai template yang berkategori Fresh (simpel) atau Minimalist.

Iklan yang berlebihan

Beberapa iklan memakai file berekstensi flash ataupun gif. Bukan cuma memperlambatkan loading, juga merusak pemandangan blog.

Diatas ini hanyalah beberapa tips dariku ^^

Baca selengkapnya

Menambah Traffic Dengan Mengatur Gambar

Jangan menganggap sepele dengan gambar yang diupload ke blog. Selain untuk menghiasi ataupun mengimformasikan berita, gambar juga bisa menambahkan traffic bila kita bisa mengaturnya.

Sebelum itu, saya jelaskan dulu. Kamu pasti biasanya meng-upload gambar yang telah didownload dari Google atau gambar yang difotoin dengan kamera untuk diletakkan keblog, kan? Biasanya gambar-gambar itu akan mempunyai nama-nama yang aneh. Bila kita sama sekali tidak memerdulikan itu, itu tidak akan membantu kenaikan trafficmu.

Maka, kamu harus mengikuti 2 langkah di bawah ini sebelum mempublikasikan postmu..

1. Mengubah Nama Gambar Menjadi Kata Kunci

Ketika kita mengdownload gambar ataupun berfoto. Biasanya gambar itu memiliki nama yang aneh, seperti untitled.png, img6.png, sshot1.jpeg dll. Jadi, untuk mengubah nama menjadi keyword, misalnya saya ingin nge-post tentang blog. Saya akan membuat namanya blog.png atau tentang blog.png.

2. Menambahkan Alt Tag ke dalam gambar

Alt Tag adalah tulisan yang dimasukkan ke gambar agar gambar tersebut bisa dimengerti oleh mesin pencari. Alt Tag juga dapat menambahkan traffic pada blogmu.

Cara Menambahkan Alt Tag:

1. Bikin sebuah blog post dan upload gambar didalam posting tersebut.

2. Klik pada gambar sehingga muncul batang tulisan berwarna biru muda. Lalu klik pada "Properties".

3. Pada kotak yang muncul, masukkan deskripsi gambar sesingkat mungkin pada kotak tulisan dibawah "alt text". kemudian klik "ok".

Sekarang, gambarmu sudah memiliki alt tagnya. Usahakan agar 1 gambar memiliki Alt Tag maksimal 5 kata.

Baca selengkapnya

Cara Membuat Gambar Yang Berubah Ketika Pointer Mouse Berada Diatasnya

Berbeda dengan gambar .gif. Efek ini akan membuat gambar bisa berubah ketika mouse kita berada diatas gambar. Dan setelah mousemu menjauhi gambar itu. Maka itu akan kembali menjadi gambar semula. Tapi, untuk membuat efek ini kita harus mencari dulu 2 gambar yang sama ukurannya. Sebagaimana contoh dari efek ini kutaruhkan dibawah ini

Baca selengkapnya

Widget Berlangganan Simpel Di Sidebar

Sekarang, Para Blogger sudah sering membuat akun seperti twitter ataupun Feedburner agar pengunjung bisa berlangganan dengan blog mereka. Baru-baru ini saya menemukan widget yang cantik buatmu untuk ditambahkan di sidebar.

Berikut ini langkah-langkah menambahkannya:

Langkah 1: seperti biasa kita masuk ke Blogger, Lalu klik pada menu "Template"

(Back-up dulu templatemu)

Langkah 2: Klik pada Edit Html dan cari kode ]]></b:skin> (gunakan Ctrl+F)

Langkah 3: Dan ganti kode ]]></b:skin> menjadi kode css dibawah ini:

#subscribebox{list-style:none; margin:0px}
#subscribebox li{padding:10px 5px; position:relative; margin-top:0; margin-right:0; margin-bottom:5px; margin-left:0; height:64px; opacity:0.75; -moz-opacity:0.75}
#subscribebox li:hover{ background-color:#f4f4f4; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -khtml-border-radius:5px; opacity:1; -moz-opacity:1; -webkit-transition:opacity 1s ease-out}
#subscribebox li img{float:left; position:relative; padding:0px; margin:0px 10px 0px 0px}
#subscribebox li h4{margin:-6px 0 3px 83px; font-size:15px; line-height:26px; color:#8B3E2F; text-shadow:1px 1px 0px #fff; font-family:Helvetica,Arial,Verdana; font-weight:bold; clear:none}
#subscribebox li p{margin:0 0 0 0; font-family:Trebuchet MS,sans-serif; font-size:13px; letter-spacing:-0.02em; clear:none; text-indent:0px}
#subscribebox li a.link{background:none; border:none; top:0; left:0; right:0; bottom:0; width:100%; height:100%; position:absolute; z-index:50}
]]></b:skin>

Langkah 4: Lalu klik "Simpan Template" dan "tutup"

Langkah 5: Kemudian pergi ke Tata Letak, dan klik "tambah gadget"

Langkah 6: Didalam pilihan gadget yang muncul, Pilih kode "Html/Javascript" kemudian pastekan kode html dibawah ini:

<ul id="subscribebox">
<li>
<a class="link" href="http://feeds.feedburner.com/Nama Feed Kamu" target="_blank"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4XXvYcQL3Q2_QXdZqUo4slws65c5TNUW3uNi6adGwTqw_ByPTlAcYdcALYvw-QIyXxe9fkrcJGccS14ZTl5IRu7c_gP40JD4J9wyxGwKLsYb-9fGUVyM2SJUNhq8kxwx5vwmdbbSfu30/s1600/rss_48.png" alt="RSS Feeds" />
<h4>RSS Feed</h4>
<p>Berlangganan via RSS Feed</p>
</li>
<li>
<a class="link" href="http://feedburner.google.com/fb/a/mailverify?uri=Nama Feed Kamu&loc=en_US" target="_blank"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0RqzkActUNw27WJuzbxBklWPidnwGGfgsoixH4x-pAa1f790g9W1Tt5o4HdrST9e9s3oSNiJuuIUd7thyphenhyphenOgTFoMB4Udnc1Er5SQQmaZtPe2bGEzcjqxsO2waZAzDOO5pxVjX9-3lFfTs/s1600/mail_forward_48.png" alt="RSS E-Mail Delivery" />
<h4>Ikuti via Email</h4>
<p>Berlangganan dengan email untuk update posting ke Email kamu</p>
</li>
<li>
<a class="link" href="http:twitter.com/alamattwitter" target="_blank"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-a8YJIYxhMJ6owj-xbuJBVfg3jlBfnNN7ckVgdpQaonVsW77ZAnFJe0pbfqzAOg9jW_xU4PxYIMNA4sfGRoLmBB_80flrdiWTq46YFjYRcT_857D3ORh7ycfKHy3RztIX0SdFYr7P1FA/s1600/twitter_48.png" alt="Ikuti Kami via Twitter" />
<h4>Twitter</h4>
<p>ikut kami ditwitter dan berlangganan dengan update terbaru</p>
</li>
</ul>

Peringatan:
Untuk mengubah link, telitilah kode diatas dan gantikan dengan link yang kamu pilih,

• Warna Biru: nama dari feed di feedburner
• Warna Merah: alamat twitter

bila bermasalah silahkan dikomentari.

(kredit: Bloggermint)

Baca selengkapnya

Cara Mengetahui Dan Mengubah Link Postingan

Pernahkah kamu merasa link pada postingnya kepanjangan?, Atau kepengen mengubah link yang ada dipostingan? Blogger menyediakan fasilitas ini sekitar 2 bulan yang lalu, walaupun kamu tidak bisa mengubah tanggal yang ada di link. Tapi kamu bisa mengetahui link menuju postingmu.

Baca selengkapnya

Menghilangkan Kotak Komentar Pada Post Tertentu

Sobat pasti tahu kotak komentar yang ada disetiap posting dan halaman blog kita, itu biasanya ditampilkan dengan cara embed. Tapi ada beberapa page yang tidak mau ditampilkan kotak komentarnya seperti halaman Forum, Buku Tamu, dll. Untuk itu saya akan sebarkan cara menghilangkan kotak komentar berikut ini:

Baca selengkapnya

Menambahkan CSS Dengan Perancang Template

Cascading Style Sheet atau sering disebut CSS, sering digunakan kita untuk menghiasi beberapa tempat diblog. Kadang-kadang sobat pernah mencoba memasukkan CSS keblog dengan mencari kode [[></b:skin> dan tidak ketemu. Berikut ini cara memasukkan CSS keblog tanpa mencari kode [[></b:skin>

Baca selengkapnya