ដាក់ Widget សង្គមបណ្ដាញដ៏ស្រស់ស្អាត

បាទថ្ងៃនេះ ដូចសព្វរាល់ដង ខ្ញុំតែងតែរកគន្លឹះថ្មីៗ មកបង្ហាញ ដល់អ្នករាល់គ្នា ជារឿយៗ មិនថាចាស់ ឬថ្មី។ ថ្ងៃនេះខ្ញុំ នឹងលើកយកពីវិធី សាស្រ្ត ដាក់ Widget តំណរបណ្ដាញសង្គម ដល់អ្នករាល់គ្នា តាមដាន វាមិនមែន អ្វីធំដំ នោះទេ គឺគ្រាន់ តែចង់បង្ហាញគន្លឹះតូចមួយ នេះ ដល់អ្នក អ្នកថ្មី តែប៉ុណ្ណោះ។ កុំរងចាំយូរតោះ សាក់ល្បង ជាមួយខ្ញុំ ឥលូវនេះ ៖

របៀបដាក់ icon font៖

ទី១ សូមចូលទៅកាន់គណនី របស់អ្នក Blogger.com
ទី២ សូមរើសយក Theme បន្ទាប់មក Edit HTML
ទី៣ សូមចម្លងកូដខាងក្រោម រួច សូមស្វែងរក <head> រួចដាក់ពីក្រោមវា ដើម្បីងាយស្រួលស្វែងរកសូម ចុច Ctrl + F រូចវាយពាក្យ <head>

វិធីប្រើ៖

ទី១ សូមចូលទៅកាន់គណនី របស់អ្នក Blogger.com
ទី២ សូមរើសយក Layout បន្ទាប់មក រើសយក Add a Gadget កន្លែងណាក៏ បាន ឲ្យតែចង់បង្ហាញ បន្ទាប់មក រើសយក HTML/Javascript
ទី៣ សូមចម្លងកូដ ខាងក្រោមទៅដាក់ នៅក្នុង ក្នុង HTML/Java នោះជាការស្រេច

HTML and CSS

<div class="widget-content">
<a href="#">
<div class="fb-icon-bg"></div>
    <div class="fb-bg"></div></a>
<a href="#">
<div class="twi-icon-bg"></div>
    <div class="twi-bg"></div></a>
<a href="#">
<div class="g-icon-bg"></div>
    <div class="g-bg"></div>
</a>
<a href="linkedin-url">
<div class="lin-icon-bg"></div>
    <div class="lin-bg"></div>
</a>
<a href="instagram-url">
<div class="ins-icon-bg"></div>
    <div class="ins-bg"></div>
</a>
<style>
.fb-bg:hover, .twi-bg:hover, .g-bg:hover, .ins-bg:hover, .lin-bg:hover {background:#303030;}
.fb-icon-bg {
   background: #354f88;
   height: 37px;
   margin: 0 0 -37px 0;
   width: 41px;
}

.fb-icon-bg:after {
content: "\f09a"; font-family: FontAwesome;
display: block;
padding: 9px 10px 5px 15px;
color:#fff;
}

.fb-bg {
   background: #3b5998;
   display: block;
   height: 37px;
   margin: 0 0 10px 41px;
}

.fb-bg:after {
   color: #fff;
   content: "Facebook";
   height: 37px;
   left: 8%;
   position: relative;

   top: 22%;
   width: 41px;
}

.fb-bg:hover{
cursor: pointer;
}

.fb-bg:active{
background: #354f88;
}

/* Twitter */
.twi-icon-bg:after {
content: "\f099"; font-family: FontAwesome;
display: block;
padding: 11px 10px 6px 11px;
color:#fff;
}

.twi-icon-bg {
   background: #40a2d1;
   height: 37px;
   margin: 0 0 -37px 0;
   width: 41px;
}

.twi-bg {
   background: #45b0e3;
   height: 37px;
   margin: 0 0 10px 41px;
}

.twi-bg:after {
   color: #fff;
   content: "Twitter";
   height: 37px;
left: 11%;
   position: relative;

   top: 22%;
width: 41px;
}

.twi-bg:hover {
cursor: pointer;
}

.twi-bg:active {
background: #40a2d1;
}

/* Google+ */
.g-icon-bg:after {
content: "\f0d5"; font-family: FontAwesome;
display: block;
padding: 11px 10px 6px 13px;
color:#fff;
}

.g-icon-bg {
   background: #ce3e26;
   height: 37px;
   margin: 0 0 -37px 0;
   width: 41px;
}

.g-bg {
   background: #de4c34;
   height: 37px;
        margin: 0 0 10px 41px;
}

.g-bg:after {
   color: #fff;
   content: "Google+";
   height: 37px;
   left: 10%;
   position: relative;

   top: 22%;
   width: 41px;
}

.g-bg:hover {
cursor: pointer;
}
.lin-icon-bg {
    background: #075e8c;
    height: 37px;
    margin: 0 0 -37px 0;
    width: 41px;
}
.lin-icon-bg:after {
    content: "\f0e1";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.lin-bg {
    background: #0077B5;
    height: 37px;
    margin: 0 0 10px 41px;
}
.lin-bg:after {
    color: #fff;
    content: "Follow up on Linkedin";
    height: 37px;
    left: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}
.ins-icon-bg {
    background: #ffc238;
    height: 37px;
    margin: 0 0 -37px 0;
    width: 41px;
}
.ins-icon-bg:after {
    content: "\f16d";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.ins-bg {
    background: #ffd438;
    height: 37px;
    margin-left: 41px;
}
.ins-bg:after {
    color: #fff;
    content: "Follow us on Instagram";
    height: 37px;
    left: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}
</style>
</div>

កំណត់ចំណាំ

កន្លែងដែល បាន ហាយឡាយ ពណ៌ក្រហម ជាកន្លែងដែរត្រូវ ប្ដូរ Link បណ្ដាញសង្គមរបស់អ្នក។

រួចហើយសូមចុចលើពាក្យ Save

បង្ហាញសាកល្បង Demo

អត្ថបទដោយ អាស្វាដែក

ពួកយើងកំពុងធ្វើការជួសជុល លុប និង បន្ទាន់សម័យ

ដាក់ Widget សង្គមបណ្ដាញដ៏ស្រស់ស្អាត

របៀបដាក់ icon font៖

វិធីប្រើ៖

ចែករំលែកអត្ថបទទៅកាន់

Contact Form

កំពូលអត្ថបទប្រចាំសប្ដាហ៍

ជ្រើសរើសប្រភេទអត្ថបទ

ចំនួនស្ថិតិសរុបជាប្រចាំ

ផ្សព្វផ្សាយ ពាណិជ្ជកម្ម

ពួកយើងកំពុងធ្វើការជួសជុល លុប និង បន្ទាន់សម័យ

ដាក់ Widget សង្គមបណ្ដាញដ៏ស្រស់ស្អាត

របៀបដាក់ icon font៖

វិធីប្រើ៖

ចែករំលែកអត្ថបទទៅកាន់

អត្ថបទដែលអ្នកនឹងចូលចិត្ត :

Contact Form

កំពូលអត្ថបទប្រចាំសប្ដាហ៍

ជ្រើសរើសប្រភេទអត្ថបទ

ចំនួនស្ថិតិសរុបជាប្រចាំ

ផ្សព្វផ្សាយ ពាណិជ្ជកម្ម