Membuat Komentar Facebook di Blog berdampingan

POSTED BY FENDI SAPUTRA POSTED ON 6/11/2013 WITH 2 COMMENTS

Membuat Komentar Facebook di Blog selain dapat membuat blog terlihat lebih bagus dan rapih, para pengunjung pun akan lebih di mudahkan dalam berinteraksi dengan anda melalui Kotak komentar karena sebagian pengunjung anda pastinya ada yang sudah login ke akun Facebook, jadi mereka pun akan ebih mudah berkomentar.

Tetapi jika kita menambahkan komentar Facebook dan etap mempertahankan Kotak komentar Default blog tentu akan membuat blog keliatan tidak dinamis karena terlalu memanjang ke bawah, nah oleh sebab itu saya akan memberikan Cara Membuat Komentar Facebook Berdampingan dengan Komentar Blog.

Berikut adalah Screenshot nya

Bagaimana ingin mencoba Komentar berdampingan tersebut.
1. Login ke Blog
2. Rancangan - Edit HTML
3. Untuk menghindari keselahan, Backup template anda terlebih dahulu dengan Download lengkap
4. Centang "Expand Template Widget"
5. Cari Kode <div class='comments' id='comments'>
Biasanya akan terdapat 2 kode tersebut di template anda
Copy kode di bawah ini tepat di bawah kode <div class='comments' id='comments'> yang ke 2

<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'>

2 : Jumlah Komentar Facebook yang akan di tampilkan

400 : Lebar Komentar Facebook

6. Lalu Cari kode </head>
Copy Kode dibawah 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 Facebook' 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>

ID Facebook : Ganti dengan ID Facebook anda yang terletak di bagian belakang browser URL Profil Facebook anda, Misalkan http://www.facebook.com/Fendistinks ID Facebooknya adalah Fendistinkls

