Site Info


Menyembunyikan Tampilan Navbar (Navigation Bar) Di Blogger- Navbar atau navigation bar adalah sebaris menu yang berada di bagian paling atas blog. Navbar ini mempunyai beberapa fungsi yang diantaranya adalah untuk keluar-masuk akun Google, membuat entri baru, dan sebagainya. Meskipun kelihatannya fungsinya bagus, tapi banyak blogger yang menyatakan bahwa navbar ini tidak professional.

Ada pikiran untuk menonaktifkan navbar? Sebenarnya mudah saja untuk menonaktifkan navbar, kita hanya perlu ke menu tata letak. Namun, setelah saya cek kesana-kemari, ternyata menghapus navbar termasuk ke dalam pelanggaran dalam TOS (term of service) Blogger. Sanksi pelanggaran TOS blogger adalah banned. Apabila kita menggunakan cara ini, maka otomatis blog kita tidak akan terbanned karena kita hanya menyembunyikan navbar, bukan menonaktifkannya. Untuk menyembunyikan navbar, ikuti langkah-langkah berikut ini:

1. Kunjungi Template > Edit HTML.
2. Cari ]]></b:skin>. Untuk mempermudah, tekan Ctrl+F. 
3. Jika sudah ketemu, letakkan kode berikut tepat diatasnya:
#navbar-iframe,#navbar { display: none !important; }
4. Simpan Template.

Membuat Tombol Back To Top Biasa Yang Melayang- Setelah tadi saya mempublikasikan tutorial tentang membuat back to top dengan efek bounce, sekarang saya akan mempublikasikan tutorial membuat back to top yang lebih sederhana lagi. Apa maksudnya sederhana lagi? maksudnya adalah ketika tombol back to top ditekan, maka halaman suatu blog akan langsung menuju ke halaman teratas tersebut.

Masih kurang paham? contoh sederhananya adalah Doraemon yang menggunakan pintu kemana saja untuk pergi ke mana-mana. Jadi kurang lebih gambarannya seperti contoh Doraemon diatas. Saya rasa tidak perlu saya terangkan lebih jauh lagi. Untuk membuat tombol back to top biasa yang melayang, ikuti langkah-langkah berikut ini:

1. Kunjungi Template > Edit HTML.
2. Cari kode </body>. Jika sudah ketemu, letakkan kode berikut tepat diatasnya.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="http://icons.iconarchive.com/icons/taytel/orb/32/arrow-up-icon.png" /></a>

Catatan:
Untuk yang warna merah, ganti URL gambar back to top dengan URL gambar yang lain. Tapi jika Anda ingin menggunakan URL gambar seperti yang tertera pada kode diatas, tidak masalah.

3. Simpan Template.

Cara Termudah Membuat Recent Post (Artikel Terbaru) Di Blogger- Dalam hasil pencarian mesin pencari -seperti Google, Yahoo, dan Bing- jika Anda mengetik kata kunci "membuat recent post", maka Anda akan berhadapan dengan kode-kode JavaScript. Sebenarnya, ada cara yang lebih mudah (kita dapat menyebutnya paling mudah) karena ini tidak menggunakan kode HTML, CSS, JavaScript, dan kode-kode lainnya.

Ya, menurut sudut pandang saya, banyak sekali masyarakat yang kurang mengetahui cara ini. Mengapa? hal ini sudah jelas, karena tentu saja widget bawaan (default) Blogger masih kalah pamor bila dibandingkan dengan kode CSS dan HTML. Selain itu, kode CSS dan HTML memang dapat diedit semaunya, entah itu warna background, warna border, dan sebagainya. Saya mengakui hal tersebut.

Nah, sekarang -kembali ke topik utama- kita akan membuat widget recent post dengan cara paling mudah. Widget recent post ini adalah widget yang bertujuan untuk menampilkan artikel terbaru, yang fungsi selanjutnya adalah agar pengunjung blog kita tidak harus ke halaman homepage terlebih dahulu untuk melihat update artikel karena sudah ada widget ini. Untuk membuat widget recent post dengan cara paling mudah, langkahnya tidak terlalu sulit. Anda dapat mengikuti langkah-langkah berikut:

1. Kunjungi Tata Letak --> Tambahkan Gadget.
2. Pilih gadget Feed.

3. Masukkan URL Feed:
http://asli-tutorial.blogspot.com/feeds/posts/default

Keterangan: Untuk yang berwarna merah, silakan Anda ganti dengan alamat URL blog Anda sendiri.

4. Kemudian, klik Lanjutkan. Akan muncul opsi selanjutnya. Anda dapat mengaturnya sesuka hati Anda. Jika sudah, klik simpan.

P.S: Apabila Anda tidak suka dengan tampilan recent post ini, Anda dapat beralih ke artikel Membuat Widget Recent Post Dengan Thumbnails. Terima kasih.

Memasang Fitur Emoticon Pada Komentar Blogger- Sebenarnya, fitur memasang emoticon pada tidak wajib untuk dimiliki suatu blog. Karena, emoticon untuk blog ini hanya untuk mempercantik tampilan kolom komentar blog saja dan untuk menarik minat pengunjung blog untuk meninggalkan komentar pada blog kita. Emoticon yang sekarang kita akan bahas, ada sekitar tiga puluh emoticon yang akan ditampilkan. 

Emoticon ini sangat berguna untuk pengunjung yang ingin mengekpresikan rasanya apakah dia senang, sedih, gembira, dan ekspresi lainnya yang dimiliki oleh wajah manusia (lho, kok jadi ngomongin ini sih?) Tapi, yang harus digarisbawahi adalah, fitur emoticon dalam blogger ini dapat berpotensi menarik minat pengunjung yang ingin mengeskpresikan perasaannya setelah membaca artikel blog kita, entah itu senang, sedih, dan sebagainya. Untuk pemasangannya cukup mudah, Anda dapat mengikuti langkah-langkah berikut:

1. Pada dasbor, pindah ke Template.
Memasang Fitur Emoticon Pada Komentar Blogger
2. Pilih Edit HTML.
Memasang Fitur Emoticon Pada Komentar Blogger
3. Cari kode </body>. Untuk mempermudah pencarian kode, gunakan fitur search dengan menekan tombol Ctrl+F.

4. Jika sudah ketemu, letakkan kode berikut tepat diatas kode  </body>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "To insert emoticon you must added at least one space before the code.";
// Emoticon bar before comment-form
$(function() {
    $(putEmoAbove)
        .before('<div style="text-align:center" class="emoWrap"> :) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :&gt;) (o) [-( :-? (p) :-s (m) 8-) :-t :-b  b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer <br/><b>Klik Untuk melihat Kode emoticon!</b><br/>Untuk menambahkan emoticon ke dalam komentar, Anda harus memberi satu spasi sebelum kode.</div>');
    var emo = function(emo, imgRep, emoKey) {
        $(emoRange)
            .each(function() {
            $(this)
                .html($(this)
                .html()
                .replace(/<br>:/g, "<br> :")
                .replace(/<br>;/g, "<br> ;")
                .replace(/<br>=/g, "<br> =")
                .replace(/<br>\^/g, "<br> ^")
                .replace(emo, " <img style='max-height:24px' src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));
        });
    };
    emo(/\s:\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYaGvG7Ag7gRexxiOQoiJEAuxPIS7ji4AGEF1uhNEz3fw6aFvtBXtRieK0ESIf1ETypMLNjhNuCxqHdJnaiGIefOTtzLC_xjZhg2NGj2IyrsWOzwTG_0K8QR6r1P3l4kGmc_CDTtZww/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZnkBKTxi17nBKsDO7xnwt_fgSXrBKS3Xf47AUvHAwz7_-2j_k4kudjvkd3pEb9GVWqxp42NAaGH_v0SpwqB7Gapamrh_mAw39sdM8yhxSDtbpZ5TGn3JdWe3Ag2JwS5wHublvKcMBRg/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4dfN3Kjw0IyVHg3NjVyeZ7jGhrWMK6TDxljQiaFxo5WG14I2F8UrG76ptpCpDe1GolUIjUxFTt2Ovnomv-FAv0o5aLPpvEtN3KXZOxdiO6YaG6-oyqpX3i8GSL-OVgMoMmKNwpiO5_Q/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCyLQzD5BYzivtRCQEYOGHsHLpaUhn8nvn02IFDqRbbhyphenhyphenoa1bsftB-8-wzBVHezhCK6UXfkUbT32umBsEHzZTXdRl0mYxk8khCNRpyCbXSuV3JHz8-MlC8AL5ESmWrOJ2MBsu-fuh5YA/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQHGMTp3piedce6AZ4oxNK1z9TV06P2B8LL6VTXMbuWNkOsKk3UnAhBRAEO7ZCyyJUDq6gNWAipaRFGKyWBJEmV9lfsQRD9hMPkW14-dMBFXAQaMSOhRBL9dC8aDI5ednm16GgDwhuhA/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR_9oYBzdOVQHs_2pZaHBOZrtWACOsBy7QQt1XSXP4y4hgVpEjI3fwjeWqIXmLDBEivJ4P7Su3dIQQDPTdQexgEJOgC1lwgQM3lBwG6V19E-9QEYzbSbII0WAg14diz-l0jUB-y3i_Ug/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp4CCORWGJlKlv5JgUD0XfVLXuHz22fP-3iPgWsa8JQ-8qPuvocOj9Kf8iPsUw7bcDa_4PeSM8pqhGJQ3Wa0qOgT4dGi2dSwtM_FFq2VqoxIDFRmFOiEr2uF2W-DQfKLRXWsjeEBFioA/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1BqQoTqBNcePOujWrEOEOIoR-BezKAEHtg7VRPyOAsy_ueqF6GlEujjiuaUrJ_F_YcdhaBLe8EHJB2ttpNwg3VVpopz5nzvcHPgNwaK9gFTHT8FzcPhxzHUqODuL5sPf7kMb6kfTa5A/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_y8hZyyFb1JRx2UFV_0ikQ4q2xF_Y_n6MHrp12_f37-UZ0NDUhI65Cmu6vv7BSO-Irl89qYvay6QKJXfn51uTJfUJWs3FK1YBX35hWF1eYGVr0rLlSBY_aFOiLWIkE8MUNk5lM6qSTw/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyphenhyphen5BVAXDyKICpBEx4ulWQDOhkUXPxjuEy-zCsw8toptushDuOXcvjZ69iorAdWbFXO3_Jn1vW6vMDpqYVjf_JjDphxVXz69J9oM-owCsQUNEc9eSckthJQqXZDGhaHoiz5MCGWoMBcA/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAnRMmAj2408FKeYO5rT8u8BAauaOQEAjrhSdO_tMw-dU5D5JLzZdY32LgvuIPzzk8LejdEGVMXnol9GEqsfzzWf6ip3KBed9uEvDBmOdQ72J6o9X7ByYx0Pu611-POwxF70jH-hqaCg/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxuqyCqtOCZKqpyV817WCLOl5bDF_52RzlL8VbxJoyfwi0jxU8a8htbk_n0pYgqpqYLOQXulmmnHndZ9acdua-yoFHdR1X9kitXhUPprdvz6UBynBaBNimKpErs2PrPH5PSDKAPnmLQ/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr5dDO6dPvOL3C1uF8MrjLqaf2lskV-zNTYk9oa1XtHPAciuK10rHaGEaTCHIdimrDP_Zfpg-AR55uH2gVSi61MwjfJg1wsUB4cOOp5DB-J0ndcxFoJVDZBHWqiExYLqAlddMs9VE_kw/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioDKcoO_SWToRcwOsdxGS90PhUj8B-Cgg9imq3XY2_qJ01PrqAcq36Ugs9AZzsSxdRcErME5OfE8LfbmeJyfvFGHoQlx7ETjtvtx_FUk-8FvbRShhJTfGWoiDGW7HPc7ObHk9ETGt5kg/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFshgOeAUEZGNxyIcOCJ_lPCgfMe6rxsD_-bAHurd4gTW0aE2_Ti3Q2yQHKsPMHSDN0om8Zq5BD57WcFeQFW54ljNdRGGpvcRis8amDUVAh4zA2u8bJtcFWHvWJYK_Jkq7wqUC5TVUQ/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBphHXgH18rRS8qvnk-J5O9kkxmdBt2kE7YlU0GPHdtqVDvrLWDvHRd5hvWb7t11hbaFuSsE7JH7Ig02obkivZ8FwqHUP4WXaPOEYigqPMfO-PUdS4TVWYBII4EqzUn6mcuHHVaf4hlA/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwGUEA0XTCbYqBkRHbUr563eGtmTh8ut97XCG4JIo7nRw1oKUKsXlxktItyQAA2KoyxNr2IQqLHkQHlgksdvwKhHu2jhoAP6ZwL56HVC9suZeLyYFlLMlRFyMqT0fii9g9bbu2jYGvzQ/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbZzGMZPo5bdBqz1ByCIe4IMwG_dejKJKIgjsBwJZLzgaVbRF5IFyPhTE_c2Vi55ZFBn8PKcOPnuLtOHsranKtsjLBae8yjVBM0BlQ7DOQONODRIPN9_CTFIEfDhcuQNiHwHlGRNlJw/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb4Wl4USs59DPYc3W7gMUMY19gV3NfIZJA60bnDXu6Pc0i8v-R0dayC0aqZSxxvJL3k98eaBjyG_Rt6JIiusypTR2DVuPY_eX2b02Sw9S8uw8juxuIO353j0d1FjiEFxwCuewN3my-Fw/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDlO2hp_IFpVxEZZcwyYBm14AvWbf5PoJPHN_OLA2XQRIDZ0PP-FW0dz0JmYN7OfxFiTpVnwn-B9G0VctmO-yLNgYZtKHT4gbCBFu1kJJoHlyiDDSqGZKIcVss908ibQ_PzogTlUqFg/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga6tVBw9857UfuvRUdmDGse4qcH6kZViDQPDDClarO7ODw5S9-YeAqY_r4a0pI3lJ2-2Vh4ZvT8fGN-25ucgnbFwoqcB4ZvYNbPZfUbQaVBeUdYsDlqd1SXbTcboL-Y3XOAPrQSOkfiA/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqVX8lFZKVQKaxyGbrZND8kbDcao0UvSZApT3XAyYc7w19xJJEJlwsV9SY1CXKD8MybQwLFucPUQ4k34p-OBI5E1HbHs4DfTHyuBi9sqDD4whNRTCuD9oIHR7jDD1Bkbnv3kAbMrPOg/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUteAC-GK0PEb4rleOUgKSbOtrH0370gC02lKM8Bic_JwAsAClbeZPgyz-VtmX0sF1hvDuclbJEfGGgnTTwVahCnRVPmJhk0TzmXMt9cx_KiPsiayKbJ5M84ev7wDYfbcqIqMZs4xZXQ/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRMJjjRlkNRO_6SRrBLcUlFeyTW_xouE1DuHwewPm44bV_aQz51AcYmaxvp7U9VSSETDNiGLudhPgwvsLo8t8mNhzrZYOaB5YJiip49f8FJYrp4_qGbIHe7SMYdUjEHOvJ9Ejfvsg8Qg/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsa9UHNWM2KXCbsWStMVwLNFLiozbGLHRCsKsNnqYATuB0Sf2LqjhzWGShBVJ31HEUAJ2g9RXSB6PCj0EvZi2MONAplCu77qcmYwzivjinE8rFMYJB14erG8QRxMjmTS4B-kUVtWjfYQ/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_cI9KQ1rc2nc2cqE02Imyqt9izQ8FeMUzfWdNyhVPC3tf-lQ_D_3UPshrPuAmN8w3zdR-oi71-1ctoqUDim7r3pMd6Tc7t7aJAgeCOLJLQOwKLmQglCfBlaMNx_3KjQ-P0cneyIO3LA/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp0ISrkUwrspnmD3w1Bggfi1sFRYdIM0z186PsvdpFSaeTrHeMX8lomgII3eIcuMcX_HXSN_Kkz4HXVQvyzTFr0jpvEbzDl-SqLETeE7VzDFnFIY_KiKf-uE_QDC6NB-iBweAlS1HdAA/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYfK3X2sPPlORMgJ2gnFRWBqTGwJpAo_yYUYjUZ0Lb3m71ZRipQ-Xjd1HEJCXImeA9fMMI0eeO4AE6CsjWEIu6LLACfbQWN1eQCN0kW0LxSK7JB4oN_49YaKi1UzwE_sKyf_CABwY2sQ/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIDvz_EV9vt9_gyNvR9iZIQ2QMqm7enW2ynCaGXQ9CfuM-5pILOO4rs4PySc46SUhBrWJDugrtWsUFPswoxd4xrrSNdECnoFngzXwxnorkVQtnVhjSZxR3tLCxvcM2TA_7A0jyHJvRsg/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0VdCIobYwrLlTloogr2ps92GkvUTShohyVkhoQlsZY8Lyj3mvpHHTD0juDI_MHSLf9EbaLjXNiZXK5ODfXRwC0zML7IZ5qDQjuEwg2M8S8-7l2PgRGbg7OfsD8oyoemF12EM2Mbofgw/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6-GewvQz20Yq6W3EhlSTbzXtI_ruRnqXECL5PHN68D87uRuWx7cHMQPYY7bGLC4M44sd7NtYw5WWskuRfWqJ9sUpcD0xR8Abnnurn_Alhj3fVhCCyS3VD4g31jnUoJZWgWOW2XxmFw/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigFmouwG9maaWUUPaaiIzeV36dzg4AzHcqQV0qKFk2l1JdMuKjbImSgL65ogctjjRUeQl9EJyJmQMXy8ASsqYe7QPuTgQ4Kes33SiLkydO_O-4AJMsbeXLkCLc_JP7HyPoXMzR8WvbLg/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikIxE1hmUz51leYo9-abAwacnF4clg9nGG1ytKrINpZzOgQhkcJgB3SC8E65iavhUq9HKUIx8dP0hkREJ2VIMkienOZnNj7BcQGfNiVlQYhP_ZPetxKy2KU7TSARemnTjUzC6YuOAYDg/s36/32.gif", "cheer");
    
// Show alert one times!
    $('div.emoWrap')
        .one("click", function() {
        if (emoMessage) {
            alert(emoMessage);
        }
    });
    // Click to show the code!
       $('.emo')
        .css('cursor', 'pointer')
        .live("click", function(e) {
        $('.emoKey')
            .remove();
        $(this)
            .after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />');
$('.emoKey')
            .trigger("select");
e.stopPropagation();
    });
    $('.emoKey')
        .live("click", function() {
        $(this)
            .focus()
            .select();
    });
});
//]]>
</script>
</b:if>
Perhatikan:
To insert emoticon you must added at least one space before the code. = Adalah alert box emoticon apabila salah satu jenis emoticon diklik. Jadi, apabila salah satu jenis emoticon diklik, maka akan tampil alert box seperti tulisan warna hijau. Anda dapat mengubahnya.
Klik Untuk melihat Kode emoticon! = Adalah tulisan yang berupa petunjuk untuk membuat emoticon pada baris pertama.
Untuk menambahkan emoticon ke dalam komentar, Anda harus memberi satu spasi sebelum kode.= Adalah tulisan yang berupa petunjuk untuk membuat emoticon pada baris kedua.

Jika Anda tidak mengubah kode yang diberi warna merah dan orange, maka tampilan keseluruhan emoticon pada blogger akan seperti ini:
5. Simpan Template. Sekarang emoticon sudah terpasang di komentar blogger!

P.S: Untuk demo-nya, karena saya sudah menyertakan fitur emoticon ini pada blog Asli-Tutorial, maka Anda dapat melihat tampilan emoticon (demo) pada komentar dibawah.
Cara Membuat Widget Alexa Rank Pada Tampilan Baru Alexa

Seperti diketahui, Alexa sudah memiliki tampilan baru yang terlihat elegan dan efektif. Tapi, ibaratkan pedang bermata dua, tentunya tampilan baru alexa ini juga memiliki kelemahan yaitu tidak tersedianya fitur untuk menampilkan widget alexa rank untuk dimasukkan ke dalam blog. Tentu para maniak Blogger kecewa dengan Alexa karena tidak tersedianya fitur untuk menampilkan statistik peringkat alexa (widget alexa) dalam blog. Jika Anda ingin kembali lagi ke tampilan lamanya, sudah tidak bisa diakses lagi kecuali Anda mengganti komputer. Kecewa 'kan?

Namun, kita masih dapat mengakalinya dengan menggunakan kode HTML. Ya, kita masih dapat membuat widget Alexa dengan kode HTML. Bagi Anda yang ingin langsung tanpa harus repot membeli komputer baru untuk membuat widget Alexa, ikuti langkah-lagkah berikut ini:

1. Pada dasbor, pindah ke Tata Letak.
Cara Baru Membuat Widget Alexa Rank Untuk Blog

2. Klik Tambahkan Gadget-->HTML/JavaScript.
Cara Baru Membuat Widget Alexa Rank Untuk Blog

3. Pada kolom konten, letakkan kode berikut:
<a href="http://www.alexa.com/siteinfo/asli-tutorial.blogspot.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/a?url=asli-tutorial.blogspot.com"></script></a>
asli-tutorial.blogspot.com= Ganti dengan alamat URL blog Anda.
Membuat Widget Recent Post Dengan Thumbnails Di Blogger

Recent post atau dalam bahasa Indonesia berarti artikel terbaru, adalah sebuah widget navigasi blog yang fungsinya untuk menampilkan artikel-artikel terbaru suatu blog. Sehingga, pengunjung blog tidak harus ke halaman homepage untuk melihat update artikel karena widget recent post sudah menampilkannya di semua halaman blog. 

Recent post dapat juga meningkatkan pageviews blog karena menampilkan update artikel walau tidak selalu. Biasanya widget recent post terletak di sidebar blog. Untuk pembuatannya, kita hanya memerlukan kode JavaScript saja dan widget ini tidak memberatkan blog. Ikuti langkah-langkah berikut ini untuk membuat widget recent post dengan thumbnails di blogger:

1. Pada dasbor, pindah ke Tata Letak.

2. Klik Tambahkan Gadget, kemudian pilih gadget HTML/JavaScript.

3. Beri judul "artikel terbaru", "recent post" dan sebagainya. Setelah kita memberi judul, letakkan kode HTML berikut di kolom konten:
<link href="https://dl.dropboxusercontent.com/u/137869302/style.css" type="text/css" rel="stylesheet" />
 <script src="https://dl.dropboxusercontent.com/u/137869302/json.js"></script>

  <script type='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.asli-tutorial.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>
Perhatikan=
Warna merah, Anda ganti dengan alamat URL blog Anda.
Banyak terdapat tulisan 'true' dan 'false'. Anda dapat mengubahnya sesuai dengan kebutuhan dan selera Anda.

4. Klik Simpan. Sekarang, seharusnya widget recent post sudah dapat ditampilkan di blog Anda.
Membuat Widget Label Dengan Efek Cloud (CSS3)

Label adalah widget yang juga diyakini menambah nilai SEO (search engine optimization) pada blog walau fungsinya masih kalah daripada related post, dan widget lainnya (ingat, diyakini!). Secara bawaan (default) dari Blogger, label akan terlihat hanya teks dan ketika disorot oleh pointer mouse akan menjadi link dengan efek underline. Efek seperti itu terlihat datar dan kaku. Apakah Anda merasa seperti itu?

Jika Anda merasa terganggu dengan efek ini, kita dapat membuat widget label dengan efek cloud. Apa itu efek cloud? Anda dapat melihat demo label dengan efek cloud di blog ini. Anda dapat melihatnya di bagian sidebar kanan. Coba cermati widget tersebut dengan cermat. Ketika tidak disorot oleh pointer mouse, widget label tersebut mempunyai background berwarna hitam. Namun, setelah disorot berubah menjadi warna kuning. Menarik bukan?

Jika Anda merasa tertarik, silakan ikuti langkah-langkah mudah berikut dengan teliti:

1. Anda telebih dahulu harus mempunyai widget label. Anda dapat menambahkannya dengan cara pilih Tata Letak --> Tambahkan gadget --> Label. Lewati langkah ini bila sudah ada widget label.

2. Pilih Template, kemudian masuk ke Edit HTML.

3. Cari kode ]]></b:skin>. Gunakan fitur search dengan menekan tombol Ctrl+F kalau tidak dapat ketemu.

4. Letakkan kode berikut tepat diatas kode ]]></b:skin>:

/*--Label Cloud Effects by http://asli-tutorial.blogspot.com--*/
.Label a{
padding-left:20px;
background:#000;
padding:0 20px;
color:#fff!important;
border-radius:100px;
-moz-border-radius:100px;
height:32px;
line-height:32px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:5px;
margin-top:5px;
font-size:14px; }

.Label a:hover{
color:#000 !important;
background:#ff0; }
Perhatikan:
#ff0= Adalah kode warna setelah widget label disorot oleh pointer mouse. Anda dapat melihat kode warna lainnya di blog ini.
14px= Ganti dengan ukuran huruf label.

5. Simpan Template. Klik Pratinjau untuk melihat perubahan.
Membuat Fitur Ganti Jenis dan Ukuran Font Di Blogger

Jika Anda bekerja menggunakan microsoft word, pastinya Anda sudah akrab dengan jenis-jenis font seperti Arial, Tahoma, Verdana, dan lainnya. Jenis font tersebut memang sudah tidak asing lagi di telinga kita. Nah, sekarang kita akan membuat fitur untuk mengganti jenis dan ukuran font di blog dengan subdomain Blogger. Tujuan dari membuat fitur ini adalah untuk memberikan kemudahan bagi pengunjung blog untuk membaca artikel-artikel blog kita dengan bahasa yang lainnya. Mungkin saja ada diantara pengunjung blog Anda yang tidak suka terhadap jenis font yang Anda gunakan secara default dalam blog Anda, sehingga mereka dengan mudah dapat mengendalikan (mengganti) jenis font tersebut.

Disamping pengunjung blog dapat mengganti jenis font, pengunjung blog juga dapat mengganti ukuran font menjadi 8 pixel, 16 pixel, dan seterusnya. Sehingga dengan begini, pengunjung yang mungkin saja memiliki mata minus dapat melihat dengan lebih jelas artikel pada blog kita. Fitur ini biasanya (saya tidak mengatakan sering) dijumpai pada blog (web) yang khusus membahas seputar aplikasi olah kata. Ikuti langkah-langkah berikut untuk membuat fitur ganti jenis dan ukuran font di Blogger:

1. Pada dasbor, pindah ke Tata Letak.

2. Klik Tambahkan Gadget, kemudian pilih gadget HTML/JavaScript.

3. Letakkan kode berikut tepat di kolom konten gadget HTML/JavaScript:
<script>
function go1(){
if (document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize
=document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value
}
}

function go2(){
if (document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily
=document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value
}
}
</script>
<form id="forma" method="POST" name="selecter2">

<select name="select3" onchange="go2()" size="1" style="font-family: verdana; font-size: 8pt;"> <option value="Coming Soon" />Normal Font Blog <option value="Times New Roman" />Times New Roman <option value="Arial" />Arial <option selected value="Book Antiqua" />Book Antiqua <option value="Bookman Old Style" />Bookman Old Style <option value="Century Gothic" />Century Gothic <option value="Comic Sans Ms" />Comic Sans Ms <option value="Tahoma" />Tahoma <option selected value="Trebuchet Ms" />Trebuchet Ms <option value="Verdana" />Verdana </select>
<select name="select2" onchange="go1()" size="1" style="font-family: verdana; font-size: 8pt;"> <option value="8px" />8 <option value="9px" />9 <option value="10px" />10 <option value="11px" />11 <option selected value="12px" />12 <option value="14px" />14 <option value="16px" />16 <option value="18px" />18 </select></form>
4. Jika Anda sudah meletakkan kode diatas pada kolom konten gadget HTML/JavaScript, klik Simpan.
membuat chatbox untuk blogger

Chatbox adalah fitur tambahan pada blog yang tidak wajib dimiliki suatu blog. Fungsinya adalah untuk saling menyapa dengan orang lain tanpa membutuhkan akun (ada web penyedia jenis chatbox yang membutuhkan akun). Nah, mungkin Anda sudah mempunyai chatbox? Jika sudah, maka pastinya akan banyak yang berkomentar dalam chatbox karena caranya mudah, hanya tinggal tulis nama, kemudian kirim pesan.

Namun, coba pikirkan. Jika dalam suatu blog tidak ada satu pun pengunjung yang Online, bagaimana kita dapat menyapa dengan orang lain? Solusinya tidak lain dan tidak bukan adalah dengan membuat widget untuk menampilkan jumlah pengunjung blog yang online.


Nah, kedua widget diatas jika dikombinasikan akan menjadi hal yang positif, karena jika kita tahu ada pengunjung yang sedang Online, kita dapat langsung menyapanya karena kita sudah tahu ada pengunjung yang Online. Ikuti langkah-langkah berikut ini untuk membuat chatbox untuk Blogger:

1. Kunjungi CBox.

2. Klik Sign Up jika Anda belum mempunyai akun cbox ini. Jika sudah selesai mengisi formulir, klik Create My Cbox!
membuat chatbox untuk blogger 
3. Anda akan diarahkan ke halaman selanjutnya untuk login cbox. Masukkan password akun Anda.

4. Nah, sekarang Anda sudah masuk ke akun cbox. Klik Publish!
membuat chatbox untuk blogger

5. Gulir mouse kebawah. Anda akan melihat pengaturan-pengaturan untuk memodifikasi tampilan chatbox. Anda dapat mengaturnya sesuka hati Anda. Jika sudah, copy kode dengan mengeklik Copy to Clipboard.
membuat chatbox untuk blogger
6. Letakkan kode yang di copy tadi ke petak gadget Anda(Tata letak--> Tambahkan Gadget-->HTML/JavaScript).

7. Klik Simpan.
P.S= Gambar diatas merupakan tampilan chatbox default. Anda dapat mengkonfigurasikannya sesuka hati Anda pada halaman cbox.
widget pengunjung online
 Dengan menampilkan jumlah pengunjung yang sedang online, kita jadi dapat mengetahui berapa pengunjung yang sedang benar-benar mengunjungi blog kita. Widget ini sangat berguna untuk melihat aktivitas pengunjung. Kita juga jadi dapat menghitung berapa pengunjung blog hari itu juga (apabila Anda selalu On, hehehe).

Secara sekilas, widget untuk membuat pengunjung yang Online terlihat tidak begitu bermanfaat, karena fungsinya hanya untuk melihat berapa pengunjung saat itu juga. Widget ini juga mempunyai kekurangan, yaitu untuk melihat perkembangan terbaru jumlah pengunjung, kita harus mereload blog kita. Namun, apabila widget ini dikombinasikan dengan Chatbox, bukanlah akan sangat bermanfaat untuk sekadar saling berbicara dan menyapa?


Sebagai informasi, blog Asli Tutorial juga menggunakan langkah ini untuk menampilkan jumlah visitor Online. Untuk membuatnya, cukup mudah. Ikuti langkah-langkah berikut:

1. Kunjungi RadarURL.

2. Masukkan alamat URL blog Anda dengan lengkap.
widget pengunjung online

3. Atur dimana letak widget ini berada. Setelah itu, klik Generate widget code from... lalu copy dan paste kode yang disediakan disana tepat diatas kode </body>.
widget pengunjung online

4. Simpan template. Klik Pratinjau untuk melihat perubahan.

Biasanya, terdapat beberapa blog yang mempunyai artikel-artikel yang sangat panjang. Blog yang memiliki artikel yang sangat panjang biasanya adalah blog dengan kategori blog pendidikan, dan sebagainya. Nah, karena artikel yang panjang, halaman blog dapat rusak, tidak rapi, dan membuat "sakit mata" bagi pembacanya. Untuk itu, sangat dianjurkan untuk membuat auto readmore pada blog walaupun artikelnya tidak terlalu panjang. Mengapa? Sudah jelas, karena untuk memperapi tampilan blog. Selain itu, menggunakan auto readmore berarti hanya menampilkan awal artikel saja. Pengunjung yang menemui blog yang menggunakan auto readmore harus mengeklik tombol "readmore" atau judul postingannya.

Sebenarnya, pihak Blogger sendiri sudah menyediakan fitur readmore yang berada di halaman pengeposan yang diberi judul "jump break". Perbedaannya, jump break dengan auto readmore adalah jump break tidak dapat menampilkan thumbnails guna pengganti kata readmore, sedangkan auto readmore bisa. Perbedannya yang lain secara kasat mata adalah jump break harus diklik terlebih dahulu dimana paragraf akan dipotong, namun auto readmore tidak, karena dari judulnya "auto", maka readmore akan terlihat sendirinya. Satu hal yang pasti, readmore tidak memberatkan loading page blog, karena hanya menggunakan kode CSS (Cascading Style Sheet). Ikuti langkah-langkah berikut untuk membuat auto readmore dengan thumbnails:

1. Pada dasbor, pindah ke Template.
2. Pilih Edit HTML.
3. Cari kode </head>. Untuk mempermudah pencarian, tekan Ctrl+F. Jika sudah ketemu, letakkan kode berikut tepat dibawah kode tersebut.

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>
Keterangan:
summary_noimg = Banyaknya tulisan yang ditampilkan di readmore tanpa gambar.
summary_img = Banyaknya tulisan yang ditampilkan dalam readmore dengan gambar.
img_thumb_height = Tinggi gambar thumbnails (dalam satuan pixel).
img_thumb_width = Lebar gambar thumbnails (dalam satuan pixel).

4. Cari lagi kode <data:post.body/>. Biasanya terdapat 3 kode yang sama persis. Kita hanya membutuhkan kode yang kedua.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
Keterangan:
Readmore >> = Ganti dengan kata yang akan ditampilkan sebagai readmore. Atau, Anda juga bisa menggantinya dengan tombol (gambar), ganti yang berwarna merah tersebut dengan kode berikut:

<img border='0' src='URL gambar readmore'/>

Ganti URL gambar readmore dengan link yang akan Anda jadikan tombol readmore.

5. Simpan Template. Lihat perubahannya.

Membuat Autohide Pada Navbar

Navbar, adalah akronim dari Navigation bar, adalah widget yang terletak dibagian paling atas blog. Ukuran navbar sangatlah kecil. Jika dihitung dengan satuan centimeter (Cm), tinggi navbar hanya 1 cm, dan lebarnya tergantug lebar dari monitor. Fungsi navbar jika dilihat dari tampilannya, adalah untuk membagikan artikel ke bookmark seperti Facebook, Twitter, Google+, dan Pinterest. Fungsi lainnya dari navbar adalah untuk masuk dan keluar akun Google, membuat entri baru (bagi yang sudah masuk ke akun Google). Namun, menurut pendapat saya pribadi, fungsi navbar dapat dikatakan tidak terlalu maksimal.

Mengapa kurang maksimal? Karena, navbar ukurannya sangat kecil dan berada di bagian paling atas blog. Mungkin pengunjung blog yang datang jarang yang melihat navbar. Mungkin Anda berniat untuk menonaktifkannya? Seperti yang dikatakan oleh term of service (TOS) yang diberlakukan oleh pihak Blogger, menghilangkan navbar termasuk ke dalam pelanggaran. Resiko dari pelanggaran TOS adalah blog akan ter-banned oleh pihak Blogger..Walau sanksinya kurang dapat terealisasi, karena masih banyak Blog yang menonaktifkan navbar blog tersebut namun belum terkena sanksi dari Blogger. 

Meskipun begitu, prinsip saya adalah kita harus menaati peraturan yang ada, karena peraturan harus dilaksankan. Walaupun blog ini tidak mempunyai navbar karena sudah ganti templatenya sih. Cara kerja autohide navbar adalah navbar akan tersembunyi, dan baru akan terlihat apabila navbar didekatkan oleh pointer mouse. Ikuti langkah-langkah berikut untuk membuat autohide pada navbar :

1. Pada dasbor, pindah ke Template.
Template Blogger
2. Pilih Edit HTML.
3. Cari kode ]]></b:skin>. Untuk mempermudah, tekan Ctrl+F.

4. Jika sudah ketemu, letakkan kode berikut tepat diatas kode ]]></b:skin>.
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
5. Simpan Template. Sekarang, lihat blog Anda untuk memastikan apakah navbar sudah autohide atau belum.
Membuat Fanspage Dan Like Box Facebook
Mungkin kita sering berkomunikasi dengan pengunjung blog di kolom komentar blog. Padahal, sebenarnya masih ada cara lain yang tepat untuk berkomunikasi dengan pengunjung blog. Salah satunya adalah dengan melalui Facebook,Twitter, Google Plus, dan sejenisnya. Nah, pada tutorial yang sedang dibahas sekarang, kita akan membuat fanspage di Facebook dan memasang like box-nya di blog kita. Bagaimana? Apakah menarik?

Dengan membuat fanspage, kita juga dapat memiliki peluang untuk meraih / menambah traffic blog. Mengapa? Karena, kita jadi dapat mengundang semua teman kita dan meminta mereka untuk mengunjungi blog kita tercinta. Kita juga dapat meminta teman kita untuk mengundang teman-temannya untuk mengunjungi blog kita atau menyukai fanspage blog kita. Dengan begitu, kita memiliki harapan untuk membuat blog kita lebih dikenal masyarakat luas.

Tak ada salahnya juga kita menyukai fanspage blog yang lainnya untuk menambah wawasan dan ilmu pengetahuan tentang blogger. Namun, saya sarankan jangan terlalu cenderung mengurusi fanspage blog lain, karena Anda akan mempunyai fanspage blog Anda sendiri. Untuk membuat fanspage dan likebox, ikuti langkah-langkah berikut dengan cermat:

A. MEMBUAT FANSPAGE FACEBOOK

1. Login ke akun Facebook Anda.

2. Buat dahulu fanspage. Klik disini untuk membuat fanspage .

3. Klik Merek atau Produk.
Membuat Fanspage Dan Like Box Facebook 1
4. Pilih kategori Web dan isikan nama fanspage blog Anda. Centang Facebook Pages Terms dan klik Get Started.
Membuat Fanspage Dan Like Box Facebook 2
5. Isi dan lewati keempat step (langkah) yang akan diminta oleh pihak Facebook. Isikan data dengan benar.
Membuat Fanspage Dan Like Box Facebook

6. Jika Anda telah melewati keempat langkah yang diminta oleh Facebook, maka Anda sudah mempunyai fanspage. Cobalah untuk mengundang teman-teman Anda untuk menjadi anggota melalui dasbor fanspage Anda.

B. MEMBUAT LIKE BOX FACEBOOK

Setelah membuat sebuah fanspage, maka kita juga harus memiliki "pelengkapnya". Pelengkapnya yaitu adalah like box. Mengapa? Karena saat pertama kali dibuat masih suatu fanspage masih sangat sepi. Kita membutuhkan anggota yang banyak agar dikenal. Like box berbentuk seperti banner yang berukuran kecil, sedang, hingga panjang. Fungi likebox, adalah untuk memungkinkan pengunjung blog dapat langsung mengeklik tombol like (suka) tanpa harus membuka halaman Facebook. Untuk membuat likebox, ikuti langkah-langkah berikut:

1. Setelah membuat fanspage, sekarang kita akan membuat like box. Klik disini.

2. Isikan URL halaman fanspage blog Anda yang dibuat tadi. Sesuaikan lebar dan tinggi widget (dalam satuan pixel) dan warna widget fanspage yang akan ditampilkan dalam like box. Setelah itu, klik Get Code.
Membuat Like Fanspage dan Like Box



3. Perhatikan gambar diatas. Setelah Anda mengeklik Get Code, Anda harus memilih kode yang jenisnya HTML5. Jika sudah, Anda akan menjumpai kode 1 dan kode 2 seperti yang terlihat diatas. 

Untuk yang kode 1, copy terlebih dahulu kodenya. Kemudian masuk ke Template, kemudian pilih Edit HTML. Cari kode </body>. Untuk mempermudah, klik Ctrl+F untuk mencari. Setelah ketemu kodenya, letakkan kode 1 yang telah di copy tepat diatasnya. Klik Simpan Template.

Untuk yang saya namakan kode 2, copy terlebih dahulu kodenya, kemudian masuk ke Tata Letak, klik tambahkan gadget, kemudian pilih gadget HTML/JavaScript. Letakkan kode 2 yang tadi di copy ke kolom konten. Untuk judul, terserah Anda mau beri nama apa. Asalkan berhubungan dengan like box.

