Cara Membuat Follower Twitter Box

Salah satu car untuk mempromosikan blog yang kita kelola adalah dengan menyebarluaskan setiap konten blog kita ke berbagai jejaring social. Seperti twitter dan facebook, serta salah satu situs jejaring social yang dikelola oleh google yaitu google +.

Dengan memasang follower twitter box pada blogspot, maka kita telah menyediakan fasilitas kepada pengunjung, untuk bisa mengetahui setiap kita mempublikasikan konten baru. Dengan dipasangnya follower twitter box maka pengunjung blog kita bisa dengan mudah untuk mengikuti twitter kita.
Apabila ada yang mengikuti twitter kita, maka setiap update blog yang kita kelola akan langsung diketahuinya melalui twitter. Jadi hal ini adalah merupakan salah satu cara untuk mempromosikan blog kita pada orang lain.

Untuk dapat melakukan hal tersebut maka ikutilah langkah-langkah dibawah ini :

Login ke akun blogger

Tata letak > tambah gadget > HTML Javascript

Paste kode di bawah ini

Masukan <!-- Twitter Follower Box -->
<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 200px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("akun twitter anda");</script
type="text></div>
<!-- End Twitter Follower Box -->

Simpan gadget

Untuk tulisan yang berwarna merah, ganti dengan ID twitter anda.

Kalau kita menerapka tutorial diatas dengan benar maka sudah pasti akan terlihat perubahannya.

Oke sobat…..

Sekian dulu yang bisa saya persembahkan pada kesempatan kali ini semoga bermanfaat dan selamat mencoba.

Terima kasih telah singgah disini dan sampai jumpa pada tutorial berikutnya

Membuat Efek Zoom Gambar Blog

Yang dimaksud dengan efek zoom adalah efek pembesaran gambar yang ada pada konten blog, ketika cursor mouse di dekatkan pada gambar tersebut.

Dengan memsang efek zoom, maka tampilan blog kita akan lebih atraktif, dan dinamis.

Walaupun terkadang ketika rasio pembesaran tidak seimbang misalnya perubahan dari gambar asli dengan hasil zoom terlalu besar akan sedikit menimbulkan rasa kurang nyaman. Terlebih jika terdapat jumlah gambar dengan jumlah banyak dalam postingan blog dan disimpan berdampingan.

Jadi sebaiknya ubah rasio perbesaran gambar dengan bijaksana yang penting dapat membuat konten blog kita tampak atraktif dan menarik.

Sobat netter….

Untuk anda yang mau memasang efek zoom pada gambar blog silahkan anda lihat pada pemaparan berikut ini.

Login ke akun blog kita > Template > Edit HTML

Untuk sekedar berjaga-jaga sebaiknya kita backup dulu template blog kita agar dapat kita kembalikan ke semula apabila proses editing HTML tidak berjalan dengan benar.

carilah kode ]]></b:skin>

dan kemudian tempelkan kode berikut ini tepat diatasnya

.post img, table.tr-caption-container {border:none;max-width:560px;height:auto;-o-transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;}
.post img:hover {-o-transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transform: scale(1.5);-o-transform: scale(1.5);-webkit-transform: scale(1.5);-webkit-border-radius: 36px 12px;-moz-border-radius: 36px / 12px;-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);}

Selanjutnya silahkan preview dulu hasil editing kita, jika ternyta sudah tidak ada error maka kita simpan perubahan.

catatan : untuk angka 1.5 yang bertuliskan tebal dan ( berwarna merah ) ubah menurut kehendak anda. itu adalah skala perbesaran gambar yang terjadi.

Selesai dan blog anda skarang sudah bisa menampilkan efek zoom pada gambar konten blognya.

Oke sobat…………. rupanya cukup sekian dulu yang bisa saya persembahkan pada kesempatan ini.

Membuat Dua Kolom Pada Sidebar

Terkadang kita menemukan masalah ketika akan memasang widget blog dengan ukuran kecil, seperti widget alexa atau histats.

Dengan ukuran yang kecil dan dipasang pada sidebar yang cukup lebar akan kelihatan buang-buang lahan.

Salah satu solusinya adalah dengan membagi sidebar menjadi dua kolom tanpa mengganggu ukuran sidebar yang aslinya, hal ini karena kita hanyalah menambahkan kolom sidebar saja bukan mengganti ukuran secara keseluruhan.

Sobat netter... pada tutorial blogging kali ini ane akan coba membahas mengenai cara membuat dua kolom pada sidebar blogspot.

Oke sobat untuk membuat dua kolom pada sidebar dapat dilakukan dengan cara sebagai berikut :

