CARA MUDAH MEMBUAT WIDGET FLOATING SHARE MEDIA SOSIAL

Cara Praktis Membuat Widget Floating Share Media sosial - Hari ini aku akan share tutorial mengenai cara menambahkan share bar media sosial floating di blogger. Dalam widget ini telah memasukkan Facebook like, tombol share, Google Plus, Tweet, linkedin dan StumbleUpon, tombol pada bar pada masing-masing media umum dilengkapi menggunakan counter atau penghitung. Saya nir menggunakan script dan widget ini bekerja murni dalam CSS serta HTML dan sepenuhnya kompatibel dengan semua browser internet.
Baca jua artikel terkait lainnnya:
- Membuat Widget FB Like
- Membuat floating FB Like
- Membuat Floating Langganan Email RSS
Anda dapat melihat widget media sosial statis di sebelah kiri posting blog aku . Saya telah memastikan buat menjaga proses instalasi semudah mungkin. Kami membuatnya sangat mudah untuk diinstal dalam blogger bahkan wordpress, sehingga Anda nir perlu mengedit kode html blogger Anda. Hanya copy dan pastekan ke pada HTML / Javascript pada kotak gadget.

Cara menciptakan share media umum widget di blogger

• Login ke akun dashboard blogger Anda.
• Klik Layout.
• Klik Tambahkan sebuah Gadget, pilih HTML / Javascript.
• Salin kode pada bawah ini dan pastekan pada pada kotak konten.

Cara menciptakan share media umum widget di blogger WordPress

• Log in ke Dashboard> Appearance> Widgets> Widgets Tersedia.
• Tarik widget Text ke sidebar.
• Paste dalam kode.
• Simpan.

 
    #floating_bar
    background-color:#fff;
    position:fixed;
    padding:0 0 3px 0;
    bottom: 30%;
    margin-left:-60px;
    float:left;
    border: 1px dotted #f7f7f7;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    z-index:10;
   
    #floating_bar
    clear:both;
   
   

   

   

   

   

    Tweet

   

   

   

Get Widget

Catatan: Ganti nama yang saya tandai dengan rona hitam tebal (sharetipsdancara) menggunakan nama pengguna twitter Anda.
Untuk menyelaraskan widget lebih ke kiri atau kanan lalu edit nilai ini. Margin-left: -60px;
5. Simpan gadget
6 Tarik gadget dan reposisi pada bawah Blog Posts gadget. (Lihat Screenshot bawah untuk menerima widget seperti yg ada di blog ini)

7. Klik tombol Save
Jika tombol share facebook nir bekerja tambahkan kode Javascript ini sebelum tag body>

    

div>
       js var, Fjs = d.getelementsByTagName (s) [0];
       if (d.getelementById (id)) return;
       js = d.createElement (s); js.id = id;
       js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
       fjs.parentNode.insertBefore (js, Fjs);
     (dokumen, 'skrip', 'facebook-jssdk')); script>

Kustomisasi
Vertical Alignment:
Pada bagian css mengubah nilai 30% buat yg lain yang adalah kebutuhan blog Anda misalnya.
bottom: 25%; atau bottom: 30%; atau bottom: 35%;
Untuk memperbaiki jarak bahkan ketika ventilasi diubah ukurannya, memilih nilai pada px (pixel) bukan%.
Penyelarasan Horizontal
Untuk menyelaraskan widget lebih ke kiri atau kanan lalu edit nilai ini. margin-left: -60px; Nilai negatif mendorong tombol pada sebelah kiri kolom blog utama, nilai positif mendorong ke kanan.
Silahkan apabila memiliki saran kritik atau kesulitan pada memasang widget ini silahkan berkomentar pada kotak form komentar yg telah disediakan. Dengan bahagia hati saya akan menjawab serta membantu pertanyaan anda. Semoga artikel diatas berguna da bermanfaat, terima kasih.

CARA MUDAH MEMBUAT WIDGET FACEBOOK FAN LIKE DI BLOG

Cara Praktis Membuat Widget Facebook Fan Like di Blog - Setelah sebelumnya aku share tentang cara membuat widget floating like Facebook dengan efek jquery dan cara membuat floating langgan email yang keren, kali ini aku akan share tentang cara menciptakan widget Facebook fans Like di blog. Fungsi widget ini merupakan buat menyediakan tombol like facebook yang secara otomatis terhubung dengan laman facebook. Nah hal ini sangat berguna buat mendatangkan visitor baru menurut pengguna facebook. Caranya relatif gampang yang anda perlukan hanya mempunyai laman pengguna facebook buat menciptakan widget ini mampu tampil pada blog anda. Berikut cara menciptakan widget Facebook Fan Like pada blog.

Cara Praktis Membuat Widget Facebook Fan Like
1. Masuk Halaman Facebook Developer
2. Dapatkan halaman id URL Facebook Anda menggunakan Mengunjungi Facebook fan laman seperti gambar dibawah ini:

3. Paste fan halaman url Anda pada Facebook Halaman kotak url misalnya layar di bawah ini.

Pengaturan Facebook Like Box
4. Set parameter lain seperti lebar, tinggi serta stream. Preview pada sebelah kanan akan memperbarui sendiri sesudah Anda memasukkan perubahan.
5. Klik tombol Get Code apabila selseai dilakukan. Anda akan diberi 2 kode, berjudul iframe dan XFBML. Anda hanya perlu kode iframe misalnya gambar dibawah.

6. Copy kode
7. Di Blogger Dashborad, klik Layout serta klik masukkan Gadget. Pilih HTML / Javascript gadget serta paste kode dalam isi kotak. Simpan lihat blog Anda.
Jika anda mengalami kesulitan atau menemui masalah dalam mebuat widget ini silahkan berkomenar di kotak komentar yang telah disediakan, menggunakan bahagia hati aku akan membantu anda. Semoga berguna serta terima kasih.