7. Cari kode /* Comment atau #comments
Setiap Template mempunyai struktur kode yang berbeda-beda, jadi cari saja kode yang mirip dengan kode diatas
Copy kode berikut di bawah kode diatas tadi

.comments-page { background-color: #f2f2f2;}
#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;}

8. Simpan

Selesai, sekarang anda sudah mempunyai Komentar Facebook Berdampingan dengan Komentar Blog :c:

Continue reading

Cara Memperbaiki Validasi HTML Error Blogger (Update)

Cara Memperbaiki Validasi HTML Error pada Template Blogger. Memperbaiki Validasi merupakan hal yang bisa membuat galau banget. Terutama bagi yang masih Newbie. Saya sendiri pengalaman berhari-hari mengorbankan waktu, bahkan segalanya jadi lupa daratan gara-gara banyaknya Error pada kode HTML Template Blogger.

Namun ada kepuasan tersendiri jika saya berhasil membuat Template Blog Saya Lulus Validasi. Namun Bagi yang masih ragu untuk memperbaiki Kode-kode yang Error, ada beberapa pertanyaan yang biasanya akan ditanya oleh blogger.

Apa itu Markup Validation?

Mayoritas halaman Website di World Wide Web tertulis dengan bahasa komputer  seperti bahasa HTML yang Terdiri dari struktur teks, konten, multimedia, template, dan lain-lain.

Setiap bahasa memiliki tata bahasa, kosa kata, struktur tersendiri. Setiap Bahasa harus tertulis dengan aturan. Maka semua bahasa (termasuk HTML) yang tidak sesuai dengan aturan bahasa HTML akan dianggap Error, alias ada kesalahan dalam aturan bahasa. 

Dalam Proses Verifikasi akan memeriksa/mengecek kesalahan. Istilah tersebut bisa disebut Validasi. Apabila bahasa HTML dalam template sukses lulus, maka disebut Valid.

http://validator.w3.org mendefinisikan " validasi markup " sebagai proses pemeriksaan dokumen Web terhadap tata bahasa yang standart.

Apa Manfaat dari Lulusnya Validasi Template kita?

Manfaatnya tidak begitu sangat mempengaruhi trafick/pengunjung yang datang ke Wesite, namun Validasi ini lebih tertuju pada elektabilitas Website. Berikut Manfaat Lulus Validasi Template:

#1. Loading page lebih cepat. Jika halaman web Anda terdapat kesalahan html, maka akan memakan waktu lebih lama untuk mesin pencari melakukan proses menampilkan halaman Website.

#2. Lebih Kompatibilitas terhadap Browser. Kompatiilitas adalah keadaan untuk menyesuaikan diri. Artinya Website anda bisa cepat menyesuaikan dengan Browser karena lebih ramah. Sebuah Website yang valid lebih mungkin untuk dapat diakses oleh semua jenis browser, platform.

#3. Professional. Lulus Validasi melambangkan ke-profesional-an Website. Website yang Lulus Validasi lebih terlihat profesional, walaupun pernyataan ini tidak 100% benar. Namun bagi seorang Web-Disainer adalah masalah yang terpenting. 

#4. SEO Friendly. Kode Website Anda teratur, bersih dari kode yang Error memungkinkan Search Engine untuk lebih cepat menjaring Halaman Website Anda.

Bagaimana Cara mengurangi Validasi yang Error?

Saya akan memberikan beberapa langkah untuk mengurangi Validasi, semua langkah ini berdasarkan pengalaman yang sudah saya praktekan dan beberapa referensi lainnya dan diterapkan di Blogger. Saya akan membuat Demonya, menggunakan Alamat www.nawwafshop.co.vu yang sangat banyak Errornya. Kondisi sebelum diperbaiki.

Langkah Pertama

Silahkan Sobat menuju ke Template, kemudian Edit HTML. Carilah kode ini, untuk mempermudah gunakan CTRL+F.

Ganti dengan Kode ini

Langkah Kedua

Setelah tahap pertama, kemudian cari kode

Kemudian ganti dengan kode dibawah ini, dan save.

Langkah Ketiga

Menurut saya Kode ini adalah penyumbang terbesar Error. Perlu diingat, Setiap Anda menambahkan Widget baru, maka cari kode ini, dan Hapus. Hapus Semua kode ini!

Untuk menjaga tetap valid, pastikan hapus kode ini, apabila anda menambahkan Widget baru.

Langkah Keempat

Silahkan Anda mengecek ke validator.w3.org, tinggal berapa Error yang ada! Belum cukup puas! Apabila Anda menemukan Peringatan (seperti gambar ini), Anda Harus memasang Alt Gambar. 

An "img" element must have an "alt" attribute, except under certain conditions.

Maksudnya 

Sebuah elemen "img" harus memiliki atribut "alt", kecuali dalam kondisi tertentu.

kode yang Standart 

Contoh kode img Standart

Langkah kelima

Apabila Anda menemukan Peringatan Error Seperti gambar ini, maka Anda harus menambahkan kode berikut.

Anda mencari kode  kemudian tambahkan kode berikut, tepat diatas kode.

<!-- 

Continue reading

Cara Pasang Logo Media Sosial di Sidebar Blog

MENAMPILKAN atau memasang logo (link) akun media sosial Facebook, Twitter, Google+ dll. di sidebar blog sangat diajurkan para pakar media sosial. Tujuannya, agar menambah follower, member, atau liker.

Lagi pula, akun media sosial biasa kita gunakan juga untuk share posting blog, sehingga pengunjung bisa mengikuti update tulisan blog kita melalui akun media sosial mereka.

Jika Anda ingin memasang logo akun atau link media sosial seperti yang dipasang di blog CB ini (di sidebar kanan), ini dia caranya!

Cara Pasang Logo Media Sosial di Sidebar Blog

1. Login ke Blog Anda
2. Di Dashboard Blog, klik menu "Layout"
3. Klik "Add a Gagdet" > Pilih "Javascript/HTML"
4. Masukkan kode berikut ini setelah Anda ganti tulisan yang berwarna merah (ID Akun Sosmed Anda)

   

   
   

   
   

    cbblogger

" target="_blank" rel="nofollow">
   
    contohblog" target="_blank" rel="nofollow">
   
    106869251529186655236/posts" target="_blank">
   
    cbblogger" target="_blank">
   
    contohblognih" target="_blank" rel="nofollow">
   

    cbblogger" target="_blank" rel="nofollow">
   
   
   
   
   


MENAMBAHKAN KOTAK BERLANGGANAN
Jika Anda ingin menambahkan kotak berlangganan (RSS Subscribe) di bawahnya, seperti pada blog CB ini, maka tambahkan kode berikut ini. Jangan lupa, ganti tulisna berwarna merah dengan ID Feedburner Anda.

Subscribe via Email

contohblognih

', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

contohblognih" name="uri"/>



Nah itu dia Cara Pasang Logo Media Sosial di Sidebar Blog. Kalo mau pasang di bawah postingan, ini caranya: Pasang Kotak Langganan dan Sosial Media di Bawah Posting Blog.

Mau model lainnya? Nih... ada 100 macam widget sosial media untuk blog. Silakan pilih....! Good Luck and Happy Blogging!

Continue reading Cara Pasang Logo Media Sosial di Sidebar Blog

Cara Pasang Logo Media Sosial di Sidebar Blog

Posted by CB Blogger

MENAMPILKAN atau memasang logo (link) akun media sosial Facebook, Twitter, Google+ dll. di sidebar blog sangat diajurkan para pakar media sosial. Tujuannya, agar menambah follower, member, atau liker.

Lagi pula, akun media sosial biasa kita gunakan juga untuk share posting blog, sehingga pengunjung bisa mengikuti update tulisan blog kita melalui akun media sosial mereka.

Jika Anda ingin memasang logo akun atau link media sosial seperti yang dipasang di blog CB ini (di sidebar kanan), ini dia caranya!

Cara Pasang Logo Media Sosial di Sidebar Blog

1. Login ke Blog Anda
2. Di Dashboard Blog, klik menu "Layout"
3. Klik "Add a Gagdet" > Pilih "Javascript/HTML"
4. Masukkan kode berikut ini setelah Anda ganti tulisan yang berwarna merah (ID Akun Sosmed Anda)

   

   
   

   
   
    cbblogger

" target="_blank" rel="nofollow">
   
    contohblog" target="_blank" rel="nofollow">
   
    106869251529186655236/posts" target="_blank">
   
    cbblogger" target="_blank">
   
    contohblognih" target="_blank" rel="nofollow">
   

    cbblogger" target="_blank" rel="nofollow">
   
   
   
   
   


MENAMBAHKAN KOTAK BERLANGGANAN
Jika Anda ingin menambahkan kotak berlangganan (RSS Subscribe) di bawahnya, seperti pada blog CB ini, maka tambahkan kode berikut ini. Jangan lupa, ganti tulisna berwarna merah dengan ID Feedburner Anda.

Subscribe via Email

contohblognih

', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

contohblognih" name="uri"/>



Nah itu dia Cara Pasang Logo Media Sosial di Sidebar Blog. Kalo mau pasang di bawah postingan, ini caranya: Pasang Kotak Langganan dan Sosial Media di Bawah Posting Blog.

Mau model lainnya? Nih... ada 100 macam widget sosial media untuk blog. Silakan pilih....! Good Luck and Happy Blogging!

Continue reading

MENAMPILKAN atau memasang logo (link) akun media sosial Facebook, Twitter, Google+ dll. di sidebar blog sangat diajurkan para pakar media sosial. Tujuannya, agar menambah follower, member, atau liker.

Lagi pula, akun media sosial biasa kita gunakan juga untuk share posting blog, sehingga pengunjung bisa mengikuti update tulisan blog kita melalui akun media sosial mereka.

Jika Anda ingin memasang logo akun atau link media sosial seperti yang dipasang di blog CB ini (di sidebar kanan), ini dia caranya!

Cara Pasang Logo Media Sosial di Sidebar Blog

1. Login ke Blog Anda
2. Di Dashboard Blog, klik menu "Layout"
3. Klik "Add a Gagdet" > Pilih "Javascript/HTML"
4. Masukkan kode berikut ini setelah Anda ganti tulisan yang berwarna merah (ID Akun Sosmed Anda)

   

   
   

   
   
    cbblogger

" target="_blank" rel="nofollow">
   
    contohblog" target="_blank" rel="nofollow">
   
    106869251529186655236/posts" target="_blank">
   
    cbblogger" target="_blank">
   
    contohblognih" target="_blank" rel="nofollow">
   

    cbblogger" target="_blank" rel="nofollow">
   
   
   
   
   


MENAMBAHKAN KOTAK BERLANGGANAN
Jika Anda ingin menambahkan kotak berlangganan (RSS Subscribe) di bawahnya, seperti pada blog CB ini, maka tambahkan kode berikut ini. Jangan lupa, ganti tulisna berwarna merah dengan ID Feedburner Anda.

Subscribe via Email

contohblognih

', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

contohblognih" name="uri"/>



Nah itu dia Cara Pasang Logo Media Sosial di Sidebar Blog. Kalo mau pasang di bawah postingan, ini caranya: Pasang Kotak Langganan dan Sosial Media di Bawah Posting Blog.

Mau model lainnya? Nih... ada 100 macam widget sosial media untuk blog. Silakan pilih....! Good Luck and Happy Blogging!

Continue reading

How to Put your Blogger Site on Maintenance Mode

You might have seen sites which show a message that “Our site is in Maintenance mode, please try accessing later”. Many popular site uses maintenance mode when they are going through a monthly maintenance check or improvising site experience because nobody likes to land on a page that is either broken or no longer reachable.  in other sense, new websites often use it as coming soon page allowing users to sign up to be notified when site is ready for launch. In this article, we will show you how to put your blogger site on maintenance mode. 

First thing you need to do is to download Soonex – Maintenance mode template. Since, you are putting your site on Maintenance mode so be sure to take a backup of your existing template. Now upload the template to your blogger site.  After uploading the, you need to go to Blogger >> Layout >> to configure the template.

This template setting is divided into three different sections i.e. tabs, first one is home, second is about and third is contact.

Adding Welcome Note:

Soonex allows you to create beautiful pages to provide improved user experience. The first option is of “Welcome Note” that you’ll find in the Layout area on blogger dashboard.  To customize press the “Edit” link and input the description which you want to display on your site, weather your site is on maintenance mode or you are about to launch a new site.

Once you’re done writing it, press “Save” button to store the changes you made to the template.

Adding Email Subscription:

Soonex also allows you to add a subscription widget from which users can subscribe to your feeds and can also receive notification when your site goes live again. To customize,  go to “Email Subscription” and press the “Edit” link. Now input the username of your feed (Example feeds.feedburner.com/mybloggerlab, here mybloggerlab is the username).

 Once you are done with adding the username, press “Save button.

Adding Countdown:

If you are creating a coming soon page, or you would like to display a accurate time to your users when your site will be up, then scroll down to "Countdown Settings" and press “Edit” link. Now enter the time and date of the countdown in this format 2014/10/15 12:00:00.

However, If you don’t want to display the countdown widget then simply leave the text area blank or input “empty” in the text area and press “Save” button to store the changes.

Adding About us:

You can also add information about your site. Go to “About The Company” and  press “Edit” link. Now in the text, insert the information you would like to display on about tab. Once you’re done press “Save” to store the changes.

We hope this article would help you in creating a powerful under maintenance or coming soon page for your blogger site.  Have you ever used a maintenance page on your site, if yes feel free to share your knowledge in the comments below.  If you like this article then, share it on Twitter, Facebook and Google+.

Continue reading How to Put your Blogger Site on Maintenance Mode

How to Add a Auto Scrolling Scrollbar in Blogger

In the past we have already shown you how to customize your scrollbar in blogger with different styles, colors and customization. Recently, one of our users asked us how to add auto scrollbar in blogger that automatically scrolls the page from the top to bottom. Making your scrollbar scroll automatically is a perfect way to slightly force your readers to go through the whole page before leaving your site. In this article, we will show you how to add a auto scrolling scrollbar in blogger

What is a Scrollbar?

A Scrollbar is a GUI (graphical control element) which controls elements like text, pictures, videos and anything else available on the webpage. In other simple words, it’s a long thing bar located at the right side of your screen by which an element can be scrolled with the help of a mouse.

It also has of two upwards and downwards arrows that helps you to scroll up or down the page. It is not only for webpages but you can also find them on other software like Word, Windows, Apple OS and etc.

How to add Auto Scrolling Scrollbar in Blogger?

The very first thing you’ll be required to do is to first login to your blogger account and select a blog on which you’ll like to add auto scroll bar. Now go to Template >> Edit HTML >>search for the ending </html> tag (you will find it the end of the codes). After finding</html> just above it paste the following code:

<script>
    /*<![CDATA[*/
    var div = $('body');
    setInterval(function() {
            var pos = div.scrollTop();
            div.scrollTop(pos + 2);
        }, 10)
        /*]]>*/
</script>

<style>
    body {
        overflow-y: scroll;
    }
</style>

You can increase the scroll speed by reducing the 10 in the above code.  While, increasing 10 to 100 or 1000 would make the scroll work slowly.

This technique can also be applied to a div, if you want to scroll only a certain element on your site. All you need to do is to replace the body to a div name from the above code. Like for <div id=”test”> the first line of the code would become  var div = $('#test'); and vice versa.

Once everything is done, save the template by pressing “Save Template” button located at the top of your screen. Congratulations, you have successfully installed the auto scrolling page feature in blogger. If you want to limit this scroll to certain pages then check out how to show or hide a widget on certain URLs in blogger.

We hope this article has helped everyone in learning how to add a auto scrolling scrollbar in blogger.  Share your thoughts about this small but useful tip in the comment section below. If you have any suggestion or requests feel free to write us using our contact us page.

Continue reading How to Add a Auto Scrolling Scrollbar in Blogger

5 Best Live Chat Support Software for Your Blogger Site

People like to get solutions to their question and that in swift time duration. This is the exact point where live chat software were introduced. It is one of the best ways of providing instant answers to users questions. In the past, we have already covered an article on how to add a live chat support in blogger, but there are lots of other companies providing more fascinating and interesting features to its users. In this article, we will show 5 best live chat support software for your Blogger site.

