Saturday, August 17, 2013

Widget Sosial Media "KEREN"

Oke kembali lagi di blog saya ini,untuk hari ini saya akan membahas tentang widget sosial media yang sekarang sudah setiap orang mempunyai nya mungkin lebih dari satu.widget ini membantu kita agar blog kita bisa terkoneksi antara blog  dan akun sosial media kita.seperti link feed kita,facebook twitter,google+ dan yang lainnya.tentu ini sangat menarik untuk kita gunakan di dalam blogger kita.jadi pengunjung akan lebih mengenal kita tidak hanya dari blog itu sendiri,tanpa panjang lebar mari kita pasang widget nya.kita cukup memberikan script untuh menambah widget ini langkahnya sebagai berikut:
  • masuk blogger--dashboard--langsung menuju layout
  • kemudian klik addgadget terserah dimana akan di letakan muncul halaman "add gadget" pilih Html/JavaScript.
  • maka akan terbuka halaman configure HTML/Java Script seperti gambar di bawah:
  • kemudia copy script di bawah dan paste di dalam di kotak script,pada gambar atas saya buat block merah
<style>
.icons a {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 10px;
    vertical-align: middle;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
}
.icons a.twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCELnVhl7Siyag6SYyXNG_1Y8hM-6PNhGuA_TXzrCmC585wwBGWE0dW-MYEWE-QhbxLAbPLKjGN25XvemtSvzOZRpkb6SgoaChcKoPIV2JHt_qLFWSqitUHSXlPK8TdwCRp2fKbBh4jQ4/s1600/twitter.png") left top no-repeat; }
.icons a.rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLyMj8Oq7HbqQJJ2zeufWG-oumUpmYt_7vIM5_b954ptt4mGa1TddR5JhSUngTckPoxCHT0u37d0mX0Ukgk19VfLQb4Ze_a7zKXZLa8VMzatxBOXBLggLHNZx135xAiSN4A-Sou_ojNQ/s1600/rss.png") left top no-repeat; }
.icons a.pinterest { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLJcucmKGHPTf5iAKrQWb5ln97jXlR9mADYTx-NrNJhdtx_rq9yINMXv5N44XZwPHK233EEPrzQ_3aZKyHdOinEvDG8VQCCjUsdqk_bLXqScuOlh3fFRF4wPZvccdHT8SWHXxplgMyxJk/s1600/pinterest.png") left top no-repeat; }
.icons a.facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04IsNAL6h0jd1yuVY22DyhWB_Ede1jkXAyRCwgXfMXHb17jXG2zx80FjBQ0QaRKPtaXp8ny6_IOIdcXo4GtOTxlK_qOcyvPYhxfEsX4NdB4MF1aTLXl1gag6K9QL6fMuoBojdkJzkALE/s1600/facebook.png") left top no-repeat; }
.icons a.email { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFF-8PuwnH3pUYjb724INfwVgJLqlw6Z811vx5AC880koZcGF0to1CSaan73iA5ekjV65vSY9VrdA-IEizYoqp8HUkLH060fyHi0IMXXn84KQ4Vyyz_xPHFy6piAx05eFS5mWtqqkQeM/s1600/email.png") left top no-repeat; }
.icons a.googleplus { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ZvKxzlbW16px3oHj7_w-YF8WRSd8VeeRI4VVyYdMmlGZJBuaZoGaBzlFhlQjl_keRFUlyCm5674XumZJTAGJ_Yr0Jdz7MMR6_S-_2VmZGJDRnS0a8JRSN3clH8OLhPh5UARk-fZT65A/s1600/googleplus.png") left top no-repeat; }
.icons a:hover { background-position: left -34px; }
</style>
<div class="icons">
    <a class="twitter" href="http://twitter.com/twitter-kalian" target="_blank"></a>
    <a class="facebook" href="https://www.facebook.com/bleh.jatayu" target="_blank"></a>
    <a class="googleplus" href="https://plus.google.com/google-plus kalian" target="_blank"></a>
    <a class="pinterest" href="http://pinterest.com/pinterest-kalian" target="_blank"></a>
    <a class="rss" href="http://feeds.feedburner.com/ZonaPlusUnik" target="_blank"></a>
    <a class="email" href="http://feedburner.google.com/fb/a/mailverify?uri=http://feeds.feedburner.com/ZonaPlusUnik" target="_blank"></a>
</div>

ganti warna merah adalah alamat sosial media kalian.
  • klik SAVE
  • Semoga tutorial ini membantu untuk hasilnya ada di halaman Blog ini 

2 comments: