Cara Membuat Tombol Social Media Berputar

Cara Membuat Tombol Social Media Berputar - Kali ini saya akan membuat tutorial Cara Membuat Tombol Social Media dengan Efek Berputar. Tombol Social Media ini menurut saya memang perlu dipasangkan karena untuk membuat tetap berhubungan dengan Blog atau website melalui Media Sosial. Oke sekarang langsung saja ke tutorialnya.


Cara Membuat Widget Tombol Social Media Berputar

1. Masuk ke Tata Letak Blog Sobat >> Tambah Gadget  >> HTML/Javascript
2. Copy kode Berikut ini dan pastekan di kolom HTML/Javascript
<style> 
#social a:hover { background-color: transparent;opacity:0.7; } 
#social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } 
#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } 
</style>
<center> 
<div id="social">
 <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6vnk_eIwdOohgPvM8SThJrHbDTKdukgSI5jSo_d9XrSUBvcEUxAxp8BQFHkY4V6_KKxV4m1qrBnqHZGjIrB4-L9-R-XeNbnctefq5d4DVMgxWyLyLF69Xf2vwECjfsrKFwM0fZw_o36bq/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
 <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJpTE-tsS-ZmEuC81LF-2ldRAxaIcE9LiPDQedkZq4cTKh-JXhhH39gbxqjK45bTDqQiWqhhFhkkc-7T6lIXbBDQDNPiMPn2Mjf7yP9HuLpXRNKJzibqpp_qhD9VxnKWbVSkiMfyPs87O/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
 <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQVI2nNNldr2_SVYKGBz83OK9pJhc24qw8Ts5gdg35s5fwx1YaMU2PGF5-WoW9vl3F_Pww3hQZwiAdal_i4bZMsX7bIqJgb33jyPpDUmbpiGaFOgMtXW4qG71FBMPspVhl30ccrrLST2yE/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
 <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2GFZJcQ_5oaxmqoyqWxblWCX8t9TwBxap80in053Y2mMytDfHpfZOALLU1HKLqLwSqOF-DHcqJJ_oBUw-4AIWNqLS049uiawJXCUwYYfTWP9DYj-G8SUK_hcBYjN-xNOwWm8gCB-yUbjN/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
 <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8Ti-yydz6Ej8WTrW-_NfVIkWtfc9nslWeV7vV6o_b-ylelvUUG0yh3MGEQXB_JppmWrUY9jr7Z6fcnn71M1b6DNWsyT5FI1eknZRR09S5_v-Ik4_xQbE_IopbONP5clGvNJlh1CaLRES/s1600/GOOGLE-PLUS-48x48.png"/></a>
 <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFOkykjdU-2WxgR-jegVkS5YRGOuhf1cGEv4VfmVfint_daGGGNrkQH0bPh1E20vBui7a6H48i_NzUb1ldadpABjWtbZ4MT82y2Zskvi3RAbsZrdsaFE5rrEsCq3a2swAD6IbHP7bwfAd2/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
</div>
</center>
Keterangan :
Ganti Tulisan YOUR-FEED-URL-HERE dengan URL Feedburner sobat
Ganti Tulisan YOUR-EMAIL-RSS-URL-HERE dengan URL Email RSS sobat
Ganti Tulisan YOUR-FACEBOOK-PAGE-URL-HERE dengan URL Fanpage sobat
Ganti Tulisan YOUR-TWITTER-URL-HERE dengan URL Twitter sobat
Ganti Tulisan YOUR-GOOGLE-PLUS-URL-HERE dengan URL Google Plus sobat
Ganti Tulisan YOUR-PINTEREST-URL-HERE dengan URL Pinterest sobat

3. Save atau simpan dan lihatlah hasilnya.

Sekian Tutorial dari Blog Pintasku tentang Cara Membuat Widget Tombol Social Media Berputar. Semoga Tutorial ini bisa bermanfaat untuk Semuanya Terimaksih

No comments:

Post a Comment