Like Box FB VS Follow Box Twitter

Like Box FB VS Follow Box Twitter - Like Box Facebook dan Twitter adalah salah satu trik untuk menjadikan blog menjadi ramai di kunjungi oleh pembacanya, itu adalah hal yang diinginkan semua Blogger yang mempunyai sebuah halaman fanspage facebook serta Twitter dengan memiliki pengemar halaman facebook serta Follower Twitter yang banyak sudah pasti dapat bermanfaat meningkatkan pengungjung di blog yang bersangkutan.

Begitupula dengan situs jejaring sosial Twitter  yang bisa ditautkan dengan sebuah blog sama halnya seperti Facebook. pada kesempatan ini Kolom Tutorial™ akan sedikit berbagi kepada sobat blogger tentang Cara Pembuatan Like Box Facebook Dan Follow Box Twitter Dengan sedikit modifikasi CSS

like box facebook, follow box twitter, follower twitter



Penerapan Facebook Like Box:-

  • Login ke akun Blogger sobat 
  • Klik Tataletak >>> Add Widget lalu kopas kode dibawah ini

FACEBOOK
 <style type='text/css'>
.joens-boga-blog {padding:3px;
  margin: 50px auto;
  width: 260px;
  height: 355px;
  border-radius: 0px;
  position: relative;
  z-index: 90;
background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1px
solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:5px;
}
.joens-jarang-ngeblog  {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}
 
.joens-lumayan-ganteng {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}
 
.alexjoen-ribon {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #306EFF;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#306EFF), to(#3BB9FF));
  background-image: -webkit-linear-gradient(top, #306EFF, #3BB9FF);
  background-image:    -moz-linear-gradient(top, #306EFF, #3BB9FF);
  background-image:     -ms-linear-gradient(top, #306EFF, #3BB9FF);
  background-image:      -o-linear-gradient(top, #306EFF, #3BB9FF);
 
  color: #fff;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}
 
.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}
</style>

<div class="joens-boga-blog">
<div class="joens-jarang-ngeblog">
<div class="joens-lumayan-ganteng">
<div class="alexjoen-ribon">
Facebook</div>
</div>
<center><iframe allowtransparency="false" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/joens.tutorial&amp;width=240&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23eeeeee&amp;stream=false&amp;header=false&amp;height=335" style="background: trasparent; border: 0px solid #222; height: 330px; overflow: hidden; width: 240px;"></iframe></center>
  </div>
</div> 

Penerapan Twitter Follow Box:-

  • Login ke akun Blogger sobat 
  • Klik Tataletak >>> Add Widget lalu kopas kode dibawah ini

TWITTER
<style type='text/css'>
.joens-ganteng {padding:2px;
	margin: 50px auto;
  width: 260px;
  height: 350px;
  border-radius: 0px;
  position: relative;
  z-index: 90;
background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1px
solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:5px;
}
.joens-keren  {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}
 
.sakahayang {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}
 
.ribbon-sakahayang {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #306EFF;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#306EFF), to(#3BB9FF));
  background-image: -webkit-linear-gradient(top, #306EFF, #3BB9FF);
  background-image:    -moz-linear-gradient(top, #306EFF, #3BB9FF);
  background-image:     -ms-linear-gradient(top, #306EFF, #3BB9FF);
  background-image:      -o-linear-gradient(top, #306EFF, #3BB9FF);
 
  color: #fff;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}
 
.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
 
.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}
</style>

<div class="joens-ganteng">
<div class="joens-keren">
<div class="sakahayang">
<div class="ribbon-sakahayang">
Twitter</div>
	</div>
	<center><br/><iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://moopz.com/connect.php?user=alexjoen" class="FB_SERVER_IFRAME" scrolling="no" style="width: 240px; height: 310px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial;"></iframe></center>
  </div>
</div> 

Note :
Ganti Tulisan  joens.tutorial dan alexjoen Sesuai denganakun terkait sobat.

Berlangganan update artikel terbaru via email:

42 Responses to "Like Box FB VS Follow Box Twitter"

  1. Sama-sama keren, dan juga di butuhkan oleh seorang Blogger. Tapi valid html5 enggk bang.?
    salam kenal dari saya

    ReplyDelete
    Replies
    1. di cek aja mas valid apa engga nya, thank dah berkunjung

      Delete
    2. kalo udah di cek ntar kasih tau saya ya mas :) hehehe
      terimakasih udah share mas

      Delete
    3. lumayan valid mas silakan dicek lagi hehheheh

      Delete
    4. Setelah saya coba du Blog dummy ternyata ada code yg belum valid nih.

      Delete
  2. Kalau widget ini di pasang pasti Blog saya tambah lemot....hadeh. tq sudah berbagi gan. salam hangat....

    ReplyDelete
  3. wah mantep nih kang tutornya

    ReplyDelete
    Replies
    1. terimaksih mas atas support serta kunjungannya

      Delete
  4. Wuiiihhhhhh..yang ini mantef banget bang alex izin aku simpan dulu bang..ahahhayyyyyy

    ReplyDelete
    Replies
    1. Silakan mas, terimakasih banyak atas kunjungannya.

      Delete
  5. Tutorialnya sangat mantap dan berguna sekali kawan, sangat perlu untuk dicoba nih sob.
    terima kasih banyak sudah berbagi

    ReplyDelete
    Replies
    1. terimakasih banyak mas support serta kunjungannya.

      Delete
  6. pa kabar mas Alex,,,dua hari sudah ane disibukan oleh DUTA hehe,BTW nice post mas Alek,nanti akan saya coba tutor yang satu ini,,,terimakasih

    ReplyDelete
    Replies
    1. Alhamdulillah kang aya hibar pangdu'a ti kang dede,
      wah keren atuh mas, hehheh hatur thank you kunjungannya mas

      Delete
  7. Terima kasih Mas Alex tutornya. keren ...and salam.

    ReplyDelete
    Replies
    1. sama2 mas, terimakasih kembali atas kunjungannya

      Delete
  8. wah keren mas ..
    ibarat kata neh ya kayak kangkung sama kelapa jadi weh urab hehe

    ReplyDelete
    Replies
    1. kalau gitu tinggal nyantap dong mas hehhehheh

      Delete
  9. keduanya emang lumayan penting buat di terapin di blog kita ya mas..
    sipp mas...trima kasih ya sdh berbagi :)

    ReplyDelete
    Replies
    1. bener mas, ini bisa jadi salah satu media untuk memperkenalkan artikel kita, terimakasoh banyak mas kunjungannya.

      Delete
  10. wow.. dulu pernah make tapi skrg udah enggak.. ini yg baru ya..


    ehh homenya rame bener.. bisa bantu edit slidenya gak nih :) .kemren udah dikirimya lewat imel .

    ReplyDelete
    Replies
    1. iya mis, rame gimana maksudnya,

      yang sabar ya ane coba tapi gak janji cepet2 ok miss, thank kunjungannya.

      Delete
  11. Wah boleh juga nih dicoba... seneng bisa dapet sesuatu yang baru disini... makasih sob :)

    ReplyDelete
    Replies
    1. silakan mas, terimakasih banyak kunjungannya.

      Delete
  12. wah mantepp bener mas like boxnya jadi makin dinamis euyy :) hehehe

    ReplyDelete
    Replies
    1. kurang lebih begitu hehheh, thank mas kunjungannya.

      Delete
  13. Wah, ternyata ada juga widget Twitter Follower ya? saya jarang melihat di blog-blog yang saya kunjungi.

    ReplyDelete
  14. Sukses selalu mas M. Alex Joenaedi \o/

    ReplyDelete
  15. mantap gan tutorialnya selalu bermanfaat... terima kasih gan... :)

    ReplyDelete
  16. ehemmmm mantap mas infonya.
    mksih udah share :D

    ReplyDelete
  17. Keren Mas Alex Tutor yang ini,mantappp

    ReplyDelete
  18. super keren kang alex sangat bermutu nih hehehe,,,,makasih sudah berbagi tutor
    jangan lupa dikopian kang :D

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel