Wednesday, July 27, 2011

Membuat Widget Follower's Tersembunyi Untuk Blogger Anda

memasukkan widget follow Baik , kali ini saya akan kembali menuliskan sebuah artikel tentang blogger tutorial dan menjawab pertanyaan sahabat blogger saya yang bernama Denny . Widget kali ini memang menarik bagi saya yaitu sebuah kotak follower's tersembunyi dan memiliki sebuah tombol follow dibagian kiri atas blog .

Untuk demonya anda bisa melihat di gambar dibawah ini , jika anda berminat kita langsung saja.
google blogger seo widget
Sebelum anda bisa membuat widget ini maka langkah pertama adalah mengambil script follow di google conect atau bs klik DISINI

Note : Jika anda belum masuk pada akun google anda maka silakan masuk terlebih dahulu sebelum lanjut ke bagian friend conect .

Pada bagian menu friend conect pertama anda akan melihat sebuah gambar dengan tulisan Tambahkan gadget anggota , klik itu untuk mendapatkan kode follower's nya .

memasukkan widget follow di blogger

Jika sudah menekan tambahkan gadget , maka anda akan dibawa pada menu berikutnya . Pada menu berikut nya anda akan disuruh untuk mengedit widgte follow anda , Anda bisa anda edit widget follownya sesuai keinginan anda sendiri.

Setelah anda selesai mengedit , klik buat kode pada menu nomor 3 yang letaknya dibagian bawah lalu copy kode tersebut.

mengambil kode widget follow untuk blogger

Note : Paste kode widget follownya di Notepad.

1. Pertama masuk ke akun blogger anda lalu pergi bagian design> edit html , lalu cari kode </head>

memasukkan kode widget kedalam blogger

Note : gunakan ctrl + F atau F3 untuk memudahkan pencarian.

2. Setelah anda sudah mendapatkan kode </head> , maka copy paste kode dibawah ini dan letakkan kode tersebut setelah kode </head>

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; top:60px;left:1px;' title='Follow This Blog'><img src='http://i52.tinypic.com/2vn1hxh.png'/></a>

3. Sesudah memasukkan kode diatas lalu tekan save template.

Nah langkah diatas adalah memasukkan tombol follownya , untuk mengaktifkan tombol tersebut , anda harus memasukkan kode berikut ini ke dalam gadget baru > html/javascript.


