Auto Post Artikel ke Facebook Page

Facebook kini telah menjadi salah satu jejaring sosial yang paling banyak digunakan dan telah memberikan penggunanya banyak pilihan untuk mempromosikan dan berbagi konten dan artikel online dengan pengguna lain.
Belakangan ini, Facebook Page telah memperoleh lebih banyak popularitas dibandingkan dengan produk jejaring sosial lainnya dan juga salah satu cara yang paling banyak digunakan untuk mendapatkan traffic dan popularitas online blog / website. Bagi pengguna website atau blog, merupakan suatu keharusan menggunakan Facebook Page tapi masalahnya yaitu kita harus memposting setiap posting blog secara manual ke halaman Facebook kita.
Jadi untuk memecahkan masalah ini dan membuat proses posting ke Facebook Page secara otomatis, saya akan share tutorial bagaimana cara untuk secara otomatis posting artikel blog ke halaman Facebook menggunakan Aplikasi Facebook dan cara bisa digunakan untuk semua jenis platform blogging seperti WordPress, Blogspot, Joomla dan lain-lain.

Cara Auto Post Artikel ke Facebook Page

• Sebelumnya kita harus punya Facebook Page dulu, kalo belum punya buat disini
• Login ke Facebook anda
• Buka halaman aplikasi RSS Graffiti
• Klik Go to Permission Dialog >> klik OK >> OK >> OK lagi

• Klik Add New Publishing Plan, isi nama publishing plan lalu klik Create Publishing Plan

