CSS Komentar Blogger ala Facebook

Komentar Blogger dengan gaya Facebook. Banyak tutorial CSS untuk merubah tampilan standar Blogger threded comment yang di persembahkan oleh rekan-rekan blogger. Hal ini dikarenakan tampilan komentar standar blogger kurang elegan, terkesan biasa-biasa saja.

Tutorial kali ini tentang komentar Blogger menyerupai Facebook, dengan penambahan kode CSS. Kode CSS ini dipersembahkan oleh hompimpaalaihumgambreng, dan saya edit sedikit dengan menghilangkan garis pinggir dan perubahan padding-left dan padding right. Contoh hasil tampilan komentar blogger seperti facebook (facebook style) bisa dilihat pada screenshoot di bawah, atau bisa Anda kunjungi Live Demonya disini - Reviewer: Unknown - ItemReviewed: CSS Komentar Blogger ala Facebook

Mengatasi Masalah Pada Pesan Formulir Yang tidak Sesuai

Masalah ini sangat sering ditanyakan di sini (kemunculan pertanyaan sejenis terbanyak bisa ditemukan di posting Emotikon Blogger Otomatis dengan JQuery). Ini mengenai masalah pesan formulir komentar yang akan jatuh/meletakkan diri di bawah formulir komentar tanpa kita inginkan pada saat-saat tertentu. Kita semua setuju bahwa pesan untuk para komentator idealnya terletak tepat di atas formulir komentar, tapi untuk beberapa kasus mereka biasanya akan turun ke bawah dengan cara yang aneh.

Pada awalnya Saya juga merasa bingung dengan cara kerja fitur baru Blogger ini, sampai Saya mencoba membandingkan sebagian script di blog Saya dengan salah satu script yang sudah berhasil diimplementasikan oleh sebuah blog yang Saya kunjungi:

document.getElementById(domId).insertBefore(replybox, null);

replybox adalah variabel. Jika Anda mengalihkan perhatian Anda sedikit ke sebelah atas maka Anda akan menemukan bahwa replybox adalah variabel yang menyatakan elemen #comment-editor:

var onReply = function(commentId, domId) {
    if (replybox == null) {
        // lazily cache replybox, and adjust to suit this style:
        replybox = document.getElementById('comment-editor');
        if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
        }
    }
    if (replybox && (commentId !== replyParent)) {
        document.getElementById(domId).insertBefore(replybox, null);
        replybox.src = replyUrlParts[0]
        + (commentId ? '&parentID=' + commentId : '')
        + '#' + replyUrlParts[1];
        replyParent = commentId;
    }
};

Meskipun variabel tersebut tidak berada dalam satu kondisi, tapi setidaknya kita sudah tahu titik terangnya. Itulah kesalahannya! #comment-editor sebenarnya adalah elemen <iframe> formulir komentar yang sama sekali tidak berhubungan dengan pesan formulir komentar. Pesan formulir komentar bukanlah bagian dari elemen formulir komentar. Dia hanya meletakkan diri di sebelah atas formulir seperti ini:

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' id='comment-editor' name='comment-editor' src='' width='100%'/>

<p><data:blogCommentMessage/></p> mewakili pesan formulir komentar, dan elemen <iframe> yang terletak di bawahnya mewakili formulir komentar (Selengkapnya mengenai struktur formulir komentar Blogger bisa Anda pelajari di artikel Struktur Label dan Status Komentar).

