Widget
Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Cara membuat google custom search diblog

3:58 PM 0
Cara membuat google custom search di blog, yang berfungsi untuk memudahkan pengunjung untuk mencari artikel yang ada diblog. Cara menggunakannya, masukan kata kunci tulisan ke dalam kotak search, lalu enter atau klik tombol search, maka artikel2 yang berhubungan dengan artikel yang dicari akan muncul. Contoh gambar kotak search google custom.

Cara membuat google custom search diblog
Seperti contoh gambar diatas, ada tulisan GoogleTM Pencarian Kustom didalam kotak penelusurannya. Untuk lebih jelasnya tentang cara membuat google custom search di blog. Ikuti langkah-langkah dibawah ini.
  1. Login ke blogger. Selanjutnya kunjungi situs ini https://www.google.com/cse/
  2. Lalu pada situs itu, Masukan alamat blog kamu. Dan atur languange nya ke bahasa indonesia(jika ingin seperti contoh gambar diatas) untuk bahasa inggris tulisannya kira-kira akan menjadi seperti ini GoogleTM Custom Search. Silakan diatur sesuai dengan yang diinginkan. Lalu klik Create.
    3. Cara membuat google custom search diblog
  3. Setelah itu klik get code dan copi kode scriptnya.
  4. Selanjutnya, kembali ke blogger. Pilih pengaturan Tata Letak > klik Tambahkan Gadget > HTML/Javascript dan pastekan kode script dari google tadi.
  5. Save dan tempatkan gadget sesuai dengan yang kalian inginkan. Selesai.
Untuk merubah tampilan kotak google custom search, kunjungi lagi situs  https://www.google.com/cse/ lalu  klik search engine yang telah dibuat tadi, dan pada pilih Look and Feel. Nah disitu ada pengaturan Layout, Themes, Customize, dan Thumbnail silakan atur sesuai dengan yang dinginkan. Setelah selesai memodifikasi tampilannya, klik Save & Get Code dan pastekan lagi ke Gadget HTML/Javascript di pengaturan Tata Letak tadi. 