1. Login ke akun blogger

2. Template > Edit HTML

3. Cari kode

#sidebar-wrapper{width:300px;float:$endSide;word-wrap:breakword;overflow:hidden}

Kalau lebar 300px maka lebar kedua kolom yang akan dibuat jangan melebihi 300 px.
Lalu tambahkan kode berikut ini dibawahnya :

#sidebar1-wrapper {width:140px;float:left;padding:5px;}
#sidebar2-wrapper {width:140px;float:right;padding:5px;}

4. Sehingga akan menjadi seperti dibawah ini :

#sidebar-wrapper{width:300px;float:$endSide;word-wrap:breakword;overflow:hidden}
#sidebar1-wrapper {width:140px;float:left;padding:5px;}
#sidebar2-wrapper {width:140px;float:right;padding:5px;}

5. Kemudian kita cari kode yang seperti ini

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" showaddelement="yes">
<b:widget id="HTML4" locked="false" title="" type="HTML">
<b:widget id="HTML1" locked="false" title="" type="HTML">
</b:widget></b:widget></b:section>....</div>

6. Paste kode dibawah ini tepat diatas </div>

<!-- tambah 2 buah sidebar -->
<b:section class='sidebar1' id='sidebar1' preferred='yes'/>
<b:section class='sidebar2' id='sidebar2' preferred='yes'/>
<!-- /tambah 2 buah sidebar -->

7. Maka akan tampak seperti dibawah ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>....

<!-- tambah 2 buah sidebar -->
<b:section class='sidebar1' id='sidebar1' preferred='yes'/>
<b:section class='sidebar2' id='sidebar2' preferred='yes'/>
<!-- /tambah 2 buah sidebar -->
</div>

8. Simpan template dan lihat perubahannya

Lakukan dengan teliti karena terkadang setiap template menggunakan istilah yang berbeda.

Jadi pada intinya kita mencari tahu berapa lebar sidebar yang tersedia pada blog kita, sehingga ketika kita berhasil menambahkan dua kolom kecil tersebut tidak melebihi batas yang ada.

Oke sobat…..
Sekian dulu postingan kali ini semoga bisa bermanfaat dan selamat mencoba.
Terima kasih atas kedatangnnya dan sampai jumpa pada tutorial selanjutnya

Cara Pasang Random Post Blogspot

Salah satu cara untuk meningkatkan pageview blog kita adalah dengan cara memasang random post pada halam blog yang kita kelola. Pada kolom random post akan tampil beberapa konten blog yang akan ditampilkan secara acak, meskipun konten blog tersebut bukan salah satu konten yang popular serta dipublikasikan pada waktu yang sudah lama.

Sobat netter…
Pada kesempatan ini saya akan membawakan tentang cara membuat random post pada blogspot. Atau biasa juga disebut artikel acak. Dengan memasang random post maka pada halaman blog kita akan di tampilkan beberapa artikel yang di ambil secara acak.

Hal ini sama fungsinya seperti memasang related post, Cuma konten blog yang ditampilkan tidak satu label atau kategori saja.

Oke sobat blogger berikut ini cara memasang widget random post pada blogspot
1. Login ke blogger
2. Tata letak > add gadget > html/javascript
3. Paste kode di bawah

