Wednesday, November 30, 2011

Mematikan Fungsi Lightbox Pada Blogger

fungsi lightbox pada gambar di blogger Jika pada postingan sebelumnya saya pernah menulis bahwa google telah menambahkan lightbox pada gambar
kini sekarang saya akan menuliskan tentang mematikan fungsi lightbox pada blogger . Karena adanya sebuah email dari teman saya yang ingin mengetahui cara mematikan fungsi tersebut , entah karena apa dia ingin mematikan fungsi lightbox image itu di blogger nya.

 Mematikan fungsi lightbox sebenarnya cukup mudah , hanya perlu menambahkan script html kedalam blogger anda. Berikut ini kita simak cara mematikan fungsi lightbox image pada blogger anda.

1. Di dalam blogger anda pergi ke design > add a gadget > html / javascript

blogger seo lightbox css




blogger seo mematikan fungsi lightbox






2. Dalam kotak html / javascript , copy paste kode dibawah ini kedalam kotak html / javasccript.


<script type="text/javascript">
//<![CDATA[
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmousemove=function() {
var html = this.parentNode.innerHTML;
this.parentNode.innerHTML = html;
};
}
}
if (window.addEventListener) {
window.addEventListener('load',killLightbox,false);
} else {
window.attachEvent('onload',killLightbox);
}
//]]>
</script>


3. Setelah itu , tekan save dan selesai kini blogger anda telah mematikan fungsi lightbox

Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia

Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia kontes seo
 Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia. Merupakan sebuah program terbaik dalam bidang  perumahan . Kemunculan Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia merupakan suatu hal terbaik bagi kita yang apabila ingin membeli , menjual atau bahkan menyewa rumah .

 Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia , merupakan perusahaan yang sangat besar bahkan sudah memiliki cabang di indonesia hampir seluruhnya. Di Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia kita bisa sangat mudah untuk melakukan transaksi denganya tanpa memerlukan waktu yang cukup lama seperti perusahaan"-perusahaan yang lain.

 Jadi jangan tunggu kesempatan emas ini dalam ingin menjual , membeli atau menyewa rumah di Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia


Informasi lebih lanjut anda bisa klik DISINI

Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia

Tuesday, November 29, 2011

Twitter Bird Terbaru Dengan Efek Bubble Di Blogger Anda

widget follow bird terbaru Jika Pada sebelumnya saya pernah juga memposting artikel menambahkan widget follow twitter terbarunya , kini saya akan kembali membuat widget follow twitter terbaru tetapi dalam bentuk twitter bird.
Twitter bird ini sangat menarik bagi saya , memiliki efek bubble disertai status twitter terbaru kita.

Untuk anda yang ingin melihat terlebih dahulu bagaimana demo nya , anda bisa meng-klik view demo dibawah ini.

widget terbaru blogger

Menambahkan widget twitter bird ke blogger anda

1.Masuk ke akun blogger anda  , pada dashboard pergi ke > design > template designer > advanced > add css

gadget , widget follow bird












2. Dalam kotak css yang sudah anda buka di blog anda , anda bisa memasukkan kode dibawah ini kedalam kotak css .


#twitter_update_list{
list-style:none;
}
#twitter_update_list li{
background: #f4f8f9; /* Old browsers */
background: -moz-linear-gradient(top, #f4f8f9 1%, #e8f0f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f4f8f9), color-stop(100%,#e8f0f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8f9', endColorstr='#e8f0f2',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* W3C */
box-shadow: 1px -1px 2px #bbc6c8;
-webkit-box-shadow: 1px -1px 2px #bbc6c8;
-moz-box-shadow: 1px -1px 2px #bbc6c8;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:15px;
width:250px;
}
#twitter_update_list::after {
content: "";
position: relative;
left: 30px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #e8f0f2 transparent;
display: block;
width: 0;
}


3. Klik aplly to blog , diatas adalah langkah memasukkan kode css kedalam blog anda , dari bagian tadi anda bisa kembali ke blogger anda , lalu pilih design > add gadget > pilih html / javascript.

seo widget blogger css


membuat twitter bird di blogger new






4. Setelah itu , klik save dan selesai . kini widget twitter bird terbaru ini ada di blogger anda.

Monday, November 28, 2011

Menambahkan Langganan Email RSS Pop out Untuk Blogger Anda

rss feed email blogger Hari ini saya mempunyai akan memberikan tutorial blogger kembali mengenai cara memasukkan langganan email rss pop out untuk blogger anda . Anda sudah pasti sudah tahu kan bagaiman langganan email rss , langganan ini sih bertujuan untuk memudahkan para pengunjung berlangganan artikel anda , intinya memudahkan mereka untuk membaca artikel anda setiap kali anda mempunyai artikel baru di blog anda.

Disini kita akan sedikit membuat langganan email itu sedikit lebih menarik dari versi standar nya. Dengan kali ini langganan email kita berbentuk sebuah pop out yang akan muncul pada saat pengunjung baru anda datang di blog anda. untuk melihat demo dari langganan email dengan efek pop out di blog , anda bisa masuk pada blogger test saya dengan cara klik gambar view demo dibawah ini.

rss feed email new blogger template


  • Menambahkan Langganan email versi pop out

Sebelum kita melanjutkan ke langkah pembuatannya , ada baiknya anda bisa mengbackup terlebih dahulu template blogger anda , untuk mengantisipasi jika nanti terdapat suatu kesalahan dalam pemasangan.

1. Pada dashboard blogger anda pergi ke > desugn > edit html

rss feed blogger seo template










2. Kemudian pada kotak edit html cari kode ]]></b:skin> .

Note : tekan F3 atau ctrl + f , untuk memudahkan pencarian kode.


3. Copy paste kode dibawah ini diatas / sebelum kode ]]></b:skin>

/*Subscription Pop Up Css*/
#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
/*End Subscription Pop Up Css @ http://vianjb.blogspot.com *


4. Kemudian cari lagi kode </head> , lalu copy paste kode dibawah ini diatas / sebelum </head>

<!--Pop Up Subscription-->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
<script src='http://dinhquanghuy.110mb.com/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
centerPopup();
//loads popup only if it is disabled
if(popupStatus==0){
$(&quot;#backgroundPopup&quot;).css({
&quot;opacity&quot;: &quot;0.7&quot;
});
$(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var windowscrolltop = document.documentElement.scrollTop;
var windowscrollleft = document.documentElement.scrollLeft;
var popupHeight = $(&quot;#popupContact&quot;).height();
var popupWidth = $(&quot;#popupContact&quot;).width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$(&quot;#popupContact&quot;).css({
&quot;position&quot;: &quot;absolute&quot;,
&quot;top&quot;: toppos,
&quot;left&quot;: leftpos
});
//only need force for IE6
$(&quot;#backgroundPopup&quot;).css({
&quot;height&quot;: windowHeight
});
}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie(&quot;anewsletter&quot;) != 1) {
//load popup
setTimeout(&quot;loadPopup()&quot;,5000);
}
//CLOSING POPUP
//Click the x event!
$(&quot;#popupContactClose&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Click out event!
$(&quot;#backgroundPopup&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 &amp;&amp; popupStatus==1){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
}
});
});
</script>
<!--End Pop Up Subscription @ http:/vianjb.blogspot.com -->


5. Kembali cari kode </body> di blog anda lalu copy paste kode dibawah ini dan letakkan sebelum / diatas kode </body>

<div id='popupContact'>
<a id='popupContactClose'>x</a>
<h1>Get Our Latest Posts Via Email - It&#39;s Free</h1>
<p id='contactArea'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=INFO-TERBARU&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='INFO-TERBARU'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form></p>
</div>
<div id='backgroundPopup'/>

Note : Ada beberapa kode diatas saya block dengan warna kuning , ganti teks yang saya block berwarna kuning dengan nama feed anda , nama itu diambil dari belakan url feed anda , contohnya seperti http://feeds.feedburner.com/INFO-TERBARU .

Setelah itu save template anda , selesai sudah , kini anda sudah bisa menikmati subscription pop out di blog anda.

Sunday, November 27, 2011

Google Tidak Menggunakan Meta Tag Keyword Dalam Nilai Hasil Pencarian

google tidak pentingkan meta tag dalam seo Google pernah membuat berita yang sangat menarik , Matt cutts atau orang dari google  pernah menjelaskan bahwa penggunaan meta tag keyword bukan hal penting atau bisa dibilang di perdulikan lagi terutama untuk SEO .

 Mungkin bagi saya , sikap google seperti ini merupakan langkah baik dalam mempertimbangkan sebuah blog dari sebuah kualitas kontennya itu sendiri dan langkah pencegahan penjiplakan artikel ( COPAS ) , dulu pernah saya baca beberapa artikel blog saya dapatkan , menulis pentingnya keyword itu sendiri di tambah lagi seperti meninggi - ninggi kan kualitas keyword di banding kualitas konten atau isi blog . Berita ini sebenarnya sudah sangat lama muncul namun saya update kembali supaya bagi teman blog kita yang masih baru mereka bisa banyak belajar dan bisa meningkatkan isi blog nya ( Bukan Hasil Copas ya )

 Berikut ini ada video dari Matt cutts menyatakan bahwa keyword dalam search engine itu tidak penting , nah dari sini lah saya dapatkan berita itu . ok anda bisa lihat video dibawah ini.

HIndarilah Halaman Yang Tidak Tertaut Dengan Halaman lain (Orphan Pages)

link erorr , blogger , seo Halaman yang tidak terhubng dengan halaman lainnya akan mengakibatkan sulit ditemukan oleh mesin pencari atau pengunjung blog anda. Untuk menghindari halaman ini di situs web / blog , anda bisa melakukan pemeriksaan secara teratur untuk memastikan semua halaman terhubung satu sama lainnya.

 Mesin pencari menilai sebuah situs dengan banyak halaman yang tidak tertaut ( Tidak terhubung dengan link ) ini kurang profesional dan tidak layak mendapatkan peringkat tinggi. Jenis situs web / blog yang dalam pembuatan ini bisa di bilang masih miskin konten. Jika halaman anda tidak terhubung dengan benar , mesin pencari tidak akan mengindeks dan akan menganggap mereka tidak revelan untuk bertahan di pencarian.

 Sekarang ini banyak cara untuk memeriksa selalu halaman yang tidak tertaut dengan halaman lain entah itu cara manual atau otomatis , nah mungkin sekian untuk artikel ini .

Friday, November 25, 2011

Tahukah Bahwa Sitemap Itu Penting Dalam SEO

 Sitemap adalah sebuah halaman web yang berisi daftar semua halaman pada blog anda. Mereka dimaksudkan untuk lebih memudahkan pengunjung blog anda menemukan informasi yang mereka butuhkan , dan untuk mesin pencari dalam pengindeksan suatu halaman.

 Sitemap sangat lah pentingnya dalam SEO , karena untuk memastikan bahwa boot mesin pencari memeriksa seluruh situs anda dan memiliki lebih banyak kesempatan untuk bisa di indeks , ini akan menjadi ide baik untuk menggunakan generator sitemap. Anda dapat menggunakan ROR sitemaps yang dapat dibaca oleh semua mesin pencari.

 ROR adalah sitemap yang menggunakan XML feed untuk menjelaskan situs web / blog anda . ROR sitemaps memungkinkan mesin pencari untuk cocok dengan pencarian teks dengan informasi yang terstruktur , sehingga mendapatkan relevansi pencari untuk lebih memudahkan mesin pencari memahami isi blog anda , seperti " Product layanan , foto , artikel dan sebagainya. Dengan membuat sebuah file dengan nama product , deskripsi , harga , gambar , ketersediaan , program affiliasi , dan informasi lainnya yang relevan.

 Selain kita bisa menggunakan generator , kini beberapa layanan telah menyediakan feed rss yang bisa digunakan sebagai sitemap untuk blog anda.

Lightbox Efek Pada Gambar Di Blogger

blogger mengeluarkan efek pada gambar Pada bulan september yang lalu Tim Blogger telah menambahkan efek lightbox pada gambar pada blog dari blogger , mungkin saya sudah terlambat untuk memposting artikel ini namun saya pun baru tau juga tentang ini karena juga saya sudah lama absen dalam dunia blogging dan sebab itu saya kurang update .

 Efek lightbox pada gambar ini kita bisa melihatnya dengan cara mengklik gambar yang masih default , dan pada saat di klik efek yang muncul ialah muncul sebagai halaman terpisah dengan efek gambar pop out disertai background yang berwarna gelap dan juga serta ada thumbnail gambar lain yang terdapat pada sebuah artikel.
kabar ini saya dapatkan pada waktu saya melihat dibagian tim blogger atau anda juga bisa masuk pada situsnya , atau jika tidak ingin repot , dibawah ini saya telah meng-copas pernyataan dari tim blogger tentang efek lightbox pada gambar ini

~~"Introducing Lightbox, the latest in a series of Blogger updates aimed at giving you an improved and modernized blogging experience. Lightbox is a whole new way to interact with photos. When clicked, images now expand into a shiny new overlay that displays them at their full size for optimal viewing"~~.


Untuk yang penasaran bagaimana efek nya , anda bisa mengklik gambar di blog test saya , klik DISINI untuk pergi ke blog test saya

Nah jika ingin melihat tentang pernyataan fitur baru ini , anda bisa melihat DISINI

Thursday, November 24, 2011

Pentingkah Sebuah Artikel Di Blog Memiliki Sebuah Gambar

pentingnya memasukkan gambar dalam konten Mungkin Banyak sebagian blogger ( maaf ) lebih banyak menekankan dalam konten tertulisnya dan sementara itu mengabaikan pentingnya sebuah gambar didalam konten tertulis itu sendiri . Sebuah gambar dalam konten itu bisa memberikan sebuah keindahan atau kemenarikkan tersendiri dalam konten itu.

 Jika blog anda membicarakan tentang tutorial blogger , gambar disini merupakan sebuah peranan penting dalam hal itu , kenapa? karena , jika kita mempunyai sebuah artikel bertema tutorial blogger dan tidak memiliki sebuah konten gambar , maka pengunjung anda mungkin akan sedikit susah untuk mempraktekan apa yang anda tulis itu  apalagi bagi para teman blogger yang masih baru dalam menjalani blog.

 Konten gambar juga bisa berfungsi untuk memberikan tambahan visitor pada konten kita melalui pencarian dalam bentuk gambar . Jadi disini inti nya adalah bahwa konten gambar dalam blogger itu hal yang penting  , ok mungkin cukup sekian artikel kali ini , mohon di maafkan jika ada kesalahan atau pun jika kurang jelas anda bisa meninggalkan komentar anda dibawah.

Css3 Menarik Berposisi Vertikal Untuk Blogger Anda

cara memasukkan css menarik di blogger Kali ini saya akan membagikan sebuah menu navigasi yang menarik yang bisa untuk memudah akses masuk ke dalam sebuah posting anda ataupun yang lain. Menu navigasi ini cukup menarik yang di hiasi dengan warna-warni , menu navigasi ini akan tampil pada dibagian sisi di Blogger anda , menu ini memliki 5 icon yaitu ada Home , jasa , arsip dan contact.

 Menu ini hampir sepenuhnya dibuat dari css 3 dan cara menambahkan navigasi ini pun cukup sangat mudah , nah bagi anda untuk berminat menambahkan navigasi ini ke dalam blogger anda  , maka ikuti langkah dibawah ini dan jika ada yang ingin melihat demo dari navigasi ini , silakan klik gambar dibawah ini dan anda bisa menemukan navigasi tersebut di bagian kiri blog test saya.



Memasukkan Menu Navigasi ke Blogger


Sebelum anda memulai untuk memasukkan navigasi ini ke dalam blog anda , maka sebaiknya untuk mem backup terlebih dahulu template anda untuk mencegah sesuatu yang salah terjadi.

1. Pergi ke akun blogger anda lalu pilih design > Template designer > Advanced > add css

Membuat





kode css,seo,tutorial blogger,google









2. Kemudian copy paste kode dibawah ini kedalam kotak css


/* CSS Style for Horizontal Menu - info @ http://vianjb.blogspot.com*/
#hor {
list-style:none;
padding:0;
margin:0;
}
#hor li {
float:left;
padding:5px;
}
#hor a {
display:block;
height: 12px;
text-indent:-999em;
}
#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}
#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}
#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}

/* CSS Style for Vertical Menu */
#ver {
list-style:none;
padding:0;
margin:0;
}
#ver li {
padding:2px;
}
#ver li a {
display:block;
height:12px;
text-indent:-999em;
}
#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}
#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}
#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}

.clear {
clear:both;
}

*{
/* A universal CSS reset */
margin:0;
padding:0;
}

#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;

/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background:url('http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/s1600/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
/*End menu css - info @ http://vianjb.blogspot.com */
.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;
}
.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;
}
/*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. lalu klik apply to blog , langkah diatas adalah untuk css sekarang langkah selanjutnya memasukkan html

4. Sekarang kembali ke blog anda lalu menuju ke > design > add gadget > html / javascript.

memasukkan kode html untuk css di blog anda




kode html css dan seo






5. Copy paste lagi kode html berikut ini kedalam kotak html/javascript yang anda buka tadi.


<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://vianjb.blogspot.com">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="http://vianjb.blogspot.com">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="http://vianjb.blogspot.com">
<span>Services</span>
</a>
</li>
<li>
<a class="portfolio" href="http://vianjb.blogspot.com/">
<span>Arsip</span>
</a>
</li>
<li>
<a class="contact" href="http://vianjb.blogspot.com">
<span>Contact us</span>
</a>
</li>
</ul>
</div><a href="http://vianjb.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

Note: Ganti URL yang saya tandai warna merah diatas dengan link yang anda tentukan sendiri dan ganti teks yang anda inginkan saya tandai dengan warna hijau.

6. Save gadget tadi , dan kini anda sudah siap untuk memakai menu navigasi tersebut di blogger anda.

Tuesday, November 22, 2011

Google Plus Membuat Sebuah Fan Page Seperti Facebook

google mengeluarkan sebuah fan pages
 Pasti bagi anda yang sudah mengetahui tentang google plus. Google plus sendiri terbentuk mungkin kira-kira akhir bulan juni 2011 , Nah semenjak itu kini google plus mulai sudah berkembang banyak itu pendapat saya , google plus pun kini sudah memberikan fasilitas fan pages seperti halnya di facebook .Keluaran Fan page dari google plus ini bagi saya untuk mendapatkan nya begitu sangat mudah dan di tambah lagi fan pages dari google ini hampir sama koq dengan fan page yang ada di facebook , so jika anda ingin membuatnya , maka saya akan memandu anda untuk membuat fan pages itu.

1. Pergi ke halaman google plus anda dan log in , kemudian masuk di Google Plus Pages


2. Setelah itu pilih kategori di sebelah kiri anda , klik " Product or Brand"

3. Kemudian masukan nama blog anda pada bagia kotak pertama , lalu kotak kedua isi dengan url blog anda.

4. Setelah itu anda bisa mengklik "Agree to the terms and click create"

kini anda sudah bisa mempunyai fan pages sendiri di google plus , mungkin panduan untuk google plus fan pages ini cukup sampai disini , untuk selanjutnya bisa di katakan mudah koq seperti biasa nya anda lakukan di fan pages di facebook anda , terima kasih..!

Perindah Blog Anda Menggunakan Rss Dan Social icons

cara baru menambahkan icon social di blog untuk tutorial blogger Dipostingan Tutorial blogger yang saya baru tulis ini karena sudah lama tidak ngeblog , kali ini saya akan memberikan sebuah tutorial blogger yang dapat membuat memperindah blog anda . nah .. disini post ini saya mempunyai sebuah satu set icon ya mungkin cukup menarik untuk di taruh di blog anda , fungsi dari sebuah icon ini dapat anda gunakan sebagai media untuk pengunjung agar dapat mengikuti anda di beberapa social platforms.
Seperti facebook , twitter , google plus dan rss anda . jika tertarik menggunakan ini , maka ikuti langkah berikut.

1. masuk ke akun blogger anda > design > add a gadget > pilih  html/javascript

cara tutorial blogger , memasukan icon baru


cara mudah memasukkan icon untuk seo dan tutorial blogger







2.Copy Paste kode dibawah ini kedalam html gadget yang anda buka tadi.

<a href="URL-Facebook anda" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-sT9lHle5N54/TqgOWhi-amI/AAAAAAAAFCU/MwoQL3ZhEy4/s1600/facebook-30x43.png" /></a><a href="URL-Twitter anda" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-eVZSNf1mj_E/TqgOX_ldq1I/AAAAAAAAFCk/2wDDaA8esG8/s1600/twitter-30x43.png" /></a><a href="URL UNTUK GOOGLE PLUS ANDA" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-icT9kVFhtOs/TqgOXLJCbBI/AAAAAAAAFCY/pU4wo8HyHNI/s1600/googleplus-30x43.png" /></a><a href="URL-UNTUK RSS FEEd Anda" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-ShqPVqX-vhs/TqgOXX5m9WI/AAAAAAAAFCg/WFRLxQ4yjuM/s1600/rss-30x43.png" /></a>

NOTE : Ganti tulisan berwarna merah itu dengan url yang social anda

3. lalu tekan save dan maka kini blog anda akan mempunyai sebuah icon yang cantik itu

Aku Kembali

aku kembali , tutorial blogger, seo Huft , apa kabar semua ?? lama gak ngeblog lagi nih gara" banyak urusan tugas kampus + punya kegiatan baru , hehe , kali ini mungkin saya akan cuman menulis sembarang aja deh. Sebelum itu saya mengucapkan mohon maaf lahir batin bagi semua blogger , ya mungkin udah telat sih >.< , ya namun gpp lah  .

 yA saya mengucapkan terima kasih banyak bagi teman blogger + pengunjung , walau udh gak selalu update masih banyak jg yang datang , meski gk seperti dulu lagi sih , hehe

 Mungkin saya mulai besok akan bisa lagi untuk kembali membuat artikel tentang seperti biasa , yaitu tutorial blogger , hehe .

ysdh lah mungkin sampai disini dulu artikel ini , oh ya mohon maaf sekali lagi kalau saya ada salah untuk teman semua.