klinik android indonesia

Tuesday, March 5, 2013

Membuat Widget Google Plus Cantik

Google Plus adalah salah satu social media yang hampir sama seperti Facebook,Twitter,Skype dan lainnya. Tetapi, Google+ memiliki kelebihan lain yang berbeda dengan jejaring sosial lainnya yaitu product dari search engine.

Google adalah search engine nomor 1 di dunia sekaligus menempati peringkat 1 di alexa rank. Product Google ini sangat banyak, mulai dari Google Adsense, Google Search, Google Adwords, Google Plus, Gmail, Google Analytics, Webmaster Google dan sebagainya. Dengan memasang widget button Google Plus di website / blog yang kita buat, maka akan memberikan dampak yang positif agar mendapat nilai lebih terhadap hasil pencarian.

Cara Membuat Widget Google Plus Cantik sebenarnya sangat mudah dan hanya mengikuti tools yang disediakan oleh google+. Salah satu hal penting dalam SEO khususnya Blogger adalah faktor Social Signals.
Social Signals merupakan sebuah lalu lintas pengiriman sinyal ke jejaring social meliputi retweet, like, status, mentions, shares, dan sebagainya yang dihubungkan ke blogger.

Keuntungan dari pemasangan Add Google+ Button ini adalah

Membuat artikel lebih terindex mesin pencari Google.
Dapat melakukan share ke banyak orang.
Memunculkan profile gambar pada hasil pencarian jika aktif dalam menggunakan products Google tersebut.
Memudahkan dalam meningkatkan prioritas sebuah konten yang unik.
Orang lain dapat menemukan dan terhubung dengan lingkaran anda melalui Blogger.

Cara Membuat Widget Google Plus Button :

1. Registrasi untuk membuat akun Google+

2. Login ke akun anda.

3. Buat sebuah halaman Google Plus, biasanya untuk pertama kali pendaftaran akan diarahkan untuk membuat halaman tersebut.

4. Buka Blog Anda di Browser dengan Tab baru.

5. Masuk ke Layout / Tata Letak / rancangan

6. Klik Tambah Gadget atau Widget dan sesuaikan posisi penempatannya.

7. Pilih HTML / Javascript.

8. Masukkan kode berikut ini :

<g:plus href="https://plus.google.com/114260774078734881680"></g:plus>

9. Ganti kode ID Google Plus dengan ID yang anda miliki.

10. Simpan widget yang anda buat.

Untuk mengetahui ID Google Plus Anda, Silahkan masuk ke Google Plus.

Klik Profile. Lihat di Address Bar bagian paling atas browser anda. Disana terlihat ID seperti script diatas.

Dengan membuat widget google plus, traffik akan segera meningkat dengan baik. Traffik tergantung seberapa besar aktivitas anda di social media tersebut. Semoga Cara Memasang Widget Google Plus Cantik ini dapat bermanfaat.

Monday, March 4, 2013

Cara Membuat Efek Gelap Terang Gambar dengan CSS

Sebagai salah satu kode bahasa yang sangat penting untuk pembuatan design sebuah website adalah CSS3. Dalam membuat efek pada gambar, gadget, box, area, menu dropdown, dan sebagainya merupakan contoh hasil penggunaan CSS.

Pada kesempatan kali ini, kita akan membahas mengenai Cara Membuat Efek Gelap terang dengan menggunakan CSS. Efek ini akan membuat gambar pada artikel kita apabila tersentuh oleh mouse maka akan menjadi gelap, begitu juga sebaliknya.

Membuat Efek Image Hover Gelap ke Terang :
1. Masuk ke bagian Tata Letak / Design Rancangan / Layout.
2. Add a Gadget / Widget.
3. Pilih HTML/Javascript
4. Copy kode ini dan letakkan di box area tersebut.

5. Simpan Widget Anda.

Untuk Membuat Efek Image Hover Terang ke Gelap :
Langkah memasangnya, sama seperti diatas hanya saja pada bagian tahap ke 4 gunakan kode berikut ini :

Sedangkan untuk anda yang ingin membuat sebuah elemen Kotak ( bingkai / kerangka ) menjadi Terang Gelap dapat mengcopy kode Box Hover ini dan letakkan di dalam Edit HTML anda sebelum kode ]]></b:skin> :

