Jumat, 14 Juni 2013

Macam Bentuk Numbered List dan Bullet List

Macam Bentuk Numbered List dan Bullet List yang bisa dipakai di blogger. Cara menggunakannya lihat dibawah ini.
  1. Buatlah entri baru atau edit artikel lama
  2. Dan Klik Numbered List 
  3. Lalu klik bagian HTML di sebelah Compose.
  4. Terus ganti kode <ol> dengan salah satu kode dibawah.
  5. Terakhir kembali ke Compose, maka tampilan numbered list akan berubah.
  6. Untuk Bullet list, klik bullet list, lalu lihat pada bagian HTML 
  7. Dan ganti kode <ul> dengan salah satu kode bentuk bullet list dibawah.
Macam Bentuk Numbered List
  1. Bentuk Dasar, <ol> Tanpa Edit HTML
  1. Mulai dari angka 8, Ganti kode <ol> dengan <ol start="8">
  2. Setelah dienter, maka akan berlanjut ke nomor 9 dan seterusnya, seperti tulisan ini.
  1. Dalam Bentuk Huruf Besar, <ol type="A">
  1. Dalam Bentuk Huruf Kecil, <ol type="a">
  1. Dalam Bentuk huruf atau angka romawi, <ol type="I">
  1.  Angka romawi huruf kecil, <ol type="i">
  1. Angka Romawi Besar dimulai dari angka 5, <ol type="I" start="5">
  2. Setelah dienter, maka akan berlanjut ke angka romawi 5 dan seterusnya.
Macam Bentuk Bullet List
  • Bentuk dasar bullet list, <ul> tanpa edit html
  • Bentuk Bulat sederhana, <ul type="circle">
  •  Bentuk Kotak, <ul type="square">
Dan yang terakhir, tips meratakan tampilan kiri-kanan Numbered list. Seperti contoh gambar dibawah ini.
menggunakan numbered list di blog
Contoh gambar
Dari gambar diatas Tampilan numbered list, rata dengan kalimat yang ditulis seperti menulis biasa diblog, diatur menggunakan justify rata kiri kanan kalimat. Standar blogger, tampilannya akan ada spasi jarak sehingga tidak sejajar dengan kalimat yang ditulis biasa tanpa numbered list.
Berikut sedikit trik cara agar tampilan numbered list rata dengan tulisan biasa.
  1. Login ke blogger, dari halaman dasbor, pilih pengaturan template.
  2. Terus edit html, dan cari kode ]]></b:skin> lalu letakan kode berikut ini diatasnya.
  3. .post ol {
    padding:0px 24px 0px;
    width:96%;max-width:100%;}
  4. Keterangan kode: padding:0px 24px 0px; Rata Kiri dan width:96%;max-width:100%; Rata Kanan.
  5. Jika belum rata, Ganti 24px dan 96% agar rata dengan tampilan posting kamu.
  6. Save template, selesai.
Pada saat menulis, tampilan numbered list tetap seperti biasa, tetapi jika sudah dipublikasikan, maka tampilannya akan berubah, rata dengan tulisan biasa. Preview dulu tulisan untuk melihat hasilnya.
Itulah sedikit tips trik menulis artikel menggunakan numbered list dan bullet list di blog, silakan baca juga tips trik menulis artikel di blog menggunakan numbered list yang disisipkan gambar, atau kode script ditengah-tengahnya. Semoga Bermanfaat.

Minggu, 02 Juni 2013

Cara Mengganti Judul Blog Dengan Gambar

Cara mengganti judul blog dengan gambar. Header blog standar blogger biasanya hanya berbentuk huruf tulisan, dan tulisan tersebut bisa kita ganti dengan gambar yang kita inginkan, tanpa menghilangkan H1 title blog yang bisa mengganggu Seo blog. 
cara mengganti header blog dengan gambar

Sebenarnya blogspot sudah menyediakan Tool untuk mengganti judul blog dengan gambar, yaitu dengan menambahkan langsung gambar di widget header blog pada bagian tata letak. Kekurangan dari tool tersebut, gambar akan menghilangkan H1 title dari judul blog, sehingga blog tidak mempunyai H1.

