Membuat Komentar Blog, Facebook, Twitter Satu Tab

Komentar merupakan indikator penyemagat dalam melakukan kegiatan blogging, jika ada komentar yang nyangkut di salah satu artikel, apa lagi komentar tersebut nyabung dengan topik artikel tersebut pemilik blog akan merasa senang karena mendapatkan respon.

Seperti halnya sobat menulis status pada facebook, jika ada teman maupun orang lain memberikan dan saling membalas komentar maka status tersebut menjadi seru dan ramai. Atau buat tweet pada twitter, jika ada mem-follow sobat akan hmmm.... nyamin

Pastinya sobat ingin mendapatkan respon dari pengunjung mengenai artikel yang sobat postingkan entah itu tanya jawab seputar posting atau hanya sekedar memberikan senyum manis "nice post" via media sosia seperti facebook dan twitter.

don't Ribet | Selalu Yang Dicari bagaimana cara membuat Komentar Facebook, Twitter Satu Tab :

Longin ke dasbor blog sobat

1. Pilih Rancangan --> Edit HTML

2. Cari kode <b:skin><![CDATA, selanjutnya copy paste kode di bawah ini tepat di atasnya.

<meta content='Profile_ID' property='fb:admins'/>

<meta content='APP_ID' property='fb:app_id'/>

<script src='http://code.jquery.com/jquery-latest.pack.js'/>

<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>

<script src='http://platform.twitter.com/anywhere.js?id=API_Key&amp;v=1'/>

 3. Cari kode <div class='comments' id='comments'>, selanjutnya copy paste kode di bawah ini tepat di bawahnya.

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

4.Save / Simpan Template

Notes Perhatikan  :
Kode META berwana merah "Profile_ID, APP_ID dan API_Key" ganti dengan milik sobat. Bagi sobat yang belum memilikinya silakan mengikuti langkah-langkah sebagai berikut :

• Profile_ID merupakan ID account facebook sobat contoh akun facebook milik don't ribet "https://www.facebook.com/gapainribet".
• APP_ID merupakan Id aplikasi yang digunakan pada kotak komentar facebook, bagi yang belum punya silahkan klik disini.
• APP_Key merupakan ID aplikasi yang dgunakan pada kotak komentar twitter, bagi yang belum punya silahkan klik disini.

Kata "Comments, Tweets, Komentar" pada kode <div class='comments' id='comments'> sobat dapat ganti dengan kata lain sesuai keinginan, selain itu sobat dapat merubah jumlah komentar (num_posts) yang ingin di tampilkan serta dapat melebarkan kolom komentar facebook agar sesuai.

• Num_posts = 10 merupakan jumlah komentar yang ditampilkan.
• width = 500 merupakan lebar komentar facebook.

Semoga Bermanfaat...

Membuat Navigasi Ala Google

Siapa yang ga kenal Google?.. Google merupakan media sufing yang menampilkan berbagai macam info dari berita, video, musik dan trik serta tips, namun ada yang unik pada tampilan google, apa itu?... ya Sobat benar, menu navigasi google yang sederhana namun terlihat elegan (lihat gambar).

don't Ribet | Selalu Yang Dicari bagaimana caranya membuat Navigasi Ala Google :

Longin ke dasbor blog sobat

1. Pilih Rancangan --> Edit HTML
2. Cari kode ]]></b:skin>, selanjutnya copy paste kode di bawah ini tepat di atasnya.

/* Navigasi Ala Google
----------------------------------------------- */

.menu{

position:fixed;

top:0;

left:0;

width:100%;

font:13px/27px Arial,sans-serif;

color:#3366cc;

height:30px;

background:#2D2D2D;

}

.menu a:hover{

background-color:#676767;

color:#CCCCCC;

}

.menu a{

text-decoration:none;

padding:6px 8px 7px;

color:#CCCCCC;

outline:none;

}

.menu ul{

list-style:none;

margin:0;

padding:0 0 0 10px;

}

.menu ul li{

padding:0;

float:left;

}

.menu ul li ul li{

padding:0;

float:none;

margin:0 0 0 0px;

width:100%;

}

.menu ul li ul{

position:absolute;

border:1px solid #C3D1EC;

-webkit-box-shadow:0 1px 5px #CCCCCC;

-moz-box-shadow:0 1px 5px #CCCCCC;

box-shadow:0 1px 5px #CCCCCC;

margin-top:-1px;

display:none;

padding:0px 16px 0px 0;

}

.active ul{

display:block !important;

}

.single ul{

display:block !important;

}

.active a{

background-color:white;

border:1px solid #C3D1EC;

border-bottom:0;

-webkit-box-shadow:0 -1px 5px #CCCCCC;

-moz-box-shadow:0 -1px 5px #CCCCCC;

box-shadow:0 -1px 5px #CCCCCC;

display:block;

height:29px;

padding:0 8px 0 8px;

position:relative;

z-index:1;

color:#3366CC;

}

.current a{

background-color:#2D2D2D;

border-top:2px solid #DD4B39;/*garis warna merah diatas*/

border-bottom:0;

display:block;

height:25px;

padding:0 8px 0 8px;

position:relative;

z-index:1;

color:#FFFFFF;

font-weight:bold;

}

.active a:hover{

background-color:white;

color:#3366CC;

}

.active ul a:hover{

background-color:#e4ebf8;

}

.active ul a{

border:0 !important;

-webkit-box-shadow:0 0 0 #CCCCCC;

-moz-box-shadow:0 0 0 #CCCCCC;

box-shadow:0 0 0 #CCCCCC;

border:0;

width:100%;

}

.arrow{

border-color:#C0C0C0 transparent white;

border-style:solid dashed dashed;

margin-left:5px;

position:relative;

top:10px;

}

.mid-line{

background-color:#FFF;

border-top:1px solid #e5e5e5;

font-size:0;

}

3. Cari kode ]]></b:skin>, selanjutnya copy paste kode di bawah ini tepat di atasnya.

<script src='http://cing-ss.googlecode.com/files/jquery-1.4.2.min.js' type='text/javascript'/>

<script src='http://cing-ss.googlecode.com/files/jquery.google_menu.js' type='text/javascript'/>

<script>

$('document').ready(function(){

$('.menu').fixedMenu();

});

</script>

4. Cari kode <div id='outer-wrapper'>, selanjutnya copy paste kode di bawah ini tepat di bawahnya.

<div class='menu'>

<ul>

<li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

<a href='http://plus.google.com' target='_blank'>+You</a>

  </li>

   <!-- Using class="current" for the link of the current page -->

    <li class='current'>

<a href='http://www.google.co.in/' target='_blank'>Web</a>

  </li></li>

   <li>

    <div <a href='http://orkut.com' target='_blank'>Orkut</a>

     </li>

      <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

<a href='http://gmail.com' target='_blank'>Gmail</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

<a href='https://www.google.com/calendar' target='_blank'>Calendar</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

<a href='https://docs.google.com' target='_blank'>Documents</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

<a href='http://picasaweb.google.co.in/home' target='_blank'>Photos</a>

  </li>

   <li>

<a href='#'>More<span class='arrow'/></a>

        <!-- Drop Down menu Items -->

<ul>

   <li><a href='#'>Reader</a></li>

   <li><a href='#'>Sites</a></li>

   <li><a href='#'>Groups</a></li>

   <li><a href='http://www.youtube.com'>YouTube</a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

   <li><a href='#'>Images</a></li>

   <li><a href='#'>Maps</a></li>

   <li><a href='http://translate.google.co.in/'>Translate</a></li>

   <li><a href='http://books.google.co.in'>Books</a></li>

   <li><a href='http://scholar.google.co.in/'>Scholar</a></li>

   <li><a href='http://blogsearch.google.co.in'>Blogs</a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

   <li><a href='http://www.google.co.in/intl/en/options/'>even more &gt;&gt; </a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

  </ul>

  </li>

 </ul>

</div>

5. Simpan Template.

Selanjutnya link pada menu navigasi ala google dapat di ganti sesuai dengan ke inginan Sobat, misalnya http://translate.google.co.in ganti dengan http://dontribet.blogspot.com/search/label/TutorialBlog begitu juga dengan link yang lainnya.

Navagasi Ala Google  bersifat fixed meskipun kusor digerakkan ke atas atau ke bawah menu navigasi akan tetap berada pada di atas, jika Sobat mengingikan menu tersebut hilang saat kusor digerakkan ke bawah. Sobat tinggal hapus kode di bawah ini :

.menu{

position:fixed;

top:0;

left:0;

width:100%;

font:13px/27px Arial,sans-serif;

color:#3366cc;

height:30px;

background:#2D2D2D;

}

Jangan lupa di SAVE kembali.


Semoga Bermanfaat...

Menyembunyikan Atau Menghilangkan NavBar Blog

NavBar merupakan fasilitas yang di miliki oleh situs blogger. Selain berfungsi sebagai media search (pencari) artikel / posting yang berada di blog tersebut, NavBar juga berfungsi sebagai media longin ke blog sobat tanpa ketik www.blogger.com pada tab baru. Namun sobat bisa menyebunyikan atau menghilangkan NavBar Blog.

don't Ribet | Selalu Yang Dicari bagaimana caranya Menyembunyikan Atau Menghilangkan NavBar Blog :

Longin ke dasbor blog sobat

1. Pilih Rancangan --> Edit HTML

2. Cari kode ]]></b:skin>, berikut copy paste kode di bawah ini tepat di atasnya.

#navbar-iframe {height:0px;visibility:hidden;display:none}

3. Save / Simpan Template