PureChat:

PureChat is a popular free live chat support solution for website owners. It is easy-to-use with friendly interface and extremely straightforward to integrate into your site. It provides an admin dashboard from where you can respond to multiple chats at the same time, which provides you the ability to handle crowds of customers in no time.

PureChat also provides a statistics tab, from where you can take a quick look to the no of users that are getting helped from which operator. You can add multiple support agents, with different usernames, passwords and etc.

It even provides you the ability to search achieve and view the old chat history of any user you like. On the top of that, it is SSL secure which means the data is nicely protected.

MyLiveChat:

MyLiveChat is cool free live chat software that is ideal for online business websites. You can easily integrate it in your blogger site, if not we have written tutorial about integrating MyLiveChat in blogger.

It allows you to not only interact with users by solving their queries, but also allows real time traffic monitoring, providing the location of the user, refer, visitor path, current page and etc. You can also invite users to chat with a simple click.

t comes with lots of customization capabilities than most of the other sites. You can do branding by changing the logo on the chat box and etc.

OnlineChatCenters:

OnlineChatCenters is providing chat support since a long time and knows how these things works very well as they provide quite a handy feature. They offer three plans, FREE, Premium ($5 per month) and Enterprise ($50 per month).

OCC comes with multiple languages, so if your site is non-English you can choose from the list of the best languages available for you/Awesome right? Despite of its awesome features, it is fairly affordable for new startups.

Olark:

Olark is not a free chat support solution, it is a premium chat software which means features should be better and more powerful than all of the above. There are some third-party apps that connect with Olark and allows you to chat with customers on the go.

Zopim:

Zopim is another premium leading live chat service provider that is being used my majority of trusted commerce sites. It is easy to integrate with Blogger. They also offer a free plan so that is a plus if you want to first make sure it is perfect for your site.

It not only adds a live chat to your site, but also provides user analytics, logs, emails and etc. You can customize the widget according to the appearance of your site.

We hope this article would help you in finding a best live chat support software for your blogger site. Do let us know about your thoughts, and in case we have missed any of your favorite site shout out in the comments below

Continue reading 5 Best Live Chat Support Software for Your Blogger Site