Cara terbaik meningkatkan kecepatan loading blog dijamin berhasil

Berikut ini 15 langkah yang harus dilakukan untuk mempercepat Loading blog. Kelimabelas langkah ini akan meningkatkan kecepatan loading blog Anda 20-30%. Untuk diketahui, 15 langkah ini bukan hasil pemikiran tapi berdasarkan pengalaman nge-blog selama beberapa tahun (You must remember that Experience is the best teacher).

1. Compress semua gambar yang ada di blog baik yang ada di header, footer, sidebar maupun yang ada di dalam posting. Untuk compress gambar, anda bisa menggunakan software atau layanan image compressor online seperti Yahoo! Smush.it, Free Image Optimizer, TinyPNG, Compressnow dan lain-lain.
2. Compress kode CSS menggunakan layanan CSS Compressor dari csscompressor.com atau Online YUI Compressor dari refresh-sf.com/yui.
3. Gunakan fitur Read More otomatis di halaman Home blog. Dengan adanya fitur read more, jumlah karakter yang tampil di halaman home berkurang sehingga secara otomatis akan mengurangi load time.
4. Compress kode JavaScript Anda di Online YUI Compressor.
5. Batasi jumlah posting yang ada di halaman Home. Sebaiknya posting yang tampil di halaman Home tidak lebih dari 5 posting. Semakin sedikit jumlah posting yang tampil maka semakin cepat loading blog kita (Khususnya di halaman home).
6. Jangan terlalu banyak memasang Widget. Gunakanlah widget yang perlu-perlu saja seperti Widget Google+, Widget Popular Post, Widget label dan Widget Artikel Terkait (Semuanya itu adalah Widget Default Blogger).
7. Jangan menambahkan Effek-effek yang tidak bermamfaat di blog seperti efek gelembung pada crusor, efek bunga berguguran, efek kembang api dan yang lainnya.
8. Jika Anda adalah salah satu Publisher iklan, Jangan terlalu banyak menampilkan iklan. Iklan yang terlalu banyak akan merusak tampilan blog, mengganggu kenyamanan pengunjung dan memperlambat loading blog.
9. Gunakan Font default blogger seperti Tahoma, Georgia, Times New Roman, Verdana dan Arial.
   
10. Jangan menggunakan komentar default blogger tapi gunakan komentar yang baru-baru ini dirilis oleh Google yaitu Komentar Google Plus
11. Yang menggunakan template default blogger, jangan menggunakan kode JavaScript atau CSS External. Kedua kode tersebut lebih baik langsung dipasang di template. (Apa alasannya? Akan di bahas pada posting selanjutnya).
12. Yang menggunakan template bukan template default blogger, lebih baik Anda menyimpan kode JavaScript atau CSS menggunakan batuan pihak ketiga seperti Google Drive atau DropBox.
13. Jika Anda menambahkan fitur Share Buttons atau tombol berbagi, Buang share buttons default template. Ini khusus buat pengguna template default blogger.
14. Buat yang suka melalukan Link Exchange, jangan menampilkan daftar link Anda di Sidebar atau Footer, tapi sediakan satu laman khusus untuk daftar link. Silahkan kunjungi Bantuan Google untuk informasi lebih lanjut.
15. Jangan memasang video terlalu banyak di sidebar atau di dalam artikel. Video memiliki pengaruh yang besar terhadap kecepatan blog.

Menambahkan efek ketikan pada teks atau tulisan

Apakah sobat blogger pernah mendengar istilah Typing Text? Typing Text merupakan sebuah metode untuk menampilkan teks seperti sedang di ketik. Teknik yang digunakan untuk membuat Typing Text bukan marquee, walaupun keduanya sama-sama menampilkan teks yang bergerak. Sobat blogger dapat memamfaatkan Efek Typing Text yang di buat oleh Dynamic Drive ini dalam banyak hal seperti untuk membuat Announcement, Warnning, Pesan dan lain-lain.