• Di bagian SOURCES klik Add New, lalu masukkan rss feed blog anda ( contoh : http://allabout-stuff.blogspot.com/rss.xml )

• Sesuaikan settingan Update Frequency, Maximum Posts per Update dan Post Order per Update, lalu klik Save

• Di bagian TARGET klik Add New, di bagian Choose Target dan Publish on Behalf of  pilih Facebook Page anda

• Pilih Post Style Standar, nanti bisa di ganti sesuai keinginan setelah Aplikasinya enable
• Terakhir klik tombol panah OFF sehingga menjadi ON untuk mengaktifkan (enable) Aplikasi

Host File CSS atau JavaScript di Blogger menggunakan Google Drive

Hosting file CSS dan JavaScript di blog Blogger selalu menjadi suatu permasalahan bagi webmaster. Kebanyakan blogger lebih memilih untuk menambahkan seluruh kode StyleSheet (CSS) kedalam template, sehingga membuat loading blog semakin lambat.
Hal ini tentunya membuat blog kita kurang diminati oleh pengunjung. salah satu alternatifnya yaitu dengan membuat file CSS / JavaScript ke dalam file tersendiri dan menguploadnya ke Hosting yang berbeda,
sehingga dapat dengan mudah menerapkannya pada situs blog. Sayangnya, blogger memiliki beberapa keterbatasan yang membuat kita tidak bisa meng-Host file CSS dan JavaScript.
Untungnya, Google Drive menyediakan kita kesempatan untuk meng-Host file CSS, JavaScript dan HTML secara GRATIS. Pada artikel kali ini, saya akan menunjukkan Bagaimana cara meng- Host file CSS dengan Google Drive di Blogger.

Apa Keuntungan dari Hosting CSS / JavaScript dalam satu file?

Blogger tidak memberikan penggunanya fleksibilitas untuk meng- Host file CSS atau JavaScript dalam satu link terpisah. Blogger menyimpan semua coding melalui HTML Tag.

Untuk StyleSheet, tag <style> ini digunakan untuk mendefinisikan informasi gaya / desain untuk dokumen HTML. Kode CSS digunakan untuk menentukan bagaimana setiap elemen HTML harus ditampilkan di web browser. Setiap dokumen HTML dapat berisi beberapa tag <style>.

Untuk tag <script> JavaScript digunakan untuk mendefinisikan script, seperti JavaScript. Tag <script> baik yang berisi pernyataan scripting atau yang menunjuk ke suatu file eksternal (link) melalui atribut "src". Setiap dokumen HTML dapat berisi beberapa tag <script>.

Menggabungkan semua kode StyleSheet (CSS) / JavaScript ke dalam satu file akan membuat sebuah website / blog untuk memuat / loading lebih cepat. Selain itu, membantu mesin pencari (search engine) untuk menjelajah / meng- index situs situs kita dengan mudah dan lancar, sehingga dapat meningkatkan SEO blog / website.

Cara meng- Host file CSS / JavaScript Blogger dengan Google Drive

1. Copy kode CSS di dalam Template blog

• Login ke dashboard blogger
• Klik Template >> Edit HTML, kemudian cari kode <b:skin><![CDATA[
• Copy semua kode CSS yang ada mulai dari setelah tag <b:skin><![CDATA[ sampai sebelum tag ]]></b:skin>
  

2. Menyiapkan file CSS

• Buka Notepad atau Notepad ++ lalu paste kode CSS yang telah di copy dari template kedalam Notepad
• Lalu simpan dengan ekstensi .css

3. Host file CSS ke Google Drive

• Buka halaman Google Drive disini
• Lalu login dengan menggunakan akun Gmail
• Klik tombol Create >> Folder, lalu berinama webhost atau sesuai yang kita mau

• Klik folder yang telah kita buat, lalu klik Upload Icon >> Files...

• Pilih file CSS yang telah disimpan tadi
• Setelah file terupload, klik Share >> pilih Public on the web >> Save

4. Mengcopy Link file CSS untuk blogger

• Klik Kanan di file CSS yang di upload tadi lalu pilih Share >> Share

• Copy link file CSS lalu paste di notepad, linknya akan seperti https://docs.google.com/file/d/your-file-code/
• Ganti menjadi https://googledrive.com/host/your-file-code

5. Menambahkan File CSS yang terlah di Host ke Blogger

• Pastikan membackup template sebelumnya
• Masuk ke Dashboard Blogger >> Klik Template >> Edit HTML
• Pastikan semua kode CSS telah dihapus pada template
• Cari kode <head>, lalu paste kode di bawah ini

<link href='https://googledrive.com/host/your-file-code' rel='stylesheet'/>

• Ganti https://googledrive.com/host/your-file-code dengan link file CSS anda.
• Klik Save Template

5 Best SEO Friendly Blogger Template 2013

Ada ribuan Template Blogger di internet yang profesional dan bebas untuk di-download tapi kebanyakan dari templatenya tidak SEO friendly yang merupakan bagian paling penting untuk web master.
SEO Optimized template (SEO Friendly) membantu kita untuk mendorong lebih banyak traffic ke blog kita dan lebih mudah di index oleh mesin pencari. Di sini saya akan berbagi beberapa template SEO friendly terbaik yang dirancang oleh para pro blogger. Template ini rapi bersih dan sepenuhnya SEO optimized.

1. Salahuddin Ayubi

DEMO| DOWNLOAD

2. Metro UI

DEMO| DOWNLOAD

3. Platinum

DEMO| DOWNLOAD

4. CopyBlogger Theme V2

DEMO| DOWNLOAD

5. Stylify Your Blog

DEMO| DOWNLOAD

Cara Memasang Floating Social Share Widget di Blogger

Social Share Widget merupakan bagian yang sangat penting dan tidak terpisahkan dari website / blog, sekarang sudah menjadi umum dan banyak ditemui di setiap website / blog.
Dengan Social Share Widget ini maka pengunjung yang datang ke website / blog bisa membagikan / share artikel yang disukai dan hal itu secara tidak langsung dapat meningkatkan traffic pada website / blog.

Nah Pada postingan kali ini saya ingin berbagi tutorial bagaimana cara memasang Floating Social Share Widget pada blog blogger.

Add Floating Social Share ke Blog

• Login dan masuk ke dashboard blog anda
• Klik Layout >> Add a Gadget >> HTML/JavaScript Widget
• Paste kode dibawah ini ke dalam widget

<style>
/*-------MBT Floating Counters------------*/
#floatdiv {
    position:absolute;
    width:94px;
    height:229px;
    top:0;
    left:0;
        z-index:100
}

#mbtsidebar {
        border:1px solid #ddd;
        padding-left:5px;
    position:relative;
    height:220px;
    width:55px;
    margin:0 0 0 5px;
}
</style>


<div id="floatdiv">
<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
    </td>
    </tr>
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-shae-button" data-count="vertical" data-via="YOUR-TWITTER">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.MyBloggerTricks.com" target="_blank">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document

   <!--
/* Script by: www.jtricks.com
* Version: 20071017
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
    targetX: 0,
    targetY: 300,
    hasInner: typeof(window.innerWidth) == 'number',
    hasElement: typeof(document.documentElement) == 'object'
        && typeof(document.documentElement.clientWidth) == 'number',
    menu:
        document.getElementById
        ? document.getElementById(floatingMenuId)
        : document.all
          ? document.all[floatingMenuId]
          : document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}
floatingMenu.computeShifts = function ()
{
    var de = document.documentElement;
    floatingMenu.shiftX =
        floatingMenu.hasInner
        ? pageXOffset
        : floatingMenu.hasElement
          ? de.scrollLeft
          : document.body.scrollLeft;
    if (floatingMenu.targetX < 0)
    {
        floatingMenu.shiftX +=
            floatingMenu.hasElement
            ? de.clientWidth
            : document.body.clientWidth;
    }
    floatingMenu.shiftY =
        floatingMenu.hasInner
        ? pageYOffset
        : floatingMenu.hasElement
          ? de.scrollTop
          : document.body.scrollTop;
    if (floatingMenu.targetY < 0)
    {
        if (floatingMenu.hasElement && floatingMenu.hasInner)
        {
            // Handle Opera 8 problems
            floatingMenu.shiftY +=
                de.clientHeight > window.innerHeight
                ? window.innerHeight
                : de.clientHeight
        }
        else
        {
            floatingMenu.shiftY +=
                floatingMenu.hasElement
                ? de.clientHeight
                : document.body.clientHeight;
        }
    }
}
floatingMenu.calculateCornerX = function()
{
    if (floatingMenu.targetX != 'center')
        return floatingMenu.shiftX + floatingMenu.targetX;
    var width = parseInt(floatingMenu.menu.offsetWidth);
    var cornerX =
        floatingMenu.hasElement
        ? (floatingMenu.hasInner
           ? pageXOffset
           : document.documentElement.scrollLeft) +
          (document.documentElement.clientWidth - width)/2
        : document.body.scrollLeft +
          (document.body.clientWidth - width)/2;
    return cornerX;
};
floatingMenu.calculateCornerY = function()
{
    if (floatingMenu.targetY != 'center')
        return floatingMenu.shiftY + floatingMenu.targetY;
    var height = parseInt(floatingMenu.menu.offsetHeight);
    // Handle Opera 8 problems
    var clientHeight =
        floatingMenu.hasElement && floatingMenu.hasInner
        && document.documentElement.clientHeight
            > window.innerHeight
        ? window.innerHeight
        : document.documentElement.clientHeight
    var cornerY =
        floatingMenu.hasElement
        ? (floatingMenu.hasInner
           ? pageYOffset
           : document.documentElement.scrollTop) +
          (clientHeight - height)/2
        : document.body.scrollTop +
          (document.body.clientHeight - height)/2;
    return cornerY;
};
floatingMenu.doFloat = function()
{
    // Check if reference to menu was lost due
    // to ajax manipuations
    if (!floatingMenu.menu)
    {
        menu = document.getElementById
            ? document.getElementById(floatingMenuId)
            : document.all
              ? document.all[floatingMenuId]
              : document.layers[floatingMenuId];
        initSecondary();
    }
    var stepX, stepY;
    floatingMenu.computeShifts();
    var cornerX = floatingMenu.calculateCornerX();
    var stepX = (cornerX - floatingMenu.nextX) * .07;
    if (Math.abs(stepX) < .5)
    {
        stepX = cornerX - floatingMenu.nextX;
    }
    var cornerY = floatingMenu.calculateCornerY();
    var stepY = (cornerY - floatingMenu.nextY) * .07;
    if (Math.abs(stepY) < .5)
    {
        stepY = cornerY - floatingMenu.nextY;
    }
    if (Math.abs(stepX) > 0 ||
        Math.abs(stepY) > 0)
    {
        floatingMenu.nextX += stepX;
        floatingMenu.nextY += stepY;
        floatingMenu.move();
    }
    setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
    if(typeof element[listener] != 'function' ||
       typeof element[listener + '_num'] == 'undefined')
    {
        element[listener + '_num'] = 0;
        if (typeof element[listener] == 'function')
        {
            element[listener + 0] = element[listener];
            element[listener + '_num']++;
        }
        element[listener] = function(e)
        {
            var r = true;
            e = (e) ? e : window.event;
            for(var i = element[listener + '_num'] -1; i >= 0; i--)
            {
                if(element[listener + i](e) == false)
                    r = false;
            }
            return r;
        }
    }
    //if handler is not already stored, assign it
    for(var i = 0; i < element[listener + '_num']; i++)
        if(element[listener + i] == handler)
            return;
    element[listener + element[listener + '_num']] = handler;
    element[listener + '_num']++;
};
floatingMenu.init = function()
{
    floatingMenu.initSecondary();
    floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
    floatingMenu.computeShifts();
    floatingMenu.nextX = floatingMenu.calculateCornerX();
    floatingMenu.nextY = floatingMenu.calculateCornerY();
    floatingMenu.move();
}
if (document.layers)
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
    floatingMenu.init();
    floatingMenu.addEvent(window, 'onload',
        floatingMenu.initSecondary);
}
//-->

</script>

Note : Ganti YOUR-TWITTER dengan Twitter Username anda

• Kemudian Save Widget
• Sekarang Klik Template >> Edit HTML cari kode </head> lalu paste kode dibawah ini tepat diatasnya

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

• Sekarang Save Template

Sekarang buka blog anda, dan sekarang di sisi kiri terdapat Social Share Widget yang melayang.

Cara Memasang Facebook Comment Box untuk Blogger dengan Notifikasi

Setelah pada posting sebelumnya saya share Daftar Social Plugin Facebook yang Harus Anda Gunakan di Blog Anda dan Cara Memasang Facebook Recommendation Bar, kali ini saya akan share Cara Memasang Facebook Comment Box pada Blog Blogspot.

Facebook Comment Box merupakan cara yang baik untuk membuat blog lebih menarik dan mendorong pembaca untuk memberikan komentar jika mereka sudah login ke Facebook. Hal ini juga berfungsi sebagai sumber traffic karena dengan menggunakan Facebook Comment Box maka komentar dan halaman posting akan dikirim ke  dinding Facebook pengunjung.

Bagaiman Cara Memasang Facebook Comment Box pada Blogspot
Berikut ini langkah - langkah mudah untuk memasangnya pada blog anda, ikuti caranya dibawah ini.

1.Membuat Aplikasi Facebook

• Buka Facebook Devloper Page, klik Buat Aplikasi Baru
• Lalu masukkan Nama Aplikasi dan klik Lanjutkan

• Masukkan Security Captcha lalu klik Submit
• Pada halaman berikutnya masukkan Domain anda pada App Domains sesuai dengan domain yang anda gunakan (jika menggunakan custom domain) atau masukkan blogspot.com jika tidak menggunakannya.
• Masukkan alamat blog anda pada Situs web dengan Masuk Log Facebook

• Selanjutnya klik Simpan Perubahan, sekarang Aplikasi Facebook sudah dibuat dan copy App ID untuk digunakan pada tahap berikutnya.

2.Menambahkan Kode Pada Template

berikut ini syarat yang harus dipenuhi agar Facebook Comment Box bisa di gunakan pada blog

i. xmnls attribute
ii. SDK script
iiI. Open graph meta tag
iv. Comment form iframe code

• Log in dan ke Dashboard blog anda dan klik Template >> Edit HTML
• Tekan CTRL + F lalu cari kode <html lalu tambahkan kode berikut di depannya

xmlns:fb='http://www.facebook.com/2008/fbml'

• Sehingga menjadi seperti dibawah ini

html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog…………..2005/gml/expr' >

• Lalu cari kode <body> atau <body lalu paste kode berikut tepat di bawah/setelahnya

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Note : Ganti YOUR APPLICATION ID HERE dengan App ID yang sebelumnya dibuat

• Berikutnya menambahkan Open Graph Meta Tag, cari kode </head> lalu paste kode barikut diatasnya

<meta property="fb:app_id" content="YOUR_APP_ID" />
Note : Ganti YOUR_APP_ID dengan App ID yang sebelumnya dibuat

• Sekarang tinggal langkah terakhir, cari kode <data:post.body/> atau
<div class='post-footer-line post-footer-line-1'> lalu paste kode berikut dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div align='center' class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='http://www.doncaprio.com/wp-content/uploads/2012/08/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div><div align='right'><a href='http://allabout-stuff.blogspot.com/2013/04/facebook-recommendation-bar-blogger.html' target='blank'><small>[Facebook Comment Box For Blogger]</small></a></div></div></p></b:if>


• Lalu Save template

Note : Jika Facebook Comment Box terlihat terlalu kecil da ingin memperbesar ukurannya, ganti width='450' dengan width='600'.

3.Mengaktifkan Notifikasi

Notifikasi sangat berguna ketika ada pengunjung yang mengomentari postingan blog degan Facebook Comment Box maka anda akan mendapatkan notifikasi pada Facebook anda.

• Buka URL : https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID
• Ganti YOUR_APP_ID dengan App ID yang sudah dibuat
• Klik Pengaturan dan tambahkan anda sebagai Moderator, klik Simpan

Sekarang ketika ada pengunjung yang memberikan komentar pada posting blog anda, maka secara otomatis anda akan mendapat notifikasi pada Facebook anda.

Tutorial Cara Memasang Facebook Recommendation Bar di Blog Blogger

Facebook Recommendation Bar adalah salah satu widget terbaik yang saya rekomendasikan untuk semua blogger, jika ingin meningkatkan pageviews dan bounce rate blog Anda, karena dengan Facebook Recommendation Bar akan membuat pembaca untuk tinggal lebih lama di blog Anda dengan melibatkan mereka dengan user lainnya.

Berikut ini cara untuk memasang Facebook Recommendation Bar di blog Blogger anda :

Create Facebook App ID

Langkah pertama membuat Facebook Application untuk mendapatkan App ID untuk widget Facebook Recommendation Bar

• Buka Facebook Developer Page
• Jika sudah pernah membuat Aplikasi Facebook sebelumnya tinggal klik Buat Aplikasi Baru
• Setelah pop-up Create New App muncul, ketik Recommendation bar di kolom Nama Aplikasi lalu klik Lanjutkan

• Masukkan Chaptcha lalu klik Submit
• Sekarang klik Situs web dengan Masuk Log Facebook tab dan masukkan alamat blog anda disana, lalu klik Simpan Perubahan

• Sekarang Facebook App ID sudah siap, copy App ID tersebut untuk digunakan di dalam blog anda

Memasang Widget Facebook Recommendation Bar di Blogger

• Login ke Dashbord blog anda
• Klik Template > Edit HTML
• Cari kode (CTRL+F) <html lalu ganti dengan code dibawah ini

<html xmlns:fb='http://ogp.me/ns/fb#'

• Cari kode </body> lalu paste kode berikut sebelum / diatas kode </body>

<div id='fb-root'/>
<script>
//Facebook Recommendation bar tutorial by www.allabout-stuff.blogspot.com
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your-App-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

• Ganti Your-App-ID dengan Facebook App ID yang tadi telah di copy sebelumnya
• Cari kode </head> lalu pate kode berikut sebelum / diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>

<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>


• Lalu yang terakhir cari kode <data:post.body/> paste kode berikut setelah / dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.realcombiz.com' trigger='40%'/></div>
</b:if></b:if>

• num_recommendations: ini merupakan jumlah posting yang akan ditampilkan, Anda dapat menyesuaikan dengan mengedit 3
• Side: widget akan mengapung ke kanan secara default, untuk memindahkan ke kiri, tinggal mengubah right menjadi left
• Trigger: widget akan memperluas setelah pembaca menscroll ke bawah sampai 40% pada halaman blog Anda
• Ganti http://allabout-stuff.blogspot.com dengan url blog Anda
• Langkah terakhir Simpan template anda.

Daftar Social Plugin Facebook yang Harus Anda Gunakan di Blog Anda

Facebook menjadi salah satu support yang paling penting bagi blog dan blogger. Hampir semua blog memiliki halaman di Facebook dan tanpa dukungan dari Facebook, blogger pasti akan melihat traffic yang sedikit pada blog mereka.

Baru-baru ini saya iseng mengulas beberapa situs melalui fiverr.com dan saya menemukan bahwa banyak webmaster lebih memilih menggunakan gambar dengan link ke halaman Facebook mereka. Awalnya saya pikir hal itu sia-sia. Pada dasarnya hanya satu dari setiap 1000 pengunjung berpotensi menjadi fans dan akan kembali mengunjungi halaman Anda melalui beberapa jejaring sosial. Dan jika Anda menampilkan link gambar pada halaman Anda, kebanyakan dari mereka tidak akan repot-repot untuk pergi ke halaman Anda.

Jadi inilah daftar plugin dari Facebook yang dapat digunakan untuk membantu meningkatkan traffic pada blog atau website Anda. Hal ini juga dapat ditemukan di halaman Facebook Developers.

1. Social Plugin Like button

Siapa yang tidak suka berbagi social Like Button? Sekarang lebih dari satu miliar halaman web memiliki tombol yang terintegrasi dengan konten mereka yang bisa di-share dan di like.

2. Social Plugin Comments

Ini adalah tools yang berguna berikutnya dari Facebook yang dapat Anda tambahkan ke blog Anda. Ada banyak keuntungan dengan menambahkan plugin ini ke blog Anda. Salah satu alasan utama adalah sebagai alat bantu percakapan di blog anda, jika seseorang memberikan komentar pada blog anda, maka secara otomatis komentar tersebut akan berada pada timeline Facebook mereka, yang membuat lebih banyak pengunjung ke blog anda.

3. Social Plugin Like Box

Like Box digunakan untuk halaman facebook, ketika ditambahkan ke blog Anda, akan menunjukkan jumlah pengikut yang Anda miliki dengan jumlah dan like button.

4. Social Plugin Follow/Subscribe button

Meskipun tidak begitu populer, jika Anda ingin menampilkan informasi penulis dan link ke profil pribadi Anda dari blog, Anda dapat menggunakan tombol ini di blog Anda.

5. Social Plugin Recommendations Bar

Baru-baru ini dikembangkan oleh Facebook Developers, widget ini mendapatkan popularitas yang cepat. Jika halaman Anda memiliki banyak shared content, maka widget ini akan menampilkan konten yang telah mendapat jumlah like maksimum dari pengguna.

Meskipun ada banyak widget yang tersedia di Facebook yang dapat ditampilkan di blog Anda, saya pikir ini adalah 5 plugin Facebook penting yang akan membantu kegiatan blogging anda.

Semua plugin Facebook dapat ditemukan di halaman Facebook Developers.

Custom Bullet List Blogger

This summary is not available. Please click here to view the post.

6 Popular Post Widget Terbaik untuk Blog Blogger

Popular post widget merupakan widget yang selalu ada di hampir semua blog blogger. widget ini merupakan widget standar yang ditawarkan oleh blogger dan dapat ditambahkan melalui tab layout dengan mengklik "Add a gadget link".
Ada beberapa CSS dapat digunakan pada template blog untuk memodifikasi dan mempercantik tampilan widget ini sehingga terlihat lebih menarik.

Ada banyak sekali CSS yang dapat digunakan untuk memodifikasi widget popular post, namun kali ini saya mau share 6 Costum Popular Post Widget yang menurut saya terbaik.
berikut ini pilihan yang temen-temen bisa terapkan pada blog kalian masing - masing, silahkan dipilih :

1. Simple Hover Effect Popular Post Widget

Widget yang simple dengan semua posting berbentuk kapsul ketika mouse di arahkan ke salah satu posting, maka backgroundnya akan berubah warna (hover effect).

Credits dan Coding untuk Widget ini

2. Hover effect Widget lainnya

Widget lainnya dengan Hover Effect

Credits dan Coding untuk Widget ini

3. MBT styled popular post widget

Widget ini banyak digunakan oleh para blogger, widget yang di buat oleh myBloggerTricks yang terkenal dan mereka juga menggunakan widget ini secara pribadi pada template blognya.

Credits dan Coding untuk Widget ini

4. Multi Colored Popular Post Widget

Widget full colour yang saya gunakan pada blog saya saat ini, warna pada setiap post bisa di sesuaikan dengan selera sendiri.

Credits dan Coding untuk Widget ini

5. Rotating Slides Of Popular Posts Widget

Tidak suka widget popular post yang statis? silahkan coba widget ini, widget ini akan merotate post pada popular post secara dinamis.

Credits dan Coding untuk Widget ini

6. Attractive Blogger Popular Post Widget With Different Style

Widget yang sangat attraktif. ketika mouse di arahkan ke atas posting maka deskripsi posting akan muncul.

Credits dan Coding untuk Widget ini

Pure CSS Expanded "Social Network" Widget

Halo semua temen - temen Blogger, Apa kabar? Hari ini saya akan posting mengenai widget "CSS expanded social networks".
Widget ini sangat atraktif dan memiliki banyak sosial media channel yang akan memberikan kemudahan pengunjung untuk mengikuti perkembangan blog anda.
Setiap tombol sosial media memiliki warna profesional sendiri dengan sliding effect mengagumkan.

Untuk live previewnya, saya memiliki demo live mengenai warna sliding effect yang berbeda dari setiap tombol sosial media yang diberikan di bawah ini.
Seperti yang saya sebutkan di atas tombol masing-masing memiliki warna profesional mereka sendiri dengan sliding effect mengagumkan.

FEATURES:

+ Covers the major social networking buttons plus RSS icon.
+ Smooth Sexy expand on hover Use of CSS and sprites image.
+ Very neat and clean No JavaScript. No jQuery. It's pure CSS

CLICK "LIVE DEMO" BUTTON

DEMO

THE HTML

<!--Pure CSS Expanded "Social Network" Widget By MoreBlogTools.com-->
<ul id="MoreBlogTools-SNS">
<li ><a href="Facebook URL" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span>
</li>
<li ><a href="Twitter URL" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span>
</li>
<li ><a href="Google+ URL" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span>
</li>
<li ><a href="Pinterest URL" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span>
</li>
<li ><a href="Linkedin URL" class="icon linked" >Follow us on LinkedIn</a><span>Follow us on LinkedIn</span>
</li>
<li ><a href="DeviantArt URL" class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span>
</li>
<li ><a href="YouTube URL" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span>
</li>
<li ><a href="RSS Feed URL" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span>
</li>
</ul>
<!--Pure CSS Expanded "Social Network" Widget By MoreBlogTools.com-->
Ganti semua URL yang di highlight dengan URL Social Media yang ingin di tambahkan.

THE CSS

/* Pure CSS Expanded "Social Network" Widget By MoreBlogTools.com */
#MoreBlogTools-SNS {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#MoreBlogTools-SNS li {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#MoreBlogTools-SNS .icon {
background: #D91E76 url('http://3.bp.blogspot.com/-unjaHZfdU1k/UK7b1J4pfOI/AAAAAAAAAzA/r7ccqS2FovU/s1600/MoreBlogTools-SNS.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);
border-radius: 30px;
display: block;
color: #141414;
float:none;
height: 48px;
line-height: 48px;
margin: 5px 0;
position: relative;
text-align: left;
text-indent: 90px;
text-shadow: #333 0 1px 0;
white-space: nowrap;
width: 48px;z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;
}
#MoreBlogTools-SNS span:hover {
visibility: hidden;
}
#MoreBlogTools-SNS span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#MoreBlogTools-SNS .icon {
color: #fafafa;
overflow: hidden;
}
#MoreBlogTools-SNS .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#MoreBlogTools-SNS .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#MoreBlogTools-SNS .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#MoreBlogTools-SNS .pint {
background-color: rgba(204, 0, 0, .42);
background-position: 0 -526px;
}
#MoreBlogTools-SNS .linked {
background-color: rgba(0, 87, 114, .42);
background-position: 0 -574px;
}
#MoreBlogTools-SNS .deviant {
background-color: rgba(76, 122, 74, .42);
background-position: 0 -622px;
}
#MoreBlogTools-SNS .ytube {
background-color: rgba(170, 0, 0, .42);
background-position: 0 -670px;
}
#MoreBlogTools-SNS .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#MoreBlogTools-SNS li:hover .icon {
width: 250px;
}
#MoreBlogTools-SNS li:hover .icon {
background-color: #d91e76;
}
#MoreBlogTools-SNS li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#MoreBlogTools-SNS li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#MoreBlogTools-SNS li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#MoreBlogTools-SNS li:hover .pint {
background-color: #C00;
background-position: 0 -142px;
}
#MoreBlogTools-SNS li:hover .linked {
background-color: #005772;
background-position: 0 -190px;
}
#MoreBlogTools-SNS li:hover .deviant {
background-color: #4C7A4A;
background-position: 0 -238px;
}
#MoreBlogTools-SNS li:hover .ytube {
background-color: #A00;
background-position: 0 -286px;
}
#MoreBlogTools-SNS li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#MoreBlogTools-SNS .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
/* Pure CSS Expanded "Social Network" Widget By MoreBlogTools.com */

