Blog မွာ 3D social Icons နဲ႔အတူ spin Effect ဘယ္လုိထည့္မလဲ

 

ပထမဆုံး ကုိယ့္ရဲ႕ Blog Sign In လုပ္ျပီး 

Blogger Dashboard====>Layout====>Add A Gadget====>HTML Javascript ကုိသြားပါ ျပီးရင္ ေအာက္မွာေပးထားတဲ့ code ေတြကုိ copy လုပ္ျပီး HTML Javascript ထဲကုိ Paste လုပ္ပါ။

<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"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZbVclYDPM19e_RBYJPvpEOkumKueOQM8rHTXdrblL8u6qh8MNxLt3ViBJrushNMTMz49JBabsTdAuymq3HoWWjcjQK3H8Z8uZO9-uePWrwAr_-4t12AH3d77HSA58TbDoTyPB0cpyn1Sf/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <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/AVvXsEiCH0PoKlMKb2XvxGkyGsLRKocgvcicqE0aCA0h-AAOuEojTcaqkYJitsJKt9cAUi8ir65IaQKd_il14tJn5K4y9yr7EghoW6um8B6rw0wZ58BDxiLIOWzgaZPu715cYM00phQvsRL2Si_E/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <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/AVvXsEjYiMCqlBC1mC4YkhcFndUTs7K1bfcMsEod0eUdzOOtrBsXTlwN8FNI6YwJd4dXDxpix2j_Q7vlqFE2gmd5SDOXDOTsE5D2tqINXa-_mZCOsB_dUWU8W8j3VzICGi3jzNy5WRH-OpnOYaY9/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <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/AVvXsEh0NQ_rq8iz7rd3-eVf_HKdhWczQiJHvhoMr7m0xf0qiBe0jdiroY0I5EZuwcJQn3y1C5XhflAoNxGQvcIBV1WlFTkFTecauXkCsI27SKvsoEnQ2EaVYz50o7orGGn1zasV2sviZcp53PBE/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <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/AVvXsEiVSDj_0QE28Za5oMHLcjFBlMdBIazXqoTwZVW2aA7P4VwHkGoOixqIfWQjOVSwP_KpZ5Q-wMO28m-Ek9-es1DI28KSwU3UVQWsKnxCfSRvP-pDee9RsPyirMalsnk9OM6cllj-Glu-dwft/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <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/AVvXsEjlIlRCKCRAPfaQKil2D-PB-yV5oO_LGiQinbKNs1ZdLsXJOxXXFeHoxOLyuu3Fp3c-l6eqUTM_ArNXw23UURNLjwuWa4Swy8O00faSdzJpWjMlkrFwUsdxIuAO8mLrCD49rn7TIgqAI7Su/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

အနီေရာင္နဲ႔ higlighted ထားတဲ့ ေနရာေတြမွာ ကုိယ့္ရဲ႕ Facebook Page URL, Twitter URL, Google Plus URL, Pinterest URL သူတုိ႕နဲ႕သက္ဆုိင္ရာ URL ေတြကုိ အစားထုိေပးရမွာ ျဖစ္ပါတယ္။ တကယ္လုိ႕ကုိက ICON တစ္ခုခုကုိမၾကဳိက္လုိ႕ ျဖဳတ္ေတာ့မယ္ဆုိရင္ tags ႏွစ္ခုၾကားက code ကုိ ဖ်က္လိုက္ပါ။

ဥပမာ း း <!–Start Rss Icon–>ဒီေနရာက code ေတြ<!–End Rss Icon–>>

- See more at: http://www.bloggerakm.blogspot.com/2012/12/blog-3d-social-icons-spin-effect.html#sthash.KT8hGs5B.dpuf