Home » Archives for 2010
Posted by
Kimberly on Wednesday, December 29, 2010
Posted by
Kimberly on Sunday, December 26, 2010
Setelah sekian lama saya mengistirahatkan blog ini, akhirnya saya kembali mencoba menulis lagi dengan informasi ringan tentang top searching google di tahun 2010. Ada yang menanjak naik drastis dan stabil, ada pula yang naik drastis dan menghilang dengan cepat. Hal ini sebagai upaya google untuk memberikan informasi buat pengguna internet yang sebagian besar juga pemilik website atau blog seperti kita agar bisa lebih selektif dalam memilih kata kunci.
Sebagai contoh, pencarian di bidang entertainment :
- justin bieber
- shakira
- eminem
- netflix
- youtube videos
- lady gaga
- kesha
- nicki minaj
- grooveshark
- transformers 3
atau, pencarian di bidang olahraga :
- mundial 2010
- olympics
- espn3
- fifa 11
- randy moss
- miami heat
- mourinho
- wayne rooney
- cricket live score
- david villa
dan masih banyak lagi daftar pencarian terbaik tahun 2010. Silahkan di cek sendiri, semoga informasi ringan ini bisa bermanfaat.
More about → Google Rilis Top Searching di Tahun 2010
Posted by
Kimberly on Sunday, December 5, 2010
Jampete blogger template adalah template blogger yang sengaja saya buat dengan desain sederhana. Sama halnya dengan template green hurdico dan green spitial, jampete sengaja saya buat dengan kolom terpisah antara postingan dan sidebar. Dan seperti biasa 3 kolom pada bagian footer menjadi alternatif untuk meletakkan widget-widget yang berlebihan juga saya tambahkan pada jampete.
Berbeda dari template-template sebelumnya, kali ini saya coba tambahkan slider menu pada bagian atas. Namun begitu slider menu tersebut tidak mutlak harus digunakan karena saya memberikan 2 pilihan yaitu jampete full version (dengan slider menu) dan jampete biasa (tanpa slider menu). Untuk itu, jika slider tersebut terasa berat maka bisa menggunakan jampete versi biasa.
Adapun fitur-fitur pada template ini antara lain :
2 kolom utama (post dan sidebar), menu 1 yang letaknya diatas header, banner dengan ukuran 468 x 60 pada bagian header, menu 2 diatas kolom postingan dan tentunya slider menu serta 3 kolom pada bagian footer.
Semoga tertarik dan tak lupa saya ucapkan banyak terima kasih buat sobat yang selama ini sudah menggunakan template-template buatan saya.
More about → Jampete Blogger Template
Posted by
Kimberly on Tuesday, November 23, 2010
Kali ini saya akan berikan tutorial cara pasang slidshow di blog. Saya mengambil kode yang paling sederhana dengan menu slidshow yang juga sangat sederhana. Slidshow sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan template gris-amarillo dan meletakkannya di dalam main post, silahkan cek disini.
Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih 540px. Buat sobat yang memiliki lebar kolom post lebih atau kurang dari 540px silahkan disesuaikan saja.
- Masuk ke Edit HTML.
- Jangan klik Expand Template Widget karena akan membuat sobat jadi pusing dengan kode yang panjang.
- Copas kode berikut diatas kode ]]></b:skin>
/* SLIDESHOW */
#slider-holder{width:540px;height:300px;overflow:hidden;margin-left:-15px;padding:0}
#s3slider{width:540px;height:300px;position:relative;overflow:hidden}
#s3sliderContent{width:540px;position:absolute;top:0;margin-left:0}
.s3sliderImage{float:left;position:relative;display:none}
.s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:70px;width:540px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
.s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
.s3sliderImage span a.featured-title:hover{color:#999}
.s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
.s3sliderImage span a:hover{color:#555}
- Kemudian copas kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//--><!]]></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
- Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan sobat copas kode berikut setelah kode <div id='main-wrapper'>
<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LETAK LINK DISINI 1'><img src='http://4.bp.blogspot.com/_-oSBOVNdtsg/TNQ5f7zGN2I/AAAAAAAAAI8/0EtNG4JD8gI/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='LETAK LINK DISINI 1'>JUDUL POST 1</a><br/>
Isi diskripsi tentang gambar diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 2'><img src='http://4.bp.blogspot.com/_-oSBOVNdtsg/TNQ5gKhdH1I/AAAAAAAAAJM/vQon_Uu0Ntg/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 2'>JUDUL POST 2</a><br/>
Isi diskripsi tentang gambar diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 3'><img src='http://4.bp.blogspot.com/__Ue-P3hoW1M/TM2c9Ye_X_I/AAAAAAAABNo/jpQh0WlWzvs/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 3'>JUDUL POST 3</a><br/>
Isi diskripsi tentang gambar diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 4'><img src='http://3.bp.blogspot.com/__Ue-P3hoW1M/TM2c9ujd4EI/AAAAAAAABNw/dE2qWy2YxMw/s1600/3.jpg' style='width: 540px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 4'>JUDUL POST 4</a><br/>
Isi diskripsi tentang gambar diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 5'><img src='http://3.bp.blogspot.com/__Ue-P3hoW1M/TM2c9waMz1I/AAAAAAAABN4/SwlhrFC60t8/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 5'>JUDUL POST 5</a><br/>
Isi diskripsi tentang gambar diatas
</span>
</li>
<li class='clear s3sliderImage'/>
</ul>
</div>
</div>
- Simpan Template
Keterangan :
- Perhatikan lebar 540px, silahkan sesuaikan saja dengan lebar post template sobat.
- Lihat tulisan yang berwarna ungu pada kode css-nya, saya gunakan margin-left:-15px karena menyesuaikan dengan demo template yang saya gunakan.
- Kode yang berwarna pink adalah kode url untuk gambar yang sudah sobat upload sebelumnya.
- dan kode dengan tulisan tebal pastinya bisa dimengerti dan jelas saya tulis disitu.
Cukup panjang, semoga berhasil ya !
More about → Cara Pasang Slidshow di Blog
Posted by
Kimberly on Sunday, November 21, 2010
Alakadarnya blogger template adalah sebuah template yang memang alakadarnya dan seadanya. Itulah sebabnya mengapa saya beri nama template ini dengan nama alakadarnya. Mengusung tema yang sama dengan sebelumnya, saya coba berikan template blogger sederhana namun tampak menarik dengan sedikit sentuhan garis lengkung pada setiap sisi. Saya berikan juga tambahan padding sebesar 20px pada garis tepi sehingga tampak seperti border.
Template ini memiliki 2 kolom, 1 kolom postingan dan 1 kolom sidebar yang terletak di sebelah kanan. Dan tambahan 3 kolom footer membuat alakadarnya memiliki banyak tempat untuk meletakan widget atau link. Selain itu saya tambahkan warna kontras merah pada menu horizontal, dan hover gelap selaras dengan bagian utama template. Kemudian tambahan banner ukuran 468 x 60 pada bagian header yang merupakan kebutuhan kebanyakan blogger untuk memasang banner mereka. Saya rasa itu saja penjelasan tentang Alakadarnya blogger template, semoga tertarik.
More about → Alakadarnya Blogger Template
Posted by
Kimberly on Saturday, November 13, 2010
Untuk meningkatkan pengunjung blog, update postingan ke situs-situs social bookmark merupakan hal yang mutlak dilakukan. Seperti update post di facebook, twitter juga tempat yang wajib kita isi dengan postingan-postingan blog kita. Untuk itu ada cara mudah melakukannya tanpa harus menulis manual di twitter, yaitu dengan menggunakan jasa feedburner.
Pertama-tama yang harus sobat lakukan adalah mendaftar di feedburner, kemudian isi dengan url atau feed blog sobat. Jika sudah, sekarang tinggal setting sedikit pada bagian social bookmark.
- Klik pada link yang sudah sobat daftarkan sebelumnya.
- Kemudian klik pada tab Publicize.
- Klik pada Socialize pada bagian samping.
- Masukkan account twitter sobat dengan mengklik Add a Twitter account.
- Login dengan account twitter sobat.
- Kemudian perhatikan tampilan format yang akan ditampilkan dalam postingan di twitter.
- Pada bagian Post content ganti dengan Title and Body untuk menampilkan judul dan isi post.
- Jika sudah selesai, maka klik Active pada bagian paling bawah.
Selamat mencoba !
More about → Update Post Ke Twitter Via FeedBurner
Posted by
Kimberly on Saturday, November 6, 2010
Kemarin saya mendapat email dari sobat johan yang menanyakan perihal membuat huruf yang besar pada awal postingan. Sebenarnya jika ingin tau bisa saja searching di google tentang hal ini karena memang sangat banyak bloggers yang menulis tutorial ini. Saya agak lupa apakah pernah menulis tutorial huruf besar pada awal postingan ini, jadi semalam saya bongkar-bongkar lagi semua judul post dan ternyata memang belum pernah saya tulis mengenai hal ini.
Sekedar info buat yang baru, huruf ini akan tampil besar dan berbeda sendiri dengan huruf lain yang ada di blog kita. Biasanya bisa kita lihat di koran atau majalah. Untuk membuatnya sangat mudah, karena hanya butuh satu kode css dan sedikit sentuhan pada saat membuat postingan.
- Setelah masuk blogger, silahkan klik Edit HTML.
- Tambahkan kode berikut sebelum kode ]]>< /b:skin>
.huruf {
float:left;
color:#000;
line-height:60px;
padding-right:5px;
font-family:trebuchet ms,verdana;
font-size:60px;
}
- Simpan Template.
Cara Posting
Tambahkan kode <span class="huruf"> sebelum huruf pertama dan </span> setelahnya. Contohnya seperti ini :
<span class="huruf">K</span>emarin saya mendapat email dari sobat johan yang menanyakan perihal membuat huruf yang besar pada awal postingan. Sebenarnya jika ingin tau bisa saja searching di google tentang hal ini karena memang sangat banyak bloggers yang menulis tutorial ini.
Sip, semoga bermanfaat !
More about → Cara Membuat Tulisan Besar Pada Awal Postingan
Posted by
Kimberly on Saturday, October 30, 2010
Google baru saja mengeluarkan web dengan tipe yang berbeda dari sebelumnya yaitu url shortener. Url shortener atau yang kita kenal dengan sebutan penyingkat url, biasa digunakan untuk merubah atau mempersingkat url yang panjang dan mungkin cukup ribet untuk di ingat. Masukkan url, kemudian klik �Shorten� dan url baru sudah siap digunakan.
Namanya adalah Goo.gl dan menurut Google memiliki beberapa keunggulan dibandingkan layanan url shortener lainnya yang sebenarnya sudah banyak beredar di internet. Berikut ini adalah kutipannya :
There are many shorteners out there with great features, so some people may wonder whether the world really needs yet another. As we said late last year, we built goo.gl with a focus on quality. With goo.gl, every time you shorten a URL, you know it will work, it will work fast, and it will keep working. You also know that when you click a goo.gl shortened URL, you�re protected against malware, phishing and spam using the same industry-leading technology we use in search and other products.
Setelah mencobanya saya rasa memang layanan yang satu ini berbeda dari layanan url shortener lainnya. Bagi sobat yang mempunyai url panjang dan cukup ribet sobat bisa mencoba layanan dari google ini.
More about → Google�s URL Shortener
Posted by
Kimberly on Thursday, October 28, 2010
Seperti yang kita ketahui bahwa kecepatan loading blog merupakan faktor yang sangat penting. Tidak hanya berpengaruh pada pengunjung blog, tetapi juga digunakan sebagai parameter pencarian peringkat oleh Google saat ini. Pada tulisan saya sebelumnya, hal ini sudah pernah saya bahas tentunya dengan tools yang lain. Dan saat ini saya melihat adanya tool online yang berkerja sangat baik untuk menganalisa kecepatan loading blog.
Sobat dapat menemukannya di WebPageTest.org. Hal yang pertama-tama sobat perlu lakukan adalah dengan memasukkan URL dari blog sobat, memilih lokasi geografis untuk melakukan tes, pilih beberapa pilihan dan kemudian klik "Submit". Dibutuhkan waktu sekitar 10-20 detik atau bahkan lebih untuk menyelesaikan tes ini, dan kemudian sobat akan melihat hasilnya seperti pada gambar berikut :
Disini sobat akan memperoleh waktu loading blog sobat pada kunjungan pertama dan kedua, hasilnya pun akan berbeda . Tool ini akan mempelihatkan grafik apa saja load yang gagal dan elemen apa yang paling banyak dalam blog sobat.
Terlihat pada saat loading pertama, blog saya terbaca sampai 8.455 detik dan 2,815 detik pada kunjungan ke-2, masih jauh dari standard. Ketika saya amati, bahwa load gambar-gambar pada blog ini yang banyak menghabiskan waktu sehingga membuat loading blog saya jadi lambat.
Bagaimana dengan blog sobat? silahkan di coba dan analisa kecepatan blog sobat dengan segera.
More about → Tool Lengkap Untuk Tes Kecepatan Loading Blog
Posted by
Kimberly on Sunday, October 24, 2010
Sekarang saya akan berbagi tentang ping service, yang saya artikan seperti sebuah mesin otomatis yang ketika kita klik maka mesin tersebut akan mengindeks artikel-artikel dari blog kita ke beberapa mesin pencari, seperti google, yahoo, dan berbagai situs-situs social bookmark lainnya. Jadi ping service adalah sebuah alat otomatis berbentuk web yang berfungsi menyebarkan artikel blog ke berbagai situs populer di seluruh dunia yang selalu dikunjungi orang.
Sebelum menggunakan ping service, saya sarankan sebaiknya lakukan ping setelah menulis postingan terbaru sehingga mesin pencari tahu bahwa sobat punya konten terbaru dan jangan terlalu sering menggunakan jasa ping service karena bisa saja dianggap spam yang mungkin bisa merugikan blog sobat. Seperti pengalaman blog ini yang pernah terkena google sandbox sehingga membuat blog ini menghilang dari mesin pencari.
Dibawah ini ada beberapa situs ping service yang selalu saya gunakan untuk mengupdate artikel-artikel blog saya, semoga bermanfaat.
- My Page Rank
Submit Gratis memungkinkan sobat mengirimkan URL blog sobat ke 20 search engine populer.
-
Pingler.com
Gunakan Pingler.com untuk Drive Traffic Blog dan Website sobat. Gunakan Pingler.com untuk Ping Blog.
-
Ping-o-Matic!
Ping-O-Matic adalah sebuah layanan untuk memperbarui mesin pencari yang berbeda untuk mengetahui bahwa blog Anda telah diperbarui.
-
Autopinger
Ping blog otomatis.
-
Feed Ping
Layanan Submission Blog Multiple - Website FEED PING dan Pelayanan Feed Blog Multiple.
-
PING.IN
Blog dan ping, Blog Search, Speed Test.
-
King Ping
Update ping untuk mendapatkan hasil terbaik dari semua search engine.
-
Pingoat
Ping lebih dari lima puluh layanan blog secara instan. Pingoat juga memiliki server XML-RPC. Ping layanan seperti Technorati, NewsGator, feedster.
-
Totalping
Ping blog otomatis ke lebih dari 20 layanan blog.
-
Ping4free
Harus mendaftar dahulu sebelum melakukan ping.
Silahkan pilih yang menurut sobat bagus dan semoga bermanfaat dan bisa menaikkan traffic blog sobat.
More about → Free Ping Service
Posted by
Kimberly on Wednesday, October 13, 2010
Lewat sudah hari-hari ketika pertama kali saya mengetahui dunia blog dan terobsesi dengan Google PageRank. Terutama dengan nomimal PageRank yang merupakan skala 0 hingga 10 yang dapat kita lihat pada berbagai toolbar di web. Padahal jika dicermati, PageRank hanya sebuah nomimal yang dibuat oleh Google untuk menilai banyaknya backlink pada sebuah web/blog. Hal ini tidak berdampak langsung pada bloggers yang hanya ngeblog karena hobi saja, tapi bagaimana dengan orang yang bekerja keras begadang setiap hari untuk mencari nafkah dari dunia blog? tentu PageRank nyata dan sangat ditunggu.
Yang membuat saya penasaran dan menjadi pertanyaan saya, kenapa Google sampai saat ini belum melakukan update PageRank? Saya melihat dan mengecek disemua blog atau web yang biasa saya kunjungi dan memang hasilnya sama, Google memang belum update PageRank. Google update PageRank terakhir 2 April 2010, dan yang seharusnya terjadi adalah akhir bulan juli atau awal agustus 2010 Google sudah update pagerank, tapi sejauh ini tidak ada yang terjadi.
Berpikir tentang masalah ini, satu pertanyaan muncul dalam pikiran saya : Bagaimana jika Google benar-benar menghapus PageRank? Artinya, bagaimana jika semua toolbar berhenti bekerja, dan tak seorang pun akan dapat melihat indikator berapa banyak backlink web atau blog? Apa dampak perubahan tersebut pada webmaster / blogging / industri SEO? Beberapa orang berpendapat jika Google menghapus nominal pageRank maka akan membunuh pasar jual beli link. Saya tidak berpikir begitu. Selama backlink memainkan peran dalam algoritma pencarian peringkat, masih akan ada orang-orang yang membeli mereka.
Tetapi tanpa PageRank, proses pembelian atau penjualan link akan sedikit berubah. Saya percaya bahwa layanan backlink analisis berbayar akan mendapatkan banyak klien lagi, karena hal ini akan menjadi cara terbaik untuk mengevaluasi otoritas link dari setiap web/blog. Saya berpikir lebih penting dari itu, bagaimanapun efek perubahan tersebut akan ada di pikiran pemilik web. Mungkin sebagian besar dari mereka akan menyadari yang lebih penting bukanlah lagi nominal PageRank, tapi lebih pada kualitas konten/isi blog.
Saya percaya bahwa jika PageRank dihapus maka bloggers dan pemilik web lainnya akan menjadi enggan atau malas untuk saling tukar link lagi, akibatnya hubungan antar sesama bloggers akan semakin renggang, hhmm semoga saja tidak terjadi.
Tapi apa yang sobat pikirkan? Apakah perubahan ini bersifat positif atau negatif? Apa aspek-aspek lain akan dipengaruhi?
More about → Google Belum Update Pagerank, Apa Yang Terjadi?
Posted by
Kimberly on Thursday, October 7, 2010
Setelah melakukan pengecekan backlink terhadap mybloggerthemes.com, ternyata template dore zot menjadi template yang paling banyak di gunakan sobat blogger. Sebelumnya di tahun lalu, smart gradient secara mengejutkan membuat saya tergeleng-geleng karena diminati dan digunakan lebih dari 50 blogger yang rata-rata berasal dari indonesia. Kembali ke dore zot, bicara tentang dore zot sebetulnya template yang mengusung tema personal dengan background abstract ini saya buat secara tidak sengaja alias dadakan.
Template dengan layout 3 kolom ini sebetulnya saya buat secara sederhana, dengan pemakaian border yang sedikit tebal dan penggunaan rounded corners membuat dore zot menjadi lebih kokoh. Sebetulnya nama dore zot ini saya ambil dari verifikasi kata pada saat saya ingin membuat blog baru dan jelas tidak mengandung arti apa-apa. Mungkin cuma ini yang bisa saya sampaikan, sekedar info saja sih sebenarnya karena memang belakangan saya sedang malas berpikir untuk menulis.
Buat yang sudah menggunakan dore zot saya ucapkan terima kasih, apalagi jika tidak merubah atau mengganti link kredit yang ada dibawahnya. Karena biar bagaimanapun, jadilah blogger sejati untuk menghargai hasil karya orang lain.
Terima kasih.
More about → Template Dore Zot Terlaris
Posted by
Kimberly on Friday, October 1, 2010
Kembali dengan turorial blogspot yang lagi-lagi tentang css, saya harap sobat tidak bosan dengan tulisan saya yang melulu mengenai css. Karena memang saat ini css lagi mengalami perkembangan pesat, oleh karenanya saya mencoba memberikan sedikit tips mengenai css3. Yang akan saya bahas disini adalah css image bubbles transitions, dan sekedar info bahwa tutorial ini hanya bisa diterapkan pada browser firefox versi 3.5+, opera 9.5+, safari dan chrome. Untuk demo bisa sobat lihat disini.
Sebelum memulai ada baiknya sobat backup template sobat terlebih dahulu, biasakan untuk melakukan hal ini jika ingin melakukan pengeditan template.
- Login ke Blogger.
- Klik Rancangan.
- Masuk ke Edit HTML.
- Copas kode css berikut sebelum kode ]]></b:skin>
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px;
height: 60px;
border:0;
margin-right: 12px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
- Cari kode yang mirip seperti ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nousisce (Header)' type='Header'/>
</b:section>
</div>
- Kemudian letakkan kode berikut setelah kode diatas :
<div class='bubblewrap'>
<ul>
<li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkRZT8XHI/AAAAAAAAEpU/boHguF0HbX0/stumbleupon_thumb%5B2%5D.png' title='Add to Stumbleupon'/></a></li>
<li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkLgpPqKI/AAAAAAAAEpE/MoiG31eV3gg/facebook_thumb%5B2%5D.png' title='Add to Facebook'/></a></li>
<li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkJCcKt5I/AAAAAAAAEo8/6LdMi30Ms0o/digg_thumb%5B2%5D.png' title='Add to Digg'/></a></li>
<li><a href='#'><img src='http://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb%5B2%5D.png' title='Add to Twitter'/></a></li>
<li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkOKs2gnI/AAAAAAAAEpM/atV8KDhqKcI/rss_thumb%5B2%5D.png' title='Add RSS Feed'/></a></li>
</ul>
</div>
- Simpan Template.
Untuk kode yang berwarna ungu adalah kode url untuk gambarnya, sobat bisa ganti dengan gambar social bookmark yang sobat punya.
Semoga bermanfaat, and happy nice weekend !
More about → Tutorial Image Bubbles Menggunakan CSS3
Posted by
Kimberly
Rasanya sudah lama saya tidak posting di blog ini, konsentrasi saya sedang terpecah mengurus blog-blog saya yang lain, termasuk mybloggerthemes.com yang semakin banyak permintaan dari sahabat yang ingin mempromosikan template mereka di mybloggerthemes.com. Kali ini lagi-lagi saya mencoba memberikan tutorial css buat sobat setia pengunjung blog ini, namanya css layer.
Css layer ini semacam tulisan atau gambar yang berbayang yang terdiri dari 2 komponen css sederhana. Untuk membuatnya sangat mudah, hanya menerapkan sedikit kode css maka tulisan atau gambar berbayang siap ditampilkan dan mempercantik blog sobat. Berikut beberapa tutorialnya :
? Layer 1 diatas layer 2 LAYER 1
LAYER 2
<div style="z-index:2; position:relative; font-size:40px">LAYER 1</div><div style="z-index:1; position:relative; color:blue; font-size:60px">LAYER 2</div>
? Layer 2 diatas layer 1
LAYER 1
LAYER 2
<div style="z-index:3; position:relative; font-size:40px">LAYER 1</div><div style="z-index:4; position:relative; color:blue; font-size:60px">LAYER 2</div>
? Layer Untuk Gambar Variasi 1
<div style="position:relative"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/TEsn4YFFiQI/AAAAAAAAEXg/TiYA_Obocvo/mybloggerthemes_thumb%5B7%5D.png" /></div><div style="position:relative; margin-top:-20px; margin-left:20px"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/TEsn4YFFiQI/AAAAAAAAEXg/TiYA_Obocvo/mybloggerthemes_thumb%5B7%5D.png" /></div>
? Layer Untuk Gambar Variasi 2
<div style="position:relative"><img src="http://3.bp.blogspot.com/_7Y9pl24WpQY/TGVZE5AgQmI/AAAAAAAAEeU/Ktj7gkUldGQ/S1600-R/newalltutorial.png" /></div><div style="position:relative; filter:alpha(opacity=20); margin-top:-10px; -moz-opacity:0.20; opacity:0.2; -khtml-opacity:0.2"><img src="http://3.bp.blogspot.com/_7Y9pl24WpQY/TGVZE5AgQmI/AAAAAAAAEeU/Ktj7gkUldGQ/S1600-R/newalltutorial.png" /></div>
Untuk tutorial css image yang lain akan saya bahas lain waktu, semoga bermanfaat.
More about → CSS Untuk Tulisan/Gambar Berbayang
Posted by
Kimberly on Tuesday, September 21, 2010
Saya tidak akan panjang lebar seperti biasanya, karena memang belakangan ini saya sedang malas menulis. Bicara masalah backlink, semua pasti tau manfaatnya, apalagi yang gratisan. Satu saja backlink akan sangat membantu dalam urusan perkembangan blog kita. Ada satu layanan google yang dapat sobat gunakan untuk mencari backlink gratis, namanya Google Profiles.
Disini sobat hanya login dengan account google sobat, kemudian sobat hanya perlu mengisi beberapa informasi yang mereka tanyakan, seperti tentang diri sobat, termasuk url blog sobat. Dan tambahkan gambar profile sobat, jreng dapat 1 backlink, lumayan ! Selama sobat menambahkan informasi diri, profil sobat akan ditampilkan dalam hasil pencarian Google, dan harus dihitung sebagai backlink normal karena Google tidak menggunakan atribut nofollow pada link website.
Layanan ini juga berguna karena memberikan kesempatan untuk menambahkan url lebih dari satu dan mungkin dapat membuat nama sobat pada halaman pertama hasil pencarian google. Jadi apa yang sobat tunggu, buruan isi !
More about → Backlink Gratis di Google Profiles
Posted by
Kimberly on Wednesday, September 15, 2010
Optimasi
typography blog sangat penting, untuk mempermudah pengunjung dalam membaca konten sebuah blog. Jika sobat masih ragu untuk mencobanya langsung di
template, sobat bisa menggunakan fasilitas dari Font Tester. Secara garis besar semua ada, mulai dari jenis huruf, besar huruf, spasi huruf atau ketebalan huruf. selain itu masih ada beberapa fasilitas lain yang bisa sobat dapat.
Untuk mencobanya, silahkan masuk ke FontTester.com, saran saya untuk font-family gunakan saja yang web safe fonts karena web safe fonts adalah font standard bawaan windows.
Silahkan dicoba dan semoga dengan adanya font tester ini, blog sobat bisa jadi lebih menarik dari sisi huruf tentunya.
More about → Coba Typography di FontTester.com
Posted by
Kimberly
Template Information
Name | Corst |
Author | http://www.blog-zone.info |
Designer | http://www.mybloggerthemes.com |
Properties | 2 Columns, Gray, White, Blue, Elegant, Fixed Width, Right Sidebar |
Descriptions | Green Hurdico is a simple blogger template with a combination of gradient border and soft colors, making Green Hurdico look elegant. Suitable for personal blog or web design. |
More about → Corst
Posted by
Kimberly on Thursday, September 9, 2010
Sebulan sudah kita menjalankan ibadah puasa, tak terasa waktu begitu singkat, bulan suci Ramadhan sudah meninggalkan kita lagi. Semoga kita semua termasuk orang-orang yang beruntung yang pahala puasanya diterima Allah SWT.
Di hari yang Fitrah ini, izinkanlah saya mengucapkan :
Selamat Idul Fitri 1 Syawal 1431 H
Minal Aidin Wal Faidzin Mohon Maaf Lahir dan Batin
Maafkan segala tutur kata atau prilaku saya selama ini yang tidak berkenan di hati sobat setia pengunjung blog ini. Semoga Allah SWT menerima semua amal ibadah dan mengampuni segala dosa-dosa kita semua, Amin.
More about → Selamat Idul Fitri 1431H
Posted by
Kimberly on Monday, September 6, 2010
Template Information
Name | Green Spitial |
Author | http://www.blog-zone.info |
Designer | http://www.mybloggerthemes.com |
Properties | 2 Columns, White, Green, Rounded Corner, Fixed Width, Right Sidebar, Gradient |
Descriptions | Green Spitial is a new styled Blogger template. Template is also very neat. Green spitial use navigation with a black shadow, making it more arise and looks elegant. Suitable for personal blog. |
More about → Green Spitial
Posted by
Kimberly on Wednesday, September 1, 2010
Tutorial pemasangan navigasi halaman ini sudah pernah saya bahas dulu, dengan cara meletakkan langsung seluruh kode di gadget. Namun masih saja ada yang kesulitan dengan panduan peletakkan navigasi halaman tersebut. Sekarang saya akan coba berikan sedikit tips yang berbeda dan tentunya dengan variasi bentuk yang lebih menarik. Saya tidak akan panjang lebar menjelaskan tentang pengertian navigasi halaman ini karena sudah pernah saya bahas sebelumnya.
Kode css dan javascript ini saya ambil dari blog mybloggerthemes dengan bentuk yang sama persis. Tapi jangan menelan mentah-mentah kode css yang ada karena sobat bisa kreasikan sesuai dengan warna background blog sobat. Jika kode script ini saya pasang langsung di template pasti akan membuat sobat pusing karena kode ini sangat panjang, oleh karenya saya simpan saja di google sites. Berikut cara pemasangannya.
- Setelah login di blogger, silahkan sobat klik Rancangan.
- Kemudian klik tab Edit HTML.
- Untuk radio button Expand Template Widget tidak usah di klik karena akan menambah pusing nantinya.
- Letakkan kode css berikut ini sebelum kode ]]></b:skin>
.showpageNum a {
color:#FFF;padding:4px 10px;
margin:0 2px;
text-decoration:none;
-webkit-border-radius:2px;-
moz-border-radius:2px;
background:#848484
}
.showpageOf {
color:#222;
margin:0 6px 0 0
}
.showpageNum a:hover {
background:#222;
color:#FFF
}
.showpagePoint {
color:#FFF;
text-shadow:0 1px 2px #333;
padding:4px 10px;
margin:0 2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
background:#222;
text-decoration:none
}
- Dan letakkan kode berikut sebelum </body>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=7;
var upPageWord ='◄';
var downPageWord ='►';
</script>
<script src='http://newalltutorial.googlecode.com/files/pagenav.js' type='text/javascript'/>
- Kemudian Simpan Template.
Keterangan :
- var postperpage=10; adalah jumlah postingan dalam satu halaman, sesuaikan dengan jumlah postingan sobat, jika jumlah postingannya 5 maka ganti angka tersebut dengan angka 5.
- var numshowpage=7; adalah jumlah tombol navigasi dalam satu halaman.
Semoga berhasil ya !
More about → Navigasi Halaman Menggunakan Javascript
Posted by
Kimberly on Saturday, August 28, 2010
Google sebagai raja search engine mengeluarkan daftar 1000 web terbaik. Penilaian ini berdasarkan jumlah traffic dan page view dari web tersebut. Dan sampai tulisan ini saya buat, facebook dan yahoo masih menempati urutan pertama dan kedua (tidak termasuk google). Mau tau siapa saja yang masuk dalam daftar 1000 web terbaik versi google, yuk mari �
Gambar dibawah ini adalah review dari list tersebut, untuk melihatnya langsung saja tuju ke halaman Daftar 1000 Web Terbaik.
Bagaimana, ada tidak punya sobat dalam 1000 daftar web terbaik versi google? hhmm..ga mungkin ya.
Semoga suatu saat kita semua bisa sukses seperti mereka, tidak perlu muluk-muluk untuk masuk dalam daftar 1000 web terbaik. Yang penting kita menulis yang terbaik dan mempunyai nilai fungsi buat pembacanya, dan jangan lupa tetap berusaha mencari peluang bisnis yang ada di dunia maya ini.
Semoga bisa menghibur !
More about → Top 1000 Website Versi Google
Posted by
Kimberly on Friday, August 27, 2010
Keyboard shortcuts membuat pekerjaan dalam urusan posting di blogger menjadi lebih mudah. Yang paling populer mungkin dalam urusan text dalam postingan, seperti membuat tulisan bold dengan CTRL+B atau untuk tulisan italic dengan CTRL+I. Sama dengan yang biasa kita gunakan pada saat menulis di office word. Dibawah ini ada beberapa list keyboard shortcuts, semoga bermanfaat.
Keyboard shortcuts ini telah di uji pada browser Internet Explorer 6+ dan tidak semua bisa berfungsi pada browser Firefox, Chrome dan Opera.
Shotcut | Fungsi | Semua Browser ? |
CTRL+B CTRL+I CTRL+U CTRL+L CTRL+Z CTRL+Y CTRL+SHIFT+A CTRL+SHIFT+P CTRL+D CTRL+P CTRL+S CTRL+G | Bold Text Italic Text Underline text Blockquote (hanya pada saat EDIT HTML) Undo last operation Redo last operation Insert Hyperlink Preview Post Save as Draft Publish Post Autosave Indic Transliteration | Ya Ya Ya Tidak Ya Ya Tidak Tidak Tidak Ya Ya Tidak |
Selamat menggunakan dan semoga dapat mempermudah sobat dalam membuat setiap artikel.
More about → Keyboard Shortcuts Untuk Posting Di Blogger
Posted by
Kimberly on Sunday, August 22, 2010
Template Information
Name | Green Hurdico |
Author | http://www.blog-zone.info |
Designer | http://www.mybloggerthemes.com |
Properties | 2 Columns, Gray, White, Green, Elegant, Fixed Width, Right Sidebar |
Descriptions | Green Hurdico is a simple blogger template with a combination of gradient border and soft colors, making Green Hurdico look elegant. Suitable for personal blog or web design. |
More about → Green Hurdico
Posted by
Kimberly on Saturday, August 14, 2010
Template Information
Name | Worika |
Author | http://www.blog-zone.info |
Designer | http://www.mybloggerthemes.com |
Properties | 2 Columns, Gray, White, Elegant, Fixed Width, Right Sidebar |
Descriptions | Worika is a new styled Blogger template. Template is also very neat. With a mix of white and gray, avieri looks very elegant. Suitable for personal blog or web design. |
More about → Worika