Demo

Selamat datang buat semua pengunjung Tutorial Blogspot!
Anda adalah segalanya bagi kami (We are nothing without you)

Sebagai ungkapan terima kasih kami kepada Anda semua, kami akan selalu menyuguhkan tutorial terbaik, salah satunya seperti yang Anda lihat saat ini.

---

Cara membuat tulisan ala ketikan

---

Sobat blogger tidak perlu edit template untuk menambahkan efek ini. Sobat blogger cukup meng-copy paste kode berikut dan meletakkannya di tempat yang diinginkan:

<script type="text/javascript" src="https://googledrive.com/host/0BwlVU1_5kLcNMzRHTkFiTjJMX0E"></script>
<div id="example1">Letakkan teks Anda disini...</div>
<p id="example2">Letakkan teks Anda disini...</p>
<script type="text/javascript">
//Define first typing example:
new TypingText(document.getElementById("example1"));
//Define second typing example (use "slashing" cursor at the end):
new TypingText(document.getElementById("example2"), 100, function(i){ var ar = new Array("\\", "|", "/", "-"); return " " + ar[i.length % ar.length]; });
//Type out examples:
TypingText.runAll();
</script>
<script>
<!--
document.write(unescape("\x3C\x70\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x22\x3E\x54\x79\x70\x69\x6E\x67\x20\x54\x65\x78\x74\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x74\x75\x74\x6F\x72\x69\x61\x6C\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x3E\x54\x75\x74\x6F\x72\x69\x61\x6C\x20\x42\x6C\x6F\x67\x73\x70\x6F\x74\x3C\x2F\x61\x3E\x3C\x2F\x70\x3E"));
//-->
</script>

Tambahan :

• Ganti tulisan yang warna merah sesuka hati sobat blogger

Cara Memasang Widget Feed Validator

Sebelum Anda memasang Widget Feed Validator dari W3c, yang harus Anda lakukan pertama adalah melakukan validasi feed di laman W3c. Silahkan kunjungi URl ini untuk melakukannya : http://validator.w3.org/unicorn/#validate-by-uri+task_feed. Pada kolom yang tersedia, masukkan URL web blog sobat. Setelah itu, tekan tombol "Check/Periksa". Jika atom Feed Anda Valid, Anda akan mendapatkan pemberitahuan seperti di bawah ini.

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

1. Download the "valid Atom 1.0" banner.
2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
3. Add this HTML to your page (change the image src attribute if necessary):
   

   <a href="http://feed2.w3.org/check.cgi?url=http%3A//www.tutorialblogspot.com/feeds/posts/default">
       <img src="valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" />
   </a>

If you would like to create a text link instead, here is the URL you can use:
http://feed2.w3.org/check.cgi?url=http%3A//www.tutorialblogspot.com/feeds/posts/default

Apa yang harus dilakukan setelah mendapatkan pemberitahuan seperti di atas? Yang harus Anda lakukan adalah meng-copy paste kode yang terdapat pada poin ke tiga ke blog Anda dengan cara :

1. Login ke blogger.com
2. Pada menu drop down pilih Tata Letak
3. Klik Add a Gadget dan HTML/JavaScript
4. Letakkan kode yang didapat pada kolom yang tersedia.
5. Klik tombol simpan

Jika posisi widget Feed Validator tidak di posisi tengah, Anda bisa menyisipkan tag center sebelum dan setelah kode. Lihat contoh berikut!

<center>
<a href="http://feed2.w3.org/check.cgi?url=http%3A//www.tutorialblogspot.com/feeds/posts/default">
    <img src="valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>
</center>

Cara membuat blog terlengkap dan terbaru