LANGKAH - LANGKAH MENAMBAHKAN WIDGET KE BLOG BLOGGER

1. Login ke Blogger Dashboard.
2. Klik drop-down menu dan pilih "Layout".
3. Klik pada bagian "Add a Gadget" link.
4. Scroll dan cari "HTML/JavaScript" elemen dari pop-up gadget list.
5. Copy code dibawah dan paste kan ke dalam "Content Box".
6. Klik "Save".
<!--Pure CSS Expanded "Social Network" Widget By MoreBlogTools.com-->
<style>
#MoreBlogTools-SNS {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#MoreBlogTools-SNS li {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#MoreBlogTools-SNS .icon {
background: #D91E76 url('http://3.bp.blogspot.com/-unjaHZfdU1k/UK7b1J4pfOI/AAAAAAAAAzA/r7ccqS2FovU/s1600/MoreBlogTools-SNS.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);
border-radius: 30px;
display: block;
color: #141414;
float:none;
height: 48px;
line-height: 48px;
margin: 5px 0;
position: relative;
text-align: left;
text-indent: 90px;
text-shadow: #333 0 1px 0;
white-space: nowrap;
width: 48px;z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;
}
#MoreBlogTools-SNS span:hover {
visibility: hidden;
}
#MoreBlogTools-SNS span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#MoreBlogTools-SNS .icon {
color: #fafafa;
overflow: hidden;
}
#MoreBlogTools-SNS .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#MoreBlogTools-SNS .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#MoreBlogTools-SNS .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#MoreBlogTools-SNS .pint {
background-color: rgba(204, 0, 0, .42);
background-position: 0 -526px;
}
#MoreBlogTools-SNS .linked {
background-color: rgba(0, 87, 114, .42);
background-position: 0 -574px;
}
#MoreBlogTools-SNS .deviant {
background-color: rgba(76, 122, 74, .42);
background-position: 0 -622px;
}
#MoreBlogTools-SNS .ytube {
background-color: rgba(170, 0, 0, .42);
background-position: 0 -670px;
}
#MoreBlogTools-SNS .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#MoreBlogTools-SNS li:hover .icon {
width: 250px;
}
#MoreBlogTools-SNS li:hover .icon {
background-color: #d91e76;
}
#MoreBlogTools-SNS li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#MoreBlogTools-SNS li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#MoreBlogTools-SNS li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#MoreBlogTools-SNS li:hover .pint {
background-color: #C00;
background-position: 0 -142px;
}
#MoreBlogTools-SNS li:hover .linked {
background-color: #005772;
background-position: 0 -190px;
}
#MoreBlogTools-SNS li:hover .deviant {
background-color: #4C7A4A;
background-position: 0 -238px;
}
#MoreBlogTools-SNS li:hover .ytube {
background-color: #A00;
background-position: 0 -286px;
}
#MoreBlogTools-SNS li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#MoreBlogTools-SNS .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
</style>
<ul id="MoreBlogTools-SNS">
<li ><a href="Facebook URL" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span>
</li>
<li ><a href="Twitter URL" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span>
</li>
<li ><a href="Google+ URL" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span>
</li>
<li ><a href="Pinterest URL" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span>
</li>
<li ><a href="Linkedin URL" class="icon linked" >Follow us on LinkedIn</a><span>Follow us on LinkedIn</span>
</li>
<li ><a href="DeviantArt URL" class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span>
</li>
<li ><a href="YouTube URL" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span>
</li>
<li ><a href="RSS Feed URL" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span>
</li>
</ul>
<!--Pure CSS Expanded "Social Network" Widget By MoreBlogTools.com-->