<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #000;
background:#fff;
-moz-border-radius-topleft:20px; -moz-border-radius-bottomright:20px;
box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493;
padding:10px;
}
.flcontent:hover{
border:2px solid #fff;
background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">
<--- Kode friend conect disini --->>>
<div style="text-align: right;">
<a href="javascript:showHideFL()">
<img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Click here to Close" /></a></div>
<font size="2"><a href="http://vianjb.blogspot.com"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">Widget By Vicky</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Note : Ganti Tulisan yang saya block dengan warna merah dengan kode friend conect yang anda sudah simpan di notepad tadi.

4. lalu tekan save.

Nah kini selesai lah sudah pada artikel ini dan kini anda juga sudah mempunyai widget follow tersembunyi di blog anda. Mudah-mudahan widget kali ini bisa membantu untuk membuat blog anda semakin bertambah bagus.

Tuesday, July 26, 2011

Mengapa Google Menjadi Search Engine Terfavorit

seo untuk google template dan adsense serta menggunakan css dan jquery Dari sekian banyak search engine di internet , Google merupakan salah satu pilihan favorit para pengguna Internet, namun meskipun sebetulnya Google bukanlah search engine pertama yang ada di internet . Bahkan banyak search engine yang muncul lebih awal , namun kini malah bertumbangan.

 Setidaknya ada 5 hal yang sering sekali disebut-sebut orang sebagai alasan mengapa lebih memilih Google daripada memilih search engine lain :

1. Google dianggap mempunyai kemampuan menyodorkan hasil pencarian yang relevan.

2. Google menyediakan arsip salinan dokumen web yang memungkin kan para pencari informasi tetap bisa mendapatkan informasi walaupun dokumen original sudah dihapus oleh pemilik atau server asal penyimpan dokumen itu sedang tidak bisa diakses.

3. Google dapat mencari teks di file yang berformat .pdf maupun .doc, bukan hanya dokumen berformat html.

4. Saat ini Google telah mengindeks lebih dari 5 milyar dokumen , yang berarti bahwa peluang untuk mendapatkan informasi lebih besar.

5. Google dianggap memberikan pendekatan yang cerdas dalam mencari informasi di internet.

Meskipun begitu , belum semua orang dapat menguasai benar kemampuan google . Tidak sedikit pengguna Google hanya asal-asalan sehingga membuat beberapa kemampuan google terabaikan . Akibatnya , upaya pencarian informasi di internet dengan google menjadi tidak efektif . Bahkan beberapa orang ada yang mengeluhkan kemampuan semua search engine di internet termasuk google lebih sering menyodorkan informasi yang kurang tepat.

Saturday, July 23, 2011

Tips Mencari Informasi Yang Tepat Di Search Engine

tips agar mendapatkan informasi tepat di google Kesalahan yang mungkin banyak orang lakukan dalam mencari informasi di search engine manapun adalah sikap asal-asalan dalam memilih sebuah kata kuci . Beberapa orang bahkan ada mugkin nekad memasukkan 1 kata kunci dalam mencari informasi yang dibutuhkan adapun yang lain bahkan tidak merumuskan lebih lanjut informasi yang ingin di cari.

 Nah pada artikel kali ini saya akan sedikit memberikan sebuah pengetahuan yang mungkin bisa anda gunakan dalam mencari infomarsi tertentu yang lebih tepat seperti yang anda butuhkan.

Dalam mencari informasi yang tepat ada beberapa hal yang mungkin bisa lakukan , berikut beberapa hal
tersebut :

1. Pilih Kata / Istilah Yang Paling Penting.

Coba pilihlah kata / isitilah utama yang ingin di pilih tadi . Pilihlah kata yang penting dalam informasi yang ingin kita cari tersebut.

2. Dahulukan Kata Benda Dan Obyek.

Jika dalam Informasi yang ingin anda cari terdapat sebuah kata dan benda , maka dahulukan lah kata benda dan obyek tersebut menjadi kata kunci .

3. Pertimbangkan lah isitilah lain.

Pada saat mencari informasi maka ada baiknya anda bisa mencermati lagi kata kunci yang sudah kita pilih tadi, dan pertimbangkanlah kata atau isitilah lain yang mempunyai arti sama. Dan itu berarti kita sebaiknya mempertimbangkan padanan kata dan cara penulisan lain . Misalnya , jika kita menyertakan kata " Partisipasi " sebagai kata kunci , maka pertimbangkan untuk menyertakan frase " Peran Serta " sebagai kata kunci . Untuk contoh lainnya , pertimbangkanlah juga jika informasi yang kita cari terdapat sebuah kata kunci " Sukarno " maka pertimbangkan menggunakan kata " Soekarno " menjadi kata kunci dari informasi yang ingin anda cari.

4. Menentukan hubungan antar istilah.

Dari perkumpulan kata dan istilah yang menjadi kata kunci itu. tentukanlah hubungannya. Misalnya , hubungan antar " Partisipasi " dan frase " Peran Serta " adalah bersifat alternatif. Begitu juga halnya dengan hubungan kata  " Soekarno " dengan kata " Sukarno ". Sementara hubungan antara kata " Partisipasi " dengan " Sukarno " lebih bersifat menyertai ( including ) . Penentuan hubungan antara kata atau istilah ini sangat lah bermanfaat ketika kita mencari sebuah informasi yang dapat menyajikan hasil pencarian yang lebih baik.

Nah , mungkin artikel kali ini cukup sekian , mudah-mudahan bagi anda
( Pencari Informasi ) bisa dapat menemukan sebuah informasi yang tepat dan akurat .

Friday, July 22, 2011

6 Warna Menu Blogger Bergaya Lavalamp

memasukkan menu bloggerPada kesempatan kali ini , saya akan kembali menuliskan tentang blogger tutorial yaitu menu blogger bergaya lavalamp . Menu lavalamp ini menurut saya sangat keren karena desain dari menu tersebut sangat menarik dengan disertai gelembung . Di menu lavalamp kali ini saya mempunyai 6 warna yang bisa anda coba .


Nah untuk yang berminat  , ikuti langkah berikut ini untuk memasukkan menu lavalamp kedalam blogger anda.

Memasukkan Menu Lavalam Di blogger anda.
1. Pergi Ke akun blogger anda lalu pilih design > edit html > centang expand

menu blogger seo google panda untuk blogger

Note : untuk menghindari hal yang tidak di inginkan anda bisa bacjup terlebih dahulu template anda dengan mengklik download full template.

2. Setelah itu cari kode ]]></b:skin> lalu letakkan kode berikut ini sebelum kode ]]></b:skin> tadi.

/*LAVALAMP START*/
.lavalamp {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
}
.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
border: 1px solid #841144;
}
.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
border: 1px solid #2f8893;
}
.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
border: 1px solid #c08c1f;
}
.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
border: 1px solid #c04f11;
}
.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
border: 1px solid #272727;
}
.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);
}

a {
text-decoration: none;
color: #262626;
line-height: 20px;
}
ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}
ul li {
list-style: none;
float:left;
text-align: center;
}
ul li a {
padding: 0 20px;
text-align: center;
}
.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
/*End Lavalamp Css Info @ http://vianjb.blogspot.com */


3. Setelah itu cari lagi kode </head> lalu letakkan kode dibawah ini tepat sebelum kode </head>



<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/lv.js'type='text/javascript'/>

4. Setelah itu save template anda

Pekerjaan anda belum sampai disini saja , kini anda harus kembali ke bagian design lalu pada design blog anda , anda bisa memilih page element cross yang berada tepat dibawah bagian header . Anda bisa lihat contoh gambar kolom kross dibawah ini.

cara memasukkan kode css di kolom cross


Diatas adalah letak kolom cross berada. Pada kolom cross anda pilih add gadget > html javascript , lalu masukkan kode berikut ini di dalam kotak html/javascript.


<div class="lavalamp " >
<ul>
<li class="active"><a href="/">Home</a></li>
<li><a href="Link-Disini">About</a></li>
<li><a href="Link-Disini">Blog</a></li>
<li><a href="Link-Disini">Services</a></li>
<li><a href="Link-Disini">Portfolio</a></li>
<li><a href="Link-Disni">Contacts</a></li>
<li><a href="Link-Disini">Back to Article</a></li>
<li><a href="Link-Disini">How it Works?</a></li>
</ul>
<div class="floatr"></div>
</div>

Pada kode yang saya tandai berwarna merah dan hijau anda bisa sesuaikan sendiri , untuk kode yang saya tanda berwarna kuning anda bisa ganti kode itu dengan kode warna dari lavalamp dibawah ini


<div class="lavalamp magenta" >
<div class="lavalamp cyan" >
<div class="lavalamp yellow" >
<div class="lavalamp orange" >
<div class="lavalamp dark" >

Mungkin untuk artikel kali ini cukup sekian saya tulis , mohon maaf jika ada kekurangannya. terima kasih.

Monday, July 18, 2011

Sebuah Menu Dropdown Simple Jquery Untuk Blogger Anda

Untuk kali ini kita akan membahas cara membuat menu dropdown simple . Kebetulan beberapa hari yang lalu ada teman blogger saya meminta sesuatu artikel yang memang kebetulan belum saya buat yaitu membuat menu dropdown .

Untuk anda yang ingin melihat demonya anda bisa klik dibawah ini .

cara mudah blogger menu dropdown


baiklah jika anda berminat untuk memasukkan menu dropdown ini kedalam blog anda maka ikuti langkah mudah dibawah ini.

Cara memasukkan dropdown menu di blog anda .

1. Masuk ke akun blog anda lalu pilih design > edit html .

kode html blogger dan seo

2. Setelah berada pada menu edit html maka masukkan kode dibawah ini sebelum kode </head>

<!--start drop menu-->
<style type='text/css'>
/* menu styles */
#jsddm
{ margin: 0;
padding: 0;}
#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}
#jsddm li a
{ display: block;
background: #0033CC; /*MENU MAIN BACKGROUND COLOR*/
-moz-border-radius: 6px;-webkit-border-radius: 6px;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED; /*MENU LINK COLOR*/
white-space: nowrap}
#jsddm li a:hover
{ background: #24313C /*MENU HOVER BACKGROUND COLOR*/; -moz-border-radius: 6px;-webkit-border-radius: 6px;}
#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
z-index:100;
visibility: hidden;
border-top: 1px solid white}
#jsddm li ul li
{ float: none;
display: inline}
#jsddm li ul li a
{ width: auto;
background: #BFCFFE; /*MENU DROP DOWN BACKGROUND COLOR*/
color: #24313C /*MENU DROP DOWN LINK COLOR*/
}
#jsddm li ul li a:hover
{ background: #809FFE /*MENU DROP DOWN HOVER BACKGROUND COLOR*/}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find(&#39;ul&#39;).eq(0).css(&#39;visibility&#39;, &#39;visible&#39;);}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);
$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, jsddm_timer);});
document.onclick = jsddm_close;
</script>
<!--end menu code-->

Note : Menu dropdown ini anda bisa ganti warna sesuai keinginan anda sendiri dengan cara mengganti kode yang saya tandai warna merah. Untuk mencari kode warna nya anda bisa klik DISINI.

3. Sava template anda lalu pada menu edit html pergilah ke bagian page element dengan mengklik design.

Kode diatas adalah kode jquery dan css untuk menu dropdown anda , untuk memunculkan nya anda harus memasukkan kode html untuk memunculkannya.

Nah sekarang anda pergi kebagian design blog anda kembali, untuk penambahan kali ini , saya menyarankan anda memasukkan kode berikut ini dibawah area header atau juga bisa disebut kolom cross , berikut ini saya mempunyai gambar dimana kolom tersebut berada.

cara mudah memasukkan kode html di blog


5. Setelah itu pilih add gadget > html / javascript , lalu masukkan kode berikut ini di dalam kotak html / javascript tersebut .

<ul id="jsddm">
<li><a href="/">Home</a>
<li><a href="#">Link One</a>
<ul>
<li><a href="#">Link One Sub</a></li>
<li><a href="#">Link One Sub</a></li>
<li><a href="#">Link One Sub</a></li>
</ul>
</li>
<li><a href="#">Link Two</a>
<ul>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
</ul>
</li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</li></ul>

Note : Untuk kode yang saya tandai dengan warna merah anda bisa memasukkan link anda kesana dan pada biru dan hijau anda bisa sesuaikan itu sendiri.

6. Setelah selesai anda bisa mengklik save.

Kini menu dropdown anda sudah ada di blog anda dan mungkin cukup sekian dengan pembahasan tutorial blogger kali ini.

Wednesday, July 13, 2011

Memanfaatkan Template Bukan Memilih Template

pemilihan template seo friendlyCoba anda perhatikan judul artikel ini . Judul ini saya ambil karena banyak beberapa teman blogger kita kebingungan tentang memilih template mana yang baik . Dan sebelum itu apakah anda pernah merasa atau berkata bahwa template anda itu buruk atau kurang seo . Mungkin jika anda berkata atau merasa seperti itu , berarti anggapan anda tentang template anda salah .

Kenapa .. ?? sebenarnya template manapun itu menurut saya semuanya baik dan bisa seo , tergantung anda bisa memanfaat kan template itu. jawaban saya ini sudah terbukti karena ada teman blog saya yang bernama paul , template yang dia punya simple tetapi karena kehebatannya dia bisa memanfaatkan template nya menjadi indah dipandang dan lebih seo.