<script type="text/javascript">
var acakarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;acakarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in acakarray){if(l==acakarray[j]){ flag=1;}}
if(flag==0&&l!=0){acakarray[i++]=l;}}document.write('<ul>');
for(n in acakarray){ var p=acakarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

4. Simpan perubahan dan lihat hasilnya

Oke sobat blogger jika kita melakukan panduan ini secara benar maka di blog kta akan terpasang stau buah gadget yang bernama random post.
Sekian dulu postingan kali ini semoga bermanfaat, dan selamat mencoba.
Terima kasih atas kunjungannya dan sampai jumpa pada tutorial berikutnya.

Cara Pasang Breadcrumb Seo Friendly

Breadcrumb menurut pandapat saya adalah sebuah menu navigasi yang terpasang diatas judul konten blog yang kita buat.
Dengan adanya breadcrumb pengunjung akan mudah mengetahui dimana letak konte blog yang sedang dia lihat, dan berada dalam kategori apa.

Seprti contoh ini  Home >> Tutotrial blogging >> blogspot >> cara pasang breadcrumb seo friendly

Seperti itu rupanya contoh jelasnya.

Kalau definisi secara tepatnya maaf saja saya kurang memahami ( intinya gak tahu sob )
Dengan memasang breadcrumb, dan menurut para master seo, dengan memasang breadcrumb, blog kita bisa lebih seo friendly. Sehingga semua konten blog kita akan cepat terindex mesin pencari

Sobat netter…. berikut ini adalah cara pasang breadcrumb pada blogspot.

Login ke blogger > pilih Template > Edit HTML

Cari kode seperti ini

<b:if cond='data:post.title'>

kemudian copy kode dibawah dan pastekan tepat setelah kode

<b:if cond='data:post.title'>

Inilah kode yang akan di pasang

<b:if cond='data:blog.pageType == "item"'>
    <a href='http://alamatbloganda.blogspot.com/'>Home</a> &#187;
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
    &#187;
    </b:if>
    <data:post.title/>
    </b:if>

Simpan template
Tulisan berwarna hijau tebal alamatbloganda.blogspot.com ganti dengan alamat blog milik sobat.

Nah sobat netter……. itulah tata cara pasang breadcrumb pada blogspot. Saya kira cukup mudah dan simple.

Oke sobat rupanya cukup sekian dulu yang bisa saya persembahkan pada kesempatan ini, semoga bisa bermanfaat, dan selamat mencoba.

Terima kasih atas kunjungannya dan sampai jumpa pada tutorial selanjutnya

Cara Memasang Widget Pada Blogspot

Gadget blog atau biasa disebut juga widget blog. Bisa menambah nilai lebih jika dipasang pada posisi yang tepat dan. Tapi sayangnya semakin banyak widget blog yang dipasang akan menambah beban loading blog ketika dikunjungi.
Oleh karena itu kalau kita akan memasang widget blog sebaiknya pilih yang benar-benar dibutuhkan dan hindari pemasangan widget yang berlebihan.

Widget blog yang akan dipasang ada yang langsung di sediakan oleh blogger dalam menu pilihannya, ada pula yang dipasang dengan menggunakan kode javascript yang untuk mendapatkannya kita harus mencari ditempat lain.
Selain itu pemasangan widget juga harus tepat agar tidak merusak pemandangan dan juga bisa mempermudah mengelola dan mengatur tata letak halaman blog.
Oke sobat berikut ini beberapa langkah memasang widget pada blog yang menggunakan javascript dan juga widget yang telah tersedia

1. Login ke blogger

2. Pilih Tata Letak

3. Pilihlah beberapa gadget yang telah disediakan oleh blogger, atau kalau kita mau memasang widget dengan kode javascript buatan kita sendiri maka carilah HTML/Javascript

4. Paste kode script widget, berilah judul pada kolom yang disediakan ( kosong juga gak apa-apa )

5. Simpan perubahan

6. Lihat hasilnya

Saya rasa cukup mudah untuk kita lakukan. Gak pelu pintar ngeblog dulu kalau hanya untuk sekedar pasang widget pada blog, karena saking mudahnya bisa dilakkan oleh pemula sekalipun.

Oke sobat… cukup sekian dulu yang bisa saya persembahkan, semoga bisa bermanfaat dan selamat mencoba.

Cara Membuat Blog Pada Blogspot

Untuk menjadi seorang blogger tentu saja kita harus memiliki sebuah blog yang akan kita kelola. Seperti pada postingan saya sebelumnya bahwa sebelum kita memulai ngeblog maka kita harus menentukan dulu hosting yang akan kita gunakan dan dimana kita akan membuat blog.

Pada kesempatan ini saya akan memberikan pemaparan mengenai cara membuat blog di blogspot atau blogger

Sobat netter untuk dapat membuat blog pada blogspot dapat dilakukan dengan cara sebagai berikut
1. Buatlah sebuah akun gmail terlebih dahulu.

2. Masuk www.blogspot.com dengan menggunakan alamat email yang sudah kita buat sebelumnya

3. Buatlah nama tampilan kita sebagai admin blog contohnya Miss Jabrik sebagai admin blog ini, > lanjut ke proses selanjutnya

4. Ciptakan blog anda > masukkan Nama Blog Anda > masukkan url blog > lanjut ke proses selanjutnya

5. Pilih template blogger yang sesuai dengan keinginan kita > lanjut ke proses selanjutnya

6. selesai

mudah bukan hanya dengan beberapa langkah saja blog kita sudah tercipta. Setelah apa yang kita perbuat maka kita harus bertanggung jawab untuk mengelola blog kita agar tumbuh menjadi besar dan terkanal.

Oke sobat cukup sekian dulu pemaparan singkat mengenai cara membuat blog pada blogspot.
Semoga bisa membantu dan selamat mencoba. Terima kasih dan sampai jumpa di artikel yang lain.