Tips Blog | Tutorial Blog | Belajar Blog

Google Plus Situs Jejaring Sosial Terbaru

google-plus Saat ini dunia komunikasi semakin canggih dan komunikatif, hampir semua informasi dan gadget bisa kita dapat dengan mudah di internet. Dan orang-orang hebat pengembang situs jejaring sosial pun mulai mengembangkan fitur-fitur pada situs mereka, bahkan sampai saling sikut katanya sudah biasa demi kemajuan dan keperkasaan situs yang mereka kelola. Apalagi kalau bukan karena nama agar dunia lebih menghormatinya.

 

Konon kehadiran Google plus menjadi ancaman serius bagi situs-situs jejaring sosial lainnya, khusunya Facebook yang sampai saat ini masih merajai dunia jejaring sosial walaupun beberapa waktu yang lalu Twitter masuk ke dunia maya, tetapi Facebook masih menjadi situs jejaring dengan pengguna terbanyak.

 

Kembali ke Google Plus atau yang biasa disebut �G plus�, oleh Larry Page (CEO of Google) diklaim akan menjadi situs jejaring sosial terbesar dan terlengkap fitur-fiturnya. Untuk itu, silahkan sobat sendiri yang menilai ketika masuk dan bermain di G Plus. Karena menurut saya, nilai plus minus pasti ada tergantung penggunanya. Mirip dengan Facebook, tampilan juga tidak terlalu jauh berbeda, mungkin beberapa fitur unggulan G Plus yang sedikit menambah nilai plus.

 

Beberapa fitur tersebut antara lain :

  1. Circle : Ketika sobat masuk, sobat bisa mengelompokkan teman berdasarkan kategori sobat, misal teman nongkrong di lingkaran satu, keluarga di lingkaran dua dan teman kerja di lingkaran tiga, dst.
  2. Hangout : memungkinkan sobat untuk bertatap muka langsung melalui chat online atau webcam chat, sobat juga dapat mengatur untuk berbicara dengan beberapa orang sekaligus.
  3. Sparks : disini sobat dapat mengambil video atau artikel berdasarkan minat sobat, dan bisa menyimpannya sebagai favorit di profil sobat. 

Saat ini, Google Plus masih terbatas pada pengguna akun Gmail saja, karena Google Plus masih dalam tahap pengembangan. Jadi untuk pengguna email lainnya, harap bersabar.

Google Update Pagerank

image Hari ini google update pagerank, kira-kira seperti itu yang saya lihat ketika beberapa blog saya mengalami perubahan angka pada pagerank. Seperti biasa google update pada saat yang tidak di duga-duga, dan memang belakangan google sudah tidak teratur dalam melakukan update pagerank. Ada suka ada duka, buat yang PR nya turun jangan kecewa, semoga di update berikut bisa naik lagi dan buat yang naik jangan terlalu besar hati, karena pagerank memang bukan satu-satunya tolak ukur kesuksesan sebuah blog/web, masih banyak tolak ukur untuk menilai kesuksesan sebuah blog.

 

Beberapa blog saya juga ada yang turun termasuk blog ini, namun ada juga yang bisa membuat saya senang karena www.mybloggerthemes.com akhirnya bisa naik kelas. Semoga sukses buat semua yang naik peringkat, dan buat yang turun jangan kecewa. Tetaplah menulis dengan gayamu dan jangan pernah melakukan copy paste, karena itu akan sangat buruk di mata google.

Membuat Label Dengan Thumbnail Hover

label_thumbnail Label yang selama ini sering kita jumpai bentuknya hanya berupa tulisan saja, itupun sudah ada dalam fasilitas menu di blogger. Bagaimana jika mengganti label dengan thumbnail atau gambar dari postingan? caranya sangat mudah, hanya manambahkan sedikit kode css dan javascript maka label dengan thumbnail akan menghiasi blog sobat. Kali ini saya coba berikan tutorial blog tentang label dengan thumbnail hover.

 

Penulisan label juga harus sesuai dengan yang ada di blog sobat, seperti besar kecilnya huruf juga sangat memperangaruhi. Untuk memulainya, ada baiknya sobat backup terlebih dahulu templatenya dengan masuk ke Rancangan �> Edit HTML �> Download Template Lengkap.

 

  1. Tambahkan kode css berikut diatas / sebelum kode ]]></b:skin>

    img.label_thumb {

    float:left;

    padding:3px;

    background:#CCC;

    border:1px solid #A4A4A4;

    width:100px;

    height:75px;

    margin-right:10px;

    margin-top:10px }

     
    img.label_thumb:hover {

    opacity:0.8;

    filter:alpha(opacity=80);

    -moz-opacity:0.80;

    -khtml-opacity:0.8 }

  2. Kemudian tambahkan kode script berikut dibawah / setelah kode ]]></b:skin>

    <script type='text/javascript'>
    //<![CDATA[
    function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
    var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
    else thumburl='';}
    document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
    if(i!=(numposts-1))
    document.write('');}
    document.write('</div>');}
    //]]>
    </script>

  3. Simpan Template.
  4. Masuk ke Elemen Laman �> Tata Letak
  5. Pilih salah satu gadget yang ingin sobat masukkan label, kemudian klik Tambah Gadget dan pilih yang HTML/Javascript.
  6. Kemudian masukkan kode berikut kedalamnya :

    <script type='text/javascript'>var numposts = 6;</script>
    <script type="text/javascript" src="/feeds/posts/default/-/Magazine?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

 