Para pengusaha, pelajar, pedagang, tenaga pendidik, politikus, konselor, petani dan profesi yang lainnya mulai banyak yang tertarik untuk memiliki Web blog. Beragam alasan terungkap kenapa mereka membuat Web blog seperti : Untuk mempromosikan usaha, Sebagai wadah berbagi informasi yang diketahui, Untuk mendapatkan uang secara online atau alasan-alasan yang lainnya. Apapapun alasannya, yang pasti web blog dapat menjadi aset berharga buat kita semua untuk hari ini dan untuk masa yang akan datang.

Wordpress.org atau blogger.com? Ada dua situs populer yang menyediakan layanan gratis (Free) untuk membuat blog yaitu Wordpress.org dan blogger.com. Kedua platform tersebut memiliki kelebihan masing-masing dan juga sama-sama memiliki kekurangan. Silahkan Anda cari informasi tentang kekurangan dan kelebihan kedua platform di Google!

Secara pribadi, kedua platform tersebut pernah saya coba. Jadi, kelebihan dan kekurangan kedua platform saya tahu sepenuhnya. Jika ini adalah kali pertama Anda akan menggeluti dunia blogging, saya sarankan Anda untuk membuat blog di blogger.com karena blogger.com adalah situs yang dikelola oleh mesin pencari terbesar di dunia yakni Google.

Google membeli Blogger.com pada tahun 2002. Blogger.com adalah sebuah tool online yang sangat populer yang membantu pengguna dengan mudah membuat dan mengelola blog. Tidak banyak waktu kita yang akan terbuang untuk membuat blog di blogger.com, kita hanya membutuhkan waktu kurang dari 15 menit.

Layaknya mengendarai speda motor dan tinggal di desa/kota, kita dituntut untuk memiliki identitas pengenal berupa SIM dan KTP, begitu juga membuat sebuah blog, kita diharuskankan memiliki identitas pengenal berupa Email. Sebaik-baik email yang digunakan untuk daftar di blogger.com adalah Email Gmail, karena akan ada akun Google terkait yang akan Anda butuhkan untuk kedepannya seperti FeedBurner, Analytics, Google Drive, dll.

Mari mulai membuat web blog dengan membuat Email baru terlebih dahulu

1. Kunjungi URL berikut ini: mail.google.com/?hl=id

2. Klik tombol merah yang bertuliskan "Buat Akun"

3. Pada kolom pertama baris pertama, isikan dengan nama depan Anda dan baris kedua dengan nama belakang Anda.
4. Kolom kedua isi dengan nama email yang diinginkan tanpa menggunakan Spasi.
5. Kolom ketiga isi dengan Password Anda dan ulangi isi password Anda pada kolom keempat.

6. Kolom kelima isikan dengan Tahun Lahir, bulan dan tanggal lahir Anda (Untuk bulan, klik tanda panah. Anda tidak perlu menulis)
7. Kolom keenam, rubah gender (Jenis kelamin) Anda dengan menggunakan tanda panah
8. Kolom ketujuh, masukkan No HP Anda dengan berawalan +62........
9. Kolom kedelapan di lewati saja.

10. Klik tanda centang pada kotak kecil untuk melewati Verifikasi kata.
11. Tentukan lokasi negara Anda, gunakan juga tanda panah!
12. Kasih tanda centang pada kalimat "Saya menyetujui persyaratan Layanan dan kebijakan privasi Google
13. Tekan tombol biru yang bertuliskan "Langkah berikutnya"

14. Anda akan diajak untuk melewati proses verifikasi akun menggunakan HP. Jadi, siapkan HP Anda yang menggunakan nomor yang sudah Anda gunakan tadi. Jika HP Anda sudah siap, klik tombol "Lanjutkan"

15. Kemudian masukkan nomor yang Anda terima melalui SMS yang dikirim oleh Google pada kotak yang tersedia.
16. Selanjutnya, klik tombol lanjutkan

