Cara menambahkan tombol Share Twitter, Facebook dan Google + pada blog

Cara menambahkan tombol Share Twitter, Facebook dan Google + pada blog-  bagi para sobat blogger, Button Share adalah element yang paling penting dan harus ada dalam setiap posting mereka. karena tombol Share ini adalah sebuah tombol yang dimana dapat mempermudah pembaca untuk membagikan artikel bermanfaat kepada teman-teman di beberapa jejaring sosial. untuk sementara ini, ada sekitar tiga situs jejaring sosial yang paling ramai dan banyak digunakan oleh kebanyakan orang didunia, jejaring sosial tersebut antara lain Facebok, Twitter, dan Google +. dengan menambahkan tombol share atau button share ini, kemungkinan besar akan meningkatkan jumlah pengunjung atau visitor ke blog sobat, jan tentunya akan meningkatkan jumlah traffict blog sobat, sehingga blog sobat akan semakin populer. jika sobat tertarik untuk memasang button share ini, mari kita belajar cara membuatnya, silahkan simak baik-baik.

Cara menambahkan tombol Share Twitter, Facebook dan Google + pada blog

• Langkah awal, silahkan sobat login ke akun blogger sobat masing-masing.
• Langkah kedua, silahkan pilih menu template.
• pilih Edit Html dan jangan lupa beri tanda centang pada Expand template widget.
• setelah itu silahkan sobat cari kode <div class='post-footer'>
• Jika Sudah ketemu, silahkan taruh kode berikut dibawahnya

<!-- Button Share BEGIN --><div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' style='float:right;padding:0px;'><a class='addthis_button_facebook_like' fb:like:layout='button_count'/><a class='addthis_button_tweet' tw:related='Widikira' tw:via='Widikira'/><a class='addthis_button_google_plusone' g:plusone:size='medium'/> </div><script src='//s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/><!-- Button Share END -->

Keterangan : 

1. Tulisan yang berwarna merah adalah posisi tombol share tersebut, jika sobat ingun menempatkanya disebelah kiri, maka ganti tulisan tersebut menjadi left
2. Tulisan yang berwarna kuning, silahkan sobat ganti dengan akun Twitter sobat masing-masing.

• Jika Sudah selesai, silahkan sobat simpan template blog sobat dan lihat hasilnya.

demikian sedikit tips Cara menambahkan tombol Share Twitter, Facebook dan Google + pada blog, semoga bermanfaat dan terimakasih sudah berkenan mampir. jika ada pertanyaan mengenai artikel Cara menambahkan tombol Share Twitter, Facebook dan Google + pada blog, silahkan sobat tinggalkan komentar dibawah ini. terimakasih.

Salam hangat

LHK-Blogs

Continue Reading

Cara Membuat Efek Gelembung Pada Blog

Cara Membuat Efek Gelembung Pada Blog- Setelah dulu saya pernah Membuat artikel tentang cara membuat Mouse bertabur bintang pada blog, kini saya akan berbagi tentang cara membuat Efek Gelembung pada blog. cara kerjanya pun hampir sama dengan efek mouse bertabur bintang,namun kali mouse anda akan mengeleluarkan gelembung-gelembung yang semakin lama semakin membesar ukuranya dan melayang naik ke atas. tentu saja dengan efek tersebut akan membuat blog sobat terlihat semakin menarik dan unik, agar pengunjung blog sobat semakin betah singgah di blog sobat yang penuh dengan efek yang sangat unik dan menarik tersebut. nah saya rasa saya tidak perlu ngomong panjang lebar lagi, danlangsung saja berikut caranya :

Cara Membuat Efek Gelembung Pada Blog

• Langkah pertama, login ke akun blogger sobat.
• langkah kedua, pada dashboard blogger sobat, silahkan pilih menu Layout atau tata letak
• pilih Html/Javascript
• Selanjutnya masukan kode berikut kedalamnya :

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
    // <![CDATA[
    var colours=new Array("#CE0FC7", "#CE0FC7", "#CE0FC7", "#CE0FC7", "#CE0FC7"); // colours for top, right, bottom and left borders and background of bubbles
    var bubbles=100; // maximum number of bubbles on screen
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var bubb=new Array();
    var bubbx=new Array();
    var bubby=new Array();
    var bubbs=new Array();
    window.onload=function() { if (document.getElementById) {
    var rats, div;
    for (var i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");
    rats.style.visibility="hidden";
    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="1px";
    div.left="0px";
    div.bottom="1px";
    div.right="0px";
    div.borderLeft="1px solid "+colours[3];
    div.borderRight="1px solid "+colours[1];
    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="0px";
    div.left="1px";
    div.right="1px";
    div.bottom="0px"
    div.borderTop="1px solid "+colours[0];
    div.borderBottom="1px solid "+colours[2];
    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.left="1px";
    div.right="1px";
    div.bottom="1px";
    div.top="1px";
    div.backgroundColor=colours[4];
    div.opacity=0.5;
    if (document.all) div.filter="alpha(opacity=50)";
    document.body.appendChild(rats);
    bubb[i]=rats.style;
    }
    set_scroll();
    set_width();
    bubble();
    }}
    function bubble() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<bubbles; c++) if (!bubby[c]) {
    bubb[c].left=(bubbx[c]=x)+"px";
    bubb[c].top=(bubby[c]=y)+"px";
    bubb[c].width="3px";
    bubb[c].height="3px"
    bubb[c].visibility="visible";
    bubbs[c]=3;
    break;
    }
    }
    for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
    setTimeout("bubble()", 40);
    }
    function update_bubb(i) {
    if (bubby[i]) {
    bubby[i]-=bubbs[i]/2+i%2;
    bubbx[i]+=(i%5-2)/5;
    if (bubby[i]>sdown && bubbx[i]>0) {
    if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
    bubb[i].width=bubbs[i]+"px";
    bubb[i].height=bubbs[i]+"px";
    }
    bubb[i].top=bubby[i]+"px";
    bubb[i].left=bubbx[i]+"px";
    }
    else {
    bubb[i].visibility="hidden";
    bubby[i]=0;
    return;
    }
    }
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sleft;
    x=(e)?e.pageX:event.x+sdown; }
    window.onresize=set_width;
    function set_width() {
    if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    else {
    swide=800;
    shigh=600;
    }
    }
    window.onscroll=set_scroll;
    function set_scroll() {
    if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
    }
    else {
    sdown=0;
    sleft=0;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height;
    div.style.width=width;
    div.style.overflow="hidden";
    return (div);
    }
    // ]]>
    </script>

Keterangan :  Kode yang saya tandai dengan warna hijau adalah kode warna dari gelembung tersebut. jika sobat menginkan warna lain, sobat bisa menggantinya dengan kode warna sesuka sobat.

• Jika sudah selesai, silahkan save dan lihat betapa cantiknya blog sobat dengan efek gelembung yang sangat unik dan menarik. hehehe

demikian yang bisa saya share pada sobat kali ini, jika ada pertanyaan mengenai cara membuat efek gelembung pada blog, silahkan tinggalkan komentar dibawah ini, terimakasih semoga bermanfaat.

Continue Reading

cara memasang iklan didalam postingan

cara memasang iklan didalam postingan - Setelah beberapa hari tidak menulis artikel dikarenakan kesibukan di dunia nyata, kini akhirnya saya punya kesempatan untuk posting di dunia maya, hehehe. nah dalam posting kali ini saya akan membahas tentang cara memasang iklan didalam postingan. Bagi sobat yang kebetulan sudah mendaftar di PPC dan sudah di Approved, tidak ada salahnya mencoba artikel ini, karena disamping menghemat tempat sidebar, Memasang iklan didalam posting blog juga berpotensi mendapatkan banyak respon juga dari pembaca, karna yang dituju oleh pengunjung blog adalah dibagian posting ini, namun jangan lupa, isi konten postingan sobat harus tetap diutamakan, maksudnya jangan terlalu banyak menaruh iklan pada postingan.

cara memasang iklan didalam postingan

• Silahkan sobat Login ke akun Blogger sobat
• Pilih menu Template
• pilih Edit Html  dan beri tanda centang pada Expand template Widget
• Selanjutnya silahkan sobat cari kode <data:post.body/>
• Lalu tambahkan kode berikut tepat dibawah kode <data:post.body/> tadi.

<div style='float: left;'>Letak Kode Iklan Disini</div>

Keterangan : 

1. Pada masing-masing template terdapat kode yang masing-masing berbeda. jika sobat menemukan kode  <data:post.body/> lebih dari satu, silahkan sobat gunakan kode  <data:post.body/> yang kedua, jika belum berhasil juga, berarti yang benar pada nomer tiga. (maaf bukanya artikel ini kurang akurat atau kurang profesional, tapi memang pada masing-masing template memiliki kode yang berbeda-beda)
2. Untuk tulisan yang saya beri warna hijau adalah letak iklan yang akan sobat pasang, "left" artinya iklan akan berada dibagian kiri, jikan sobat ingin menempatkan iklan pada bagian kanan, silahkan sobat ganti tulisan "left" dengan "Right"
3. Untuk iklan yang akan sobat pasang, kodenya harus di Parshe terlebih dahulu, sobat bisa malakukanya DISINI

• Jika sudah selesai, silahkan simpan template sobat, dan lihat hasilnya.

Demikian Sedikit tips yang bisa saya share kali ini, Jika ada pertanyaan mengenai cara memasang iklan didalam postingan, silahkan tinggalkan komentar dibawah ini. terimakasih dan semoga bermanfaat.

Continue Reading

Cara Meratakan Tulisan Pada Posting Blog

Cara Meratakan Tulisan Pada Posting Blog-Bukan hanya Pengaturan tata letak sidebar, Header atau Penempatan Widget lain Yang Membuat Blog kita terlihat Rapi. tetapi juga termasuk bagaimana cara kita untuk mengatur Posisi Teks atau tulisan pada Posting kita. Karna selain dari Artikel yang menarik, tampilan blog kita juga berpengaruh terhadap kenyamanan pengunjung. Jika pengaturan Widget, tata letak blog dan juga Tampilan Teks posting kita berantakan , kemungkinan pengunjung blog juga akan malas dan tidak betah berlama-lama singgah di blog kita, hal ini seperti kasus yang pernah saya alami beberapa hari yang lalu, yaitu tulisan atau teks pada postingan yang Berantakan.Namun setelah saya cari solusinya akhirnya saya menemukan solusinya. nah disini saya akan berbagi kepada sobat, Bagaimana Cara Meratakan Tulisan Pada Posting Blog yang asalnya berantakan, menjari tulisan yang rapi dan terstruktur rapi.

Cara Meratakan Tulisan Pada Posting Blog

• Login ke akun Blogger Sobat
• Masuk Menu Template
• Pilih Edit Html jangan lupa centang Expand template Widget
• Selanjutnya Silahkan ca kode Berikut

"#content-wrapper {text-align: left;"

 Jika Sudah ketemu, Silahkan Sobat ganti Tulisan " Left " Menjadi Justify
Contoh :

#content-wrapper {text-align: Justify;

• Jika sudah selesai, Silahkan Sobat Lihat dulu Previewnya sebelum sobat menerapkanya. agar aman.
• Jika hasilnya sudah terlihat bagus, Silahkan Sobat Simpan Templatenya.
• Selesai

Berikut Hasilnya :

Demikian sedikit Tips yang bisa saya Bagi kepada Sobat, Jika ada pertanyaan mengenai Artikel tentang  Cara Meratakan Tulisan Pada Posting Blog, Silahkan Sobat tinggalkan Pertanyaan sobat pada kolom komentar dibawah ini. Terimakasih dan Semoga bermanfaat.

Continue Reading

Cara memunculkan Widget hanya pada halaman posting

Sering kali saat kita ingin memasang Beberapa widget yang bagi kita adalah widget yang penting dan harus ada pada blog kita, namun template kita sudah penuh dan tidak mampu lagi menampung widget tersebut. Sobat tidak perlu hawatir akan hal itu, karena disini saya punya solusi yang mungkin bisa membantu para sobat blogger yang sedang kebingungan karena masalah tersebut. Disini saya akan membahas cara mengatur agar Widget yang sobat pasang, hanya akan muncul pada halaman posting saja, jadi tidak memenuhi space pada Home Page Blog sobat. Jika sobat tertarik dengan Solusi yang akan saya berikan, silahkan sobat simak ya, Berikut caranya....

Cara memunculkan Widget hanya pada halaman posting

• Pertama-tama, silahkan Login ke Dashboard Blogger sobat
• kedua, Masuk menu Template
• Pilih edit Html (beri tanda centang pada Expand template widget)
• Silahkan cari kode untuk widget yang akan sobat tampilkan hanya pada posting 
• Kemudian, Silahkan Sobat Copy kode berikut 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

• Paste dibawah kode  <b:includable id='main'>
• Selanjutnya Copy kode berikut 

</b:if>

• dan taruh dibawah kode  <b:include name='quickedit'/>
• Mudah kan ? Kalau sobat merasa bingung, Silahkan lihat Contoh berikut :

<b:widget id='HTML6' locked='false' title='Teknologi' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

Keterangan :  Contoh tersebut adalah kode Html untuk widget yang menampilkan Postingan dengan Widget ID "HTML6" yang menggunakan Judul "Tekhnologi"
Sedangkan kode yang saya beri warna Orange adalah kode yang saya sisipkan, agar widget tersebut hanya tampil pada halaman posting saja.

Nah dengan begitu, sobat bisa menghemat tempat pada halam homepage sobat, agar template blogger sobat tidah terlihat Semrawut atau berantakan.
Oke, Demikian Sedikit artikel yang bisa saya bagikan pada sobat blogger. Juka sobat memuliki unek-unek, pertanyaan, krituk atau saran mengenai Artikel Cara memunculkan Widget hanya pada halaman posting, sobat bisa menghubungi saya melalui halaman Contact Me, atau bisa juga menunggalkan komentar dibawah postingan ini. Terimakasih dan Semoga bermanfaat.

Continue Reading

Cara membuat Judul Posting berjalan

Selamat Pagi sobat yang baik hati ! Dihari Minggu yang cerah ini saya akan mengajak sobat untuk belajar tentang cara membuat Judul Posting berjalan. tentu sobat sudah tau kan yang saya maksud? buat sobat blogger pemula sebaiknya saya jelaskan dulu sedikit hehehe.... (Maaf bukan bermaksud macam-macam, kita semua disini kan belajar)
Yang saya maksud dengan judul posting berjalan disini adalah, tulisan pada bagian atas browser kita saat kita membuka halaman blog kita. sebenarnya yang masih asli bawaan dari blogger tulisan tersebut akan menampilkan nama dari halaman kita atau nama posting yang kita gunakan. namun bagi sobat yang ingin merubahnya dengan yang lebihkeren, saya disini punya sedikit cara intuk merubahnya. bagi sobat yang berminat, sekarang kita coba belajar sama-sama yuk... silahkan simak ya.

Cara membuat Judul Posting berjalan

• Pertama, silahkan login ke akun blogger sobat.
• kedua, masuk ke menu Template
• Ketiga, Pilih Edit Html  jangan lupa beri tanda centang di Expand template widget
• Langkah keempat, silahkan sobat cari kode <head>
• Ke Lima, Silahkan taruh kode berikut Tepat diatas kode <head> tadi.

<script type="text/javascript">
//<![CDATA[
var message = new Array() // leave this as is
message[0] = "Selamat datang sob !";
message[1] = " ini adalah blog milik mas widi";
message[2] = "yang berisi tentang tips Blog";
message[3] = "Silahkan cari artikel yang sobat perlukan";
message[4] = "jangan lupa Share ke temen juga ya";
message[5] = "jangan lupa komentarnya juga!!";
var reps = 2
var speed = 50
var p=message.length;
var T="";
var C=0;
var mC=0;
var s=0;
var sT=null;
if(reps<1)reps=1;
function doTheThing(){
T=message[mC];
A();}
function A(){
s++
if(s>9){s=1}
if(s==1){document.title='[W====] '+T+' [====W]'}
if(s==2){document.title='[=I===] '+T+' [===I=]'}
if(s==3){document.title='[==D==] '+T+' [==D==]'}
if(s==4){document.title='[===I=] '+T+' [=I===]'}
if(s==5){document.title='[====>] '+T+' [<====]'}
if(s==6){document.title='[===I=] '+T+' [=I===]'}
if(s==7){document.title='[==D==] '+T+' [==D==]'}
if(s==8){document.title='[=I===] '+T+' [===I=]'}
if(s==9){document.title='[W====] '+T+' [====W]'}
if(C<(8*reps)){
sT=setTimeout("A()",speed);
C++
}else{
C=0;
s=0;
mC++
if(mC>p-1)mC=0;
sT=null;
doTheThing();}}
doTheThing();
//]]>
</script>

Keterangan : 
Silahkan ganti tulisan yang saya tandai dengan warna merah dengan tulisan sobat masing-masing.
Angka 50 yang saya beri warna merah adalah kecepatan berjalan dari tulisan tersebut, sobat bisa menggantinya sesuai dengan selera sobat masing-masing.

• Jika sudah selesai, silahkan Simpan Template sobat, dan lihat hasilnya.

Nah.... bagaimana ? mudah kan ? Demikian sedikit cara yang bisa saya share kepada sobat, Jika ada pertanyaan mengenai Cara membuat Judul Posting berjalan, silahkan tinggalkan komentar dibawah ini. Sekian dari saya, Terimakasih dan Semoga bermanfaat.

Continue Reading

Cara menambahkan element pada header blog

Pada saat kita melakukan Editing blog pada blogger, kita bisa semau kita menambahkan element berapapun banyaknya di bagian sidebar, namun terkadang saat ingin menambahkan element baru pada bagian header, sering kali kita mengalami kesulitan. padahal di area header ini, sangat bagus untuk ditambahkan element yang menurut kita sangat menarik, misalnya seperti banner iklan atau widger lainya. Tapi sobat blogger tidak perlu hawatir, karena disini saya punya solusi Cara emanbahkan element pada header blog, berikut caranya, silahkan disimak baik-baik.

Cara emanbahkan element pada header blog

• Pertama, Login le akun Blogger
• pada halaman Dashboard tersebut, kita pilih Menu Template
• Setelah itu pilih Edit Html
• beri tanda centang pada Expand template widget
• Kalau sudah, silahkan cari kode ini :

Continue Reading

Cara Menambahkan Tombol Share dari Blogger

Tak puas rasanya ketika kita menemukan sebuah artikel yang sangat menarik untuk dibaca atau dipelajari, namun ketika kita ingin membagikanya kepada teman yang sama-sama membutuhkanya tetapi dalam blog yang memuat artikel tersebut tidak ada tombol yang digunakan untuk sharing ke berbagai jejaring sosial.
Saat ini Blogger sendiri sudah menyediakan Fitur sharing tersebut, namun harus menyesuaikan dengan jenis template bawaan. jika kita menggunakan template lain entah dari hasil download atau membuat sendiri dengan bantuan software lain, kemungkinan kita tidak dapat menikmati fitur ini. Tapi Sobat blogger tidak perlu hawatir, karena disini saya punya solusinya buat sobat yang tidak menggunakan template standart.
Berikut cara membuat Tombol Share ke berbagai Jejaring Sosial, Silahkan simak cara berikut.

Continue Reading

Cara menampilkan Bintang pada pencarian Google

Tentunya sobat sudah pernah menemui saat browsing di google search engine dan menemukan blog yang tampil dengan Rating bintang berwarna kuning pada pencarian tersebut. itulah yang saya maksud disini. Rating bintang berwarna kuning tersebut seakan sebagai tanda bahwa blog yang memiliki bintang terbanyak tersebut adalah blog yang sering dikunjungi atau blog yang sudah populer dengan banyak pengunjung. Tentunya sobat blogger juga menginginkan blog hasil kreasinya menjadi blog yang populer dengan rating bintang yang banyak, sehingga terlihat seperti blog yang sangat populer. nah disini saya menyediakan sedikit tutorial yang akan membantu sobat blogger untuk menampilkan Bintang pada blog anda di Pencarian Google, Namun sebelumnya perlu diingat, Sobat harus punya akun Google Plus terlebih dahulu untuk menampilkan Foto sobat sebagai avatar, Pastinya sobat juga sudah punya kan? kalau sobat sudah punya, Berikut cara lengkapnya, Silahkan Simak ya.

Continue Reading