Berikut ini adalah cara mengganti judul blog dengan gambar tanpa menghilangkan H1 header blog. Ikuti langkah-langkah dibawah ini.
  1. Login ke blogger. Dari halaman Dasbor pilih pengaturan TATA LETAK.
  2. Selanjutnya Add Gadget atau Tambahkan Gadget dan pilih HTML/JavaScript.
  3. Lalu Pastekan kode berikut ini ke dalamnya.
  4. <h1>
    <a href="http://fandrajuani.blogspot.com/"><img alt="Desain Blog Tutorial dan Tips Trik Blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjtTxEt1nMUjJHueeQMYVIshQI6KRsNT_q5gaot33MwYpKn0QM23oKIzE-Zcs8s2FRX8SW82X8wq-ny1rX7FAeFclVG-pqFKyYSjPGinSAWoQzdYbjIVrWF83wMSfWvdlnNj62nRLlo7JK/s1600/Fandra+Juani.jpg" title="fandrajuani.blogspot.com" /></a>
    </h1>
  5. Keterangan Kode diatas.
    • http://fandrajuani.blogspot.com/ Ganti dengan URL Awal Blog Kamu
      Desain Blog Tutorial dan Tips Trik Blogspot Ganti dengan img Alt yang kamu inginkan
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjtTxEt1nMUjJHueeQMYVIshQI6KRsNT_q5gaot33MwYpKn0QM23oKIzE-Zcs8s2FRX8SW82X8wq-ny1rX7FAeFclVG-pqFKyYSjPGinSAWoQzdYbjIVrWF83wMSfWvdlnNj62nRLlo7JK/s1600/Fandra+Juani.jpg Ganti dengan URL gambar yang akan menjadi HEADER BLOG
      fandrajuani.blogspot.com Ganti Title gambar dengan yang kamu inginkan
      • Setelah itu Beri Judul Gadget HTML dan Save Gadget dan tempatkan dibawah Header Blog.
      • Tampilan template di Tata Letak menjadi seperti ini.
      • cara mengganti judul blog dengan gambar
      • Sekarang blog mempunyai 2 Header yaitu Widget header dan gambar Header.
      • Hapus widget Header, contoh: Fandra Juani (Header). Sehingga blog hanya mempunyai 1 Header. Selesai.
      Jika Widget Header tidak bisa dihapus, ikuti langkah dibawah ini.
      1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
      2. Selanjutnya Klik edit HTML dan cari kode ini.
      3. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'>
      4. Setelah itu ganti kata true dengan false 
      5. Terakhir save template, lalu kembali ke pengaturan tata letak, widget header sudah bisa dihapus. Selesai.
      Untuk mengembalikan Widget Header Blog yang sudah dihapus, kembali ke Tata Letak dan tambahkan Gadget pilih dasar-dasar, dan pilih Header Halaman.

      cara mengganti judul blog dengan gambar
      Menghapus Widget Header seperti contoh diatas Fandra Juani (Header) blog tidak akan mengganggu Seo Blog, karena judul blog header sudah diganti dengan gambar. Gambar tersebut fungsinya sama seperti judul blog standar blogger yang berupa huruf, apabila di klik maka akan kembali ke URL halaman awal blog.
      Setelah melakukan cara diatas, silakan cek di situs - situs yang menyediakan cek SEO blog, seperti situs www.chkme.com, www.seositecheckup.com,  www.seoptimer.com dan lain-lain. Untuk melihat masih ada atau tidak Header H1 Title judul blog.
      Untuk cara Upload Gambar dan Ambil URL gambar, bisa dibaca di artikel tentang cara cara upload dan ambil url gambar. Silakan dibaca juga Artikel-artikel lainnya yang masih berkaitan dengan memasukan gambar di blog seperti cara membuat menu blog dengan gambar icon disamping kiri judul menu blog.

      Jika tidak ingin menggunakan cara diatas, kamu bisa baca artikel cara merubah tampilan header blog. Di artikel itu header blog tidak dihapus, hanya diberi background dibelakangnya, yang dapat anda jadikan pilihan dalam merubah tampilan header dari blog anda. Itulah sedikit cara desain blog sendiri di blogspot menggunakan template asli blogger yaitu dengan mengganti tulisan judul blog dengan gambar. Semoga Bermanfaat.

        Jumat, 31 Mei 2013

        Cara Membuat Menu Blog Dengan Gambar

        Cara membuat menu blog dengan gambar dengan keterangan dibawahnya seperti beranda, daftar isi, hubungi, dan lain-lain. Untuk lebih jelasnya lihat gambar dibawah ini. Lalu klik salah satu gambar, maka akan terbuka halaman baru sesuai dengan URL halaman yang saya masukan.

        • membuat menu blog dengan gambar
          Beranda
        • membuat menu blog dengan gambar
          Desain Blog
        • membuat menu blog dengan gambar
          Tips dan Trik
        • membuat menu blog dengan gambar
          Hubungi

          Cara membuat menu blog dengan gambar. Ikuti langkah-langkah dibawah ini.

          1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
          2. Lalu Add Gadget, setelah itu Pilih HTML/JavaScript.
          3. Selanjutnya susun kode CSS dan HTML Seperti format dibawah ini.
          4. <style>
            KODE CSS
            </style>
            KODE HTML
          5. Sebagai contoh, Copy semua kode dibawah ini. dan Pastekan di Gadget HTML/JavaScript Tadi.
          6. <style>
            #tabs31{margin:0;padding:0;}
            #tabs31 ul{list-style: none;}
            #tabs31 ul li{float:left; margin-right:25px;}
            #tabs31 img {width:50px; height:50px;}
            figcaption {text-align:center;color: blue;font-weight:bold;font-size:10px;}
            </style>

            <div id="tabs31">
            <ul>
            <li><a href="http://fandrajuani.blogspot.com/">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjofpRmTU3xZpFtxA7rRMMEKnalkXU7wsP73eirvTFvUgmwEht5Dspfvvz5RQYLVfPH3_Z8jD_Ots_4T1cLCqVYv4EnNga0fF2YD7u402OupXschI-p2wLcs24Bye2o8yoG2AkEphUtK2RT/s128/DAFTAR-ISI.jpg" title="Beranda" width="50" height="50" /></a>
            <figcaption>Beranda</figcaption></li>

            <li><a href="http://fandrajuani.blogspot.com/search/label/Desain%20Blog">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXI-6cf29MMWUUnvV7jCAjdBLEu0fzYolQETM0R_FTo8SPSU2bO-uhPqg1JYgXp5135IapnOOz-6sFGdpd23nFK7n0Om0mZuWkpqYISm2diWKqO2qwr9gTupra-QF79NiF2kRxd9hrSjan/s128/DESAIN.jpg" title="Desain Blog" width="50" height="50" /></a><figcaption>Desain Blog</figcaption></li>

            <li><a href="http://fandrajuani.blogspot.com/search/label/Tips%20dan%20Trik">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzOnDZvxGrcMC-v0Th_F8nMBIInl5Z-IP9A8iYdVhoOiwxxTmrgnsRVeBbLVkF4MVBdyIve2JTFmkl3Na-C20EGfOJ6QYchnugQeCe7gg-zGLbRStsLyQhUtAVc9njpKl93MMZy0G6ci3M/s128/TIPS-DAN-TRIK.jpg" title="Tips dan Trik" width="50" height="50" /></a>
            <figcaption>Tips dan Trik</figcaption></li>

            <li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">
            <img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuqd0oEdrF0BNtz8VPLPEMuv8vc38BN3rGW-aY8BQbdZ6oatCDpvvdb5yYDpcbf4Wp3L_PtT1fnibF90ltOvE67FcUb0HRQwNEePUTVLJq_xhieMsBUZjINNK-fKzr99_HUtbBeTTfyzbt/s128/HUBUNGI.jpg" title="Hubungi" width="50" height="50" /></a>
            <figcaption>Hubungi</figcaption></li>

            </ul>
            </div>
          7. Save Gadget, selesai.

          Keterangan Kode Css Langkah 5: 

          • #tabs31 ul{list-style: none;} untuk menghilangkan list-style bulet.
          • #tabs31 ul li{float:left; membuat gambar horizontal, dan margin-right:25px; spasi atau jarak kanan antar gambar.
          • #tabs31 img {width:50px; height:50px;} tinggi dan lebar gambar.
          • figcaption untuk mengatur keterangan dibawah tulisan.

          Keterangan Kode HTML Langkah 5:

          • format dari menu <li><a href="url halaman menu">
          • <img src="Url gambar" title="keterangan gambar saat disentuh mouse" width="50" height="50" /></a>
          • <figcaption>Keterangan dibawah gambar</figcaption></li>
           Jika ingin menambahkan menu tambahkan format seperti dibawah ini.
          <li><a href="url halaman menu"><img src="Url gambar" title="keterangan gambar saat disentuh mouse" width="50" height="50" /></a><figcaption>Keterangan dibawah gambar</figcaption></li>

          Gunakanlah gambar dengan ukuran yang sama disetiap gambar, agar tampilan menu terlihat rapi, caranya bisa lihat di cara membuat icon blog. Cara mengambil URL gambar, bisa kamu baca di artikel cara upload dan ambil url gambar. Cara mengisi url halaman menu, baca artikel cara membuat dan mengisi menu blog. URL Label atau kategori juga bisa kita masukan ke menu.
          Semoga Bermanfaat.

            Selasa, 28 Mei 2013

            Menambahkan Gambar Disamping Judul Posting

            Cara menambahkan gambar disamping judul posting blog.

            gambar disamping judul post blog

            Gambar diatas dengan lingkaran merah adalah contoh gambar yang ditempatkan di samping kiri posting blog, gambar tersebut akan muncul di setiap posting blog yang ada. Akan saya coba jelaskan secara detail, agar bisa di mengerti. Ikuti langkah-langkah dibawah ini.
            1. Login ke blogger, ke pangaturan template.
            2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
            3. h3.post-title {
              background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7UvUxaDYpRhq-Btf6-ieATXGHw3hpFQVwmbu4zU0KVVYjDveC0q8VtycAdyXqxdPvmL0HAXrcDGPG4bbclCKdMorP469G1ySbvTO8ByArSJWx1ZVhyphenhyphenSnDSWqFV-bxTgZ2jtweW4uWMna/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;}
            4. Save template, Selesai.
            Keterangan kode langkah 2:
              url("gambar.jpg") adalah kode url sumber gambar yang akan digunakan.
              no-repeat membuat gambar tidak berulang.
              padding:10px 0px 0px 40px; mengatur posisi tulisan judul posting.
                Jika gambar ingin ditempatkan disebelah kanan atau tengah judul posting blog. Tambahkan kode berikut disamping no-repeat; contoh: no-repeat top right;
                •  right untuk bagian kanan.
                •  center untuk bagian tengah
                Untuk membuat icon dengan gambar sendiri, silakan baca di cara membuat icon website. Dan untuk cara mengambil URL dari gambar sendiri, baca di cara upload dan ambil url gambar.
                  Itulah sedikit cara untuk mendesain blog sendiri, dengan menambahkan gambar disamping judul posting blog, yang akan muncul disetiap posting artikel yang ada di blog. Silakan baca juga cara membuat tulisan bayangan di blog di judul, deskripsi blog bagian tab, sidebar dikiri-kanan blog, sampai judul posting, bisa kita beri tulisan bayangan. Semoga Bermanfaat.

                    Senin, 27 Mei 2013

                    Cara Mengganti Tulisan Beranda,Posting Lama,Posting Lebih Baru

                    Cara mengganti tulisan beranda, posting lama, posting lebih baru di blog dengan kata-kata sendiri atau dengan gambar navigasi halaman.Tulisan tersebut berada di bawah bagian akhir pada saat kita membuka artikel, atau bagian bawah dari daftar posting di halaman awal blog. Untuk blog berbahasa inggris biasanya bertuliskan home, next, previous. Untuk lebih jelasnya lihat gambar dibawah ini.

                    mengganti beranda posting lama baru


                    Tulisan seperti contoh gambar diatas itulah yang akan kita ganti. cara mengganti tulisan beranda, posting lama, posting lebih baru di blog. Ikuti langkah-langkah dibawah ini.
                    1. Login ke blog, dan pilih pengaturan template.
                    2. Selanjutnya klik Edit HTML dan cari 3 kode Biru dibawah ini. Gunakan Ctrl F untuk mempermudah Pencarian.
                    3. 1. expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
                      Keterangan: Posting Lebih Baru(Previous)

                      2. expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
                      Keterangan: Posting lama(Next)

                      3. <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
                      Keterangan: Beranda(Home)
                    4. Jika hanya ingin mengganti tulisannya saja dengan kata-kata kita sendiri. maka ganti Format kode diatas menjadi seperti ini.
                    5. expr:title='data:olderPageTitle'>Selanjutnya</a>
                      expr:title='data:newerPageTitle'>Sebelumnya</a>
                      <a class='home-link' expr:href='data:blog.homepageUrl'>Rumah</a>
                    6. Ganti kode warna merah dengan kata yang kamu inginkan. Untuk beranda/home ada 2 kode yang sama, ganti kedua2nya. Selanjutnya Preview, jika sudah berubah baru save.
                    7. Jika ingin mengganti tulisannya dengan gambar, maka tambahkan Url gambar, Contoh:
                    8. expr:title='data:newerPageTitle'><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/back.png'/></a>

                      expr:title='data:olderPageTitle'><img src='http://b.dryicons.com/images/icon_sets/blue_velvet/png/32x32/forward.png'/></a>

                      <a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/home.png'/></a>
                    9. Kode warna Biru itu URL gambar dengan tambahan formtanya. Beranda/home ada 2 kode yang sama, ganti kedua2nya. Jika sudah, silakan dipreview dulu, klo sudah berubah baru save.
                    10. Untuk mengganti dengan gambar lain, ganti url gambar, dengan url gambar yang kamu inginkan. Format gambar seperti dibawah ini.
                    11. <img src='URL gambar kamu'/></a>
                    12. Coba cari digoogle gambar, dengan kata kunci icon home. Cari gambar yang ada pilihan ukurannya. Pilih gambar ukuran 32 atau sesuai dengan yang kamu inginkan. Selanjutnya Copy URLnya(klik kanan tepat digambar dan pilih copi URL gambar) dan masukan kodenya di format kode diatas.
                    13. Salah satu web yang menyediakan icon gambar adalah http://dryicons.com/icon/blue-velvet/home/ silakan dicari gambar yang sesuai dengan yang kamu inginkan.
                    Silakan dibaca juga cara menghilangkan diberdayakan oleh blogger yang berada dibawah posting blog dan juga fitur-fitur lainnya, seperti navbar, langganan entri atom dan masig banyak lagi. Itulah sedikit cara untuk mendesain blog sendiri menggunakan template asli blogger, yaitu dengan mengganti tulisan beranda, posting lama dan posting lebih baru di blog. Semoga Bermanfaat.

                    Sabtu, 25 Mei 2013

                    Membuat Menu Dropdown di Blogspot

                    Cara Membuat Menu Dropdown yang terletak di bawah header Blog.

                    membuat menu dropdown di blog

                    Ikuti langkah-langkah dibawah ini.
                    1. Kunjungi situs http://cssmenumaker.com/
                    2. Pilih salah satu menu dropdown yang kamu inginkan.
                    3. Sebagai contoh Blue Opera Drop down menu. Gambar paling pertama dari gambar diatas. Selanjutnya klik Customize.
                    4. cara membuat menu dropdown diblog
                    5. Dan Atur Isi Menu dropdown dengan nama dan URL yang kamu inginkan.
                    6. membuat menu dropdown diblog
                    7. Keterangan gambar diatas:
                      • Gunakan Add Item untuk menambah isi menu, atau klik tanda silang merah untuk menghapus isi menu.
                      • Untuk mengganti nama Judul, Klik menu structure dan  isi dibagian Title.
                      • Untuk mengganti URL,  Isi bagian Link dengan URL yang kamu inginkan.
                      • Dan klik Update Item.
                    8. Setelah selesai mengisi menu. Selanjutnya copy semua kode HTML dan CSS di website tersebut, lalu pastekan di gadget HTML/Javascript di blogger. Contoh Pemasangan:
                    9. 1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
                      2. Klik Tambahkan Gadget, lalu pilih HTML/Javascript.
                      3. Lalu Susun Kode HTML dan CSS seperti ini.

                      <style>
                      Masukan Kode Css
                      </style>
                      Masukan Kode HTML

                      4. Save Gadget, lalu pindahkan ke bawah header.
                    10. Jika menu dropdown nya tidak turun atau tidak terlihat???
                    11. 1. Login ke blogger. Dari halaman dasbor pilih pengaturan Template.
                      2. Klik Edit HTML dan cari kode
                      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
                      3. Setelah ketemu, ganti 1 menjadi 3 dan no menjadi yes
                      4. Kodenya jadi seperti ini.
                      <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
                      5. Save template.
                      6. Selanjutnya kembali ke pengaturan tata letak.
                      7. Dan pindahkan Gadget HTML/Javascript menu dropdown tadi, tepat dibawah Header.
                      8. Lalu klik Save/Simpan Setelan.

                    12. Terakhir, lihat tampilan blog kamu. Selesai.
                    Untuk menu yang lebih mudah, bukan dropdown, tapi menu dari laman blogger, silakan baca disini cara membuat dan mengisi menu blog. Semoga Bermanfaat

                      Rabu, 22 Mei 2013

                      Tombol Sosial Share Widget Untuk Blogger

                      Tombol sosial share widget untuk blogger. Seperti facebook tombol like, send, subcribe, recommend, Twitter follow, Google +, Google + 1 dan masih banyak lagi. Tombol share akan muncuk dibawah posting disetiap artikel yang ada di blog.

                      Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.
                      1. Kunjungi situs sharethis.com
                      2. Selanjutnya lakukan registrasi pendaftaran disitus tersebut.
                      3. Setelah selesai melakukan registrasi, silakan masuk Log In.
                      4. Dan klik Get Sharing Tools
                      5. Selanjutnya Step 1 pilih Platform Blogger
                      6. Step 2 Style, pilih bentuk tombol share yang kamu inginkan.
                      7. Step 3, atur tombol share yang akan dipasang di blog.
                      8. tombol share widget untuk blogger
                      9. Setelah selesai, klik Finish Get the Code dan Pilih Multi Post
                      10. Selanjutnya klik Go, maka akan terbuka halaman baru Import Elemen Laman.
                      11. cara membuat tombol share di blog
                      12. Dan klik Menambah Widget, pindahkan saja widget ke bagian footer bawah blog. Selesai.
                      Tombol sosial share sudah ada di blog, tapi muncul juga dihalaman awal blog. Cara menyembunyikannya, agar muncul hanya di bagian posting blog saja. Ikuti langkah-langkah dibawah ini.
                      1. Login ke blogger, dari halaman dasbor pilih pengaturan Template.
                      2. Selanjutnya klik Edit HTML dan cari kode share this yang mirip dengan kode dibawah ini.
                      3. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>...</b:widget>
                      4. Semua kode masih tersembunyi, klik tanda >...< untuk membuka semua kode, sehingga tampilannya menjadi seperti ini.
                      5. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
                        <b:includable id='main'>...<b:includable>
                        </b:widget>
                      6. Klik lagi tanda >...< maka akan terbuka semua kode sharethis seperti dibawah ini.
                      7. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
                            <b:includable id='main'>
                          <!-- only display title if it's non-empty -->
                          <b:if cond='data:title != &quot;&quot;'>
                            <h2 class='title'><data:title/></h2>
                          </b:if>
                          <div class='widget-content'>
                            <data:content/>
                          </div>

                          <b:include name='quickedit'/>
                        </b:includable>
                          </b:widget>
                      8. Sekarang, tambahkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara kode lengkap sharethis diatas, contohnya:
                      9. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
                            <b:includable id='main'>
                        <b:if cond='data:blog.pageType == "item"'>
                          <!-- only display title if it's non-empty -->
                          <b:if cond='data:title != &quot;&quot;'>
                            <h2 class='title'><data:title/></h2>
                          </b:if>
                          <div class='widget-content'>
                            <data:content/>
                          </div>
                        </b:if>
                          <b:include name='quickedit'/>
                        </b:includable>
                        </b:widget>
                      10. Terakhir, Preview template, jika sudah hilang dari halaman awal blog, baru save template, Selesai.
                      Sekarang coba buka salah satu artikel di blog, dan lihat tombol sosial share yang sudah kamu buat tadi akan muncul dibawah posting, disetiap artikel yang ada. Jadi tidak menggangu tampilan awal halaman blog.

                      Silakan dibaca juga artikel lainnya tentang cara membuat komentar facebook diblog yang berada dibawah artikel blog, agar blog bisa dikomentari menggunakan akun facebook. Atau cara membuat facebook like page yang berbentuk kotak dengan tombol Like halaman, serta tampilan foto pengguna facebook yang menyukai halaman blog. Semoga Bermanfaat.

                       

                      Copyright @ 2013 ADOL DOLLAR.