.mybox{
position:relative;
display:block;
width:200px;
max-height:400px;
background:#fff;
color:#000;
overflow:auto;
padding:20px 15px;
margin:20px 5px;
border:2px solid #777;
border-radius:6px;
opacity:0.2;
filter:alpha(opacity=20);
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.mybox:hover{
opacity:1.0;
filter:alpha(opacity=100);
}

Lalu berikan nama elemen div pada xHTML sesuai dengan nama CSS diatas yaitu mybox.

xHTML
<div class="mybox">
Letakkan teks, image atau yang lainnya di sini!</div>

xHTML dengan tag p
<p class="mybox">
Letakkan teks, image atau yang lainnya di sini!</p>

Contoh penggunaan HTML5 yang dipadukan dengan CSS3 tersebut :

<div class="mybox">
<a href="http://..../images/myphoto.jpg" title="photo profil"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtr_D9z_3GKPpnemXJAWLPoo20hJP8K3MMTcSb6S_z5Y1mD1f9_D_yZLy9Z4CD2_a0jOttBj1PQT1Nwd7vjW6guOjxs-4-jqSd7_vG8IqpHdGCXRhD05jXI45SOw12zD6F0uauK92tpw/s320/myphoto.jpg" width="250" height="150" style="float:left;margin:5px 8px 5px 0;padding:2px;border:3px solid #FF1000;border-radius:6px;" /></a>Contoh Pemasangan Box Cantik dengan Efek Hover , Gelap terang, Membesar Mengecil, Terbalik dan sebagainya</div>

Itulah tadi berbagai macam cara untuk membuat efek gelap terang pada box atau image. Semoga cara membuat dan memasang efek gelap terang tersebut dapat dilakukan dengan mudah.

Sunday, March 3, 2013

Cara Membuat Buku Tamu Tersembunyi

Guest Book atau yang lebih dikenal adalah Buku Tamu Chat Box adalah tempat untuk pengunjung yang sedang online memberikan daftar hadir di sebuah situs / blog. Komponen dari buku tamu adalah dengan memasukkan nama, email, dan message (pesan) kepada pemilik blog.

Buku Tamu ini sering dimanfaatkan untuk meletakkan url link menuju halaman website kita. Beragam Gadget dan Widget Guest Book tersedia di beberapa website yang menyediakan chat box menu secara gratis. Apabila anda belum memiliki guest book silahkan daftar terlebih dahulu di Shoutmix atau Cbox.

Disana anda hanya perlu melakukan pendaftaran dan melakukan optimisasi warna bukutamu, warna text, background dan sebagainya. Setelah anda melakukan personalisasi, copy kode HTML / Javascript yang diberikan.

Untuk menghemat ruang, guest book ini dapat disembunyikan di bagian scroll kiri kita. Jadi Buku Tamu tersebut tidak melayang di blog, tetapi akan dibuat auto hide dengan tombol click pada mouse. Berikut panduan pembuatan widget buku tamu tersebut.

Cara Membuat Buku Tamu Tersembunyi :
1. Masuk ke Blogger.com
2. Pilih Layout > Tambah Gadget / Widget
3. Klik HTML/Javascript
4. Masukkan kode di bawah ini ke dalam kotak box tersebut.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDXbT5qzSb27B2Yiy8cXRSVRXz-qsI26cG6v0tiUNXjd7cKvYswTlP4NrAq-SWj-eFbQFb9rN7iIc-cWyj6vsZv9saAeoU6f2rkDPoexpD2_0PUTHM_jOSlRZyzZcTxDNOpnG_E0ut61_/s1600/impoint.blogspot.com+bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<Letakkan disini kode Buku Tamu Anda>

<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: "Trebuchet MS",sans-serif;">Supported by <a href="http://sazuke-4rt.blogspot.com/2013/01/buku-tamu.html" target="_blank">Sasuke Blog</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

5. Ganti tulisan <Letakkan disini kode buku tamu anda> (berwarna merah) dengan kode Guestbook yang anda buat di Shoutmix atau Cbox.ws tadi.
6. Simpan Template.

Buku tamu tersebut sudah terpasang rapih dan lebih optimal di blog anda. Semoga dapat bermanfaat. Jika ada yang masih belum paham silahkan berkomentar. Anda juga dapat mengganti background gambar buku tamu tersebut pada kode berwarna biru diatas. Demikian artikel mengenai Cara Membuat Buku Tamu Tersembunyi.

Saturday, March 2, 2013

Mendapatkan Backlink Berkualitas .edu .gov ibp

Pada tahun 2013 ini banyak algorithma Google yang melakukan update. Domain seperti .edu dan .gov adalah salah satu yang dapat meningkatkan nilai dari situs Anda. Situs .Edu adalah sebuah situs pendidikan yang resmi dari berbagai belahan dunia. Sedangkan .Gov adalah situs pemerintahan untuk melengkapi data penilitian sebuah negara dan sebagainya.

Bukan sebuah rahasia, jika untuk mendapatkan backlink berkualitas tinggi dari situs pendidikan tersebut sangatlah susah. Selain kita harus cermat juga harus melakukan komentar yang sesuai dengan isi materi artikel yang dibahas.

Untuk mendapatkan backlink seperti commentluv, angella backlinks dan lainnya kita harus melakukan langkah pencarian google seperti berikut :
1. Buka Google.com
2. Ketik di kotak pencarian google
site:.edu inurl:tutorial seo friendly “leave a reply” “website”

Anda dapat mengganti tulisan .edu dengan .gov .
Ubah kata tutorial seo friendly dengan keyword blog anda.
3. Maka anda akan menemukan daftar situs tersebut yang dapat melakukan komentar dofollow.

Anda juga dapat memesan software IBP ( Ibusinesspromoter ) kepada saya. Silahkan kirim pesan di Halaman Contact Us SEO Optimization kami. Atau anda juga dapat menggunakan SEO Checklist dengan harga $8.99. Anda dapat melakukan pembelian dengan Paypal. Harga asli bisa di cek di iwebtools dan ibusinesspromoter tentu sangat mahal.

Memang untuk mendapatkan peringkat tinggi tidak di raih dengan gratis. Waktu yang anda pakai dengan mengirimkan backlink 1 persatu-satu ke blog orang lain juga merupakan sebuah harga tersendiri. Daftar backlink berkualitas lainnya yang memiliki PageRank 4 - Pagerank 7 dapat anda lihat di 50+ High PR Backlinks.

Semoga anda dapat mengikuti jejak saya yang dalam 2 bulan ini telah mendapatkan rangking alexa di angka 200ribu dan Rangking di Indonesia 1.200.
Dari hasil klasifikasi yang saya pernah lakukan ternyata yang paling sulit adalah mencari backlink dari blog .gov karena kebanyakan topik yang ada tentang politik dan pemerintahan negara. Namun tetap saja saya masih bisa mendapat beberapa topik yang sesuai dan meninggalkan komentar disana, jadi tetaplah terus berusaha dan tetap fokus. Terimakasih telah membaca artikel Cara Mendapatkan Backlink Berkualitas Pagerank Tinggi

About Us

Blog ini berisi tentang beraneka ragam informasi, diantaranya adalah tentang ilmu ngeblog, seo, gadget dan kesehatan. Kami sangat berharap blog ini dapat menambah manfaat bagi para pembaca semua, jadi saya sebagai admin tidak sia sia dalam menulis.

Bagi para pembaca yang ingin menyampaikan saran dan kritik dapat melalui form contact us di blog ini. Terimakasih.

Friday, March 1, 2013

Cara Membuat Auto Readmore dengan Gambar

Cara Membuat Auto Readmore dengan Gambar dapat dipasang dengan mudah. Cara memasang readmore ini adalah diletakkan di artikel pada halaman utama Anda. Fungsi read more / baca selengkapnya adalah untuk memotong / meringkas sebuah artikel dengan hanya menampilkan beberapa karakter text.

Selain mempersingkat kalimat yang ditampilkan pada sebuah artikel, read more otomatis akan bekerja secara automatic ke semua artikel posting yang kita buat. Langsung saja ke cara pembuatan dan pemasangan tools baca selengkapnya di blogspot.

Cara Memasang Auto Readmore dengan Gambar :
1. Login ke blogger.com
2. Pilih Template lalu Edit HTML,kemudian Tempatkan kursos mouse anda di dalam kotak pengeditan template.
3. Tekan CTRL+F, Muncul sebuah kotak lalu Cari kode </head> dan letakkan kode di bawah ini diatasnya.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[

/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)
{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;

if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

4. Lanjutkan dengan meletakkan kode di bawah ini diatas kode <data:post.body/> :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK7_1XBije_EUOwamMvsyygrz-opc1H6LUzzifsqfLkDAahfWGcUXsgethYLzQ1t6P3wkTf_NXFgNCJ7Cr5l-o8Low7yEwr7szyxZmeVUbEr1dCwJm_94_WX4AGz-Hp7MSnMPe4Llu6AxT/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

5. Save Template Anda.
- Anda dapat mengatur penyusunan jumlah karakter dalam readmore tersebut sesuai dengan yang anda inginkan. ( terletak pada kode warna merah ).
- Untuk mengubah background gambar anda dapat mengganti kode dengan warna biru.

Buat anda yang ingin menggunakan readmore yang lebih optimal dapat membaca di artikel Cara Membuat ReadMore Otomatis di Blog SEO Friendly . Terimakasih telah membaca panduan memasang auto read more ini.

Cara Membuat Readmore Otomatis di Blog

Seringkali kita melihat kata Readmore / Baca Selengkapnya pada setiap artikel di halaman home blog seseorang. Kegunaan Readmore adalah untuk memenggal kalimat yang ditampilkan pada halaman utama situs kita. Letak Readmore ini ditempatkan di sebuah artikel.

Fungsi dari pemasangan Readmore :

Menghemat Ruang pada tampilan halaman utama sebuah website.
Menjadi Lebih Elegant dan Interaktif.
Membuat pengunjung membaca artikel tersebut hingga selesai.
Menambah pageviews artikel yang dibaca oleh pengunjung.
Menambah Link Anchor terhadap keyword judul.

Hingga saat ini sudah banyak tersedia berbagai macam template dengan fitur auto readmore dan lainnya. Tetapi anda harus cermat dalam pemilihan readmore. Apabila anda menggunakan readmore dengan hanya menggunakan kata saja, anda tidak boleh memakai kata tersebut melainkan dengan menggunakan gambar.

Karena apabila pada setiap artikel yang anda potong menggunakan readmore dengan anchor yang sama, maka Google kurang menyukai halaman yang anda buat. Contohnya pada blog ini saya menggunakan kata read more tetapi kata tersebut adalah gambar. Jadi, secara otomatis tidak ada kata readmore di halaman blog saya.

Cara Membuat Readmore Otomatis di Blogger yang lebih berkualitas terhadap SEO :

1. Login ke Blogger > Template > Edit HTML.
Kemudian tempatkan kursor dibagian pengeditan template dan klik salah satu script, lalu tekan CTRL+F untuk melakukan pencarian.

2. Cari kode </head> , dan letakkan kode ini diatasnya :

var thumbnail_mode = "float" ;

summary_noimg = 250;

summary_img = 220;

img_thumb_height = 120;

img_thumb_width = 220;

</script>

//<![CDATA[

//]]>

</script>

3. Ganti kode <data:post.body/> ( yang pertama ) pada template anda, dengan kode berikut :

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

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

<span class='rmlink' style='float:left'><b>Baca Selengkapnya</b> → <a expr:href='data:post.url'><data:post.title/></a></span>

</b:if></b:if>

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

<data:post.body/>

</b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

4. Klik Pratinjau untuk melihat hasilnya. Jika sudah sesuai dan terpasang dengan benar klik Save Template.

Contoh hasil Auto Readmore :

Dengan memanfaatkan judul artikel, maka readmore tersebut dapat lebih terjaga kualitas kalimatnya di bandingkan hanya dengan memberikan 2 kata tersebut. Apabila anda ingin menggunakan readmore dengan gambar dapat mengikuti panduan berikutnya.

Untuk pemasangan readmore cara manual dapat menggunakan tools, insert jump break di dalam opsi posting artikel. Untuk sebagian template memang memiliki prmasalahan yang berbeda. Oleh karena itu, sebagai solusi silahkan coba Cara Membuat Readmore Otomatis dengan Gambar .

Demikian artikel mengenai Cara Membuat Auto Read More / Baca Selengkapnya pada artikel di blog anda. Wordpress, Website dan Blogger pemasangannya berbeda-beda. Baca artikel Cara Membuat SEO SMart Link di Blog.