4. Simpan template.

Masalah yang mungkin terjadi:

Mungkin saja Anda akan menerima pesan seperti ini saat berusaha untuk mencopy kode pertama diatas kode </body>.
Pemecahan Masalah pembuatan like box

Permasalahan ini terjadi karena tag ";" setelah AppID tidak tetutup. Solusinya, jika Anda memang menerima pesan seperti gambar diatas, maka solusinya adalah kita harus menambahkan simbol ";" (tanpa tanda kutip) di depan kata appId. Sehingga kode yang tadinya seperti ini:

.........js#xfbml=1&appId=202332576636082";............

Maka, seperti intruksi diatas, kita hanya cukup menambahkan kata ";" (tanpa tanda kutip). Setelah kita mengikuti instuksi seperti diatas (menambahkan ";" sebelum kata appId), maka kode 1 yang telah berubah akan menjadi seperti ini:

.........js#xfbml=1&appId;=202332576636082";............

Tutorial ini telah saya coba dan hasilnya 100% berhasil..buktinya, lihat saja di blog ini pada bagian sidebar kanan. Disana terdapat like box yang saya pasang, yang tata caranya sama dengan tutorial yang sekarang ini telah dibahas. Oleh karena itu, apabila ada yang kurang, silakan tanya melalui kolom komentar dibawah. Terima kasih. Have fun with likebox in your blog

