របៀបបន្ថែម Popular Posts Spinning Hover Effect (មានចលនា) ក្នុង Blogger

របៀបចូលទៅដើម្បើធ្វើអោយ Popular Posts មាន​ Spinning Hover Effect

- ចូល​ទៅ​ក្នុង​គណនី Blogger របស់អ្នក​តាម www.blogger.com

- ចូល​ទៅ Template >> Edit HTML >> Proceed (សូម​មើល​រូប​ខាង​ក្រោម)

- អ្នកត្រូវ Tick (ដាក់សញ្ញាគ្រីសនៅលើប្រអប់) នៅលើប្រអប់  Expand Widget Templates ​

- ស្វែងរក កូដនៅខាងក្រោមនេះក្នុង Templates ក្នុង Blogspot របស់អ្នក ( Ctrl + F ) ហើយ វាយ ]]></b:skin>​ នៅក្នុងប្រអប់ស្វែងរក ដើម្បើរកកូដ ខាងក្រោម នៅក្នុង Templates ក្នុង Blogspot របស់អ្នក 

]]></b:skin>

ហើយបន្ទាប់មក កូពី (Copy)កូដនៅខាងក្រោមនេះ ទៅ ផាស (Past)  នៅខាងលើ​​  ​]]></b:skin>  មួយបន្ទាត់

  #PopularPosts1 { max-width: 300px } #PopularPosts1 dd { float: left; border-bottom: none; margin: 8px 8px 0 8px; background: none; display: block; padding: 0 } #PopularPosts1 img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7); } #PopularPosts1 img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); }

- បន្ទាប់មកស្វែងរក កូដនៅខាងក្រោមនេះក្នុង Templates ក្នុង Blogspot របស់អ្នក

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>. . . . </b:widget>
-បន្ទាប់ពីស្វែងរកកូដខាងលើឃើញ ហើយអ្នកត្រូវលុប កូដនោះចោល

*** ចំណាំ ៖ ត្រូវប្រុងប្រយ័ត្ននៅពេលដែលអ្នកលុប កូដនៅខាងលើនេះចោល ***


-ហើយ បន្ទាប់មក កូពី (Copy)យកកូដថ្មី នៅខាងក្រោមទៅដាក់ត្រង់កន្លែងដែលយើងបានលុប កូដចាស់ចោល


កូដ ៖

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'><br />    <b:includable id='main'><br />        <b:if cond='data:title'><br />            <h2><br />                <data:title/><br />            </h2><br /></b:if><br />        <div class='widget-content popular-posts'><br />            <ul><br />                <b:loop values='data:posts' var='post'><br />                    <dd><br />                        <b:if cond='data:showThumbnails == "false"'><br />                            <b:if cond='data:showSnippets == "false"'><br />                                <!-- (1) No snippet/thumbnail --><br />                                <a expr:href='data:post.href'><data:post.title/></a><br />                                <b:else/><br />                                <!-- (2) Show only snippets --><br />                                <div class='item-title'><br />                                    <a expr:href='data:post.href'><data:post.title/></a><br />                                </div><br /><div class='item-snippet'><br />                                    <data:post.snippet/><br />                                </div><br /></b:if><br />                            <b:else/><br />                            <b:if cond='data:showSnippets == "false"'><br />                                <!-- (3) Show only thumbnails --><br />                                <div class='item-thumbnail-only'><br />                                    <b:if cond='data:post.thumbnail'><br />                                        <div class='item-thumbnail'><br />                                            <a expr:href='data:post.href' target='_blank'><br /><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/><br /></a><br />                                        </div><br /></b:if><br />                                    <div class='item-title'><br />                                        <a expr:href='data:post.href'><data:post.title/></a><br />                                    </div><br /></div><br /><div style='clear: both;' /><br />                                <b:else/><br />                                <!-- (4) Show snippets and thumbnails --><br />                                <b:if cond='data:post.thumbnail'><br />                                    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a><br />                                    <b:else/><br />                                    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd-HIEMQ9NEag0KVD8mFxu4QdeZtqVXhUOFMtEDHMosBXK4HAe90t7HxlOpHM58dA2flztnXU3KOn7ZcaqoDnNXrvBXewhcvC-g4pishpCev_E9s72gnGdQT7G4WNRq2UkQBSPoi3m6Qc/s1600/helperblogger-default-image.jpg' width='60px'/></a><br />                                </b:if><br />                            </b:if><br />                        </b:if><br />                    </dd><br />                </b:loop><br />            </ul><br /><div class='clear' /><br />            <b:include name='quickedit' /><br />        </div><br /></b:includable><br /></b:widget><br /><br /><br /><br />

- បន្ទាប់ពីអ្នក កូពី (Copy) ដាក់រូចហើយ អ្នក Save Your Teamplates​

នោះអ្នកនឹងទទួលបានលទ្ធផលដូចខាងលើ

សូមអរគុណដែលបានចូលមកកាន់ Blogspot របស់ខ្ញុំសង្ឃឹមថាអ្នកនឹងចូលមកកាន់ទស្សនា Blogspot របស់ខ្ញុំ ម្តងទៀត
យើងខ្ញុំរងចាំទទួលការរិះគន់អំពីលោកអ្នកដែលបាន ចូលមកទស្សនា​​ Blogspot របស់ខ្ញុំ ដើម្បើខ្ញុំធ្វើការកែលម្អ
សូមអរគុណ!! D:

តាមដាន និង អាន របៀប Design Blogger បន្ថែម ....


If You think it good please like ...... Facebook i1dlsong