17. Proses Selanjutnya adalah membuat Profil (Hal ini dilakukan karena Akun Gmail yang Anda buat akan menjadi Profil Google+ Anda). Anda bisa mengganti foto frofil terlebih dahulu dengan menekan tombol merah "Tambahkan foto Profil" atau klik "Langkah berikutnya" untuk melewati proses ini. Supaya searah, sebaiknya Anda memilih "Tambahkan foto Profil".

18. Jendela baru akan muncul, klik "Pilih foto dari komputer Anda" (Cari foto yang akan digunakan)
19. Setelah diunggah, klik "Terapkan sebagai Foto Profil"

20. Anda akan diarahkan pada laman sebelumnya, klik "Langkah berikutnya"

21. Klik "Lanjutkan ke Gmail"
22. Anda akan langsung dibawa ke laman email Gmail, itu artinya akun Email Anda sudah jadi.

Cara Membuat Blog

1. Buka tab baru, masukkan URL www.blogger.com pada media browser Anda lalu tekan "Enter"
2. Masukkan Password akun Gmail Anda dan klik tombol "Masuk"

3. Anda akan diminta kembali untuk Konfirmasikan Profil Anda. Klik "Lanjutkan ke blogger"

4. Klik tombol "Blog Baru"

5. Jendela baru muncul, kolom pertama isikan dengan judul blog yang Anda inginkan.
6. Kolom kedua isikan dengan alamat blog yang Anda sukai tanpa menggunakan spasi (Contoh alamat blog http://ngeblogbersamadiriku.blogspot.com). Alamat blog sudah bayak digunakan oleh pengguna yang lain. Jadi, jika muncul tanda seru dengan background warna kuning, itu artinya Alamat blog sudah dipakai oleh orang lain. Pilihlah alamat blog yang mudah diingat. Bila tanda centang dengan background warna biru sudah muncul, klik tombol "Buat blog".

7. Klik tombol "Lihat blog" untuk melihat secara langsung blog yang sudah Anda Buat.

Ketika Anda sudah mencapai tahap di atas, itu artinya blog Anda sudah jadi. Tapi disini saya akan tambahkan sedikit dengan bagaimana cara menulis artikel (Posting di blog), supaya blog tidak terlihat polos atau kosong. Berikut ini langkah-langkahnya!

1. Klik tombol warna orange yang menggunakan ikon pencil

2. Kolom Pertama berisi Judul Artikel Anda
3. Kolom kedua, Isi dengan Artikel Anda
4. Klik Tombol Publikasikan
5. Muat Ulang atau reload blog Anda untuk melihat artikel yang sudah Anda buat.

Ada banyak hal yang belum saya jelaskan tentang cara membuat artikel di blog seperti cara memasukkan video, cara menampilkan gambar, cara membuat label dan seterusnya. Untuk itu, selalu kunjungi www.tutorialblogspot.com untuk informasi yang lebih lengkap dan jelas. www.tutorialblogspot.com tidak hanya menyajikan informasi dasar tentang dunia blogger akan tetapi disana Anda bisa memperoleh ratusan informasi untuk membuat blog Anda selayaknya blog atau situs professional.

Solusi Untuk Meningkatkan Kinerja Loading Gambar Blog

Saat lagi surfing di beberapa web blog, saya menemukan beberapa web blog yang menggunakan gambar besar sebagai background header atau gambar besar dalam posting tapi loading blog tidak terganggu. Ketika gambar di muat, gambar tidak langsung terlihat sepenuhnya tapi sepotong demi sepotong gambar terlihat setelah itu baru sepenuhnya gambar terbuka. Saat itu saya yakin kalau pemilik blog menggunakan script tertentu sehingga gambar ngeload seperti itu. Saya pun melihat view source dari web blog tersebut dan menemukan kode yang mereka gunakan.

Kode yang mereka gunakan, mereka sebut dengan nama Lazy Load Image Plug-in. Ternyata kode ini sudah lulus tes di beberapa aplikasi seperti Safari 5.1, Safari 6, Chrome 20, Firefox 12 pada OSX dan Chrome 20, IE 8, IE 9 di Windows, Safari 5.1 pada iOS 5 untuk iPhone dan iPad.

Lazy Load Image Plug-in dapat meningkatkan kinerja gambar yang berupa :

1. Gambar Posting
2. Thumbnail Posting
3. Gravatar gambar
4. Konten iframe

Cara memasang Lazy Load Image Plug-in di blog

• Login ke blogger → Klik Template → Pilih Edit HTML
• Letakkan kode berikut di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
/*
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007-2012 Mika Tuupola
* Project home: http://www.appelsiini.net/projects/lazyload Version:  1.8.3
* Republished by Muhammad Septi Rosidi www.tutorialblogspot.com
*/
(function($, window, document, undefined) {
    var $window = $(window);
    $.fn.lazyload = function(options) {
        var elements = this;
        var $container;
        var settings = {
            threshold       : 0,
            failure_limit   : 0,
            event           : "scroll",
            effect          : "show",
            container       : window,
            data_attribute  : "original",
            skip_invisible  : true,
            appear          : null,
            load            : null
        };
        function update() {
            var counter = 0;
            elements.each(function() {
                var $this = $(this);
                if (settings.skip_invisible && !$this.is(":visible")) {
                    return;
                }
                if ($.abovethetop(this, settings) ||
                    $.leftofbegin(this, settings)) {
                        /* Nothing. */
                } else if (!$.belowthefold(this, settings) &&
                    !$.rightoffold(this, settings)) {
                        $this.trigger("appear");
                        /* if we found an image we'll load, reset the counter */
                        counter = 0;
                } else {
                    if (++counter > settings.failure_limit) {
                        return false;
                    }
                }
            });
        }
        if(options) {
            /* Maintain BC for a couple of versions. */
            if (undefined !== options.failurelimit) {
                options.failure_limit = options.failurelimit;
                delete options.failurelimit;
            }
            if (undefined !== options.effectspeed) {
                options.effect_speed = options.effectspeed;
                delete options.effectspeed;
            }
            $.extend(settings, options);
        }
        /* Cache container as jQuery as object. */
        $container = (settings.container === undefined ||
                      settings.container === window) ? $window : $(settings.container);
        /* Fire one scroll event per scroll. Not one scroll event per image. */
        if (0 === settings.event.indexOf("scroll")) {
            $container.bind(settings.event, function(event) {
                return update();
            });
        }
        this.each(function() {
            var self = this;
            var $self = $(self);
            self.loaded = false;
            /* When appear is triggered load original image. */
            $self.one("appear", function() {
                if (!this.loaded) {
                    if (settings.appear) {
                        var elements_left = elements.length;
                        settings.appear.call(self, elements_left, settings);
                    }
                    $("<img />")
                        .bind("load", function() {
                            $self
                                .hide()
                                .attr("src", $self.data(settings.data_attribute))
                                [settings.effect](settings.effect_speed);
                            self.loaded = true;
                            /* Remove image from array so it is not looped next time. */
                            var temp = $.grep(elements, function(element) {
                                return !element.loaded;
                            });
                            elements = $(temp);
                            if (settings.load) {
                                var elements_left = elements.length;
                                settings.load.call(self, elements_left, settings);
                            }
                        })
                        .attr("src", $self.data(settings.data_attribute));
                }
            });
            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if (0 !== settings.event.indexOf("scroll")) {
                $self.bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $self.trigger("appear");
                    }
                });
            }
        });
        /* Check if something appears when window is resized. */
        $window.bind("resize", function(event) {
            update();
        });
        /* With IOS5 force loading images when navigating with back button. */
        /* Non optimal workaround. */
        if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
            $window.bind("pageshow", function(event) {
                if (event.originalEvent.persisted) {
                    elements.each(function() {
                        $(this).trigger("appear");
                    });
                }
            });
        }
        /* Force initial check if images should appear. */
        $(window).load(function() {
            update();
        });
        return this;
    };
    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
    $.belowthefold = function(element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.height() + $window.scrollTop();
        } else {
            fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };
    $.rightoffold = function(element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.width() + $window.scrollLeft();
        } else {
            fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
    $.abovethetop = function(element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollTop();
        } else {
            fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
    };
    $.leftofbegin = function(element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollLeft();
        } else {
            fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    $.inviewport = function(element, settings) {
         return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
                !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
     };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() or */
    /* $("img").filter(":below-the-fold").something() which is faster */
    $.extend($.expr[':'], {
        "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
        "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
        "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
        "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
        "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
        /* Maintain BC for couple of versions. */
        "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
        "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
        "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
    });
//]]>
</script>
<script charset='utf-8' type='text/javascript'>
$(function() {
   $(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz4VU0y8cBozKux116wEx8JNUmXHdmT_JDNbQYTfF1PTgEc1maq8PpvWGTNd2WH2JVsPxCNARWh76jhLs-W1yftw_IDBxEqtH3CwWqR1MeMNcDniPQ2bcEqiUObP3Zv0u7HIqBM3SdYgI/s1600/grey.gif&quot;,threshold : 200});
});
</script>

• Simpan template

Untuk menguji Lazy Load Image Plug-in ini, silahkan memasukkan beberapa gambar besar di postingan sobat. Perhatikan dengan teliti kecepatan blog anda SEBELUM dan SETELAH di tambahkan Lazy Load Image Plug-in. Untuk mengecek kecepatan loading blog, silahkan mamfaatkan layanan gratis Google Site Speed.

Cara Memasang Widget Sharing Super Keren Di Bawah Posting

Untuk membuat sebuah posting, biasanya waktu saya yang terbuang tidak lebih dari 30 menit. Tapi, untuk beberapa minggu ini, saya menghabiskan waktu 2 hari hanya untuk menulis satu posting. Penyebab dari semua ini tidak lain dan tidak bukan karena kodisi fisik saya yang drop yang disebabkan oleh perjalanan jauh yang saya lakukan minggu kemarin. Biasanya, teknik paling ampuh untuk mengobati keadaan yang seperti ini saya lakukan dengan dua cara yaitu dengan melakukan pijat refleksi atau teknik sedot darah dengan metode Bekam.

Waduh... Jadi kebanyakan cerita. Oya... Buat sobat blogger saya ingin memasang Widget Sharing Social atau tombol berbagi atau share button atau apalah istilahnya. Anda bisa menggunakan kode yang saya siapkan ini. Kode ini akan menghasilkan Widget Social Sharing yang sangat keren. Kalau pengunjung blog Anda mengarahkan crussor-nya ke arah widget ini, maka widget ini akan terlihat meredup (Kecuali pada ikon yang ditunjuk, tetap terang dan menampilkan teks). Untuk demo-nya atau live preview bisa di lihat di bawah ini!

Demo

Bagikan Artikel ini ke teman Anda...!!!

• 
  Facebook
  
• 
  Twitter
  
• 
  Google+
  
• 
  Pinterest
  
• 
  StumbleUpon
  
• 
  Dig
  
• 
  LinkedIn
  

Untuk memasang widget berbagi ini di bawah artikel atau posting blog tidak sulit. Coba Anda ikuti saja langkah-langkah di bawah ini!

• Anda masuk dulu ke blogger.com
• Pilih Template dan Edit HTML
• Cari kode ]]> </ b: skin> dan letakkan kode berikut di atas kode ]]> </ b: skin>

