Membuat Widget Social Media Melayang di Samping Blog

Halo sobat Ingin Tahu, hari ini saya akan membagikan tutorial cara membuat widget sosial media melayang di samping blog - Mungkin anda sering membaca artikel yang mirip seperti ini, sudah tidak asing lagi bagi para blogger tentunya. Namun saya tertarik dengan widget yang akan saya bagikan oleh karena widget ini ringan dan tidak memakan tempat.

Widget Sosial Media sangatlah penting untuk para blogger, karena sosial media merupakan salah satu sumber dimana kita dapat membagikan hasil posting kita disitu. Baiklah saya rasa anda sudah sangat mengerti tentang sosial media, jadi kita langsung saja membahas caranya.

Tetapi Sebelumnya lebih baik anda melihat demo terlebih dahulu, supaya lebih yakin apakah anda akan menerapkan widget ini atau tidak.

Lihat di Widget di Samping Kiri

Bagaimana sobat? keren kan? caranya cukup sederhana dan sangat mudah, hanya memerlukan waktu beberapa detik saja. Maka dari itu silahkan dicoba ya.

Cara Menambahkan Widget ke Blog Anda:

1. Login ke blogger > Layout > Tambahkan Gadget > Pilih Html/Javascript
2. Salin kode di bawah ini, lalu tambahkan ke gadget anda

<style type="text/css">
ul#social{position:fixed;margin:0;padding:0;top:10px;left:0;list-style:none;z-index:9999}ul#social li{width:100px}ul#social li a{display:block;margin-left:-2px;width:100px;height:70px;background-color:#fff;background-repeat:no-repeat;background-position:center center;border:1px solid #AFAFAF;-moz-border-radius:0 10px 10px 0;-webkit-border-bottom-right-radius:10px;-webkit-border-top-right-radius:10px;-khtml-border-bottom-right-radius:10px;-khtml-border-top-right-radius:10px;-moz-box-shadow:0 4px 3px #000;-webkit-box-shadow:0 4px 3px #000}ul#social .twitter a{background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6IAmJMXljRci8weVah_eCsVvj17Mgd5mpG6po_EwAk-xhS_eRXYii6IXxJxvpX6lpR9dWNgc9rP9zrx8oN3CflqSIc-AzOKStzxreQCXByiLed0P4Evgv0NrIrYHTto9TMdXRf1UUrYfS/h120/ingin-tahu-blogspot-com-sosial-media-twitter.png)no-repeat;background-position:center center}ul#social .googleplus a{background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg04ze_RCm4HUpVq3heqhy5pRR8APpUjj9cLzMuJqcpWxr5IR4LNphUaeAPEADejLfH6tkFDgaQciX05Sjr_HIM_BvpPuOHuaAdjGLK4oAZ8lR8k_6BSKfwZnnQ-rjY3_4Xk15AKJoRBzIB/h120/ingin-tahu-blogspot-com-sosial-media-google-plus.png)no-repeat;background-position:center center}ul#social .facebook a{background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHTw0YDtj6K_14IzVBUax7Fbdt6HgxRFoavEqMx5kZGGDfPF7Ou96TBSt9LTQ2tTo6odZu3b45Gc_XDysuMbBQbL7j2VgYF_s1QciIZZ_u6lmuxCNVU6SR630JmjiOy9poX26FAD77ER88/h120/ingin-tahu-blogspot-com-sosial-media-facebook.png)no-repeat;background-position:center center}ul#social .rss a{background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoo7opn6JPXvFtoLU9ZXR-KwySa8Z1XCiUjkWC6KGnCVirSFkSbte3lHGcMcMUz_YjbpBgYrAP9U7CuAbk3I9keeNStUPp2wAOV4B-SQ0XyYRv6nMwTZq7WnAGHwr6T6MDXFxTP3tXLm84/h120/ingin-tahu-blogspot-com-sosial-media-rss.png)no-repeat;background-position:center center}ul#social .pinterest a{background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8k1E5tI7OY4NtM7M-YWjDf_iPb4ULnAeTEtD6ESsk9581AAN7uPeStZ7t2JtDW_olMbnhlU8lnGi0iz6GE3m_3fW6nKcvPm38-p2lji11URDgc8Siucz3nQCauaME4yVo_FR4A-HKtOsS/h120/ingin-tahu-blogspot-com-sosial-media-pinterest.png)no-repeat;background-position:center center}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){$("#social a").stop().animate({marginLeft:"-85px"},1e3),$("#social > li").hover(function(){$("a",$(this)).stop().animate({marginLeft:"-2px"},200)},function(){$("a",$(this)).stop().animate({marginLeft:"-85px"},200)})});
</script>
<ul id='social'>
 <li class='twitter'><a href='#' title='Twitter'></a></li>
 <li class='googleplus'><a href='#' title='Google Plus'></a></li>
 <li class='facebook'><a href='#' title='Facebook'></a></li>
 <li class='rss'><a href='#' title='Rss'></a></li>
 <li class='pinterest'><a href='#' title='Pinterest'></a></li>
</ul>

Catatan:

• Jika di template kamu sudah memiliki kode jquery seperti <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> lebih baik di hapus kode tersebut.

• Ganti tanda # dengan url media sosial anda

3. lalu Save dan lihat hasilnya. . . Selesai !!

Jika ada kesalahan dalam artikel ini saya berharap anda bisa berkomentar dan memberikan saran yang terbaik, demi kebaikan kita bersama, demikian pembahasan saya tentang membuat widget sosial melayang, dan nantikan tutorial selanjutnya, terima kasih.

Cara Membuat Show and Hide Comments Facebook dan Blogger

Cara Membuat Show and Hide Comments Facebook dan Blogger - Kembali lagi saya akan berbagi tips blogger setelah dua hari tidak posting, kali ini saya akan berbagi tentang fungsi show dan hide komentar sehingga pengunjung dapat memilih dengan mudah untuk berkomentar. Tutorial kali ini saya akan menerapkan komentar facebook dan blogger secara berdampingan seperti gambar di atas.

Manfaat dari show dan hide komentar ini yaitu memudahkan pengunjung untuk berkomentar dan agar lebih banyak mendapatkan respon dari pengunjung, seperti yang kita ketahui kebanyakan pengunjung pasti sudah login otomatis pada akun google dan akun facebook di desktop maupun smartphone. Dengan adanya show dan hide komentar ini pengunjung terserah memilih berkomentar menggunakan akun tersebut.

Kekurangan kemungkinan kekurangan dari penggunaan cara ini adalah tidak ada icon fontawesome yang seperti logo blogger, saya berharap akan ada uptade icon seperti blogger, maka penggunaannya akan lebih keren saya pikir. Kalau menurut anda bagaimana?

Baiklah saya tidak ingin berbelit-belit menjelaskan karena saya yakin anda juga pasti sudah mengerti apa yang saya maksud sehingga anda berada disini. Kita langsung saja menjelaskan caranya.

Show and Hide Comments Facebook and Blogger:

• Buka Blogger > Template Editor > Cari kode seperti ini  </head> :

• Lalu masukkan Javascript di bawah ini di atas kode </head>:

<script type='text/javascript'>
    //<![CDATA[
    $(window).bind("load resize", function(){
      var url = location.protocol+'//'+location.host+location.pathname;
      var containercm_width = $('#container-commentfb').width();  
        $('#container-commentfb').html('<div class="fb-comments" ' +
        'data-href="'+url+'"' +
        ' width="' + containercm_width + '" data-num-posts="10"></div>');
        FB.XFBML.parse();
    });
    //]]>
    </script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

• Setelah itu anda cari kode html <b:include data='post' name='post'/> lalu anda tambahkan kode di bawahnya dengan kode seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#comments, #container-commentfb {display:none;} .comments-icons {no-repeat; font-size: 20px; font-family: &quot;Arial Narrow&quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align:text-bottom;}</style>
<div class='comments-icons'>
Silahkan pilih Comment melalui: <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#container-commentfb&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='blogger-icon' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBGDu5nP16qCFKz59DHoL0gtiaN-i7vwDhSG1cebPI9AmsPXJdcRn1ooB7Zoy452mvyx8xXheMfWdQkmNhe_HsN69qD8zJq7CG4LkbK-ZH5F5yJwKDpYPIss6YerpZZlVJAcy-vfwaZ_U/h120/facebook+icon.PNG' width='35'/></a> atau <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#container-commentfb&quot;).hide();'><img class='blogger-icon' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRnRlEQ3LQp62lHN7HNFk_vkuwz6vQZ0oAfN6BnCKGq_3jQEocZs-r2joAGqdmUjT5RkOesFFcRJcbMPBNtdQD8IcQcL8FjzIHbl9ahx0MpUdR8iexsk1yILcabfRNO8qB8NdHvdQYWyb7/h120/blogger+%25281%2529.png' width='35'/></a>
</div>
<div id='fb-root'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div data-width='100%' id='container-commentfb' style='padding: 10px;padding-right: 10px;padding-left: 10px;'>
<div class='fb-comments' data-href='http://memberi-cara.blogspot.com/'>
<fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
  </div></div></b:if>

• Jangan lupa ganti alamat yang saya tandai di atas dengan alamat blog anda.

• Selanjutnya kamu save template dan lihat hasilnya.

Mungkin hanya itu saja yang dapat saya sampaikan jika ada kesalahan saya berharap ada yang berkomentar demi kemajuan bersama.Demikian tutorial tentang Cara Membuat Show and Hide Comments Facebook dan Blogger jika ada kesulitan jangan malu bertanya lewat komentar.