Menghapus Widget Atribusi Blogger
Widget atribusi blogger biasanya terletak dibagian paling bawah blog. Widget atribusi berfungsi untuk menampilkan orang-orang dibalik pembuatan suatu blog. Artinya, widget atribusi adalah widget untuk menampilkan Credit blog. Secara default, widget atribusi memiliki tulisan "Diberdayakan oleh Blogger" pada template simple. Kita juga dapat menambahkan kata-kata pada widget atribusi melalui halaman Tata Letak. Namun, menurut pendapat saya pribadi, widget atribusi berfungsi dengan kurang maksimal.

Mengapa tidak berfungsi secara maksimal? Jawabannya, karena kini para blogger sudah meninggalkan widget atribusi dan memulai untuk menggunakan fitur laman yang ada dalam dasbor Blogger. Biasanya, para blogger yang menggunakan fitur laman untuk menampilkan credits blog diberi judul dengan nama "Tentang" atau "Credits". Menghapus atau menghilangkan widget atribusi tidak melanggar "term of service" yang diberlakukan oleh pihak Blogger. Oleh karena itu, menghapus widget atribusi tidak mempunyai resiko apapun termasuk tidak akan ter-banned oleh pihak Blogger.

1. Dari dasbor, pindah ke Template.

2. Pilih Edit HTML.
Edit HTML Blogger

3. Cari kode <b:widget id=’Attribution1′ locked=’true‘ title=” type=’Attribution’>.

4. Perhatikan kode tersebut. Terdapat kata true. Ganti kata tersebut menjadi false. Sekarang, beralih ke halaman Tata Letak. Klik widget atribusi.
Edit HTML 2014

5. Sekarang, kita memiliki opsi untuk menghapus widget atribusi. Klik Hapus dan widget atribusi kini telah menghilang.

Jika Anda ingin menampilkan kembali widget atribusi, caranya mudah. Anda tinggal mengeklik Tambahkan Gadget, kemudian klik widget Atribusi. Ingat, menghapus widget atribusi tidak melanggar term of service (TOS) yang diberlakukan oleh pihak Blogger, sehingga blog Anda akan aman dari ancaman banned oleh pihak Blogger.