โค้ดเพิ่มปุ่ม AddThis+

AddThis Button ที่เดียวเพื่อง่ายต่อการส่ง แชร์ ปริ๊น


คัดลอกโค้ดไปใช้ได้เลยครับ

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_preferred_6"></a>
<a class="addthis_button_preferred_7"></a>
<a class="addthis_button_preferred_8"></a>
<a class="addthis_button_preferred_9"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f8d7fe93deaf226"></script>
<!-- AddThis Button END -->

วิธีวางโค้ด
ไปที่รูปแบบ >>HTML/JAVASCRIPT >>วางโค้ด >>บันทึก

เริ่มเขียนบทความใหม่

เริ่มเขียนบทความใหม่

1.คลิกที่รูปดินสอ  หรือ คำว่า "บทความใหม่"



2. จะเข้าสู่การเริ่มเขียนบทความใหม่
คลิกที่ภาพเพื่อขยาย

3.ใส่ชื่อโพสต์ 
4.ใส่รายละเอียดของบทความ สามารถปรับรูปแบบตัวอักษรให้สวยงามเหมาะสม พร้อมใส่รูปภาพ และวิดีโอ ได้อีกด้วย
5.คลิกที่ "ป้ายกำกับ" (จะใส่หรือไม่ใส่ก็ได้) เพื่อการแสดงหมวดหมู่,แท็ก, Label,Tag (แล้วแต่จะเรียก)
6.คลิกที่ "แสดงตัวอย่าง" เพื่อตรวจสอบบทความให้เรียบรอยแล้ว ก่อนที่จะเผยแพร่บทความออกไป
7.คลิกที่ "เผยแพร่" เสร็จเรียบร้อย
7.1 ถ้าหากยังไม่พร้อมเผยแพร่ ให้คลิกที่ "บันทึก" แล้ว "ปิด" บทความนี้ก็จะเป็น "ฉบับร่าง" คือยังไม่เผยแพร่ เราสามารถมาเขียนเพิ่มเติมใหม่ แล้วเผยแพร่ในวันต่อไปก็ได้เช่นกัน

เพิ่มปุ่ม Line it! บนเว็บบล็อกและเว็บไซต์

การเพิ่มปุ่ม Line it! บนเว็บบล็อกและเว็บไซต์ เพื่อง่ายต่อการแชร์ไปยังไทม์ไลน์ หรือแชร์ไปยังเพื่อนได้อีกด้วย คัดลอกโค้ดสีแดงนี้ไปใช้ได้เลยครับ

ขั้นตอนการเพิ่มโค้ดของปุ่ม

ไปที่แม่แบบ/ธีม/>>แก้ไข HTML>>
คัดลอกโค้ดไปวางในบริเวณที่ต้องการแสดงบนเว็บไซต์
                          <!-- Line Start -->
<script type="text/javascript">LineIt.loadButton();</script>
<div class='line-it-button' data-lang='th' data-type='share-a' expr:href='data:post.url' style='display: none;'/>
 <script async='async' defer='defer' src='https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js'/>
                          <!-- Line End -->
เมื่อวางโค้ดเสร็จแล้ว บันทึกแม่แบบ


ทำป้ายกำกับแบบเท่ๆ ให้กับล็อกเราดีกว่า

วิธีทำป้ายกำกับใต้ภาพ หรือ ป้ายกำกับใต้หัวข้อบทความ ในหน้าแรกของเว็บ บล็อก เพื่อแยกหมวดหมู่ [LABEL] ให้กับบทความ ดังภาพตัวอย่าง
โค้ด

.post-labels
#viewers

ส่วนที่1
.post-labels{position:relative;margin:0;padding:0}
.post-labels a{float:left;height:18px;line-height:18px;position:relative;font-size:11px;margin-top:4px;margin-left:15px;background:#eb4938;color:#fff;text-decoration:none;-moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-radius-topright:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;padding:0 10px}
.post-labels a:before{content:"";float:left;position:absolute;top:0;left:-9px;width:0;height:0;border-color:transparent #eb4938 transparent transparent;border-style:solid;border-width:9px 9px 9px 0}
.post-labels a:after{content:"";position:absolute;top:7px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #666;-webkit-box-shadow:-1px -1px 2px #666;box-shadow:-1px -1px 2px #666}
.post-labels a:hover{background:#555}
.post-labels a:hover:before{border-color:transparent #555 transparent transparent}

ส่วนที่2
#viewers{float:left;width:100%;font:12px Arial;padding-top:3px;border-top:1px solid #bbb;margin:0;background:#eee}
.readmorecontent{float:right;margin:0;padding:3px 10px;0}

ทั้งสองอยุ่ก่อนหน้า ]]></b:skin>

ส่วนที่3
                        <div class='post-footer'>
                          <div id='viewers'>

                            <span class='post-labels'>
                              <b:if cond='data:post.labels'>
                                <b:loop values='data:post.labels' var='label'>
                                  <a expr:href='data:label.url + &quot;?&amp;max-results=5&quot;' rel='tag'>
                                    <data:label.name/>
                                  </a>
                                </b:loop>
                              </b:if>
                            </span>
                          </div>
                        </div>

ลิงก์ไปยังย่อหน้า หรือหัวข้อ ภายในหน้าเดียวกันอย่างรวดเร็ว

โค้ดเพิ่มลิงก์ ไปยังย่อหน้า หรือหัวข้อ ภายในหน้าเดียวกันอย่างรวดเร็ว ด้วยการคลิกลิงก์ คุณไม่ต้องเลื่อน หรือหา ให้เสียเวลา คุณสามารถคลิกข้ามไปยังหัวข้อที่ต้องการได้ทันที

  เพียงคลิกลิงก์ ก็จะไปยังหัวข้ออย่างรวดเร็ว เพื่อง่าย และสะดวกต่อผู้อ่านบทความ ในบล็อก หรือว็บไซต์ ที่มีเนื้อหา หัวข้อ รายละเอียดเยอะๆ ในบางทีเราก็ต้องการข้ามไปยังหัวข้อที่เราต้องการอ่านเท่านั้น แต่การเลื่อนหาทีประโยคคงเสียเวลา เมื่อคุณใช้โค้ดนี้จะสะดวกสำหรับผู้เข้าอ่านเนื้อหาในเว็บ หรือบล็อกของคุณ อย่างมากเลยครับ
คลิกดูตัวอย่าง
หัวข้อที่1หัวข้อที่2 /หัวข้อที่3 /หัวข้อที่4 /หัวข้อที่5/หัวข้อที่6/หัวข้อที่7/หัวข้อที่8/หัวข้อที่9


คัดลอกโค้ดไปใช้ได้เลยครับ
<a href="http://webblog2u.blogspot.com/2016/03/blog-post.html#9">หัวข้อที่9</a>
<a name="9"></a> หัวข้อที่9

วิธีทำ
ส่วนที่1 สร้างลิงก์แบบปกติ เช่น (หัวข้อที่9)
-ส่วนประกอบ <a href="ใส่urlของหน้า#เลข">หัวข้อที่9</a>
-ลิงก์คือ http://webblog2u.blogspot.com/2016/03/blog-post.html#9
-โค้ดHTMLคือ
<a href="http://webblog2u.blogspot.com/2016/03/blog-post.html#9">หัวข้อที่9</a>

ส่วนที่2 หัวข้อหรือย่อหน้า ที่กำหนดไว้ (คลิก html ก่อนวางโค้ด)
-ส่วนประกอบ <a name="เลข"></a> หัวข้อที่9
-โค้ดที่ใช้วางก่อนหน้าหัวข้อ <a name="9"></a> หัวข้อที่9


ตัวอย่าง

หัวข้อที่1
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่2
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่3
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่4
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่5
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่6
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่7
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่8
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่9
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่1หัวข้อที่2 /หัวข้อที่3 /หัวข้อที่4 /หัวข้อที่5/หัวข้อที่6/หัวข้อที่7/หัวข้อที่8/หัวข้อที่9
วิธีทำ / ไปบนสุด

วิธีทำหน้าเว็บให้เป็นสีขาวดำ

วิธีทำหน้าเว็บให้เป็นสีขาวดำ เทา
ขั้นตอน
ไปที่แม่แบบ >>แก้ไข html
1.ค้นหา ]]></b:skin>
2.คัดลอกโค้ด

html {
filter: grayscale(100%);
filter: gray;
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

3.วางโค้ดวางลงก่อนหน้า ]]></b:skin>
4.บันทึกแม่แแบบ เสร็จแล้วครับ

ตัวอย่าง
html {
filter: grayscale(100%);
filter: gray;
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
]]></b:skin>
คัดลอกโค้ดไปใช้ได้เลยครับ

**ถ้าหากมืดเกินไปให้ปรับลดลงเป็น90%,80%ตามเหมาะสม
**หากต้องการกลับมาเหมือนเดิมให้ลบโค้ดออกครับ

วันนี้