CARA MUDAH MEMBUAT FLOATING BERLANGGANAN EMAIL RSS FEEDBURNER

Cara Praktis Membuat Floating Berlangganan Email RSS Feedburner - Rss feed adalah fitur berdasarkan blogger buat memudahkan para pembaca serta pengunjung blog buat menerima update fakta sebuah blog melalui email. Nah cara ini diyakini para pakar SEO berguna buat mempertahankan pengunjung blog buat selalu mengikuti update gosip yg kita publikasikan sebagai akibatnya para pengunjung juga blog setia mengikuti perkembangan blog.
Banyak cara yang bisa dilakukan buat membuat hal ini tetapi tampilannya kurang menarik apalagi fitur widget bawaan orisinil menurut blogger. Nah yg akan kita bahas kali ini merupakan widget pop up yaitu widget layanan langganan email yg melayang di blog dilengkapi dengan tombol close buat mempermudah menutup widget bagi pengunjung blog yang tidak menginginkan berlangganan email.
Semua orang tahu pentingnya RSS feed ini. Jadi lebih baik buat menaruh pembaca pilihan untuk berlangganan feed blog Anda melalui email. Dalam widget ini pengunjung bisa berlangganan update harian blog anda via RSS FEED. Berikut merupakan cara menciptakan widget pop up berlangganan email.
Cara menginstal widget langganan rss feddburner
Sebelum Anda mengedit setiap template lebih baik buat memBackup nya terlebih dahulu, cara bijak buat mencegah kemungkinan yang nir diinginkan. Dan bila langkah anda sahih maka tampilannya akan seperti dibawah ini:

1 Masuk akun Dashboard Blogger >> Template >> Edit HTML
2 Cari kode head> pada template Anda berikutnya buat mempermudah pencarian ketik Ctrl + F.
3 Paste kode berikut sebelum / di atas kode head> yg saya sebutkan diatas

.ready(function() if (document.cookie.indexOf('visited=true') == -1)
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = "visited=true;expires=" + expires.toutCString();
$.colorbox(width:"395px", height:"435px", inline:true, href:"#email-popup");
);

4. Langkah selanjutnya Cari kode  ]]> b:skin> kemudian tempatkan kode dibawah ini tepat sebelum atau pada atas kode yg saya sebutkan

    #subscriptionwrap
        width: 600px;
        background: #e9e9e9;
        padding: 15px;
        margin: 14px;
        border: 1px solid #ddd;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
        -moz-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
        box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
   

    .subscriptionbox h4
        font-size: 30px;
       
        font-variant: small-caps;
        margin: 0 auto;
        text-align: center;
        line-height: 30px;
        color: #333;
        font-weight: 600;
        text-shadow: 1px 1px 5px #333;
        text-decoration: none !Important;
   

    .subscriptionbox p
       
        font-style: italic;
        font-size: 26px;
        text-align: center;
        margin: 0px;
        line-height: 30px;
        margin-top: 25px;
        border-bottom: 1px solid #333;
        color: #454545;
        padding-bottom: 20px;
   

    .emailbutton1
        background: #f7f8f9;
        background: -webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
        background: -moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
        background: -o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
        background: -ms-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
        background: linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
        filter: progid:DXImageTransform.microsoft.gradient( startColorstr="#f7f8f9",endColorstr="#e9e9e9",GradientType=0 );
        border: 1px solid #ddd;
        -webkit-border-top-right-radius: 4px;
        -moz-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -moz-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px;
        -webkit-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
        -moz-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
        box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
        color: #888 !Important;
        text-shadow: 0 1px 0 #fff;
        line-height: 1.5;
        top: 0px;
        margin: 10px 0 0 -15px;
        cursor: pointer;
        padding: 18px 15px 15px 15px !Important;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none !Important;
   

    .emailbutton1:hover
        background: #f1f1f1;
        background: -webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
        background: -moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
        background: -o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
        background: -ms-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
        background: linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
        filter: progid:DXImageTransform.microsoft.gradient( startColorstr="#f1f1f1",endColorstr="#e0e0e0",GradientType=0 );
        text-decoration: none !Important;
   

    .emailinput1
           width: 490px !Important;

        height: 37px;    padding-right: 30px !Important;
        float: left;
        margin: 10px 0 0 0px;
        padding: 8px 40px 8px 10px;
        border: 1px solid #d2d2d2;
        background: #fff;
       
        font-style: italic;
        font-size: 16px;
        color: #949494;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        text-decoration: none!Important;
   

5. Simpan template Anda dan Anda terselesaikan tinggal dua langkah terakhir! Kunjungi blog Anda buat mengecek widget tersebut bekerja sempurna? Jika semuanya bekerja dengan baik maka Ikuti langkah terakhir pada bawah ini.
6. Sekarang cari kode ini dia body>
7. Paste kode berikut sebelum tag body>.

    

Ready To Be Make Elegant Blog

Subscribe to Tips & Cara to enjoy Tips Information

8. Sekarang Anda perlu menciptakan perubahan-perubahan pada kode html.
Mengedit teks yg aku kasih rona merah untuk edit permukaan kotak input.
Sekarang ganti sharetipsdancara menggunakan link Email RSS Feedburner Anda. Anda mampu mendapatkannya dengan mengunjungi akun feedburner Anda lalu arahkan ke Publikasikan dan kemudian ke Email Berlangganan.
Ganti sharetipsdancara dengan judul feed Anda. Ini timbul pada akhir link feed Anda. Dalam hal ini akun aku merupakan
9. Simpan template Anda.