• Breaking News


    Senin, 31 Oktober 2016

    Cara Membuat Widget Subscribe Box Flat UI Di Sidebar Blogger


    Cara Membuat Widget Subscribe Box Flat UI Di Sidebar – Selamat Pagi Sobat bagaimana liburan kemarinnya ? menyenangkan bukan ? Okeh, Kali ini saya akan membagikan widget subscribe box. kita harus mengetahui elemen yang ingin digunakan agar sebuah widget tersebut menjadi indah dan menarik. Pada kesempatan kali ini, saya akan mengulas secara jauh widget subscribe yang dimodifikasi menjadi Flat UI. Kesulitan disini yaitu menentukan warna Flat UI yang cocok agar box subcribe menjadi padu antara satu dengan yang lainnya. Oke sobat enggak usah lama-lama deh ya langsung aja ke langkah-langkah membuatnya.

    Berikut Langkah-Langkahnya :

    1. Login ke akun blogger sobat.
    2. Pada menu Dasboard, kemudian sobat pilih Tab Template lalu Pilih Edit HTML.
    3. Kemudian cari kode ]]></b:skin>, agar lebih cepat silahkan tekan CTRL + F.
    4. Kemudian copy semua script CSS dibawah ini dan letakkan tepat diatas kode
    ]]></b:skin> (Silahkan Atur Kode CSS berikut sesuai kebutuhan).
    #subscribe-box .title {padding: 10px 25px;font: 26px Oswald;color: #FFF;text-align: center;background: none repeat scroll 0% 0% #293D4F;
    text-transform: uppercase;border-radius: 2px 2px 0px 0px;border-bottom: 1px solid #EEE;}
    #subscribe-box {width: 300px;height: auto;background-color: #293D4F;padding-bottom:10px;margin:0 auto}
    #subscribe-box p {font-size: 14px;color:#fff;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
    #subscribe-box .emailfield {padding: 0px 20px 10px;}
    #subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 14px;width: 92%;border:0;border-radius: 2px;}
    #subscribe-box .emailfield input:focus {outline: none;}
    #subscribe-box .emailfield .submitbutton {background: #E06949;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;border-radius: 2px;}
    #subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;}
    #subscribe-box .emailfield .submitbutton:hover{background: rgba(225, 60, 15, 1);}
    

    5. Kemudian simpan Template.
    6. Pada menu Dasboard, Pilih Tab Layout (Tata Letak) dan Pilih Add Widget.
    7. Kemudian pilih Widget HTML/Javascript.
    8. Letakkan Script HTML dibawah ini pada Widget Tersebut.   

    <div id='subscribe-box'>
    <div class='title'>Subscribe Here</div>
    <p>Sign up here with your email address to receive updates from this blog in your inbox.</p>
    <div class='emailfield'>
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bacalagicom&apos;,&apos;popupwindow&apos;,&apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='Your Name'/>
    <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
    <input name='uri' type='hidden' value='bacalagicom'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input class='submitbutton' type='submit' value='Subscribe Now!'/>
    </form>
    </div>
    </div>
    

    Ganti ID Feedburner bacalagicom dengan ID Feedburner sobat.

    9. Simpan Widget.
    10. Selesai.

    Silahkan Liat hasilnya di blog sobat, jika ada kesalahan atau widget nya tidak muncul maka silahkan komentar dan maaf belum bisa membuat Live Demo nya dikarenakan belum admin belum sempat mencari lokasi server Live Demo yang terbaik. Terima kasih untuk kunjungannya dan jangan pernah bosan untuk berkunjung kesini karena admin akan melaksanakan update artikel-artikel lainnya yang enggak kalah menariknya untuk dibaca dan dikembangkan oleh kamu. Selanjutnya admin akan membuat posting mengenai Widget Subscribe Box lainnya, jadi ikutin terus ya dan jangan lupa like fanspage BacaLagi dan Subscribe agar admin menjadi lebih semangat untuk terus update artikel-artikel lainnya. Terima Kasih..

    Tidak ada komentar:

    Posting Komentar

    Seorang Pengunjung Atau Blogger Indonesia Yang Baik Adalah Yang Meninggalkan Jejak Berbentuk Komentar Yang Membangun, Memotivasi, Dan Menambahkan Jika Ada Terdapat Kesalahan Didalam Artikel. Terima Kasih!

    Penulisan markup di komentar

    Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
    Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
    Untuk menulis huruf underline gunakan <u></u>.
    Untuk menulis huruf strikethrought gunakan <strike></strike>.
    Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau
    <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

    TEKNOLOGI

    FAMILY

    Komunitas Blogger Jakarta

    REVIEW