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.
                      Subscribe to: Posts (Atom)