បន្ថែម Awesome Jquery Rotate Effect For Blogger Images

ដាក់ 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/AVvXsEjBs07Oiv3_xOVYMBBUuN6AzWh1RJTiIqr_hN-761L5-_boE1Dr_3dWPoLi-2WBFKaiM_C60lLZkszn4irONYLT6RbQkSg-pstq_YCAe1Ujz3sDvEdk8JeXjyToaywoi8_GDw6bm3NZ58A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBs07Oiv3_xOVYMBBUuN6AzWh1RJTiIqr_hN-761L5-_boE1Dr_3dWPoLi-2WBFKaiM_C60lLZkszn4irONYLT6RbQkSg-pstq_YCAe1Ujz3sDvEdk8JeXjyToaywoi8_GDw6bm3NZ58A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBs07Oiv3_xOVYMBBUuN6AzWh1RJTiIqr_hN-761L5-_boE1Dr_3dWPoLi-2WBFKaiM_C60lLZkszn4irONYLT6RbQkSg-pstq_YCAe1Ujz3sDvEdk8JeXjyToaywoi8_GDw6bm3NZ58A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBs07Oiv3_xOVYMBBUuN6AzWh1RJTiIqr_hN-761L5-_boE1Dr_3dWPoLi-2WBFKaiM_C60lLZkszn4irONYLT6RbQkSg-pstq_YCAe1Ujz3sDvEdk8JeXjyToaywoi8_GDw6bm3NZ58A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBs07Oiv3_xOVYMBBUuN6AzWh1RJTiIqr_hN-761L5-_boE1Dr_3dWPoLi-2WBFKaiM_C60lLZkszn4irONYLT6RbQkSg-pstq_YCAe1Ujz3sDvEdk8JeXjyToaywoi8_GDw6bm3NZ58A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBs07Oiv3_xOVYMBBUuN6AzWh1RJTiIqr_hN-761L5-_boE1Dr_3dWPoLi-2WBFKaiM_C60lLZkszn4irONYLT6RbQkSg-pstq_YCAe1Ujz3sDvEdk8JeXjyToaywoi8_GDw6bm3NZ58A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBs07Oiv3_xOVYMBBUuN6AzWh1RJTiIqr_hN-761L5-_boE1Dr_3dWPoLi-2WBFKaiM_C60lLZkszn4irONYLT6RbQkSg-pstq_YCAe1Ujz3sDvEdk8JeXjyToaywoi8_GDw6bm3NZ58A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBs07Oiv3_xOVYMBBUuN6AzWh1RJTiIqr_hN-761L5-_boE1Dr_3dWPoLi-2WBFKaiM_C60lLZkszn4irONYLT6RbQkSg-pstq_YCAe1Ujz3sDvEdk8JeXjyToaywoi8_GDw6bm3NZ58A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBs07Oiv3_xOVYMBBUuN6AzWh1RJTiIqr_hN-761L5-_boE1Dr_3dWPoLi-2WBFKaiM_C60lLZkszn4irONYLT6RbQkSg-pstq_YCAe1Ujz3sDvEdk8JeXjyToaywoi8_GDw6bm3NZ58A/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBs07Oiv3_xOVYMBBUuN6AzWh1RJTiIqr_hN-761L5-_boE1Dr_3dWPoLi-2WBFKaiM_C60lLZkszn4irONYLT6RbQkSg-pstq_YCAe1Ujz3sDvEdk8JeXjyToaywoi8_GDw6bm3NZ58A/s1600/nature.jpg" /></div>
</div>

ចំណាំ ៖
អ្នកត្រូវជំនួសដោយតំណភ្ជាប់រូបភាពរបស់អ្នកជាមួយអក្សរដែលមានពត៍ក្រហម ៖

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBs07Oiv3_xOVYMBBUuN6AzWh1RJTiIqr_hN-761L5-_boE1Dr_3dWPoLi-2WBFKaiM_C60lLZkszn4irONYLT6RbQkSg-pstq_YCAe1Ujz3sDvEdk8JeXjyToaywoi8_GDw6bm3NZ58A/s1600/nature.jpg

5. ហើយជាចុងក្រោយនោះអ្នក Save HTML/Javascript របស់អ្នកជាការស្រេច

សង្ឃឹមថាអ្នកនិងអាចធ្វើវាបាន។

សូមអរគុណដែលបានចូលមកទស្សនាប្លុករបស់យើងខ្ញុំ សូមអ្នកមេត្តាជួយចុច Like ដើម្បើជួយគាំទ្រ និង ផ្តល់ជាកម្លាំងចិត្តដល់យើងខ្ញុំ សូមអរគុណ ។

ហើយសូមអ្នកចូលរួមជាមួយយើងខ្ញុំ និង ជួយបញ្ចេញមតិយោបល់នៅក្នុងក្រុម Facebook របស់យើងខ្ញុំ

ចុចលើរូបខាងក្រោមដើម្បើចូលទៅក្រុមរបស់យើងខ្ញុំនៅក្នុង Facebook