Credit thanks to MoreBlogTools.com

7 Template Blogger Terbaik Februari 2013

Pada posting kali ini saya akan membagikan beberapa template terbaik di Februari 2013.

Bagi para pengguna blogger, template mempunyai peran yang sangat penting. Karena bagus atau tidaknya suatu blog selain dinilai dari kontennya juga dilihat dari tampilannya.

Jika tampilannya unik dan menarik maka pengunjung akan merasakan keseriusan pemilik blog dalam menyajikan kontennya dan akan senang untuk berkunjung kembali.


Berikut ini saya share 7 Template Blogger Terbaik Februari 2013 :

1. Windows 8 UI blogger template

Download | Demo

+ High stylish design
+ One column no sidebar
+ Responsive design

2. Sikuai Sumatera

Download | Demo

+ Perfect for photography blogs
+ Two column
+ Left sidebar

3. TWITTER BLOGGER TEMPLATE

Download | Demo

+ Twitter style
+ Two column
+ Right Sidebar

4. MusiMag Blogger Template

Download | Demo

+ Suitable for video blogs
+ Youtube play featured content slider
+ Impressive design

5. Covenant Blogger Template

Download | Demo

+ Featured slider
+ Two sidebar, right sidebar
+ Ads ready
+ 4 column footer

6. Ajaxify Blogger Template

Download | Demo

+ Two column
+ Right sidebar
+ Four column footer

7. Quintel Blogger Template

Download | Demo

+ Two column
+ Right sidebar
+ Light colors and neat design