Cara Mengatasi Pesan Error Feedburner

Baiklah kali ini saya memiliki kesempatan untuk melanjutkan pembahasan sebelumnya yang telah saya buat yaitu cara mudah mendaftar google feedburner - Tentunya mendaftar saja belum cukup untuk menggunakan fitur-fitur yang disediakan oleh pihak feedburner, maka dari itu anda sering mengalami kesalahan seperti pada topik kali ini yaitu pesan error feedburner.

Nah untuk mengatasi masalah pesan error dari feeburner anda tentunya harus melakukan beberapa pengaturan untuk mengaktifkan fitur tersebut dan harus tahu apa namanya. Anda tahu apa namanya?untuk mengktifkan fitur mengikuti via email feedburner menyediakan layanan yang bernama Email Subcriptions. Inilah yang akan kita bahas pada saat ini.

Berikut adalah Cara Mengatasi Pesan Error Feedburner:

• Buka halaman website feedburner di feedburner.disini
• Pilih blog yang akan anda setting, lalu buka tab Publicize seperti gambar di bawah ini dan pilih Email Subcriptions seperti gambar yang saya tandai dibawah ini

• Jika anda telah memilih email subcriptions maka tampilannya akan seperti gambar dibawah ini, selanjutnya pilih aktivate yang saya beri tanda berwarna kuning

• Setelah itu klik save maka email subcriptions anda telah selesai. namun ada baiknya anda mengetahui penerapannya dalam membuat widget seperti pada gambar berikut 

• Yang berwarna kuning adalah ID feedburner anda. Seperti pengalaman saya untuk memasang widget yang lebih menarik maka ID tersebut sangatlah penting untuk kita tanamkan kedalam widget yang tersedia dari teman-teman blogger yang memiliki kreativitas untuk membuat tampilan widget yang lebih menarik khususnya widget Mengikuti via email. Anda juga jangan lupa untuk melakukan setting seperti dibawah ini 

• Setelah itu Save lagi biar lebih yakin. 

Mungkin itu saja yang dapat saya sampaikan, Jika ada kesalahan mohon di komentar setidaknya saya dapat mengetahui dan memperbaiki kesalahan tersebut. Karena yang saya tulis di blog ini adalah sebagian pengalaman pribadi yang saya lakukan sendiri.

Cara Mudah Mendaftar Google Feedburner

Pada kesempatan kali ini saya akan membagikan pengalaman saya kepada anda yang lagi butuh tentunya, kebetulan saya baru saja selesai mendaftar google feedburner itu sebabnya saya menemukan ide untuk posting kali ini yaitu Cara Mudah Mendaftar Google Feedburner

Baiklah sebelum saya mengajarkan caranya sebaiknya kita mengenal dulu apa itu google feedburner, layanan feedburner dikenal sebagai penyedia RSS feed untuk orang yang ingin mengikuti aktivitas postingan terbaru pada blog. Hal tersebut sangat menguntungkan bagi para blogger dan juga pengunjung blog. Apa saja manfaatnya? berikut ini akan saya jelaskan:

• Manfaat bagi pengunjung:  dapat mengikuti setiap postingan terbaru dari blog yang diminatinya dengan cepat hanya dengan modal sebuah email pengujung, karena layanan ini adalah gratis.
• Manfaat bagi blogger:  tentunya sangat menguntungkan karena bagi blogger yang memiliki pengunjung setia ini akan memudahkan untuk meningkatkan jumlah penayangan di blognya meskipun baru memposting. karena secara otomatis feedburner akan memberitahukan kepada pengunjung untuk segera membacanya. setidaknya jumlah penyangan pada blog sangat stabil dengan adanya feedburner.

Baiklah kita persingkat saja penjelasannya, mau informasi lebih lengkap silahkan kunjungan websitenya. selanjutnya kita akan belajar mendaftar google feedburner, berikut ini adalah penjelasannnya:

• Pastikan anda sudah login ke akun google.
• Kunjungi alamat website google feedburner disini
• Jika sudah ke halaman feedburner isikan blog anda di formulir tersebut. seperti di bawah ini

• Setelah diisikan lalu klik next

• Selanjutnya pilih link yang enak dilihat seperti /feeds/posts/default lalu klik next

• Pada formulir ini bertujuan untuk mengisi dengan nama web atau nama admin. jika suda maka klik next

• Sampai tahap ini berhasil mendapatkan link feeburner feed. selanjutnya next lagi

• Centang gambar di atas kecuali item enclosure download setelah itu next lagi

• Selamat sudah selesai ha ha

Cukup mudah bukan? baiklah mungkin hanya ini yang bisa saya sampaikan. Untuk pengaturan subcribe via email silahkan baca postingan berikutnya tentang Cara mengaktifkan subcribe via email

sampai jumpa lagi di postingan berikutnya. Disini