Keterangan :

  • Tulisan yang berwarna hijau adalah lebar dan tinggi thumbnail, sobat bisa sesuaikan dengan lebar widget template sobat.
  • Tulisan yang berwarna biru untuk jumlah label yang akan di tampilkan.
  • Dan tulisan yang berwarna merah untuk label yang akan sobat tampilkan, jangan sampai salah menulis labelnya, besar kecilnya huruf juga sangat mempengaruhi.

Sekian saja tips dari saya, semoga bermanfaat.

Menambahkan Elemen Baru di Bawah Header

Pertama-tama, sebelum kita mempelajari lebih jauh tentang menambahkan elemen baru di bawah header, kita harus tahu dulu apa sih header itu? Header adalah informasi awal atau data yang berguna untuk kategorisasi atau transmisi tujuan utama sebuah blog. Header merupakan unsur yang paling penting dalam sebuah template karena setiap pengunjung yang datang ke blog Anda pertama kali yang dilihat adalah headernya. Contohnya bisa sobat lihat pada gambar berikut ini ...
elemenheader

Untuk membuat kolom baru tidaklah sesulit yang anda bayangkan, anda hanya cukup menambahkan sedikit kode css serta HTML kedalam kode template anda. Mau tahu caranya? silahkan ikuti langkah berikut :

  1. Login ke blogger dengan ID anda.
  2. Klik Rancangan.
  3. Klik tab Edit HTML.
  4. Klik Tulisan Download Template Lengkap (baca: Cara Backup Templates) untuk berjaga-jaga.
  5. Copy kode berikut, lalu paste di atas kode ]]></b:skin>

    %23under_header%7B%0Amargin%3A10px%200%3B%0Apadding%3A1%25%3B%0Awidth%3A98%25%3B%0A%7D
  6. Cari kode yang mirip dengan kode di bawah ini :

    <div id='header-wrapper'> 
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
        </div>
  7. Copy kode berikut lalu paste persis di bawah kode tadi :

    %23under_header%7B%0Amargin%3A10px%200%3B%0Apadding%3A1%25%3B%0Awidth%3A98%25%3B%0A%7D
  8. Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda tersimpan.
  9. Klik tab Elemen Halaman. dan struktur layout anda akan menjadi seperti ini.

    kolom-header
  10. Sekarang sobat sudah mempunyai elemen yang langsung persis di bawah header, silahkan tambahkan elemen yang  inginkan.
  11. Selesai.

Kode-kode di atas Saya encrypt. Walaupun sedikit membingungkan dan aneh di mata sobat tetapi tetap berhasil jika dicoba. Silahkan dicoba ...

Modifikasi Followers

followers Sudah hampir sebulan saya tidak update blog ini, di samping kesibukkan saya di luar saya juga cukup kelelahan mengurus blog-blog saya yang lain. Muncul lagi dengan tutorial blog yang ringan, tapi mungkin bermanfaat, kita coba memodifikasi followers blogger.

 

Biasanya followers dipasang langsung pada widget yang sudah tersedia di blogger, tapi kali ini kita akan memasangnya di widget HTML/Javascript. Abaikan tutorial ini jika sobat menggunakan template minima atau template bawaan blogger.

 

Jika sobat menggunakan custom template, maka untuk mengedit link, warna text dan border akan mengalami kesulitan. Untuk itu kita coba menambahkan border dan mengedit sedikit warna pada followers, link color, text color, background color dan border color. untuk memulainya, silahkan sobat login ke blogger.

  • Masuk ke Rancangan
  • Klik Elemen Laman
  • Pilih Tambah Gadget
  • Klik yang HTML/JavaScript
  • Kemudian masukkan kode followers dibawah ini :

    <script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>

    <!-- Define the div tag where the gadget will be inserted. -->
    <div id="div-eknxr14kfzlq" style="width:280px;border:1px solid #cccccc;"></div>
    <!-- Render the gadget into a div. -->
    <script type="text/javascript">
    var skin = {};
    skin['BORDER_COLOR'] = '#dedede';
    skin['ENDCAP_BG_COLOR'] = '#f0f0f0';
    skin['ENDCAP_TEXT_COLOR'] = '#444';
    skin['ENDCAP_LINK_COLOR'] = '#444';
    skin['ALTERNATE_BG_COLOR'] = '#fff';
    skin['CONTENT_BG_COLOR'] = '#f9f9f9';
    skin['CONTENT_LINK_COLOR'] = '#444';
    skin['CONTENT_TEXT_COLOR'] = '#444';
    skin['CONTENT_SECONDARY_LINK_COLOR'] = '#444';
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#444';
    skin['CONTENT_HEADLINE_COLOR'] = '#444';
    skin['NUMBER_ROWS'] = '3';

    google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.renderMembersGadget(
    { id: 'div-eknxr14kfzlq',
       site: '06215030860304111239' },
      skin);
    </script>

  • Ganti kode yang berwarna merah dan ungu dengan kode id blog sobat
  • Simpan.

 

Keterangan :

  1. untuk kode yang saya tebalkan bisa sobat ganti sesuai dengan warna dan lebar widget blog sobat.
  2. Kode yang berwarna biru sesuaikan dengan lebar widget template sobat.
  3. Untuk mencari kode yang berwarna merah dan ungu, jika sebelumnya sobat sudah memasang widget followers, maka sobat bisa klik kanan pada halaman blog kemudian klik �view page source� lalu klik CTRL+F dan ketik saja followers. Dari situ sobat dapat melihat kode id dan site dari blog sobat.