Oleh karena itu, saat kita mengeklik tombol Balas, maka yang akan terangkat hanya formulir komentarnya saja, sedangkan pesan formulir komentar yang seharusnya ikut dibawa akan ditinggalkan. Karena dalam script di atas, .insertBefore() hanya akan membawa replybox (yang notabene adalah #comment-editor):

Pesan formulir komentar tidak termasuk dalam wilayah #comment-editor (replybox)

Buat Elemen Pembungkus Baru untuk Mengangkat Formulir Komentar Beserta Kelengkapannya
Solusi untuk mengatasi masalah ini adalah dengan cara menambahkan elemen pembungkus baru yang akan kita gunakan untuk mengelilingi formulir dan pesan formulir komentar. Dengan begitu, kita tidak akan menugaskan .insertBefore() untuk mengangkat elemen replybox tapi kita akan membuat dia mengangkat elemen pembungkusnya, sehingga formulir komentar dan pesan formulir komentar di dalamnya akan ikut terbawa ke mana saja elemen pembungkus berpindah.

Masuklah ke halaman Editor HTML Template, kemudian cek Expand Template Widget.
Temukan kode ini:

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

TIP: Tekan CTRL + F lalu ketik 'threaded-comment-form' untuk mempermudah pencarian

Ganti semua kode di atas dengan kode ini:

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
    <b:else/>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Pada kode di atas Anda akan melihat bahwa Saya telah mengelilingi elemen <iframe> dan <p><data:blogCommentMessage/></p> dengan elemen <div id='form-wrapper'>.
Nah, kita akan menggunakan elemen pembungkus tersebut sebagai PEGANGAN bagi .insertBefore() untuk memindah-mindah elemen formulir komentar dan pesan formulir komentar di dalamnya.

Kita tahu bahwa di dalam #form-wrapper terdapat formulir komentar dan pesan formulir komentar, oleh karena itulah ke dua elemen tersebut (formulir dan pesan formulirnya) akan ikut terbawa seiring berpindahnya elemen #form-wrapper:

Pesan dan formulir komentar kini sudah dipegangi oleh elemen #form-wrapper

Terakhir, untuk memodifikasi script thread-commenting Blogger agar tidak hanya mengangkat/memindah formulir komentar, lihatlah kembali pada bagian ini:

document.getElementById(domId).insertBefore(replybox, null);

Ganti dengan kode ini:

document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

Klik Simpan Template.

Sekarang setiap kali kita mengeklik tombol Balas, maka yang akan berpindah-pindah adalah elemen #form-wrapper dan bukan elemen #comment-editor.
#comment-editor dan pesan formulir komentar di dalamnya hanya akan berdiam diri di dalam #form-wrapper dan akan mengikuti ke mana saja dia berpindah.

Sumber - Reviewer: Unknown - ItemReviewed: Mengatasi Masalah Pada Pesan Formulir Yang tidak Sesuai

Modifikasi List Bullet dengan CSS

1. Masuk ke Template blogger
2. Cari kode ]]></b:skin>
3. Masukan kode di bawah ini di atas kode ]]></b:skin>

.post-body ul {
margin: 0 auto;
background: #def;
padding: 0 0 0 25px;
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkaHFGo9e4qMsOLeiaQuTSK4g63Kd52byIx6J8qiNBlaJ-FK8657y-g8OjMBrRass-nCT-vNnRfnsEegPbNdPIlwTen6_NMbYfqyggZ7X5Tpb13EQ5SlFr0Imxa9d3OJHvLabNeoK-uc/s1600/uncheck.gif);
}
.post-body li {
margin: 0 0 0 10px;
padding: 3px;
border-bottom: 1px solid #999;
}
.post-body li:hover {
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoRV8nOSWRIh8CqThTma8sjKGcxEY3mNWa-aH0Y-jYe0t4oIM3tAwkkhR1E067GiOMGjHhlAMOwxE6dp9mwKgIq7X-R6Yo2U9hWCborKVCvM2_ydX_2tcViInLhe6mYx4JWoElkTGU22M/s1600/check.gif);
background-color: #CDE0E7;
cursor: pointer;
}

4. Klik SIMPAN TEMPLATE.

Ketika nanti anda menggunakan list bullet di postingan anda maka tampilannya otomatis akan seperti yang ada pada screenshot.

Jika kode css tersebut ada yang sama di dalam template anda hapus saja dan ganti dengan kode css list bullet yang saya share ini. jika anda gak mau pusing gak usah baca tulisan saya ini cukup sampai langkah ke 4 saja dan selesai.

