Saturday 25 June 2022
Pasang Iklan
Blogging Resources
About
TeknoHere.com TeknoHere.com
banner-header-1
  • Home
  • Internet & Web
  • Komputer
  • Gadget
  • SEO
  • Bisnis
  • Kontes
  • Selingan
  • Review
  • Berita
  1. Home
  2. Internet & Web
  3. Membuat Kotak Sharing Sosial Ala Mashable Di Blogspot
Internet & Web

Membuat Kotak Sharing Sosial Ala Mashable Di Blogspot

by admin 20 December 2011 74 5 Comments 7 min read

AA

 Membuat Kotak Sharing Sosial Ala Mashable Di Blogspot

Berhubung ada yang nanya bagaimana cara menambahkan kotak sharing sosial ala mashable di blogspot seperti pada postingan yang lalu cara menambahkan kotak sharing sosial bergaya mashable di WordPress. Jadi, saya coba buatkan caranya untuk di blogspot pada postingan kali ini. Sebelumnya, saya sudah aplikasikan di blogspot dan berjalan dengan baik.

Ok, mulai saja yah 😉

Ada 2 langkah di sini, pertama adalah menambahkan potongan kode HTML dan JavaScript untuk dimasukkan ke dalam gadget blogspot dan yang kedua adalah menambahkan kode CSS-nya.

Menambahkan Kode HTML dan JavaScript di Gadget Blogspot

1. Login ke dalam dashboard blogspot

2. Pilih menu Edit Layout > Add Gadget > HTML/JavaScript dan copy paste kodingan di bawah ini ke dalam gadget tadi

Recommend on Google
Follow @YOU

4. Lalu setting kode tadi dengan mengganti:

  • connections=”8″ dengan jumlah gambar profil orang yang like, misalnya kalau mau 5 saja, ganti dengan connections=”5″
  • YOUR-PAGE-ID dengan ID page facebook anda
  • http://YOUR-URL.com dengan URL profil Google+
  • Recommend on Google dengan kata-kata yang mau anda ganti
  • YOUR-TWITTER dengan username Twitter
  • Follow @YOU dengan kata-kata yang mau diganti dan @username_twitter
  • YOUR-ID-HERE dengan ID Feedburner blogspot
  • Subscribe dengan teks di tombol yang mau diganti, misalnya Langganan

5. Lalu save gadget-nya dan atur posisi tampilannya.

 

Menambahkan kode CSS

1. Login ke dalam dashboard blogspot

2. Pilih menu Design > Edit HTML > Ceklis Expand Widget Templates

3. Copy paste kodingan berikut ini dan taruh di antara <style> dan </style>

/*-----Facebook fanpage styling start-----*/
.fan_box a:hover{
  text-decoration: none;
}
.fan_box .full_widget{
  height: 200px;
  border: 0 !important;
  background: none !important;
  position: relative;
}/** Change height here **/
.fan_box .connect_top{
  background: none !important;
  padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
  display: none;
}
.fan_box .connect_action{
  padding: 0 !important;
}
.fan_box .connections{
  padding: 0 !important;
  border: 0 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #666;
}/** Change font-size here **/
span.total{
  color: #4a6cc1;
  font-weight: bold;
}/** Change color here **/
.fan_box .connections .connections_grid {
  padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
  padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
  font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
  font-weight: normal;
  color: #666 !important;
  padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0;
left: 0px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
/*-----Facebook fanpage styling end-----*/

#sidesocial{border: 1px solid #EBEBEB;}
.sideg{background-color: #EBF9E8;
font-size: .85em;color: black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sidetw {background-color: #EEF9FD;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sidefb {font-size: .85em;color: black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sideg span {margin-left: 2px;display: inline-block;vertical-align: text-top;color: #333}
.sidesub {padding: 9px 10px;line-height: 1px;background-color: #FFB86D;border-top: 1px solid white;}
.sidesub span {width: 115px;}

4. Klik Save lalu refresh blog di blogspot anda dan lihat hasilnya

 

Selamat mencoba dan good luck! 😉

Share This:

  • 0
    Facebook
  • 0
    Twitter
  • 0
    Linkedin
  • 0
    Pinterest
  • 0
    Skype
Previous post
Next post

admin

administrator

I'm an enthusiast in new technologies and improvement in the IT field especially web. In addition I'm a fan of football and SEO. I love good foods, doing sports, watching movies, listening musics, travelling, online business and surfing internet.

5 Comments

  • Petu Boy says:
    20 December 2011 at 22:22

    BroO saya masih bingung dengan lankah terakhir..!
    Template > Customize > Advanced > Add CSS.. gak blogger..! itu WordPress kalau blogger Add CSS dia di editHTML dan juga letak posisinya dimana nih.?? body/head atau dimananya..??
    mohon penjelasan terimaksih.!

  • admin says:
    21 December 2011 at 05:52

    maaf mas bro, salah ketik 😀 udah diupdet

  • Aku Gak Punya Pulsa says:
    29 January 2012 at 05:16

    Gak bisa mas… ga bisa gantung kayak gitu… malah nempel di sidebar.. salah di apa ya?

  • admin says:
    1 February 2012 at 14:43

    memang ini yg nempel di sidebar mas

  • hilman says:
    17 February 2012 at 09:15

    misi mas 🙂
    itu kan tombol follow ama like , kalau tombol share to faccebook ada kaga ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow us
  • 0
    Fans
    0
    Fans
  • 1.7K
    Subscribers
    1.7K
    Subscribers
  • 1.2K
    Count
    1.2K
    Count
  • 0.7K
    Count
    0.7K
    Count
Artikel Terbaru
Komputer

Cara Menghapus Baris Duplikat Di Sublime

26 July 2015
Internet & Web

Cara Menonaktifkan Fitur Download File Yang

21 July 2015
Gadget

Cara Menghapus Backup iCloud Yang Lama

17 July 2015
Gadget

Bagaimana Membatalkan Langganan Apple Music?

3 July 2015
Related Stories for you
kgen
Internet & Web

5 Add-ons Firefox Fantastis Bagi Blogger

by admin 6 February 2013 75 7 min read

Anda punya banyak blog? Mungkin Anda seorang blogger yang tertarik pada banyak hal sehingga membuat banyak blog seperti blog gadget,

blog wordpress com sudah terhapus
Internet & Web

Cara Hapus Blog WordPress.com Atau Membuatnya Private

by admin 19 January 2013 129 5 min read

Ada beberapa alasan Anda mungkin ingin menghapus blog WordPress.com Anda atau ingin membuatnya menjadi private. Mungkin Anda sudah menggunakan layanan

memilih wordpress theme
Internet & Web

Cara Memilih WordPress Theme

by admin 18 November 2012 71 1 min read

Anda mungkin ingin punya tampilan web yang bagus dan profesional untuk menumbuhkan kepercayaan pengunjung. Apalagi jika Anda akan membuat sebuah

TeknoHere.com TeknoHere.com
app_store
google_play
About Us
Work With Us
Blogging Resources
Contact
Disclaimer
Privacy Policy
Terms of Use
Copyright 2022. All Right Reserved
Posting....