Tampilkan postingan dengan label Mempercantik Blog. Tampilkan semua postingan

Cara Menghilangkan Navbar Blogger

, by Unknown

Sobat Ihsan mengajukan pertanyaan yang di tulis melalui shoutbox. Beliau menanyakan bagaimana cara menghilangkan Navbar Blogger, dan kali ini saya akan mencoba membahasnya. Apa itu Navbar Blogger? navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.

Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

  • Untuk template klasik

    1. Sign in di blogger
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
    5. Copy kode berikut lalu paste di atas kode </style>
      6. /* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }
    6. Klik tombol Simpan Perubahan Template
    7. Selesai.
  • Untuk template baru

    1. Sign in di blogger
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
    5. Copy kode berikut lalu paste di atas kode ]]></b:skin>
      6. /* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }
    6. Klik tombol Simpan Template
    7. Selesai.
    Selamat menikmati blog tanpa navbar ! Sumber : http://kolom-tutorial.blogspot.com/2007/09/cara-menghilangkan-navbar-blogger.html
    read more

    Membuat Facebook Comment Form di Blogspot

    , by Unknown

    Facebook telah merilis sebuah plugin yang dapat diintegrasikan pada blog. Comment System, sehingga saat pengunjung anda berkomentar maka komentarnya akan tersebarluas ke seluruh dunia melalui profil Facebooknya. Cara berpromosi yang gratis dan sempurna. Dari waktu ke waktu Facebook Developer Team selalu mengembangkan sistem ini sehingga dapat digunakan di semua jenis blog dan mudah untuk diaplikasikan oleh semua blogger.

    Cara Membuat Facebook Comment Form di Blogspot :


    Langkah Pertama : Mendaftarkan Aplikasi Facebook baru
    Untuk mendaftarkan aplikasi Facebook, klik halaman Facebook Developer Page di facebook teman-teman atau langsung klik link ini http://www.facebook.com/developers. Pada halaman ini anda akan melihat tombol "+ Set Up New Application" pada halaman kanan atas, klik dan anda akan dibawa ke halaman pengaturan.


    Pada form Application Name, ketikkan nama aplikasi  (misal : Komentar Blog FB). Setelah selesai, beri tanda checklist pada pilihan Agree untuk Terms dan klik "Create Application".


    Setelah selesai dan aplikasi anda dibuat, pergi ke tab Web Site dan teman-teman akan melihat Application ID, Application Secret Number, Site URL, dan Site Domain. Isikan Site URL dengan alamat blog anda, jangan lupa akhiri dengan garis miring (contoh : http://www.budiutomo.com/), dan isikan Site Domain dengan budiutomo.com atau jika anda numpang domain di blogspot isi dengan blogspot.com karena anda meng-hosting blog anda di Blogspot.


    Langkah kedua : Menambahkan atribut XLMNS, Open Graph protocol tags, dan SDK script
    Masuk ke halaman Edit Template, jangan lupa untuk mememback up template asli  .Jika terjadi error maka teman-teman masih punya back up. Centang "Expand Widget Templates".


    Memasang Atribut XMLNS Facebook pada tag HTML :

    Ganti kode tag yang ada di paling atas dengan kode di bawah ini, kode yang saya maksud yaitu kode <head> ke atas. Langsung copas saja.


    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
    <head>



    Open Graph protocol mata-data tags :


    Open Graph protocol akan mengintegrasi halaman blog dengan media sosial. Didesain untuk website yang menyajikan data-data secara real-time dan mendunia, seperti film, selebriti, restaurant, dll. Sekali halaman anda masuk sebagai obyek, pengunjung dapat langsung mengakses data seperti yang dilakukan pada halaman Facebook. Berdasarkan struktur data yang anda sajikan melalui Open Graph Protocol, maka blog sobat akan secara langsung terkoneksi secara langsung ke Facebook : pada halaman profile, hasil pencarian dan di News Feed. Cari kode </head> dan diatas kode itu tambahkan kode berikut :



    <b:if cond='data:blog.pageType == &quot;item&quot;'> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta expr:content='data:blog.homepageUrl' property='og:url'/> </b:if> <meta content='JUDUL BLOG' property='og:site_name'/> <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/> <meta content='APPLICATION ID' property='fb:app_id'/> <meta content='FACEBOOK PROFILE ID' property='fb:admins'/> <meta content='article' property='og:type'/>



    Ganti JUDUL BLOG dengan nama blog anda.
    Ganti APPLICATION ID dengan nomor id aplikasi yang diberikan oleh Facebook.
    Ganti FACEBOOK PROFILE ID dengan user id pada Facebook anda


    Pasang Javascript SDK tag :

    Cari kode: <body> (Biasanya ada tepat dibawah kode </head> tag). Tambahkan SDK script setelah kode <body> tag:

    <div id='fb-root'/>
    <script>
    window.fbAsyncInit = function() {
    FB.init({
    appId : &#39;YOUR-APP-ID&#39;,
    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(&#39;script&#39;);
    e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
    document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
    </script>

    Ganti YOUR APP ID dengan nomor id aplikasi anda.


    Menambahkan kotak Komentar Facebook :


    Setelah semua langkah diatas dilampaui dengan baik, sekarang saatnya memasang kotak komentar Facebook. Ingat, bahwa Blogger punya sistem komentar sendiri jadi jangan lupa untuk me-non-aktifkan komentar Blogger.

    Cara menghilangkan komentar pada Blogger : Pergi ke Pengaturan > Komentar, dan pilih Sembunyikan.



    Klik Save. Untuk memasang Facebook Comment System, cari kode <data:post.body/> dan letakkan kode berikut tepat dibawahnya :

    <b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><a href="http://www.budiutomo.com/2010/12/membuat-facebook-comment-form-di.html" target="new"><img alt="" class="icon-action" height="25" src="http://a.imageshack.us/img838/3872/facebooklogoc.png" width="25" /><span style="font-size: 70%;">Facebook Comment System</span></a><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div></b:if>

    Kemudian Klik SAVE TEMPLATE dan lihat hasilnya. Form Komentar Facebook anda sudah selesai dibuat dan siap digunakan.
    read more

    Membuat Artikel Terkait Atau Related Posts Disertai Dengan Thumbnails Pada Blogspot

    , by Unknown

    Mungkin sahabat blogger semua bertanya, bagaimana ya caranya membuat artikel terkait atau populer disebut dengan related posts. Nah, pada kesempatan kali ini saya akan membahas cara Membuat Artikel Terkait Atau Related Posts Disertai Dengan Thumbnails Pada Blogspot. Saya akan membahas secara detail step demi step.
    Related Posts

    Oke, Langsung saja, cara membuat Related post pada blog ini kita bahas.



    1. Login ke Blogger.
    2. Di halaman Dasbor, kita pilih Tata Letak.
    3. Kemudian pilih Edit HTML
    4. Beri tanda centang pada Expand Template Widget
    5. Cari kode </head>
    6. Taruh (copy paste) kode berikut ini di atasnya
    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }

    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }

    #related-posts  a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
    7. Cari kode di bawah ini Atau
    <div class='post-footer-line post-footer-line-1'>
    Jika tidak menemukannya cari kode berikut ini
    <p class='post-footer-line post-footer-line-1'>

    8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)
    <!-- Related Posts with Thumbnails Code Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    var relatedpoststitle="Related Posts";
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div style='clear:both'/>
    </b:if>
    <!-- Related Posts with Thumbnails Code End-->
    9. Kita juga dapat menganti beberapa kode css, seperti berikut ini 
    var maxresults=5;
    Berarti artikel terkait yang akan kita tampilkan adalah 5
    var relatedpoststitle="Related Posts";
    Judulnya adalah Related Posts

    10. Simpan Template jika sudah selesai. 
    read more
    Langganan: Postingan ( Atom )