ធាតុ​ក្រាហ្វិក​​ចុច​ចូល​ទៅ​ទំព័រ Facebook, Twitter, Google+, RSS Feed, Pinterest, និង Linkedin មាន​រាង​បួន​ជ្រុង​ដ៏ស្រស់​ស្អាត

   សួស្ដី​បាទ! យ៉ាង​ណា​ដែរ​ហើយ​មិត្ត​ទាំង​អស់​គ្នា ក្រោយ​ពី​បាន​សប្បាយ​ជា​មួយ​នឹង​បុណ្យ​ចូល​ឆ្នាំ​ប្រពៃ​ណី​ចិន-យួន​រួច? ចំពោះ​ខ្ញុំ​បាទ​វិញ មិន​ចាំ​បាច់​មាន​អ្នក​សួរ​សុខ​ទុក្ខ​ទេ គឺ​ខ្ញុំ​សុខ​រហូត ហើយ​ក៏​មិន​បង្អង់​ក្នុង​ការ​សរសេរ​ប្លុក​ដែរ ដោយ​សារ​បាន​ផ្អាក​ប្រកាស​អត្ថបទ យូរ​ដែរ​ហើយ​ដោយ​សារ​ជាប់​រវល់​អបអរ​ក្នុង​ឱកាស​បុណ្យ​ចូល​ឆ្នាំ​ចិន។ :D ចូល​ដល់​រឿង​សាច់​ការណ៍​យើង​វិញ​ម្តង ដែល​នៅ​ក្នុង​អត្ថបទ​នេះ ខ្ញុំ​នឹង​បង្ហាញ​ជូន​លោក​អ្នក​នូវ​ការ​ដាក់ ធាតុ​ក្រាហ្វិក Facebook, Twitter, Google+, RSS Feed, Pinterest, និង Linkedin ដែល​ភ្ជាប់​ទៅ​នឹង គណ​នី​របស់​យើង​នៅ​លើ​ប្លុក។

   ចំពោះ​អត្ថបទ​ប្រយោជន៍​ដែល​បាន​ពី​ការ​ដាក់​បែប​នេះ ខ្ញុំ​ជឿ​ជាក់​ថា​លោក​អ្នក​នឹង​អាច​ដឹង​បាន​ច្បាស់​ដោយ​ខ្លួន​ឯង​ហើយ ព្រោះ​ថា យើង​នឹង​បង្ហាញ​ប្រាប់​ពី​កន្លែង​ទាក់​ទង​មក​កាន់​យើង ក៏​ដូច​ជា​ ទំព័រ​មួយ​ចំនួន​ទៀត ដែល​យើង​ចង់​ឲ្យ​គេ​ស្គាល់។ ទោះ​ជា​យ៉ាង​ណា​ក្តី ទម្លាប់​របស់​ ខ្ញុំ​បាទ ទីងមោង តែង​តែ បង្ហាញ​នូវ​គម្រូ​មួយ​ជូន​ដល់​លោកអ្នក ជា​មុន ព្រោះ​ក្រែង​មិន​ពេញ​ចិត្ត ដូច​នេះ [សូមចុច] ដើម្បី​មើល​គម្រូ​ជាក់​ស្តែង​ដែល​ទីង​មោង​បាន​ធ្វើ​ដោយ​ផ្ទាល់។ :) បន្ត​ទៅ​ទៀត​សូម​មើល​របៀប​ដាក់។

៙ ​របៀប​ដាក់ធាតុ​ក្រាហ្វិក​​ចុច​ចូល​ទៅ​ទំព័រ Facebook, Twitter, Google+, RSS Feed, Pinterest, និង Linkedin ៖ 
- កត់ត្រា​ចូល Log In ក្នុង​គណនី​ Blogger របស់​អ្នក​។
- ចូល​ទៅ​កាន់​ម៉ឺនុយ Template >> Edit HTML (មើលរូប)

- រក​មើល​ស្លាក <b:skin>...</b:skin> ដោយ​ចុច​លើ​សញ្ញា​ព្រួញ​ពណ៌ខ្មៅ​ដែល​នៅ​ពី​​មុខ​វា

- រមូល​ចុះ (scroll down) ទៅ​ដល់ ]]></b:skin>
- ចម្លង​កូដ​ខាង​ក្រោម​ទៅ​បិទ​​ភ្ជាប់​ ​នៅ​ពី​លើ​ស្លាក ]]></b:skin> ​។ (មើល​ឲ្យ​ច្បាស់​ពី ទី​តាំង​ដាក់​កូដ)

កូដ​ដែល​ត្រូវ​យក​ទៅ​ដាក់​នៅ​ខាង​លើ​ស្លាក ]]></b:skin>

/*---social media jrung by : Tingmoung---*/

