Muncul banyak pertanyaan dari teman saya mengenai Cara Membuat Widget Social Media Melayang di Blog. Awalnya saya tidak tahu sama sekali mengenai bahasa yang digunakan pada template blog. Berbagai sumber informasi saya kumpulkan dan saya rangkum. Membutuhkan waktu lama untuk memahami tutorial-tutorial tersebut. Karena saya belum memiliki basic programer web. Rasa penaasran yang tinggi membuat semangat tak pernah padam. Mungkin sudah ada 20 web yang saya pelajari namun tak ada satupun yang saya pahami. Ternyata setelah sekian lama, saya menemukan pokok dari tutorial ini. Minimal kita paham peletakan tempat pada script koding tersebut. Kepala saya seakan ingin meledak rasanya haha. Begitu banyak kode yang harus anda pahami. Jika Anda sudah memahami inti dari kasus koke tersebut, maka semua akan mudah diterapkan.
Berbicara soal media social, kita flashback dulu,pentingkah social media bagi blog? Menurut saya sih ada baik dan buruknya. Baiknya kita akan mudah dikenal orang lain tentang blog yang sudah kita buat. Buruknya akun media social kita akan menjadi incaran para syirik-ers dan Hacker black hat. Semua pilihan tergantung pada diri kita juga ya sob. Saya sarankan jangan buat akun sosmed dengan data privasi terlengkap anda. Cukup 25% saja yang akan anda muat. Ini bertujuan agar privasi anda aman dari bahaya hacker.
Namun jika suatu website atau blog tidak memiliki widget/halaman sosmed, sepertinya akan terlihat sedikit kuno yah,hehe. Berbagai website menggunakan halaman sosmed yang menarik. Nah, jika ada yang bingung mengenai Cara Membuat Widget Social Media Melayang di Blog simak baik-baik tutorial berikut:
- Pastinya Anda sudah login ke akun blogger yang digunakan. Pada dashboard blog Anda, pilih opsi Template.
- Setelah masuk pada halaman Template, akan terdapat form script HTML, CSS, dan JavaScript. Carilah kode ]]></b:skin> Agar mudah dalam pencarian Anda bisa menggunakan CTRL+F pada keyboard kemudian ketik ]]></b:skin>
- Lalu Copy-Paste kan kode CSS berikut tepat di atas Tag ]]></b:skin> tadi.
/* CSS Sosmed dhelright.com */
.social-buttons{position:fixed;top:150px;width:45px;z-index:9999}
.button-left{left:0}
.button-right{right:0}
.social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn .social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon{background-color:#33353B;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-IVPRfgiP87sQ_-CQL76QFrFyBfAD75hVEwqP3mv_jkkLyJaGceKbv9yZEBT_fiSZZFdQzZGmzvJSi1ilouaqoPtj_jn4szkUCHjRrCb9RG61lGUyFdSnUXfHEFYRj7ClxWCSlUDeXTk/s1600/mas-icons.png)}
.button-left #facebook-btn span{background-position:right 10px}
.button-left #twitter-btn span{background-position:right -35px}
.button-left #google-btn span{background-position:right -127px}
.button-right #facebook-btn span{background-position:12px 10px}
.social-buttons #twitter-btn:hover .social-icon{background-color:#45a2db}
.social-buttons #google-btn:hover .social-icon{background-color:#DB4A39}
.social-buttons #youtube-btn:hover .social-icon{background-color:#C4302B}
.social-buttons a:hover .social-text{display:block}
.button-left .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:left;height:43px;margin-bottom:2px;width:43px}
.button-left .social-text{display:none;float:right;font-size:1em;font-weight:700;white-space:nowrap;margin:11px 40px 11px 0}
.button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:right;height:43px;margin-bottom:2px;width:43px}
.button-right .social-text{display:none;float:left;font-size:80%;font-weight:700;white-space:nowrap;margin:11px 0 11px 40px}
.social-buttons .social-text{color:#FFF}
.button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px} - Langkah selanjutnya Anda harus menambah Kode Javascript agar nantinya widget anda akan terdapat efek bounce. Cari dan letakkan kode JavaScript berikut tepat diatas kode tag </body> kemudian klik simpan.
<!-- sosmed dhelright.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$('.social-buttons .social-icon').mouseenter(function(){
$(this).stop();
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
$('.social-buttons .social-icon').mouseleave(function(){
$(this).stop();
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
});
</script>Kurang lebih seperti itulah tutorial langkah demi langkah. Sekian tips dari Dhelright Jika masih ada kebingungan dan kurang paham, silahkan berkomentar atau bisa juga mengisi formulir kontak di bawah ini.
0 komentar:
Posting Komentar