ini ada masukan dari bang Taufik yang hanya menggunakan css, Namun anda harus membuatnya sendiri secara manual untuk kodenya html nya.

Masukan kode di bawah ini di atas kode ]]></b:skin>

ul.keren li {
  list-style:square;   
}

ul.keren li:before {
  content:"\2714 ";
  display:none;    
}

ul.keren li:hover {
  list-style:none;
  position:relative;
  left:-1em;
}

ul.keren li:hover:before {
  display:inline-block;
  font-size:60%;
  margin-right:8px;
}

Sebenarnya juga gak terlalu rumit ya yang kedua ini cuman anda perlu menambahkan class pada tag ul jadi seperti ini nanti kodenya

<ul class="keren">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
</ul>

Ini Bagi yang mau menggunakan saja, ok segitu aja dan terima kasih. - Reviewer: Unknown - ItemReviewed: Modifikasi List Bullet dengan CSS

Memasang Emoticons di Komentar Blog Versi DonsCit

Nah karena ada yang Request saya terima degh :D
Nah udah taukan gimana Emoticon itu ? Woke kita langsung ke tutorialnya aja ...

1. Pertama sobat yang pastinya udah Login, Kemudian ke Edit HTML dan jangan lupa Expan Template Widget

Pastekan kode ini di atas kode </body>

<script src='https://sites.google.com/site/adityameilaz/emo/emot_keren_baru.js' type='text/javascript'/>

2. Kemudian Cari kode

<div class='post-footer-line post-footer-line-3'/>
    </div>
  </div>

3. Simpan kode ini dibawah </div> yang ke-2 jika tampilannya tidak sesuai sobat bisa lihat gambar dan perhatikan peletakan kode berikut

<b:if cond='data:blog.pageType == &quot;item&quot;'>  
<div style='background-color:#000;border:1px dashed #0F0;border-radius:5px;padding-top:10px;padding-bottom:10px;'>
<center>
   <p style='color:#fff'>
      <b>
         <img src='http://adityas.vacau.com/emotion/nangis.gif' width='20'/>:a:
         <img src='http://adityas.vacau.com/emotion/80.gif' width='20'/>:b:
         <img src='http://adityas.vacau.com/emotion/02.gif' width='20'/>:c:
         <img src='http://adityas.vacau.com/emotion/77.gif' width='20'/>:d:
         <img src='http://adityas.vacau.com/emotion/48_002.gif' width='20'/>:e:
         <img src='http://adityas.vacau.com/emotion/67.gif' width='20'/>:f:
         <img src='http://adityas.vacau.com/emotion/grrr.gif' width='20'/>:g:
         <img src='http://adityas.vacau.com/emotion/39_002.gif' width='20'/>:h:
         <img src='http://adityas.vacau.com/emotion/17_002.gif' width='27'/>:i:
         <img src='http://adityas.vacau.com/emotion/51_002.gif' width='25'/>:j:
      </b>
      <br/>
      <br/>
      <a OnClick='window.open(&quot;http://donscit.blogspot.com/2012/06/cara-memasang-emoticons-di-komentar.html&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes, width=550, height=520&quot;);return true' href='#!' rel='nofollow'>See More Emoticons</a>
   </p>
</center>
</div>
</b:if>

klik gambar untuk memperbesar

4. Klik save Template dan lihat Hasilnya
5. Jika tidak muncul Emoticons'nya pindahkan kode ini di atas

<data:blogTeamBlogMessage/>

6. Jika Masih tidak muncul juga letakan di bawah kode

<a name='comments'/>

7. Save Template sobat dan lihat hasilnya.

Ini sengaja saya panjangan karena emoticons ini kadang muncul kadang tidak karena template kita berbeda-beda jdi Ini buat emoticons yang tidak muncul versi saya, Jika masih tidak mengerti juga silahkan berkomentar-lah saya akan menjawab selagi saya bisa menjawab nya, Terimakasih.

Jika Emoticons sobat sudah muncul di No.3 atau 4 itu anda sudah berhasil dan anda sudah aman :)

Cara ke-2

Cari kode <b:if cond='data:post.embedCommentForm'>
dan letakan kode di bawah ini di atas kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>  
<div style='background-color:#000;border:1px dashed #0F0;border-radius:5px;padding-top:10px;padding-bottom:10px;'>
<center>
   <p style='color:#fff'>
      <b>
         <img src='http://adityas.vacau.com/emotion/nangis.gif' width='20'/>:a:
         <img src='http://adityas.vacau.com/emotion/80.gif' width='20'/>:b:
         <img src='http://adityas.vacau.com/emotion/02.gif' width='20'/>:c:
         <img src='http://adityas.vacau.com/emotion/77.gif' width='20'/>:d:
         <img src='http://adityas.vacau.com/emotion/48_002.gif' width='20'/>:e:
         <img src='http://adityas.vacau.com/emotion/67.gif' width='20'/>:f:
         <img src='http://adityas.vacau.com/emotion/grrr.gif' width='20'/>:g:
         <img src='http://adityas.vacau.com/emotion/39_002.gif' width='20'/>:h:
         <img src='http://adityas.vacau.com/emotion/17_002.gif' width='27'/>:i:
         <img src='http://adityas.vacau.com/emotion/51_002.gif' width='25'/>:j:
      </b>
      <br/>
      <br/>
      <a OnClick='window.open(&quot;http://donscit-emoticons.cc.cc&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes, width=550, height=520&quot;);return true' href='#!' rel='nofollow'>See More Emoticons</a>
   </p>
</center>
</div>
</b:if>

kemudian Save Template lihat hasilnya :)

Semoga Cara Memasang Emoticons di Komentar Blog Berguna dan Bermanfaat. - Reviewer: Unknown - ItemReviewed: Memasang Emoticons di Komentar Blog Versi DonsCit

Cara Membuat Blog Nofollow Menjadi Dofollow

1. Login ke akun blogger sobat.
2. Pergi ke tab rancangan, lalu pilih edit html.
3. Centang expand template widget, lalu cari kode berikut:

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

4. Hapus kode yang berwarna merah di atas, sehingga kodenya akan menjadi seperti ini:

<a expr:href='data:comment.authorUrl'><data:comment.author/></a>

5. Lalu cari kode berikut ini:

<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>

6. Kemudian hapus kode yang berwarna merah di atas, sehingga kodenya akan menjadi seperti ini:

<a expr:href='data:backlink.url'><data:backlink.title/></a>

7. Simpan template. - Reviewer: Unknown - ItemReviewed: Cara Membuat Blog Nofollow Menjadi Dofollow

Megenal 6 Jenis pageType Blogger

Memang sedikit membingungkan untuk sesorang yang belum mengetahui Jenis-jenis Halaman Blogger (pageType). Perlu di ketahui di posting kali ini saya akan menjelesakan Jenis-jenis pageType berserta fungsinya, tapi jika penjelasan saya tidak membantu anda? silakan saja tinggalkan komentar buat saya.
Apa itu pageType : Sesuatu yang memungkinkan Anda untuk menentukan bagian dari template Anda untuk menerapkan Script atau tidaknya, hanya dalam Halaman kondisi tertentu.

Scriptnya adalah seperti ini:

<b:if cond='ATRIBUD_DISINI'>
</b:if>

Hal ini terdiri dari <b:if> tag, dengan cond menambahkan atribut. Dimasukkan sebagai nilai cond atribut. Setiap (pembukaan) <b:if> tag harus ditutup dengan penutup </b:if> tag.

Pernah berharap Anda bisa menampilkan widget hanya di halaman tertentu, menyembunyikan sidebar pada halaman tertentu, menampilkan tombol yang berbeda pada halaman yang berbeda, atau menerapkan meta tag hanya untuk halaman yang dipilih? Nah, jika diterapkan dengan benar, tag pageType dapat membuat semua itu terjadi.

*Maca-Maca Jenis Bagian Halaman Blogger :

• pageType Item : digunakan pada Halaman Post
• pageType Archive : digunakan pada Halaman Arsip (Label "search/label/)
• pageType Static_page : digunakan pada Halaman Statis (Laman "/p/")
• pageType Index : digunakan pada Homepage dan Arsip

*Sedangkan pageType menurut data blog URL ada 2 :

• page homepageUrl : digunakan pada Beranda
• page blogUrl : digunakan pada Url yang ditentukan

*Pengertian

1. pageType Item
   pageType item ini biasanya digunakan di Halaman Post
   Script nya akan seperti ini
   

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

   Fungsi dari kedua script diatas berbeda,
   Perbedan pertama "==" jika kita meletakan KODE diantara pembuka <b:if cond='...> dan penutup </b:if>, maka KODE akan berjalan di Halaman Post, Sebagai Contoh di Halaman Index saya, terlihat Widget Berlangganan RSS, dan pada Halaman Post tidak telihat sama sekali.
   
   
   
   kenapa bisa mengilang di Halaman Post saya? karena saya menerapkan script CSS diantara tengah-tengah b:if yang misalnya seperti ini
   

   <b:if cond='data:blog.pageType == "item"'>
   <style>
   #HTML1 { display:none}
   </style>
   </b:if>

   sedangkan "!=" ini bisa berkerja di luar Halaman Post, Sebagai Contoh dimana blog saya pada Halaman Post terdapata Widget Label Cloud. Dan pada Halaman Index saya tidak ada sama sekali atau bisa dibilang menghilang,
   
   
   
   karena saya menaru script CSS diantara tengah-tengah b:if yang misalnya seperti ini
   

   <b:if cond='data:blog.pageType != "item"'>
   <style>
   #HTML2 { display:none}
   </style>
   </b:if>

   Dari kedua script di atas karena saya menerapkan script CSS jadi saya taruh sebelum kode </head>
2. pageType Archive
   pageType Archive ini di gunakan pada Halaman Arsip atau bisa di bilang Halaman Label URL yang menyertakan Label misalnya
   http://namablog.blogspot.com/search/label/?&max-results=4
   dan Scriptnya seperti ini
   

   <b:if cond='data:blog.pageType == "archive"'> KODE </b:if>
   <b:if cond='data:blog.pageType != "archive"'> KODE </b:if>

   fungsi dan perbedaan cara kerjanya sama dengan yang saya contohkan di pengertian pertama, cuma ini berkerja di Halaman Arsip (Label)
3. pageType Static_page
   pageType Static_page ini di gunakan pada Halaman Statis bisa di pahami seperti Laman
   http://namablog.blogspot.com/p/nama_post
   Scriptnya seperti ini
   

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

   fungsi dan perbedaan cara kerjanya sama dengan yang saya contohkan di pengertian pertama, oh ya bukan KODE CSS saja yang bisa di terapkan, anda bisa melihat contoh di blog saya ini di Laman seperti Chat Box, Hubungi Saya, dan Tambah Link seperti yang anda lihat, saya menghilangka semua widget dan meruba tampilan postnya,
4. pageType Index
   pageType Index ini di gunakan pada Halaman Homepage dan Arsip
   Scriptnya seperti ini
   

   <b:if cond='data:blog.pageType == "index"'> KODE </b:if>
   <b:if cond='data:blog.pageType != "index"'> KODE </b:if>

   fungsi dan perbedaan cara kerjanya sama dengan yang saya contohkan di pengertian pertama
5. page homepageUrl
   page homepageUrl digunakan pada Halaman Beranda atau bisa dibilang Home blog anda,
   Scriptnya seperti ini
   

   <b:if cond='data:blog.url == data:blog.homepageUrl'> KODE </b:if>
   <b:if cond='data:blog.url != data:blog.homepageUrl'> KODE </b:if>

   fungsi dan perbedaan cara kerjanya sama dengan yang saya contohkan di pengertian pertama
6. page blogUrl
   page blogUrl digunakan pada Halamn Blog Url ( Tertentu ) misalnya anda ingin menerapkan script di Url
   http://namablog.blogspot.com/2011/09/judul-postingan
   dan Scriptnya seperti ini
   

   <b:if cond='data:blog.url == "URL_DISINI"'> KODE </b:if>
   <b:if cond='data:blog.url != "URL_DISINI"'> KODE </b:if>

   fungsi dan perbedaan cara kerjanya sama dengan yang saya contohkan di pengertian pertama

Jika Anda ingin menentukan konten alternatif (bila kondisi salah), Anda harus memasukkan <b:else/> tag diikuti dengan konten KODE, seperti ini:

<b:if cond='data:blog.pageType == "item"'>
KODE 1
<b:else/>
KODE 2
</b:if>

Anda dapat menempatkan di mana saja dalam HTML template Anda, kecuali dalam bagian atau di dalam kotak widget konten. Konten dapat div, section, style tag,, dan tag kondisional lain

Bagaimana penjelasana saya sedikit membingunkan bukan! mungkin tidak membingunkan jika kalau kita coba menerapkannya dan anda bisa menganalisa sendiri bagaimana cara kerjanya script-script di atas, SEKIAN Terimakasih - Reviewer: Unknown - ItemReviewed: Megenal 6 Jenis pageType Blogger

Cara Membuat komentar Fb Berdampingan dengan Blog

1. Login ke account blogger Anda

2. Klik rancangan lalu klik Edit HTML

3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan

4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget

5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)

6. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>

.comments-page { background-color: #ffffff;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

7. Kemudian Anda cari kode </head>

8. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Anda disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script><span style="font-size: 50%">Widget edited by <a href="http://super-bee.blogspot.com/" target="_blank" rel="follow">super-bee</a></span>

Perhatikan tulisan yang berwarna merah di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda maka ID Anda berada pada tulisan yang berwana biru. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka. Udah ngertikan ? jika sudah maka Akan saya lanjut.

8. Kemudian cari kode  <div class='comments' id='comments'>

Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode
<div class='comments' id='comments'> yang pertama dan kedua.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</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='2' width='400'/>
</b:if>
</div>

<div class='comments comments-page' id='blogger-comments-page'>

Perhatikan angka yang berwarna merah dan biru diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi. Dan perhatikan pula kode yang berwarna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.

contoh :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>

<div class='comments comments-page' id='blogger-comments-page'>

<div class='comments comments-page' id='blogger-comments-page'> ( hapus salah satu)

9. Kemudian klik save, dan lihat hasilnya.

Jika semua langkah-langkah membuat komentar blog dan facebook berdampingan ini Anda ikuti dengan benar, maka seharusnya Anda berhasil melakukannya. Karena langkah diatas sudah saya lakukan dan berhasil seperti yang Anda lihat milik saya. Namun jika Anda memiliki struktur template yang berbeda, Anda dapat meletakkan kode pada poin no.8 dibawah kode <div class='comments' id='comments'> yang kedua saja.

- Reviewer: Unknown - ItemReviewed: Cara Membuat komentar Fb Berdampingan dengan Blog

Cara Mengaktifkan Deskripsi Title di Penelusuran Google

Artikel Saya kali Ini Cara mau share Cara Mengaktifkan Deskripsi Penelusuran di Google Sudah ada yang tau tentang Judul Berikut? kalau Belum Simak Langsung Sob ...

Pertama Yang pastinya sobat Login dulu ke Blogger
Untuk lebih jelasnya lihat di gambar

Lihat gambar kemana sobat harus mencari Rancagan tersebut, Jika sobat sudah menemukannya klik edit kemudian Pilih Ya kemudian sobat isi Deskripsi Home Page Blogger Sobat (khusus Blogger baru)

Kemudian Jika Sobat Sudah Melalukan Denga benar tutorial Pertama, Kemudian Lihat gambar ke2

Kemudian Sobat Bisa langsung ke Entri Baru atau Edit Entri Lihat di Bagian sebelah kanan, dan buatlah Artikel baru dengan selera sobat kemudian jangan di Plubish dulu isi Deskripsi Penelusuran Artikel yang sobat Buat tadi kemudian Sobat Plubish dagh ...

Jika sobat kurang mengerti tentang Artikel saya kali ini Sobat bisa berkomentar di bawah, Harap tidak Menyepam!

- Reviewer: Unknown - ItemReviewed: Cara Mengaktifkan Deskripsi Title di Penelusuran Google

Tambahkan deskripsi ke Gadget Label

Ini adalah bagaimana Gadget akan terlihat seperti setelah menerapkan perubahan kode

 

Jika Anda ingin untuk terus maju dan melakukan hal yang sama di blog Anda, kemudian ikuti petunjuk ini.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> <b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
<!-- Label Description Start -->
<b:if cond='data:label.name == "firstlabelname"'>
<span class="labeldesc"> - This is a label1 desc</span>
</b:if>
<b:if cond='data:label.name == "secondlabelname"'>
<span class="labeldesc"> - This is label2 desc</span>
</b:if>
<b:if cond='data:label.name == "thirdlabelname"'>
<span class="labeldesc"> - This is label3 desc</span> </b:if>
<!-- Label Description End-->
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Ini adalah kode gadget dimodifikasi. Anda harus mengeditnya secara tepat dan harus menambahkan satu syarat <b:if/> per label. Anda harus mengedit nama label dan deskripsi. Setelah Anda melakukan ini, Kode Gadget dimodifikasi Anda sudah siap.

Sekarang saatnya untuk menerapkan perubahan ini ke Template Anda. Aku menduga bahwa Anda telah menambahkan gadget label untuk blog Anda (Add jika Anda tidak)..

Pergi ke Template> Edit HTML dan cari baris yang terlihat seperti (JANGAN Expand Template Widget Anda ketika Anda melakukan ini atau Anda akan berada dalam kesulitan)

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Ganti baris dengan Kode Gadget dimodifikasi dan Simpan Template

Itu saja. Sekarang Anda akan melihat deskripsi label pada setiap Label-label pada sidebar Anda.

Jika Anda mengalami kesulitan meninggalkan komentar dan saya akan mencoba untuk membantu Anda .. :)