Jika ingin hasil pencarian dari kotak seacrh google custom terbuka dihalaman tab baru. Pada pengaturan layout di situs google custom tadi, pilih Google Hosted dan pilih New Window. Jangan lupa disave dan ambil/copi kode scriptnya, dan pastekan kembali ke gadget HTML di blogger.
Untuk pembuatan kotak penelusuran yang lebih mudah, silahkan baca di cara membuat kotak penelusuran. Selesai. Semoga Bermanfaat.

    Cara membuat tombol sosial media share diblog

    1:18 PM 0
    Cara membuat sosial media share, seperti facebook, google+, twitter dan lain2nya diblog. Tombol sosial media share dapat kita tempatkan dibawah judul posting atau dibawah posting. Dan dapat juga ditempatkan diwidget HTML/javascript di bagian sidebar blog.
    Cara membuat tombol sosial media share
    Cara membuat sosial media share di blog, ikuti langkah-langkah dibawah ini.
    1. Login ke blog, lalu pilih pengaturan Template.
    2. Klik edit HTML dan cari kode </head> lalu masukan kode berikut ini diatasnya.
      3. <script src="http://w.sharethis.com/button/buttons.js" type="text/javascript"></script>
      <script type="text/javascript">stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
    3. Save template. Selesai.
    Setelah menempatkan kode script. Sekarang kita akan coba memasukan kode share di bagian2 blog, seperti di bawah judul posting, diwidget sidebar atau dibawah posting blog. Silakan dipilih salah satu. Caranya seperti dibawah ini.
    Sosial media share dibawah judul posting
    1. Ke pengaturan template, klik edit hmtl dan cari kode <div class='post-header-line-1'/>
    2. Kode <div class='post-header-line-1'/> ada 2,  piih yang nomor 2 lalu masukan kode share button ini dibawah nya.
      3. <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <p align='left' class='kode-share-buttons'>
      <keterangan>Bagikan Artikel >>></keterangan>
      <span class='st_facebook_hcount' displayText='Facebook'/>
      <span class='st_plusone_hcount' displayText='Google +1'/>
      <span class='st_twitter_hcount' displayText='Tweet'/>
      <span class='st_pinterest_hcount' displayText='Pinterest'/>
      <span class='st_digg_hcount' displayText='Digg'/>
      <span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
      <span class='st_fblike_hcount' displayText='Facebook Like'/>
      </p></b:if>
    3. Silakan gunakan kode share yang kalian inginkan, dan untuk tulisan Bagikan Artikel >>> Kamu bisa ganti dengan kata yang kamu inginkan. Setelah itu save template, selesai.
    Sosial media share dibawah posting
    1. Ke pengaturan template, klik edit hmtl dan cari kode <data:post.body/>
    2. Kode <data:post.body/> ada 3,  piih yang nomor 3 lalu masukan kode share button dibawah nya.
    3. Kode kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
    4. Save template, selesai.
      Sosial media share di widget atau sidebar
      1. Kepengaturan tata letak, Klik Tambahkan widget/gadget > HTML/Javascipt.
      2. Lalu masukan kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
      3. Save gadget/widget, lalu tempatkan sesuai dengan yang kalian inginkan, selesai.
      Dan yang terakhir adalah menambahkan  kode css untuk menambah tampilan dari tombol sosial media share. Caranya.
      1. Kepengaturan TATA LETAK. Klik desainer template > tingkat lanjut > tambahkan css. Lalu masukan kode ini kedalmnya.
        2. .kode-share-buttons{border-top:1px dashed #ccc;border-bottom: 1px dashed #ccc;padding: 10px;}
        keterangan {color:#000;font-weight:bold;margin-right:20px;}
      2. Terapkan ke blog selesai.
      Semoga Bermanfaat.

      Cara membuat author dibawah posting blog

      9:37 AM 0
      Cara membuat author dibawah posting blog. Dengan menambahkan author atau profil penulis blog. Maka pengunjung akan lebih mudah untuk mengenali pemilik/penulis dari blog yang sedang dibacanya. Contoh gambar bisa lihat dibawah ini.

      Cara membuat author dibawah posting blog
      Untuk lebih jelasnya tentang cara membuat author dibawah posting blog. Ikuti langkah-langkah dibawah ini.
      1. Login keblogger, pilh pengaturan template.
      2. Klik edit HTML dan cari kode <data:post.body/> lalu masukan kode ini dibawahnya.
        3. <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='gambar'>
        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9tXJrX1Fm-vHD_Sf1GRywabOrvj4p8VQxOC7156ZL5ULTdnRQMewOp5tWu0_6Vl-TGRdNWfJQZn-VL85E39goWyzi5wo5unie1TPgGye9yJJ97MFm52w627wJ3Z277rSYEF0AdF06PXQQ/s361/Fandra%2520Juani.jpg'/>

        <div class='Penulis'>
        <span>Penulis : <a href='http://fandrajuani.blogspot.com/p/blog-page_25.html'><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></a></span>

        <div class='keterangan'>
        <span>Ada Pertanyaan tentang artikel diatas, silakan masukan komentar dibawah. </span>

        <div class='terimakasih'>
        <span>Terima Kasih Atas Kunjungannya. Assalamualaikum wr.wb.</span>
        <div style='clear:both;'/>
        </div></div></div></div></b:if>
        <div style='clear: both;'/>
        </div>
      3. Kode <data:post.body/> di template blog, biasanya ada 3, masukan kode langkah 2, di bawah kode <data:post.body/>, ketiga2nya.
      4. Selanjutnya, cari kode ]]></b:skin> lalu masukan kode ini didalamnya.
        5. .gambar {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbZKMWOZwTlj8z7ea09GM5irYwibntCmgN5wq2HXrQbuRuWH5zfq40e9Ba7FbkYKqcf8hERhCfBkHnS817p-B5NUyVlJLW7_whuXZEGNUQ5KkNljknyECLcVCmMV11fxRp_YvWoIJxXoU/s1600/gt.jpg) repeat-x top center;
        box-shadow:0px 1px 10px #aaaaaa;
        border:2px solid #eeeeee;
        padding:0;
        margin:10px 0;
        font:bold 12px Arial,Sans-Serif;height:100px;}

        .gambar img{
        width:70px;
        height:70px;
        margin:10px;
        float:left;
        padding:4px;
        background:#ffffff;
        border:1px solid #dddddd;
        position: relative;
        -moz-transition:all .4s ease-in-out;;
        -ms-transition:all .4s ease-in-out;;
        -o-transition:all .4s ease-in-out;;
        -webkit-transition:all .1s ease-in-out;
        transition:all .4s ease-in-out;}

        .gambar img:hover{
        -o-transform: scale(1) rotate(720deg);
        -moz-transform: scale(1) rotate(720deg);
        -webkit-transform: scale(1) rotate(720deg);}

        .Penulis{
        float:left;
        margin:10px 0px 0px 0px;
        text-shadow: 2px 2px 5px #107cde;
        font-weight:bold;color:white;}
        d{font-size:180%;color:DarkCyan}
        g{color:red}
        h{color:blue}
        i{color:#ee3e80}
        j{color:pink}
        k{color:black}
        l{font-size:180%;color:violet}
        m{color:DarkCyan}
        n{color:blue}
        o{color:pink}
        r{color:red}

        .Penulis a{
        text-transform:uppercase;
        font-family:Ravie;
        font-size:12px;
        text-shadow:2px 2px 5px #1780dd;
        font-weight:bold;padding:0}

        .keterangan{
        padding:15px 0px 0px 0px;
        color:white;font:italic 12px Arial, Sans-Serif;
        text-shadow: 2px 2px 5px #107cde;font-weight:bold;}

        .terimakasih{
        margin:13px 0px 0px 150px;
        font:italic 12px Arial, Sans-Serif;color:black;
        text-shadow: 2px 2px 5px #ffffff;}
      5. Save template, selesai.
      Keterangan kode langkah 2: 
      • Gambar untuk memasukan foto yang akan kita gunakan sebagai profil author.
      • Penulis isi dengan nama kamu, tulisannya saya buat dengan warna yang berbeda disetiap hurufnya. Untuk penjelasannya baca diartikel tulisan dengan warna yang berbeda.
      Keterangan kode langkah 4: 
      • Gambar untuk memberikan background disemua tulisan. Height nya saya atur 100px bisa anda ganti sesuai dengan keinginan anda.
      • .gambar img{ untuk mengatur ukuran gambar profil author dan juga tambahan kode gambar berputar.
      • .gambar img:hover{ gambar akan berputar ketika disentuh mouse. Penjelasannya baca di artikel cara membuat gambar berputar diblog
      • .Penulis a{ untuk mengatur font atau jenis tulisan nama author.
      • .keterangan{ jika menggunakan keterangan yang panjang. Hapus kode float:left; yang ada di kode .Penulis{ agar keterangan tetap berada disamping gambar profil.
          Silakan diubah sesuai dengan keinginan anda sendiri. Dan baca juga artikel tentang cara membuat tanda penulis dikotak komentar blog, agar terlihat berbeda dengan komentar dari pengunjung, sehingga orang bisa membedakan mana pengunjung, mana penulis blog. Semoga Bermanfaat.

            Cara membuat contact form di posting blog

            11:51 AM 0
            Cara membuat contact form di blogger, pada halaman posting atau laman blog. Contact form ini fungsinya Untuk memudahkan pengunjung menghubungi kita. Dengan mengisikan nama, email dan juga pesan yang ingin disampaikan ke penulis melalui kotak form yang telah disediakan. Pesan yang dikirimkan, akan masuk ke alamat email yahoo kita, yang kita gunakan diblog. Jadi tinggal buka yahoo dan lihat apakah ada pesan yang masuk dari kontak blogger.

            Cara membuat contact form di blog

            Gambar diatas adalah contoh contact form yang akan kita buat. Caranya ikuti langkah-langkah dibawah ini.
            Langkah pertama : Membuat contact form dihalaman posting atau laman blog.
            1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak
            2. Lalu klik tambahkan Gadget > Gadget Lainnya > lalu pilih Formulir Kontak > Dan letakkan dibagian sidebar paling bawah.
            3. Selanjutnya, memasukan formulir kontak ke halaman posting. Buatlah artikel baru atau buat dilaman > Laman baru > Laman Kosong. Dan Copi kode dibawah ini lalu pastekan dibagian HTML(disebelah compose).
              4. <form name='contact-form'>
              <div>Nama Kamu:</div>
              <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>

              <div>Email:</div>
              <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

              <div>Pesan:</div>
              <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <p></p>
              <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>

              <div style='text-align: center; max-width: 450px; width: 100%'>
              <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
              <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div>
              </form>
            4. Terakhir beri judul, dan Publikasikan. Selesai.
            Langkah kedua : Merubah tinggi dan panjang dari form nama, email, pesan.
            1. Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya.
              2. /* untuk mengatur ukuran form name dan email*/
              .contact-form-name, .contact-form-email {
              max-width: 300px;
              width: 100%;
              }
              /* untuk mengatur ukuran form pesan*/
              .contact-form-email-message {
              max-width: 300px;
              width: 100%;
              }
            2. Lalu terapkan ke blog, jika ingin merubah tingginya tambahkan kode height:100px;. Silakan diatur sendiri.
            Langkah ke 3 : Menghilangkan Contact Form di halaman Blog.
            1. Ke pengaturan Template > Edit HTML > Dan klik Lompat ke Widget > Pilih ContactForm1.
            2. Selanjutnya, buka semua kode, dan hapus beberapa kode didalamnya(hanya kode dibagian ContactForm1 bagian lain jangan dihapus). Sampai yang tertinggal hanya kode dibawah ini
              3. <b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
                  <b:includable id='main'>
                <b:include name='quickedit'/>
              </b:includable>
                </b:widget>
            3. Setelah itu, cari kode ]]></b:skin> dan tempatkan kode dibawah ini, fungsinya untuk menghilangkan sisa dari widget contact form dihalaman blog.
              4. #ContactForm1 {
              height: 0px;
              visibility: hidden;
              display: none;
              background:transparent;
              box-shadow:none;}
            4. Save temlate, selesai.
            Widget contact form tetap akan ada di blog kita. Tapi hanya di bagian tata letak saja, pada halaman blog tidak akan terlihat. Jika ingin menambahkan background gambar didalamnya, kamu baca di artikel cara membuat background dihalaman posting. Semoga bisa Bermanfaat untuk anda.

                  Menu Vertical Fandra Juani

                  8:30 AM 0
                  Menu Vertical Fandra Juani. Menu vertical ini berisi tulisan dengan warna yang berbeda disetiap hurufnya, ditambah dengan icon disamping kirinya. Icon yang dipasang dibuat dengan bentuk bulat. Dan ketika disentuh kursor mouse icon tersebut akan berputar.

                  • Tentang Fandra JuaniFandra Juani
                  • fandra juaniFacebook
                  • fandra juaniTwitter
                  • fandra juaniGoogle +

                  Cara membuatnya ikuti langkah2 dibawah ini.
                  1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
                  2. Selanjutnya, pilih tambahkan Gadget, dan pilih HTML/Javascript. Lalu masukan kode dibawah ini.
                    3. <style>
                    #tentang{background:transparent;height:150px}
                    #tentang ul{float:left}
                    #tentang ul li{width:200px;float:left;list-style:none}
                    #tentang ul li span{float:left;font-family:Trebuchet;text-transform:uppercase;font-size:14px;padding:0 0 0 10px;text-shadow:2px 2px 5px #1780dd;font-weight:bold}
                    d{font-size:180%;color:DarkCyan}
                    g{color:red}
                    h{color:blue}
                    i{color:#ee3e80}
                    j{color:pink}
                    k{color:black}
                    l{font-size:180%;color:violet}
                    m{color:DarkCyan}
                    n{color:blue}
                    o{color:pink}
                    r{color:red}
                    t{font-size:180%;color:yellow}
                    x{font-size:180%;color:#3af}
                    #tentang ul li span:hover{padding:0 0 0 20px}
                    #tentang ul li img{padding:0;border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;float:left;position:relative;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .8s ease-in-out}
                    #tentang ul li img:hover{-o-transform:scale(1) rotate(360deg);-moz-transform:scale(1) rotate(360deg);-webkit-transform:scale(1) rotate(360deg)}</style>
                    <div id='tentang'>
                    <ul>
                    <li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><img alt="Tentang Fandra Juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKzyde8o5p3QDy7_BCcL7_gpNOQTFRtq2Wm4Y_9mGQAyw8UpgjT2uyynBIXi71B8o0c2hY3ygU5Eym2JKeaWXqH1erRVlvq2BptW-R0Rq0mh-aZ1VOD06OWwqZdB_mky0zTQn5zT-y35On/s128/fandra-juani.jpg' width='32' height='32' title="About Me"/><span><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></span></a></li>

                    <li><a href='https://www.facebook.com/fandra.juani'title='My Facebook'><img alt="fandra juani"src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTmeE3fFNOQn15UNB48VjNHOWD46du7Xhz6WU8xHWCnETkdsqO9rrQ8y2YPsw1ge7fwbMH6dXImJUWCArWvVN1CSD42cJ5bsJmHBL6O-LkStNRB9YAqdRPMkDvnfle_GSHYpx7IDcPmFt/s128/Fb.jpg' width='32' height='32' title="Facebook Fandra Juani"/><span><t>F</t>a<h>c</h><g>e</g><j>b</j><m>o</m><r>o</r><h>k</h></span></a></li>

                    <li><a href='https://twitter.com/fandrajuani' title='My Twitter'><img alt="fandra juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN6PBkmhyZJX5Wyb5kWoLIhXfYuUNEwpy8HgbR-zEzh-eVwJq-iDytXvo5lvonfyGrKY6dhdBQNHsWwOGs9eHT8ag9ZKzCUAhS4kMFgtjdztz5Gca4lInaUpvlnZ1hz_gyyPg7qlhlVJoR/s128/Twitter.jpg' width='32' height='32' title="Twitter Fandra Juani"/><span><x>T</x><o>w</o><m>i</m>t<j>t</j><h>e</h><r>r</r></span></a></li>

                    <li><a href='https://plus.google.com/u/0/110277074823916598610/posts' title='My Google+'><img alt="fandra juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP6ET_r2F6vTNcv2BPGrqlzN3FkIT6w6BJdWZZERAopSZNX-juGyBUBipPuTvbwVAnVBrOtuU3Zk4IdIGK8cx6Ph0mqlHKOiCws1d22WXX1EeCWNfYEVe3HEWHl8zYyMjKzM8Ccogqh3o1/s32/G%252B.jpg' width='32' height='32' title="Google+ Fandra Juani"/><span><l>G</l><h>o</h><r>o</r><m>g</m><k>l</k><h>e</h> <g>+</g></span></a></li>
                    </ul>
                    </div>
                  3. Save Gadget, Selesai.
                  Keterangan Kode:  #tentang{background:transparent;height:150px}atur tinggi menu vertical sesuai dengan tinggi dari menu kalian.

                  Keterangan kode lainnya, bisa di pelajari pada daftar artikel dibawah ini.
                  1. Membuat menu vertical sederhana.
                  2. Tulisan dengan warna yang berbeda. 
                  3. Membuat icon sendiri untuk website. 
                  4. Cara upload dan ambil URL Gambar.
                  5. Membuat gambar bentuk bulat diblog.
                  6. Membuat gambar berputar diblog.
                  Silakan berkreasi, dan semoga bisa bermanfaat untuk anda.

                    Cara Membuat Search Kotak Penelusuran

                    7:12 AM 0
                    Cara membuat tombol search atau kotak penelusuran di blog. Kotak penelusuran, jika kita memasukan kata kunci didalam kotak penelusuran, maka akan muncul artikel-artikel dari dalam blog kita, yang sesuai dengan kata kunci yang kita masukan. Tidak hanya kata kunci yang mendekati judul dari artikel kita, tapi juga artikel dengan isi yang sesuai dari kata kunci yang dimasukan di kotak search.

                    membuat kotak penelusuran diblog

                    Untuk lebih jelasnya, silakan masukan kata kunci didalam kotak search dibawah ini. Maka akan terbuka halaman baru yang menampilkan artikel-artikel dari blog ini, yang berkaitan dengan kata kunci yang dimasukan.


                    Cara membuat kotak search atau kotak penelusuran di blog, Ikuti langkah-langkah dibawah ini.
                    1. Login ke blogger, pada halaman dasbor. Pilih pengaturan TATA LETAK.
                    2. Tambahkan Gadget, Dan pilih HTML/Javascript.
                    3. Selanjutnya, copi kode dibawah ini. Dan pastekan di gadget HTML/Javascript tadi
                      4. <form action="http://fandrajuani.blogspot.com/search" method="get">
                      <input class="textinput" name="q" size="48px" type="text"/>
                      <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
                    4. Save Gadget, lalu pindahkan ke tempat yang kalian inginkan. Selesai.
                    Keterangan Kode Langkah 3: http://fandrajuani.blogspot.com/ ganti dengan URL blog kalian, dan 48px lebar kotak search, semakin besar angkanya maka akan semakin lebar kotak search nya.
                    Sebenarnya widget search/kotak penelusuran, sudah disediakan oleh blogger. Tapi lebarnya kotak penelusuran otomatis, mengikuti lebar dari layout yang kita pasangi widget search/kotak penelusuran. Dengan memasang kotak search seperti diatas, kita dapat mengatur lebar kotak search sesuai dengan yang kita inginkan, kodenya juga sedikit, tidak membuat blog menjadi berat atau lama untuk dibuka.

                    Untuk membuat kotak penelusuran yang sedikit lebih sulit, yang ada tulisan googlenya, baca di google custom search di blog. Silakan baca juga artikel saya yang lainnya, seperti cara cara membuat tombol share di blog atau cara membuat artikel terkait di blog dan juga artikel saya yang lainnya.
                    Semoga bisa bermanfaat untuk anda.

                      Cara Membuat Menu Vertical Sederhana

                      2:32 PM 0
                      cara membuat menu verticalCara membuat menu vertical sederhana di blog. Berbeda dengan menu horizontal yang memanjang kesamping.

                      Menu vertical akan memanjang atau menurun kebawah. Biasanya menu vertical ditempatkan dibagian kanan atau kiri sidebar blog. Silakan lihat contoh gambar disamping, atau contoh menu dibawah ini.


                      Untuk lebih jelasnya tentang cara membuat menu vertical diblog. Ikuti langkah2 dibawah ini.
                      1. Login ke blogger, dan pilih pengaturan template.
                      2. Lalu klik tambahkan gadget, dan pilih HTML/Javascript.
                      3. Selanjutnya copy kode dibawah ini.
                        4. <style>

                        #vertical {
                          background: transparent;
                        }
                        #vertical ul {
                        }
                        #vertical ul li {
                          background: #aaaaaa;  list-style: none;border:1px solid #1780dd;
                        }
                        #vertical ul li span {
                          text-transform: uppercase;
                          font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
                          font-size: 12px;
                          color: #444444;
                        font-weight:bold;
                        padding:0px 0px 0px 10px;
                        }
                        </style>
                        <div id='vertical'>
                        <ul>
                           <li ><a href='http://fandrajuani.blogspot.com/'><span>Beranda</span></a></li>
                           <li><a href='#'><span>Facebook</span></a></li>
                           <li><a href='#'><span>Twitter</span></a></li>
                        </ul>
                        </div>
                      4. Dan Pastekan di gadget HTML/Javascript tadi.
                      5. Terakhir, save gadget. Dan pindahkan gadget ke tempat yang kalian inginkan. Selesai.
                      Keterangan kode langkah 3:
                      • <a href='http://fandrajuani.blogspot.com/'> dan <a href=''> Isi dengan URL yang kamu inginkan.
                      • Jumlah menu diatas ada 3. Untuk menambahkan jumlah menu?
                        Tambahkan kode <li><a href=''><span>Nama Menu kamu</span></a></li>
                        Dibawah kode <li><a href=''><span>Twitter</span></a></li>
                      • background: #aaaaaa; warna background
                      • border:1px solid #1780dd; warna garis biru yang memisahkan antar menu.
                      • text-transform: uppercase; kode ini membuat Menu menggunakan huruf besar semua.
                        Jika tidak ingin menggunakan huruf besar, hapus kodenya.
                      • padding:0px 0px 0px 10px; spasi tulisan menu sebelah kiri.

                      Silakan dibaca juga artikel tentang menu yang lainnya. Seperti membuat menu dengan gambar disampingnya, cara membuat menu dropdown di blog atau jika masih bingung dengan cara membuat menu di blog, silakan baca cara membuat dan mengisi menu blog. 

                      Itulah sedikit cara desain blog dan tips trik tentang cara membuat menu vertical sederhana di blog. Semoga Bermanfaat.

                        Cara Membuat Menu yang Menempel Di Dinding Blog

                        1:55 PM 0
                        Cara membuat menu yang menempel, mengambang, melayang diatas atau dibawah dinding blog. Ketika kursor naik atau turun, menu masih pada posisi yang sama. Silakan lihat contoh menu hijau dibagian bawah.
                        menu yang menempel di blog

                        Untuk lebih jelasnya tentang cara membuat menu menempel diatas atau dibawah dinding blog. Ikuti langkah2 dibawah ini.

                        1. Buatlah menu terlebih dahulu. Caranya: Ke Pengaturan Tata Letak, lalu tambahkan Gadget. Trus Pilih HTML/JAVASCRIPT.
                        2. Selanjutnya copy kode dibawah ini. Dan pastekan di gadget HTML/JAVASCRIPT tadi.
                          3. <style>

                          #cssmenu {
                            background: transparent;
                          }
                          #cssmenu ul {
                          float: left;
                          }
                          #cssmenu ul li {
                            float: left;  padding:10px;
                            background: transparent;  list-style: none;
                          }
                          #cssmenu ul li a {
                            float: left;
                            text-transform: uppercase;
                            font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
                            font-size: 12px;
                            color: #FFFFFF;
                          font-weight:bold;
                          }
                          </style>
                          <div id='cssmenu'>
                          <ul>
                             <li ><a href='http://fandrajuani.blogspot.com/'>Beranda</a></li>
                             <li><a href='https://www.facebook.com/fandra.juani'>Facebook</a></li>
                             <li><a href='https://twitter.com/fandrajuani'>Twitter</a></li>
                          </ul>
                          </div>
                        3. Beri judul HTML/JAVASCRIPT dengan nama Menu Tempel. Lalu Save
                        4. Setelah itu pengaturan template, klik edit HTML dan cari kode Menu Tempel, gunakan ctrl F untuk mempermudah pencarian. seperti dibawah ini.
                          5. menu menempel di dinding blog
                        5. Sekarang Copy id dari menu tempel yang bergaris bawah HTML2, seperti gambar diatas.
                        6. Lalu Pastekan di Notepad. Selanjutnya tambahkan kode css dibawah ini.
                          7. #HTML2 {
                            width: 100%;
                            min-width: 960px;
                            position: fixed;
                            top: 0px;
                            left: 0px;
                            right: 0px;
                            height: 30px;
                            font-size: 12px;
                          z-index: 99;
                            white-space: nowrap;
                          margin:0px 0px 0px 0px;
                          padding:0px 0px 0px 0px;
                            background-color: #336699;
                            background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
                            box-shadow: 0px 2px 0px rgb(14, 90, 140);
                            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                          }
                        7. Copy kode diatas, dan pastekan diatas ]]></b:skin> .
                        8. Dan Save Template.
                        9. Selanjutnya kembali ke tata letak, dan klik Gadget Menu Tempel Tadi,  lalu hapus judulnya, biarkan gadget tidak berjudul. 
                        10. Terakhir Save Gadget, Selesai.
                        Keterangan Kode Langkah 6:
                        • top:0px ini fungsinya menempatkan menu dibagian atas, untuk merubahnya kebagian bawah ganti menjadi bottom:0px;
                        • height: 30px; ini untuk mengatur tinggi menu, silakan diganti sesuai yang diinginkan.
                        • background-color: #336699; dan #336699 100%); untuk warna background
                        Keterangan Kode Langkah 2:
                        • http://fandrajuani.blogspot.com/ dan https://www.facebook.com/fandra.juani
                        • Dan juga https://twitter.com/fandrajuani adalah url yang jika diklik akan terbuka dari halaman url tersebut. silakan diganti dengan url yang kalian inginkan sendiri.
                        Itulah sedikit cara membuat menu yang menempel di dinding atas atau bawah blog yang bisa saya bagikan. Semoga Bermanfaat.

                        Cara Membuat Menu Blog Dengan Gambar

                        1:40 AM 0
                        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
                          4. Sebagai contoh, Copy semua kode dibawah ini. dan Pastekan di Gadget HTML/JavaScript Tadi.
                            5. <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/AVvXsEj3lQft71wXVGibH5NlBEqtXNXcmHJgWvcamhs2SLp-h6FFaBt3OKTtDwBsu2Nj2JfpeshCRvKO0p_z8sX3M-qp7BGX2UV1HGlXAWlv4AXIIQNkRgB8rBvRsYdFerPvy9Q3oZduYhSiFpy1/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/AVvXsEjELRxxBzGhU8efTvjWmWir3aItxjC8wvKqZ9AGp2ooFw3Q3nVsc6d5ErIoJ5PW3j7aEsKpxxDhKlpPfuj8wZJYWLYrz5bVMqaH9PvVTXfEXQjKFbfI-DvurjJZkzz306knlb7V7vr4cKiL/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/AVvXsEhrYql0qwKdhjkehMEQ3QB_qMxN-gAHR7JV4XN7fHBLBbfJwUKOgDG11GC9mmJnZrjploXCZZzhSn3OZ8c8qEcHdRvE3Jrzc84S7iCldIEavrg7wQ0pQ9zMJKlJ1VeCxo25HxY_D3ilYAEe/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/AVvXsEgTct5Nc6eIuhR-GfpJEKQHbaY99SI1lNH4ne6rGFBeCs-mNYkl3jzNy-NWCLhQ3ESrWkF7LI-IzVSqh_gXE8W1um1iCHzi6bRpQRAJ771ljtEVJPEKtphQAvOvP0g67BGxd2yf2d-Kqd-e/s128/HUBUNGI.jpg" title="Hubungi" width="50" height="50" /></a>
                            <figcaption>Hubungi</figcaption></li>

                            </ul>
                            </div>
                          5. 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.

                            Membuat Menu Dropdown di Blogspot

                            3:37 AM 0
                            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
                            4. Dan Atur Isi Menu dropdown dengan nama dan URL yang kamu inginkan.
                              5. membuat menu dropdown diblog
                            5. 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.
                            6. Setelah selesai mengisi menu. Selanjutnya copy semua kode HTML dan CSS di website tersebut, lalu pastekan di gadget HTML/Javascript di blogger. Contoh Pemasangan:
                              7. 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.
                            7. Jika menu dropdown nya tidak turun atau tidak terlihat???
                              9. 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.

                            9. 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

                              Tombol Sosial Share Widget Untuk Blogger

                              3:40 AM 0
                              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
                              8. Setelah selesai, klik Finish Get the Code dan Pilih Multi Post
                              9. Selanjutnya klik Go, maka akan terbuka halaman baru Import Elemen Laman.
                                10. cara membuat tombol share di blog
                              10. 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>
                              3. Semua kode masih tersembunyi, klik tanda >...< untuk membuka semua kode, sehingga tampilannya menjadi seperti ini.
                                4. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
                                <b:includable id='main'>...<b:includable>
                                </b:widget>
                              4. Klik lagi tanda >...< maka akan terbuka semua kode sharethis seperti dibawah ini.
                                5. <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>
                              5. Sekarang, tambahkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara kode lengkap sharethis diatas, contohnya:
                                6. <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>
                              6. 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.

                              Cara membuat facebook fans page di blog

                              1:38 AM 0
                              Cara membuat facebook fans page di blog. Untuk membuat kotak facebook fans page atau facebook like box. Kita perlu membuat halaman di facebook, agar bisa tersambung ke blog. Untuk lebih jelasnya, ikuti langkah2 dibawah ini.

                              Cara membuat halaman facebook

                                cara membuat halaman facebook


                              1. Kunjungi http://www.facebook.com/pages/create/
                                2. Dan buat halaman baru, pilih salah satu.
                                  cara membuat halaman facebook
                                3. Sebagai contoh pilih perjuangan atau komunitas. Lalu isi judul komunitas, dan klik mulai.
                                  cara membuat halaman facebook
                                4. Selanjutnya masukan alamat URL Blog dan deskripsi halaman kamu.
                                5. Terahir Lewati langkah-langkah selanjutnya. Dari sini pembuatan halaman facebook sudah selesai. Dan selanjutnya membuat kotak facebook fans page atau facebook like box untuk dimasukan ke blog.

                                    Cara Membuat facebook like box di blog

                                      Cara Membuat facebook like box di blog
                                    1. Kunjungi https://developers.facebook.com/docs/reference/plugins/like-box/
                                      2. Dan masukan alamat URL halaman dari facebook yang kamu buat tadi di kotak Facebook page URL.

                                        Cara Membuat facebook like box di blog
                                      3. Selanjutnya atur tampilan kotak facebook page sesuai dengan yang kalian inginkan.
                                        4. Lalu klik Get Code pada bagian bawah.
                                          Cara Membuat facebook like box di blog
                                        5. Maka akan terbuka halaman kode plugin like box. Pilih bagian IFRAME
                                          6. Copi kode script IFRAME, 
                                            Cara Membuat facebook like box di blog
                                          7. Dan pastekan di Gadget HTML blog. Caranya: Dari blogger pilih pengaturan tata letak dan klik tambahkan gadget, lalu pilih HTML/Javascript. Dan pastekan kode IFRAME didalamnya.
                                            Cara Membuat facebook like box di blog
                                          8. Beri judul lalu save template. Dan lihat tampilan blog.
                                          9. Selesai.
                                            Ulangi cara membuat facebook fans page jika kurang lebar atau kurang tinggi kotak page facebooknya. Jika ingin membuat tombol page like saja, kunjungi situs plugin facebook tadi, dan pilih like button, lalu  ikuti seperti cara membuat kotak facebook fans page.
                                            Berikutnya adalah menyembunyikan kotak facebook fans page dari halaman awal blog.
                                            1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
                                            2. Dan klik edit HTML dan cari kode NAMA JUDUL dari kotak facebook fans page kamu. Contohnya Belajar blog. kodenya seperti ini.
                                              3. <b:widget id='HTML1' locked='false' title='Belajar Blog' 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>
                                            3. Sekarang tempatkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara kode-kode diatas. Contohnya.
                                              4.   <b:widget id='HTML1' locked='false' title='Belajar Blog' 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:include name='quickedit'/>
                                                      </b:if>
                                              </b:includable>
                                                </b:widget>
                                            4. Save template selesai. 
                                            Setelah menambahkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> maka kotak facebook tidak akan muncul di halaman awal blog, tapi di halaman posting blog. Jika tidak ingin menyembunyikan kotak facebook fans page di awal blog, lewati saja cara ini.
                                            Sekarang coba baca juga cara  membuat komentar facebook di blog dibawah posting blog. Bersebelahan dengan kotak komentar blogger. Semoga Bermanfaat.

                                                Cara Membuat Komentar Facebook di Blog

                                                5:43 PM 0
                                                Cara membuat komentar facebook di blog. Kotak Komentar facebook bersebelahan dengan komentar blogger, dibawah posting blogspot. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

                                                cara membuat komentar facebook di blog


                                                Membuat aplikasi facebook untuk dihubungkan ke blog

                                                1. Pertama masuk ke facebook dan Kunjungi https://developers.facebook.com/apps
                                                2. Klik register now dan isi dengan nomor telepon kalian, ini diperlukan untuk menerima kode konfirmasi dari facebook untuk membuat aplikasi.
                                                  3. cara membuat kotak komentar facebook
                                                3. Selanjutnya masukan kode konfirmasi dari facebook di hanphone kamu. Ada 6 kode yang akan dikirm oleh facebook.
                                                  4. cara membuat komentar facebook di blog
                                                4. Setelah memasukan kode konfirmasi, maka akan ke terbuka Tell us About You, Langsung Klik lanjutkan saja. Langkah terakhir klik Done.
                                                  5. cara membuat facebook comment
                                                5. Setelah selesai melakukan registrasi. Dari halaman yang sama klik Buat Aplikasi.
                                                  6. cara membuat komentar facebook di blog
                                                6. Masukan nama blog kamu, dan lanjutkan pembuatan aplikasi.
                                                  7. cara membuat komentar facebook di blog
                                                7. Setelah selesai. Catat Aplikasi ID facebook kamu. Yang diberi tanda kotak itu Aplikasi ID facebook.
                                                  8. membuat kotak komentar facebook di blog
                                                8. Pada bagian Sanbox Mode, pilih Aktif.  Selesai.
                                                Aplikasi ID facebook diperlukan untuk menghubungkan facebook ke blogspot. Sekarang kita buat kotak komentar facebook dibawah posting blog. Ikuti langkah-langkah dibawah ini.

                                                 Membuat Kotak Komentar facebook di Blog

                                                1. Login ke blogger.com dan dari halaman dasboard pilij pengaturan template.
                                                2. Klik edit HTML dan cari kode ]]></b:skin> lalu letakan kode berikut diatas ]]></b:skin>
                                                  3. .comments-page { background-color: #ffffff;}
                                                  #blogger-comments-page { padding: 0px 5px; display: none;}
                                                  .comments-tab { float: left; padding: 5px; margin-right: 3px;
                                                  cursor: pointer; background-color: #f2f2f2;}
                                                  .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
                                                  .comments-tab:hover { background-color: #eeeeee;}
                                                  .inactive-select-tab { background-color: #d1d1d1;}
                                                3. Selanjutnya cari kode <head> dan letakan kode berikut dibawah <head>
                                                  4. <meta property="fb:admins" content="fandra.juani"/>
                                                  <meta property="fb:app_id" content="242989185843688"/>
                                                4. Ganti fandra.juani dengan Profil FB Kamu. Caranya buka fb kamu dan klik profil dan lihat bagian address URL ambil yang bagian nama saja.
                                                5. Ganti 242989185843688 dengan Aplikasi ID yang kamu buat tadi.
                                                6. Setelah itu cari kode </head> lalu letakkan kode berikut ini diatasnya.
                                                  7. <script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>
                                                  <script src='http://code.jquery.com/jquery-latest.js'/>
                                                  <script type='text/javascript'>
                                                  function commentToggle(selectTab) {
                                                  $(".comments-tab").addClass("inactive-select-tab");
                                                  $(selectTab).removeClass("inactive-select-tab");
                                                  $(".comments-page").hide();
                                                  $(selectTab + "-page").show();
                                                  }
                                                  </script>
                                                7. Berikutnya cari kode <div class='comments' id='comments'> dan pasang kode berikut ini dibawahnya. Ada 2 kode yang sama dengan <div class='comments' id='comments'> pasang kedua-duanya.
                                                  8. <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Komentar dari Facebook'>
                                                  <img class='comments-tab-icon' src='https://s-static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
                                                  <fb:comments-count expr:href='data:post.url'/> Facebook
                                                  </div>
                                                  <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Komentar dari Blogger'>
                                                  <img class='comments-tab-icon' src='https://lh5.googleusercontent.com/--vu5gE3yh1E/UA333Ytm5hI/AAAAAAAAAnM/nbi9p0of21o/h120/favicon.ico'/> <data:post.numComments/> Blogger
                                                  </div><div class='clear'/>
                                                  </div>
                                                  <div class='comments-page' id='fb-comments-page'>
                                                  <b:if cond='data:blog.pageType == &quot;item&quot;'>
                                                  <div id='fb-root'/>
                                                  <fb:comments expr:href='data:post.url' num_posts='10' width='auto' height='400'/>
                                                  </b:if>
                                                  </div>
                                                  <div class='comments comments-page' id='blogger-comments-page'>
                                                8. Keterangan: num_posts='10'jumlah komentar dan tinggi komentar height='400'/> ganti dengan yang kalian inginkan. Selesai.
                                                Sekarang kotak komentar sudah ada di blog kamu. Jika ada pesan warning http/alamat-blog-kamu.blogspot.com unreachable. Itu tandanya blog belum terhubung dengan facebook dengan baik. Cara menghilangkannya, Ikuti langkah dibawah ini.
                                                menghilangkan warning unreachable

                                                Menghilangkan Tulisan warning http/alamat-blog-kamu.blogspot unreachable.

                                                1. Edit HTML dan cari kode <html dan tambahkan kode ini disamping <html
                                                  2. xmlns:fb='http://ogp.me/ns/fb#'
                                                2. Contoh:
                                                  3. <html xmlns:fb='http://ogp.me/ns/fb#' expr:dir='data:blog…………..2005/gml/expr' >
                                                3. Save Template, Selesai.
                                                Tulisan warning unreachable tidak muncul lagi di kotak komentar facebook. Biasanya untuk entri baru yang dipublikasikan, tulisan tersebut akan kembali muncul, untuk menghilangkannya, klik tulisan warning unreachable itu dan masuk dengan akun facebook kamu, selanjutnya reload halaman artikel yang baru di publikasikan tadi. Maka tulisan warning unreachable akan hilang.

                                                Sekarang coba lihat di bagian laman blog kamu. Jika lambang blogger dan facebook tab terlihat juga di laman bawah header. untuk menghilangkannya.
                                                1. Tambahkan kode <b:if cond='data:blog.pageType == "item"'> di atas kode <div class='comments' id='comments'>
                                                2. Dan tambahkan kode </b:if> diatas <div class='comments-page' id='fb-comments-page'>
                                                3. Masing2 ada 2 kode yang sama, masukan kedua2nya.
                                                Satu kekurangan dari komentar facebook ini. Tidak adanya notification jika ada yang berkomentar. Maka untuk melihat komentar facebook yang masuk ke blog kita. Kita harus melihatnya secara manual, dengan cara membuka salah satu artikel dan mengklik pada bagian Moderat View, lalu klik pada pengaturan Moderate application comments, maka akan terbuka halaman baru dari facebook, dan akan terlihat pesan2 yang masuk ke blog kita.
                                                cara membuat komentar facebook diblog

                                                Selesai sudah cara membuat facebook di blog, yang letaknya bersebelahan dengan kotak komentar blog. Jika kamu melalukan cara diatas dengan teliti, Insyaallah bisa. Silahkan baca juga cara  membuat tombol share di blog yang terletak dibawah posting blog. dan juga cara membuat facebook box like di blog. Semoga Bermanfaat.

                                                Cara membuat artikel terkait dibawah postingan blog

                                                8:04 PM 0
                                                Cara membuat related post dengan gambar yang berada di bawah posting blog. Related post akan menampilkan gambar dan judul dari artikel lainnya dengan label yang sama atau berbeda disetiap posting yang sedang di buka. Untuk lebih jelasnya. Ikuti langkah-langkah dibawah ini.

                                                Cara membuat related post

                                                    cara membuat related post dengan gambar
                                                  1. Kunjungi www.linkwithin.com
                                                    2. Setelah itu isi dengan alamat email, URL blog, pilih platform blogger, dan jumlah artikel yang ditampilkan seperti gambar dibawah ini.
                                                      3. Klik get widget, maka akan terbuka halaman baru seperti gambar dibawah ini.

                                                          cara membuat artikel terkait dengan gambar
                                                        4. Klik Install widget maka akan terbuka Add page element, lalu klik Add Widget untuk menambahkannya ke blog.
                                                          5. Selanjutnya buka bagian tata letak dan tempatkan widget linkwithin di bagian bawah blog.
                                                            6. Terakhir save template. Dari sini related post sudah ada dibawah posting. Selesai.

                                                              Sekarang, cara menyembunyikan widget linkwithin dari halaman awal blog. widget linkwithin akan tampil dibawah setiap posting blog. Ikuti langkah-langkah dibawah ini.

                                                              Cara menyembunyikan widget linkwithin dari halaman awal blog

                                                                1. Login ke blog, dari halaman dasbor ke pengaturan template.
                                                                2. Klik edit HTML dan cari kode linkwithin(gunakan ctrl f untuk memudahkan pencarian. kode lengkapnya kira-kira seperti ini.
                                                                  3. <b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'><b:includable id='main'><data:content/></b:includable>
                                                                  </b:widget>
                                                                3. Setelah dapat kode diatas, tambahkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara kode-kode diatas. contoh:
                                                                  4. <b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'><b:includable id='main'><b:if cond='data:blog.pageType == "item"'><data:content/></b:if></b:includable>
                                                                  </b:widget>
                                                                4. Sekarang coba preview, jika sudah hilang dari halaman awal blog. Baru save Template. Selesai.
                                                                Berikutnya, Cara mengganti tulisan You May Also like these stories dan menghilangkan tulisan Linkwithin dibawah gambar widget.

                                                                cara membuat related post dengan thumbnail

                                                                Cara mengganti tulisan You May Also like these stories

                                                                1. Masuk ke bagian pengaturan template.
                                                                2. Klik edit HTML dan cari kode <head> dan masukan kode berikut dibawah <head>
                                                                  3. <script>linkwithin_text='Artikel Lainnya:'</script>
                                                                3. Tulisan Artikel lainnya bisa diganti dengan kata yang kamu inginkan.
                                                                4. Save template. Selesai.

                                                                Menghilangkan tulisan Linkwithin dibawah widget

                                                                1. Masuk ke bagian pengaturan template.
                                                                2. Klik edit HTML dan cari kode ]]></b:skin> dan masukan kode berikut diatas ]]></b:skin>
                                                                  3. #linkwithin_logolink_0 {display:none;}
                                                                3. Save template, selesai.
                                                                Jika dibawah posting blog kamu sudah banyak widget, seperti iklan, tombol share dan lainnya. Untuk menempatkan widget Linkwithin dibawah widget yang sudah ada,  tambahkan kode <div class="linkwithin_div"></div> dibawah kode widget yang kamu inginkan. Sebagai contoh:

                                                                Menempatkan Widget Linkwithin dibawah tombol share asli blogspot

                                                                      1. Masuk ke bagian pengaturan template.
                                                                      2. Klik edit HTML dan cari kode <b:include data='post' name='shareButtons'/> dan masukan kode <div class="linkwithin_div"></div>  ini dibawahnya. contohnya:
                                                                        3. <b:include data='post' name='shareButtons'/>
                                                                        </b:if>
                                                                        </div> </div>

                                                                        <div class="linkwithin_div"></div>
                                                                         
                                                                      3. Save template, selesai. 
                                                                      Cukup sekian artikel pertama saya di Desain Blog Tutorial dan Tips Trik Blogspot, tentang cara membuat related post dengan gambar, silakan baca juga tentang cara cara membuat read more di blogspot atau baca selengkapnya untuk mempersingkat tampilan posting di halaman awal blog. Dan juga membuat komentar facebook di blog pada bagian bawah setelah artikel. Atau mengganti warna judul sidebar widget di blogger. Semoga Bermanfaat.
                                                                        Subscribe to: Posts (Atom)