Semoga Bermanfaat... 

Menghilangkan atau Merubah Header

dR - Header merupakan kepala yang memuat nama blog sobat sebagai identitas seperti dontribet.blogspot.com. Namun bikin keder juga setelah upload tempelate blog baru tampilan header terkadang kurang  sesuai dan rasanya ingin di ganti sesuai dengan nama dan logo blog sobat miliki.

don't ribet berikut caranya "Menghilangkan Atau Merubah Header"

Longin ke dasbor blog sobat

Tahap ke-1
1. Pilih Rancangan --> Edit HTML --> Expand Template Widget
2. Cari kode berikut :

<div id='header-wrapper'>
 <div id='head-inner'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widgetid='Header1' locked='true' title='dontribet (Header)' type='Header'>
<b:includable id='title'>
<cond='data:blog.url = = data:blog.homepageUrl'>

3. Ganti kode berwana merah, no menjadi yes dan true menjadi false.
4. Simpan Template

Tahap ke 2
1. Pilih Elemen Halaman
2. Cari Letak Header selanjutnya edit [ HAPUS ]



3. Simpan

Kini sobat lihat hasilnya

Semoga Bermanfaat...

Menghilangkan Icon Obeng dan Tang

dR - Malam minggu saya nongkrong bersama teman-teman di CSB (Cirebon Super Block) Mall, tepatnya di lantai 3 depan wahana uji nyali penuh adrenalin SPETACULAR Live Horror Show "RUMAH HANTU" maklum Jomblo di tinggal pergi wk... wk...

Ternyata pengunjung rumah hantu banyak juga dari berbagai kalangan dari ibu-ibu, bapak-bapak, dewasa, remaja bahkan anak kecil yang mungkin usianya baru 5Th "Tapi... boleh masuk gak tuh?..." dari sekian pengunjung ada yang mengusik lamunan ku, dia tinggi kurang lebih 160cm dengan rambut hitam segi sepantat tampak seperti rebonding, berkaca mata oval kecil, memakai jeans dan kaos hitam terlihat manis memukau.

don't Ribet jangan menyia-yiakan kesempatan ini belum tentu hari esok akan bertemu kembali.

don't Ribet  : permisi Mba
Mrs. X       : "ya?..." penuh tanya
don't Ribet  : Ada obeng?... 
Mrs X        : "gak punya"
don't Ribet  : klo tang
Mrs. X       : "gak punya" sambinl mengeleng-gelengkan kepalanya
don't Ribet  : tapi klo no Tlp punya kan!...

Yess... akhirnya ku dapatkan nama dan no Tlp doi "Hmmm... ini merupakan salah satu jurus tuk mendapatkan no Tlp dan nama seseorang".

Bicara mengenai obeng dan tang, saat kita melakukan reparasi widget template blog akan terlihat icon obeng dan tang yang menyilang. Icon obeng dan tang berfungsi untuk mengedit cepat tanpa Sobat longin ke rancangan, namun saat preview widget yang sobat simpan tak terlihat full terhalangi oleh icon obeng dan tang. yang ingin. Bila sobat kurang berkenan icon obeng dan tang dapat di hilangkan.

don't ribet berikut caranya "Menghilangkan Icon Obeng dan Tang"

Longin ke dasbor blog sobat
1. Pilih Rancangan --> Edit HTML --> Expand Template Widget
2. Cari kode berikut :

     ]]></b:skin>

3. Copy paste kode berikut tepat di atas kode tadi :

    /* Obeng dan Tang
   ----------------------------------------------- */
   .quickedit{
    display:none;  
    }

4. Save dan lihat hasilnya


Semoga bermanfaat.

Menghilangkan Langganan : Poskan Komentar (Atom)

dR - Pada blog baru atau setelah membaca artikel / posting terkadang sobat menemukan / menjumpai tulisan Langganan : Poskan Komentar (Atom) yang terdapat di pojok bagian bawah Langganan : Poskan Komentar (Atom) merupakan sebuah fitur yang di sediakan oleh blogger untuk memberikan komentar pada artikel / posting di suatu blog. Namun fiktur tersebut dapat di hapus bila sobat menginginkannya.

don't Ribet pengen tau caranya?... Menghilangkan Langganan : Poskan Komentar (Atom)

Longin ke dasbor
1. Pilih Rancangan --> Edit HTML --> Expand Template Widget
2. Tahap ke-1
    Cari kode berikut, lalu hapus

     <b:include data='feedLinks' name='feedLinksBody'/>

3. Tahap ke-2
    Cari kode berikut, lalu hapus

    <div class='feed-links'>
    <data:feedLinksMsg/>
    <b:loop values='data:links' var='f'>
    <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'>
    <data:f.name/>(<data:f.feedType/>)</a>
    </b:loop>
    </div> 

4. Save dan lihat hasilnya


Semoga bermanfaat...