- Reviewer: Unknown - ItemReviewed: Tambahkan deskripsi ke Gadget Label

Domain .in dan Hosting Gratis

Domain .in dan Hosting Gratis - Kali ini Tutorial Vicahya™ akan Share memberikan tutorial untuk mendapatkan Domain .in dan Hosting Gratis. Domain ini berbentuk ( .in ), banyak domain gratis yang lain seperti co cc, cu cc, tk, cz cc dan yang lain. Tetapi domain ini tidak terdetech oleh anti virus sebagai website berbahaya.

Jika ingin .in silahkan ikuti langkah - langkah mendaftar berikut ini :

1.  Masuk ke http://www.indiagetonline.in/
2. Klik " Yes, I want my free website "
3. Klik " Create my website now "
4. Masukan domain yang diinginkan , lalu klik " Chech Avaliability "
5. Isi semua formulir. lihat beberapa cara dibawah ini :

• Nomer telepon di india gunakan awalan dengan 91 dan hanya 10 digit, contoh nomernya 9122131234
• PAN numbe isi dengan AAAPS***1R dan ganti yang *** dengan 3 angka, contoh AAAPS4111R

6. Klik Finish

7. Verifikasi melalui email.

Setelah daftar silahkan masukan domainnya di blogmu. Selamat Mencoba

Sumber

- Reviewer: Unknown - ItemReviewed: Domain .in dan Hosting Gratis