.social-wrap {
    margin:0 auto;
    padding:0px;
    text-decoration: none;
    }

    .social-wrap ul li {
    list-style-type: none;
    border-bottom:none;
    margin:0 auto;
    background: none;
    padding:0px;
    line-height: 0!important;
    }

    .social-wrap li a {
    margin:5px 3px 0px 0px !important;
    padding:0px;
    width:50px;
    height:50px;
    text-indent:-99999px;
    float:left;

    }
    .social-wrap li a.facebook1 {
    background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px 0px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.facebook1:hover {
    background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px -73px;
    }
    .social-wrap li a.twitter1 {
    background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px -127px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.twitter1:hover {
    background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px -204px;
    }
    .social-wrap li a.google-p1 {
    background:#a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px -254px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.google-p1:hover {
    background: #a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px -330px;
    }
    .social-wrap li a.rss1 {
    background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px -381px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.rss1:hover {
    background: #ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px -454px;
    }

    .social-wrap li a.pinit1 {
    background:#cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px -508px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.pinit1:hover {
    background: #cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px -580px;
    }

    .social-wrap li a.linkdin1 {
    background:#1698E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px -635px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.linkdin1:hover {
    background: #1698e3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBVFPXt27qvzcx8PDaQWjM3Dv3kf61NBA75RTuzorYBo3VVQY_38aiyTnn5Ho_FsXkXYRrLg7nXR6c7qPCwsk8woKOh63CuT_p4Lh5fs1ExHuLCVQki7qpWoxAn_oQs7yRagzBsgfAl3L/s1600/social_sprites.png) no-repeat 0px -711px;
    }

៙ ដំណាក់​កាល​ហៅ​មក​ប្រើ ៖ 
- ​ចូល​ទៅ​កាន់​ផ្នែក Layout >> រួច​ចុច​លើ​តំណ​​អក្សរ Add a Gadget នៅ​ទីតាំង​ណាមួយ (ឧទាហរណ៍​សូម​មើល​រូប​ខាង​ក្រោម)

- រមូរ​​ចុះ (scroll down) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​ចុច​​លើ​វា​ដើម្បី​បើក (មើល​រូប​ខាង​ក្រោម​នេះ)

- ចម្លង​កូដ​​ខាង​ក្រោម​​នេះ យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript Gadget ហើយ​ចុច​ប៊ូតុង Save។
* បន្ថែម ៖ ចំពោះ​ឈ្មោះ widget មិន​ចាំ​បាច់​ ឬ​ដាក់​ក៏​បាន។ នៅ​ពេល​ដែល​ចុច Save ហើយ លោក​អ្នក​គួរ​ចាប់​ទាញ​វា​យក​ទៅ​ដាក់​នៅ​ផ្នែក​ខាង​លើ ចំហៀង​ខាង​ឆ្វេង ឬ​ស្ដាំ។

កូដ​​ដែល​ត្រូវ​ដាក់​ក្នុង HTML/JavaScript

<!-- social media jrung -->
<div class='social-wrap'>
    <ul>
    <li><a class='facebook1' href='#' target='_blank' title='Facebook' rel='nofollow'></a></li>
    <li><a class='twitter1' href='#' target='_blank' title='Twitter' rel='nofollow'></a></li>
    <li><a class='google-p1' href='#' target='_blank' title='Google Plus' rel='nofollow'></a></li>
    <li><a class='rss1' href='#' target='_blaank' title='RSS Feed' rel='nofollow'></a></li>
    <li><a class='pinit1' href='#' target='_blank' title='Pinterest' rel='nofollow'></a></li>
    <li><a class='linkdin1' href='#' target='_blank' title='Linkedin' rel='nofollow'></a></li>
    </ul>
    </div>
<!-- social media jrung -->

*** សម្គាល់​ជា​សំខាន់ ៖

- ចំពោះ​ សញ្ញា​ទ្រុង​ជ្រូក ( # ) ជា​កន្លែង​បិទ​ភ្ជាប់ Link URLនៃ​គណនី​មួយៗ​របស់​អ្នក។ ហើយ​បើ​អ្នក​មិន​ទាន់​មាន​គណនី​គ្រប់​ចំនួន​វា​ទេ លោក​អ្នក​អាច​ទុក​វា​ចោល​សិន ដោយ​មិន​ចាំ​បាច់​ផ្លាស់​ប្ដូរ​អ្វី​នៅ​ត្រង់​សញ្ញា​ទ្រុង​ជ្រូក (#) នោះ​ទេ។ :D សូម​អរគុណ!!! ជួប​គ្នា​នៅ​ពេល​ក្រោយៗ​ទៀត។

អត្ថបទស្រដៀងគ្នា:

Tweet