ul.social_tutorialblogspot{list-style:none;display:inline-block;margin:15px auto}ul.social_tutorialblogspot li{display:inline;float:left;background-repeat:no-repeat}ul.social_tutorialblogspot li a{display:block;width:50px;height:50px;padding-right:10px;position:relative;text-decoration:none}ul.social_tutorialblogspot li a strong{font-weight:400;position:absolute;left:20px;top:-1px;color:#fff;z-index:9999;text-shadow:1px 1px 0 rgba(0,0,0,0.75);background-color:rgba(0,0,0,0.7);-moz-border-radius:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5);padding:3px}ul.social_tutorialblogspot li.abfacebook{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXQZqvboswuuDW_5i1RG2s9nw4p_H6DnpYiPrAXXbribZjPX7mFRkik3CjN50Qwes75Gc1GxHnQwC6S7b8p_GNFEFNZB51aSjP7fB00LrKMhlkqo1Rzmt6u-_2MV0ZylHR1BLD_hQ7PZlX/s1600/tutorialblogspot-facebook-icon.png)}ul.social_tutorialblogspot li.abtwitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE1bCvb8-ICfkbgyGCsWy10UsKvULIcp_RR_NiiFO9DMW-CD11J0753L__DAKBTQgX6mHs2vfbyRJ0a5iM_iqANFY6wm2JkcoO3ArUYFfAEQOChOR3Iv_IZF2RAVv9yDpIYIVGKdNPgIxQ/s1600/tutorialblogspot-twitter-icon.png)}ul.social_tutorialblogspot li.abgoogleplus{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCevqOgeQdNPAVm0eMPwNI9HRX4FV7vdq36w2b51zdInxbWTJ1IfVyAOJh4OcF19VefzkGhLi37kXfTcUv3rx4KJdGB5yWt4qoYwMw-iHcFTbJKjgGw4C9psMTyz7LMxb_rbpbQIE8VAoO/s1600/tutorialblogspot-google-icon.png)}ul li.abpinterest{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYljreMiJaMk9DfLE08kOXx_xmGlNuYF7dei4SA_G6jM2qZK6uStZM8KzIa3vdPqinPHqIhPaMeHwysW8Pl65IO66FPDWHn5EGGYg_1MT4sF9cp88_TR5fiXst1ABVeWQ-aw4vUnvqqil/s1600/tutorialblogspot-Pinterest-icon.png)}ul.social_tutorialblogspot li.abstumbleupon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVN9R52cNrs8IxV-awygb2q2Rv1dlDOJL1KzSCzdOy4EhLv9SSIwDQSOEuUh5psMbMxQDvrUZoFAfyyKSn6e6_7C0aFieaw8Wu0r5p1IBG8azvwtOVSeJHrm6lJcizJl1ZbzPrrajETWYm/s1600/tutorialblogspot-StumbleUpon-icon.png)}ul.social_tutorialblogspot li.abdig{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivazgkQnPeJYVKbCau571PACEgUYt1DIck6hjIA1xHN7KUs1hQaE3Bmx1eB-zl7bZEJY-3iGaDlfbbPQ23lHrEj3Z5zGPpvc43G99QqfYMiWZlmZaqBMuk521EGT5hxwpo1LA1CuLJyJUv/s1600/tutorialblogspot-Digg-icon.png)}ul.social_tutorialblogspot li.ablinkedin{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_-RZugyQ5D_XsQv4P5H9wza2udSnd91bIAYJgKI2ZZxvao05FNa3UJVXm8M6vt3ik8PHUXwdWY-MdT4b1B6znQy39t_pSKFDu7L51Gh6ftMj7F2uzn7oHrEqAYgZO5QwX5EYns4aoeVW/s1600/tutorialblogspot-Linkedin-icon.png)}#animation_tutorialblogspot:hover li{opacity:.2}#animation_tutorialblogspot li{-webkit-transition-property:opacity;-webkit-transition-duration:500ms;-moz-transition-property:opacity;-moz-transition-duration:500ms}#animation_tutorialblogspot li a strong{opacity:0;-webkit-transition-property:opacity,top;-webkit-transition-duration:300ms;-moz-transition-property:opacity,top;-moz-transition-duration:300ms}#animation_tutorialblogspot li:hover{opacity:1}#animation_tutorialblogspot li:hover a strong{opacity:1;top:-10px}

• Cari kode <data:post.body/> dan letakkan kode berikut SEBELUM kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Bagikan Artikel ini ke teman Anda...!!!</b></div>
    <ul class='social_tutorialblogspot' id='animation_tutorialblogspot'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if>

• Preview template Anda terlebih dahulu baru di Save.

Tambahan :

1. Kalau Anda sudah menerapkan fitur read more otomatis, kode kedua sebaiknya diletakkan setelah kode Read More.
2. Kode CSS di atas sudah di kompress menggunakan Online YUI Compressor jadi Anda tidak perlu kompress lagi.

Mengganti Default Credit Footer Blogger dengan yang lebih menarik

Credit Footer blogger yang bertuliskan Powered by Blogger atau diberdayakan oleh Blogger terdapat di bagian bawah blog di bagian widget Atribusi. Pemilik blog dapat menambahkan beberapa karakter teks atau link di widget tersebut. Karena jumlah karakter teks dibatasi di widget tersebut, banyak pemilik blog jadi memilih untuk menghapus Credit Footer itu dan menggantinya dengan Credit Footer yang baru. Termasuk di blog ini juga, Credit Footernya saya ganti beberapa waktu yang lalu.

Blog saya ini jauh terlihat lebih cantik dan manis setelah diganti credit footer bawaan aslinya. Sampai-sampai banyak orang yang tidak percaya kalau blog ini menggunakan template default blogger (Wajar juga mereka tidak percaya, soalnya terlalu banyak perubahan yang saya lakukan untuk memodifikasi tampilannya).

Cara Membuat Credit Footer di Blogger

• Login di blogger.com
• Pilih Template dan Backup template sobat terlebih dahulu untuk menghindari adanya kesalahan saat edit template.
• Setelah Template di backup, klik Edit HTML
• Cari kode seperti di bawah ini!

      <b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>
    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
       <data:attribution/>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
</b:section>

• Hapus kode tersebut dan ganti dengan kode di bawah ini

<div class='credit-wrapper'>
<div class='credit'>
<div style='float: center; text-align: center;'>
<a href='http://www.tutorialblogspot.com/2012/08/contact-us.html'>Contact us</a> &#9827; <a href='http://www.tutorialblogspot.com/2012/08/privacy-policy-for-www.tutorialblogspot.com.html'>Privacy Policy</a><br/>
Copyright &#169; 2013 <a href='http://www.tutorialblogspot.com'>Tutorial Blogspot</a>
</div>
</div>
</div>

• Cari kode ]]></b:skin> dan letakkan kode berikut di atasnya

.credit-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWt5CoT7OxEUHBy0lQFZZdwoSLAaPtiOHFnQ98RWS7pnH0zs3xJ670EroaPZJV8G4cYPWV6Ey5FvhLb6awmmQaZ6Hu3VSbcqwZNU_xYBpyBqUyTlscM2jxIprXyNXUVPNYuwJMm0E7Fnp/s320/post-divider%2520%25281%2529.png) no-repeat center; padding-top:70px}.credit a:link,.credit a:visited,.credit a:hover{color:#222;text-decoration:none}

• Preview template, kalau sudah mantap, Simpan template.

Tambahan :

1. Ganti link di atas sesuai dengan link tujuan Anda
2. Link Gambar / devider (Yang berwarna merah) bisa diganti sesuai dengan yang Anda inginkan

Teknik mengganti Credit Footer ini sudah di coba beberapa kali, hasilnya selalu sesuai dengan yang diinginkan. Jika Anda tidak berhasil atau mengalami kesulitan, mamfaatkan komentar Google+ di bawah ini untuk menggambarkan kesulitan Anda.