ដាក់ Awesome Jquery Rotate Effect For Blogger Images នៅក្នុងប្លុករបស់អ្នកវាក៍ជាផ្នែកមួយដែរដែលអាចធ្វើអោយប្លុករបស់អ្នកមានភាពទាក់ទាញ ហើយកាន់តែមានភាពស្រស់ស្អាតដោយសារ Awesome Jquery Rotate Effect For Blogger Images
ឥលូវអ្នកទាំងអស់គ្នាសាកដាក់ Awesome Jquery Rotate Effect For Blogger Images ជាមួយ (អាយ១ទាញយកចម្រៀង) នៅក្នុងប្លុករបស់អ្នកសិនមើលតើវាមានភាបទាក់ទាញប៉ុនណាដែរ ៕
មើលគម្រូទុកជាមុន
1. ដំបូងអ្នកចូលទៅកាន់ Blogger account របស់អ្នក តាមរយះ www.blogger.com,
បន្ទាប់មកចូលទៅកាន់ Design (or Layout) > Page Elements
2. ហើយចុចលើ Add a Gadget Link
3. ជ្រើសយក "HTML/JavaScript"មើលរូបខាងក្រោម ៖
4. បន្ទាប់ ចម្លង (Copy) កូដខាងក្រោម បិទភ្ជាប់ (Past) នៅក្នុងប្រអប់ "HTML/JavaScript"
<script>
$(function() {
var tot = $(".img_c").length;
var stat = deg = 10;
var rotate = "";
var frame, mozframe, webkitframe;
$("img").each(function(index) {
$(this).css({
"transform": "rotate("+deg+"deg)",
"-moz-transform": "rotate("+deg+"deg)",
"-webkit-transform": "rotate("+deg+"deg)",
"-o-transform": "rotate("+deg+"deg)"
});
rotate = "100% {" +
"transform: rotate(360deg);" +
"-moz-transform: rotate(360deg);" +
"-webkit-transform: rotate(360deg);" +
"-o-transform: rotate(360deg);" +
"} ";
var imgclass = parseInt(index+1);
frame = " @keyframe anim" + imgclass + " { " +
rotate + "}";
mozframe = " @-moz-keyframes anim" + imgclass + " { " +
rotate + "}";
webkitframe = " @-webkit-keyframes anim" + imgclass + " { " +
rotate + "}";
$('<style> '+ frame + mozframe + webkitframe +
' .img'+imgclass+' { animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +
'-moz-animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +
'-webkit-animation: anim'+imgclass+' 3s ease 0s infinite alternate; }'
+'</style>').appendTo('head');
deg = deg + stat;
});
});
</script>
<style>
body {
background: #fff url('wood_pattern.png') repeat top right;
}
.content {
margin: 0 auto;
padding: 100px;
}
img {
margin: 10px;
padding: 20px;
background: #fff;
-moz-box-shadow: 0px 0px 3px #d3d3d3;
-webkit-box-shadow: 0px 0px 3px #d3d3d3;
box-shadow: 0px 0px 3px #000000;
position: absolute;
}
</style>
<br />
<div class="content">
<div class="img_c">
<img class="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjG5ymTtO-TeY7bM7SlFXP__n2ICDvfp27vFE_qRMdCrutq00sUbCtM1pkACSDUAiXMH1-5Yg-Q9zm0bLWeCS1t8Me7g22wOTQsPm9lEAkc_Q9h17jvxUm5iYGYZuvfGSA7a9fl32V1A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjG5ymTtO-TeY7bM7SlFXP__n2ICDvfp27vFE_qRMdCrutq00sUbCtM1pkACSDUAiXMH1-5Yg-Q9zm0bLWeCS1t8Me7g22wOTQsPm9lEAkc_Q9h17jvxUm5iYGYZuvfGSA7a9fl32V1A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjG5ymTtO-TeY7bM7SlFXP__n2ICDvfp27vFE_qRMdCrutq00sUbCtM1pkACSDUAiXMH1-5Yg-Q9zm0bLWeCS1t8Me7g22wOTQsPm9lEAkc_Q9h17jvxUm5iYGYZuvfGSA7a9fl32V1A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjG5ymTtO-TeY7bM7SlFXP__n2ICDvfp27vFE_qRMdCrutq00sUbCtM1pkACSDUAiXMH1-5Yg-Q9zm0bLWeCS1t8Me7g22wOTQsPm9lEAkc_Q9h17jvxUm5iYGYZuvfGSA7a9fl32V1A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjG5ymTtO-TeY7bM7SlFXP__n2ICDvfp27vFE_qRMdCrutq00sUbCtM1pkACSDUAiXMH1-5Yg-Q9zm0bLWeCS1t8Me7g22wOTQsPm9lEAkc_Q9h17jvxUm5iYGYZuvfGSA7a9fl32V1A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjG5ymTtO-TeY7bM7SlFXP__n2ICDvfp27vFE_qRMdCrutq00sUbCtM1pkACSDUAiXMH1-5Yg-Q9zm0bLWeCS1t8Me7g22wOTQsPm9lEAkc_Q9h17jvxUm5iYGYZuvfGSA7a9fl32V1A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjG5ymTtO-TeY7bM7SlFXP__n2ICDvfp27vFE_qRMdCrutq00sUbCtM1pkACSDUAiXMH1-5Yg-Q9zm0bLWeCS1t8Me7g22wOTQsPm9lEAkc_Q9h17jvxUm5iYGYZuvfGSA7a9fl32V1A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjG5ymTtO-TeY7bM7SlFXP__n2ICDvfp27vFE_qRMdCrutq00sUbCtM1pkACSDUAiXMH1-5Yg-Q9zm0bLWeCS1t8Me7g22wOTQsPm9lEAkc_Q9h17jvxUm5iYGYZuvfGSA7a9fl32V1A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjG5ymTtO-TeY7bM7SlFXP__n2ICDvfp27vFE_qRMdCrutq00sUbCtM1pkACSDUAiXMH1-5Yg-Q9zm0bLWeCS1t8Me7g22wOTQsPm9lEAkc_Q9h17jvxUm5iYGYZuvfGSA7a9fl32V1A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjG5ymTtO-TeY7bM7SlFXP__n2ICDvfp27vFE_qRMdCrutq00sUbCtM1pkACSDUAiXMH1-5Yg-Q9zm0bLWeCS1t8Me7g22wOTQsPm9lEAkc_Q9h17jvxUm5iYGYZuvfGSA7a9fl32V1A/s1600/nature.jpg" /></div>
</div>
ចំណាំ ៖
អ្នកត្រូវជំនួសដោយតំណភ្ជាប់រូបភាពរបស់អ្នកជាមួយអក្សរដែលមានពត៍ក្រហម ៖
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjG5ymTtO-TeY7bM7SlFXP__n2ICDvfp27vFE_qRMdCrutq00sUbCtM1pkACSDUAiXMH1-5Yg-Q9zm0bLWeCS1t8Me7g22wOTQsPm9lEAkc_Q9h17jvxUm5iYGYZuvfGSA7a9fl32V1A/s1600/nature.jpg
5. ហើយជាចុងក្រោយនោះអ្នក Save HTML/Javascript របស់អ្នកជាការស្រេច
សូមអរគុណដែលបានចូលមកទស្សនាប្លុករបស់យើងខ្ញុំ សូមអ្នកមេត្តាជួយចុច Like ដើម្បើជួយគាំទ្រ និង ផ្តល់ជាកម្លាំងចិត្តដល់យើងខ្ញុំ សូមអរគុណ ។
ហើយសូមអ្នកចូលរួមជាមួយយើងខ្ញុំ និង ជួយបញ្ចេញមតិយោបល់នៅក្នុងក្រុម Facebook របស់យើងខ្ញុំ
0 comments:
Post a Comment