Template yang teman saya pakai adalah berdominan berwarna hitam , coklat muda dan putih . Dengan templatenya itu , dia malah bisa dibilang template yang indah dan pastinya seo . Bagaimana bisa , tiap harinya saja dia mendapatkan visitor minimal 5.000 orang per hari dan mempunyai alexa 18.530 dengan disertai pagerank 5 . Sungguh mengesankan bukan .

Memilih template itu sebenarnya bukan perkara sulit , malah itu adalah perkara mudah . Seperti halnya kita membalikkan kedua telapak tangan kita . Namun yang mungkin agak sulit adalah bagaimana caranya untuk memanfaatkan template itu sendiri.

Memanfaatkan template itu ada 2 cara yaitu , memanfaatkan untuk seo dan keindahan.

Untuk seo adalah bagaimana kita memanfaatkan untuk optimasi template kita dan ini di gunakan untuk robot google supaya mudah untuk menelusuri suatu halaman dan template kita . Memanfaat kan template untuk seo anda bisa membaca nya pada artikel saya yang berjudul - Beberapa cara mengoptimalkan template kita .

Untuk keindahan bisa disebut juga mempercantik template . Mempercantik template sebenarnya anda hanya menambahkan sesuati yang menarik untuk anda dan orang lain pandang. untuk artikel mempercantik template anda bisa langsung masuk pada label blogger tutorial saya.

Jadi kesimpulannya tentang artikel ini adalah pemilihan template manapun itu bagus  , template yang warna-warni kek , bercahaya kek , hitam gelap kek yang penting anda bisa memanfaatkan template itu , template anda bisa dibilang sudah sempurna . Kita tidak usah malu lagi untuk template kita karena template kita nanti yang anda bilang jelek malah bisa dibilang jadi lebih baik , apalagi kalau seandainya template itu hasil karya anda sendiri , behhh ..

Baiklah mungkin artikel ini bisa bermanfaat bagi anda , mudah2an anda yang merasa bingung dalam memilih template kini bisa tahu bahwa yang sebenarnya yang kita harus lakukan adalah memanfaatkan template kita bisa jadi lebih baik .

Monday, July 11, 2011

Blogger Keluarkan Page Element Baru

blogger membuat sebuah page element baruPada hari ini blogger telah mengeluarkan sebuah page element terbarunya , page element ini sebenarnya pindahan dari element dari draft blogger yaitu page element favicon. Kemunculan element terbaru ini mungkin sangatlah membantu dalam mengganti favicon blog anda , karena dengan ada nya itu kita tidak perlu lagi melakukan coding atau memasukkan sebuah kode javascript untuk membuat atau merubah favicon anda.

Nah untuk menemukan page element terbaru ini sangat lah mudah , yang anda harus lakukan hanyalah masuk ke blog anda lalu menuju ke design dan coba anda perhatikan bagian diatas element navbar anda . Disana terdapat sebuah page element baru.

blogger munculkan page element

Coba anda perhatikan gambar diatas yang saya beri tanda panah , itulah page element terbaru nya. Wah tambah menarik saja ya blogger . Mungkin tahun depan apalagi ya kejutan dari pemilik situs blogger untuk membuat page element terbarunya....???

Tombol Scroll Back To Top Dengan Efek Jquery Smooth

cara mudah membuat back to top di blogSetelah kemarin sudah menulis artikel yang bisa disebut membarui modifikasi dari kotak komentar authtr di blogger , maka pada artikel kali ini kita akan pula memodifikasi kembali tombol back to top di blogger. Back to top kali ini sangatlah berbeda dengan back to top yang sudah ada , karena back to top ini hanya akan terlihat di blog anda jika suatu halaman telah bergulir dan jika di klik maka gulungan halaman akan perlahan-lahan ke atas . Untuk penggunaan back to top di blog anda , tidak perlu takut akan beban dari jquerynya , karena sebelum nya telah di sprite untuk menjaga beban halaman.

Saya sudah mempunyai demo dari back to top ini di blog saya , jika anda ingin melihatnya silakan klik dibawah ini.

demo back to top di blog saya

Anda rertarik ?? ikuti langkah berikut ini jika anda tertarik ingin memasang scroll back to top efek smooth di blog anda.

  • Langkah Mudah memasang back to top di blog

1. Masuk pada blogger anda lalu pergi ke design > edit html  , untuk menghindari sesuatu yang tidak diinginkan di template anda , anda bisa men back up templae anda dengan cara menekan download full template.

memasukkan kode back to top di template

2. Pada menu edit html , cari lah kode ]]></b:skin> . ( Gunakan F3 untuk mempermudahkan pencarian )

3. Setelah menemukan kode diatas  , kini anda bisa copy paste kode dibawah ini dan letakkan tepat di atas / sebelum kode ]]></b:skin>


#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://lh5.googleusercontent.com/-FVNbuJLlNco/ThqDJXSJC5I/AAAAAAAAAg0/rdLF91Ce6DA/s800/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://lh5.googleusercontent.com/-FVNbuJLlNco/ThqDJXSJC5I/AAAAAAAAAg0/rdLF91Ce6DA/s800/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;

Note: Bila anda ingin mengganti tombol to top nya berada di sebelah kiri maka ganti tulisan right yang berwarna merah dengan left.

4. Setelah itu cari lagi kode </head> lalu copy paste kode dibawah ini dan letakkan sebelum kode </head>.


<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/sed.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/to%20top.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/
$().UItoTop({ easingType: &#39;easeOutQuart&#39; });
});
</script>

5. Kemudian save template dan selesai .

Kini blog anda sudah mempunyai back to top efek smooth , nah mungkin sampai begini dulu artikel saya ini . Oh ua tema artikel ini adalah blogger tutorial , jadi jika anda ingin melihat-lihat tentang blogger tutorial yang lainnya anda bisa klik DISINI

Saturday, July 9, 2011

Menambahkan Lencana Admin Pada Komentar Author Dan Merubah Warnanya

cara menrubah kotak komentar author berbedaMungkin kali ini kita akan kembali membahas tentang blogger tutorial . Jika mungkin beberapa orang memodifikasi kotak komentar author dengan merubah warnanya, kini saya memberikan sebuah modifikasi baru pada kolom komentar author yaitu dengan memberikan lencana admin yang berkilau . Dan selain memberikan lencana admin di kotak komentar author nanti kita akan juga merubah warna dari kotak tersebut sehingga nantinya akan teerlihat semakin keren kotak komentar yang ada di blog anda. Untuk demo nya silakan klik dibawah ini.

cara melihat css blogger kotak komentar author

Jika anda sudah melihat demonya dan tertarik untuk memasangnya di blog anda maka mari ikuti langkah mudah menambahkan lencana admin di kotak komentar author di blog anda berikut ini.

1. Masuk lah ke akun blogger anda lalu pilih design > edit html > klik expand widget template , untuk menghin kegagalan pada template anda , anda bisa backup terlebih template anda dengan mengklik download full template


caea memasukkan kode css di template


2. Setelah anda masuk pada menu edit html maka carilah kode ]></b:skin> , lalu copy  kode dibawah ini dan letakkan sebelum kode tersebut.


.comment-body-author {
background: url("http://vianjb.googlecode.com/files/admin.gif") no-repeat scroll right bottom #BFE3FE;
border: 1px solid #BFE3FE;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
padding:5px 35px 3px 3px;
}

Note : pada kode yang saya tandai dengan warna merah itu adalah kode background kotak komentar authornya , anda bisa ganti warnanya sesuai keinginan anda.

3. Untuk yang berikut ini anda harus mencari lagi kode <dd class='comment-body'> dan kode </dd> , kedua kode tersebut sebenarnya masih berhubungan satu sama lain . berikut ini contoh lengkap dari kode tersebut.

  • <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>
Setelah menemukan kode tersebut maka lalukan lah sama persis dengan dibawah ini yaitu peletakkan kode lain diantara kode diatas . 

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

<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>

</b:if>


Note : kode yang saya tandai dengan warna hijau , itu adalah kode lain yang anda harus letakkan diantara kode yang sudah saya tandai dengan warna merah atau seperti yang sudah anda cari tadi.

4. Setelah anda melalukannya dengan benar maka silakan  save template anda dan coba lihat kini kotak komentar author anda akan mempunyai lencana admin seperti dibawah ini.

cara kode css lencana admin

Pembahasan blogger tutorial ini cukup sekian , jika anda kendala pada pemasangan kode di template anda , anda bisa tanyakan langsung dengan mengirim komentar pertanyaan anda dibawah ini.

Friday, July 8, 2011

Bagaimana Merubah Bullet List Menjadi Gambar Di Blog Anda

bagaimana cara merubah bullet list menjadi gambarKali ini saya akan kembali memposting kembali dengan tema blogger tutorial . Sebenarnya ada satu lagi List yang dipakai untuk membuat sesuatu daftar kata  yaitu Number list . Number list dengan bullet list hampir sama cara memakainya , namun yang membedakan adalah jika number list menggunakan angka maka bullet list menggunakan sebuah tanda kecil . Dan pada artikel ini kita akan merubah tanda kecil itu menjadi sebuah gambar keren dan cantik dengan menggunakan sebuah kode css . Untuk membuat nya semakin mudah saya sudah menyiapkan beberapa gambar yang bisa anda langsung pakai namun tentu saja anda bisa mengganti gambarnya dengan gambar anda sendiri .Berikut ini saya sudah mempunyai demonya dari bullet list yang sudah diganti dengan gambar.

view demo

Mohon maaf jika demo bullet listnya hanya sedikit saya tampilkan. Nah , jika anda berminat anda bisa mengikuti langkah berikut ini.

  • Menambahkan css untuk membuat Bullet List
1. Copy kode css dibawah ini melalui template designer dengan cara pergi ke akun blog anda lalu pilih design > template designer > advanced > add css.

membuat image bullet list

cara membuat template css bullet list


  • Cara memakai gambar bullet anda sendiri - Ganti tulisan " Url Gambar disini " dengan url gambar anda yang berukuran 12 x 12.
ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('URL-GAMBAR-DISINI');
}


  • Menggunakan gambar yang telah disiapkan - untuk gambar yang sudah saya persiapkan anda hanya perlu langsung saja memasukkan kode url gambarnya  langsung ke dalam tulisan berwarna kuning  diatas. lalu men copy paste ke dalam kotak css .

Green Tic Bullet 1 - kode = https://lh4.googleusercontent.com/-kTgLptok-Vs/Thb82vunj4I/AAAAAAAAAeI/S_tZLAxqTnY/s800/bullet-point-green-tick.png


Maroon Arrow Bullet Point - kode = https://lh5.googleusercontent.com/-En9nSdPDb2E/Thb84jJIMzI/AAAAAAAAAeM/FyyU8ag-5wo/s800/bullet-point-image-1.png



bunga tick bullet - kode = https://lh3.googleusercontent.com/-mN_rRNbq4wI/Thb860rZQeI/AAAAAAAAAeQ/a8dQwUiKocw/s800/bullet-point-image-4.jpg



kode dobel css bullet - kode = https://lh6.googleusercontent.com/-JiYGcdXFgTs/Thb89JKTQ3I/AAAAAAAAAeU/9pUzxyTTCdE/s800/bullet-point-image-5.gif



bullet diamond blue - kode = https://lh5.googleusercontent.com/-38thOND4yvI/Thb9B6TDK4I/AAAAAAAAAec/AcwWoGjTmvw/s800/bullet-point-image-8.png



blue arrow bullet - kode = https://lh5.googleusercontent.com/-5KEC38hjn8w/ThcOn1caNGI/AAAAAAAAAfQ/dXWqTuqfJb8/s800/bullet_list_icon.jpg


Mungkin beberapa gambar bullet yang diatas anda bisa memakainya jika anda menginginkannya , untuk membuat gambar bullet itu muncul maka anda harus menambahkan kode css class="imglist" setelah kode <ul pada kode bullet list pada menu edit html di postingan, berikut ini saya akan memberikan sedikit contoh teksnya:
  • <ul class="imglist">
    <li>Bullet List css</li>
    <li>List Bullet css</li>
    </ul>
Baiklah mungkin untuk pembahasan tentang tema blogger tutorial ini cukup sekian , mungkin jika ada kesulitan anda bisa bertanya dengan meninggalkan komentar pertanyaan anda dibawah ini .

Wednesday, July 6, 2011

Google Panda Berikan Sebuah Kesempatan Besar Bagi Penulis Sejati

google memberikan peluang besar bagi penulis
Beberapa minggu yang lalu banyak sekali blogger membicarakan tentang algoritma terbaru ini , yaitu algoritma google panda atau farmer google . Dan pada saat perubahan ini , menurut anda apakah ada perubahan dalam situs blog anda ? setelah google mengeluarkan algoritma terbaru ini , ada beberapa mungkin yang terkena sandbox ! tapi tenang saja ini hanyalah awal setiap google meluncurkan algoritmanya .

Dan saat perubahan ini , disebagian pengguna situs web / blog pun merasa berbahagia dengan adanya perubahan google ini , namun ada pula yang merasa sedih . Entah itu blogger yang berlatih seo ataupun tidak . Namun pikiran saya adalah setelah adanya google panda ini google memberikan kesempatan besar bagi si penulis sejati , Maksudnya adalah orang yang suka menulis apa yang ingin ditulis , terutama bagi blogger yang suka menulis dengan kata cukup panjang dan mereka mendapatkan begitu banyak manfaat dari adanya google panda ini.

Disinilah saya berpikir kenapa google memberikan kesempatan besar bagi penulis sejati , yaitu ada salah satu blog teman saya yang memiliki konten yang mungkin bisa dibilang cukup panjang kata-katanya meskipun dia tidak terlalu mengoptimalkan , dan ada satu lagi blognya dengan trafic yang bagus namun malah masuk ke sandbox disebabkan isi kontennya terlalu singkat.

Mungkin  yang harus diketahui sekarang adalah jika anda ingin mendapatkan lebih banyak visitor pada google panda ini , maka berfokus lah pada konten anda tapi dengan satu hal yang harus anda hindari adalah men copy paste artikel orang lain dan anda pun tidak perlu berfokus lagi pada seo. Fakta dari google panda adalah dia lebih mencintai blogger yang ber topi putih untuk sekarang ini.

Namun saya tidak tahu pasti apakah masalah ini juga berlaku pada masalah anda , namun ada baiknya jika kita mencoba sebagai penulis sejati. Saya rasa cukup untuk artikel kali ini , sebenarnya tema artikel kali ini adalah apa yang ingin saya tulis . Jadi dengan tema " apa yang ingin saya tulis " ini anda mampu untuk mengambil sisi positif dari artikel kali ini bukan untuk mengambil sisi negatifnya .

Pencarian Google Gaya Bar Untuk Blogger

kotak pencarian google
Saya yakin pasti anda sudah tahu kan tentang desain terbarunya pencarian google . Yang memiliki gaya bar dengan desain lebih ramping pada hasil pencariannya . dan selain itu pencarian google juga kini lebih memiliki tampilan yang modern minimalis dengan sudur membulat dengan disertai efek hover . Nah untuk artikel kali ini saya akan menunjukkan bagaimana  anda bisa membuat pencarian google terbaru ini bisa masuk kedalam blog anda .

Nah berikut ini saya mempunyai demo screenshot .

pencarian di google


kotak pencarian di google

Itulah screenshot pencarian google terbaru ini , mungkin jika saya memberikan contoh dalam bentuk screenshot pasti kurang cukup , nah untunglah saya mempunyai demo on page nya . Contoh Kotak pencarian berikut ini saya letakkan di bagian atas postingan blog test saya . mungkin jika anda ingin melihat demo on pagenya anda bisa mengklik demo dibawah ini .

view demo onpage


Jika anda berminat untuk memasang kotak pencarian ini , langsung saja kita ikuti langkah dibawah ini.


  • Cara Memasang Kotak Pencarian Google
1. Masuk lah ke akun blogger anda pergi ke > design > edit html .

cara memasukkan kode pencarian google

Note: Anda bisa menbackup template anda jika takut ada kesalahan dalam memasukkannya. Klik download full template untuk menbackup.

2. Setelah masuk pada menu html di blog anda , langkah selanjutnya adalah mencari kode ]]></b:skin> dan copy kode dibawah ini lalu paste sebelum atau diatas kode
]]></b:skin>. Untuk memudahkan pencarian anda bisa menggunakan F3


/*Start Css For Google Style Search Box*/
/* div container containing the form */
#searchContainer {
margin:20px;
}
/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
/*End Google Style Search Bar - Info @ http://vianjb.blogspot.com*/


3. Setelah selesai memasukkan kode tersebut , kembali cari lagi kode </head> dan copy lagi kode dibawah ini lalu paste dibagian sebelum kode </head>.


<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

4. Jika sudah benar memasukkan kodenya anda bisa menekan save template .

5. Sekarang anda kembali ke bagian design > add gadget > html / javascript.

cara menambahkan widget

penambahan widget di blog

6. Pada kotak html / javascript , copy paste kode dibawah ini dan letakkan di kotak html / javascript tadi.


<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

7. Save dan selesai , kini anda sudah memiliki kotak pencarian google terbaru.

Kotak pencarian google terbaru ini tidak ada bedanya bukan dengan pencarian google , mungkin hari ini pembahasan widget kali ini cukup sekian . Mungkin jika anda mempunyai widget yang lain dan yang belum pernah di publish oleh orang , anda bisa mengirimkannya DISINI , itupun jika anda berkenan.

Tuesday, July 5, 2011

Widget Tombol Follow Twitter Terbaru

widget follow terbaruPada hari ini , pengembang twitter telah merilis sebuah widget tombol follow twitter terbaru untuk blog / web . Mungkin widget ini tidak kalah menariknya dengan widget follow twitter yang lain , memang sih hanya sebuah tombol saja bukan berupa seperti follow bird atau yang lainnya tapi menurut saya ini juga cukup menarik .

Untuk melihat demonya anda bisa lihat widget follow twitter  saya dibawah ini



Diatas adalah widget follow terbarunya , Nah selain widget follow ini berwarna biru terang seperti itu , kita juga dapat merubah warna widget follownya dengan warna gelap. Jika anda berminat dengan widget ini , anda bisa mengklik DISINI untuk mengambil scriptnya .

Note : untuk memudahkan pengambilan script widget follownya , anda bisa terlebih dahulu untuk log in di twitter , karena jika anda log in maka akan secara otomatis dibagian usernamenya akan terisi otomatis juga.


Cara Menambahkan Widget Follow Di Blog Anda
Widget tombol follow ini memakai html dan javascript sehingga anda bisa menambahkan di bagian mana saja yang masih bisa menerima javascript , nah berikut ini saya mempunyai beberapa cara untuk menempatkan widget ini .

Jika anda ingin memasang widget ini di bagian sidebar  , anda bisa masuk terlebih dahulu di blog anda > design > tambah gadget lalu pilih html / javascript , setelah itu letakkan script widget follow tersebut di dalam kotak html / javascript.

Untuk memasang di bagian atas tulisan , masuk di blogger > design > edit html > centang expand widget template . Setelah itu cari kode <div class='post-header-line-1'> , dan sisipkan script widget follownya setelah kode tersebut lalu save template.

Masuk ke blogger > design > edit html > centang expand widget template , lalu carilah kode berikut ini <div class='post-footer-line post-footer-line-1'> . Setelah ketemu , tempelkan script widget tepat setelah kode tersebut.

Mungkin untuk pembahasan widget kali ini cukup sekian , menurut anda bagaimana !1 apakah widget kali ini cukup menarik ???

Monday, July 4, 2011

Memunculkan Tooltip Deskripsi Untuk Blogger

cara mudah membuat tooltipsTooltip telah menjadi sumber daya umum dan digunakan oleh semua situs utama untuk menggambarkan sebuah link atau memberikan lebih banyak bantuan dan informasi pada bagian text . Mungkin beberapa dari anda pasti pernah melihat toltip ini pada saat anda berada di suatu web / blog dan  pada saat itu anda melihat sebuah tanda tanya kecil yang membuat anda bisa melihat sebuah pop up disertai tooltips informasi

Pada kesempatan kali ini saya akan menshare tentang tooltips ini . Cara membuat tooltips di blog anda ini sangat cukup mudah karena hanya memasukkan kode css saja dan mungkin ini bisa membuat anda lebih mudah untuk memiliki tooltips ini di blog anda.

Untuk anda jika ingin melihat demo nya terlebih dahulu , anda bisa mengklik dibawah ini

demo untuk membuat tooltips

Bagaiman anda berminat untuk memunculkan tooltips deskripsi di blog anda ??? jika berminat , ikuti langkah berikut ini :

  • Menambahkan Kode CSS di blog anda :

1. Masuk ke dashboard blog anda > Design > Template designer.

cara memasukkan kode css tooltips

mudah kode css tooltips


2 . Setelah masuk pada bagian template designer pilih advaced > add css > :

masuk pada bagian cheat css

3. Copy paste kode css dibawah ini dan letakkan css tersebut di kolom css seperti gambar diatas .


.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;outline: none;
}
.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;opacity: .9;
background-color: #ddd;background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover span
{
visibility: visible;
}
.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before
{
border-top-color: #ccc;bottom: -8px;
}


Note : Kode css diatas adalah tooltips sederhana yang saya pasang di blog saya tadi dan jika anda ingin mengganti warna tooltipsnya anda bisa ganti kode kode css yang sudah saya tandai dengan warna biru. Jika anda ingin melihat beberapa warna yang bisa anda pakai klik DISINI

4. Jika selesai anda bisa klik aplly to blog disebelah kanan atas pada menu css.

itu dia cara menambahkan kode css tooltips di blog anda . Untuk mengaktifkan tooltips nya anda bisa menyisipkan kode class="tooltip" pada kode link . Berikut ini saya mempunyai contoh menyisipkan kode tersebut :


  • <a href="Link Disini" class="tooltip">ANCHOR TEXT<span>Deskripsi anchor teks dan ini akan muncul pada tooltips</span></a>

Diatas anda bisa lihat dimana kode tooltips dimasukkan , nah untuk memudahkan anda , saya akan membuat contoh lagi dari penyisipan kode diatas .

  • <a href="http://vianjb.blogspot.comclass="tooltip">Cara memasukkan kode css<span>Berikut ini adalah cara memasukkan kode css di blog anda</span></a>

Nah .. diatas adalah contoh saja , di contoh itu saya juga memberikan juga sebuah anchor text dan deskripsi yang nanti akan muncul di tooltips .

Baiklah mungkin cukup sekian tentang css tooltips ini , oh ya tooltips ini anda bisa munculkan dimana saja akan tetapi dalam bentuk kode html bukan dalam bentuk teks , jika anda ingin munculkan didalam postingan maka anda bisa memilih type edit html dan untuk di bagian halaman blog anda , anda bisa memilih html javascript .

Sunday, July 3, 2011

Menambahkan CSS Simple Efek Bump Di Gambar

cara mudah css jquery pada gambar bumbPada kesempatan kali ini saya akan menuliskan kembali tentang widget , widget kali ini adalah widget efek bump pada gambar yang ada di blog anda . Efek ini cukup sangat keren bagi saya karena jika kita memberikan efek bumb ini pada gambar maka akan tampak seperti gambar itu ingin lari keatas.

Efek bumb ini akan bekerja jika kita menyorotkan cursor mouse ke bagian gambar yang telah diberi efek bumb , widget ini hampir sama dengan widget sharing is sexy . Nah untuk anda yang ingin melihat terlebih dahulu widget efek bumb ini , silakan anda klik dibawah ini

demo dari efek bumb

Bagaimana , anda tertarik dengan widget efek bumb pada gambar ini ?? jika tertarik maka ikuti langkah berikut ini :

1. Silakan anda masuk ke akun blog anda . Lalu masuk di bagian design > template designer > advanced > add css.

2. Pada menu Add css , copy paste kode css berikut ini dan letakkan di kolom css tersebut .
tempat pemasangan kode css





Kode CSS
.gobump img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
border-radius: 5px 5px 5px 5px;
}
.gobump img:hover {
margin-top: 2px;
}


3. Setelah anda melakukan langkah diatas , klik APLY TO BLOG.

Tapi tunggu dulu pekerjaan anda belum sampai disini saja pada pembuatan widget efek bumb ini karena sebelum efek bumb itu bisa muncul maka yang harus anda lakukan adalah meletakan kode css class="gobump" ini pada gambar yang ingin anda beri efek bumb. Caranya cukup mudah yaitu dengan cara , menyisipkan kode bumb setelah kode " <a " pada gambar yang ingin di beri efek bumb.

Berikut ini saya akan sedikir berikan contoh dimana kode tersebut disisipkan :


  • <a class="gobump" href="http://1.bp.blogspot.com/-e80rWh6hK7Q/ThALuhuezBI/AAAAAAAAAbI/2M71tcoktsg/s1600/GravityWell1-0.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="animasi bumb di gambar" border="0" height="150" src="http://1.bp.blogspot.com/-e80rWh6hK7Q/ThALuhuezBI/AAAAAAAAAbI/2M71tcoktsg/s200/GravityWell1-0.jpg" width="200" /></a>

Note : kode  yang berwarna merah adalah tempat dimana kode bumb disisipkan .

Bagaiman cukup mudah bukan membuat widget efek bumb ini , mungkin untuk artikel widget ini sampai disini dahulu , saya mengucapkan terima kasih banyak jika anda sudah membaca artikel ini . Untuk yang masih bingung dengan widget diatas ,silakan anda bisa bertanya dengan meletakkan komentar pertanyaan  anda dibawah ini.