ปกติจะเลือกใช้ Template สำเร็จรูปในการปรับแต่ง blogger เพราะไม่จำเป็นต้องไปปรับแต่งอะไรมากมาย แค่หารูปแบบที่ตนชอบ เรื่องตกแต่งยกให้เป็นหน้าที่ของเหล่านักบรรดาออกแบบไป แต่บางครั้งได้ template ที่ชอบแต่ก็ยังขาดอะไรไปบ้าง มันก็เป็นเรื่องธรรมดา เหมือนวันนี้ Template blog ที่ใช้มานาน พึ่งนึกได้ว่า มันขาด Google + share ก้จะให้ขาดตัวนี้ไปได้ยังไง เมื่อก่อนทำไมนึกไม่ถึงก็ไม่รู้ ทำ blog ยังไงก็ต้องแชร์ผ่าน Google + เพราะเราอาศัย Google ในการเก็บข้อมูลและนำทางผู้ชมเข้า blog เรานี่นา

หลังจากค้นหามาได้พักใหญ่จึงไปเจอเข้ากับปุ่มแชร์ที่มี social share ที่คนไทยใช้กัน เช่น twitter ,facebook,pinterest ,google plus ซึ่งถือว่าเป็น social พื้นฐานในไทยก็ว่าได้ เห็นแล้วนำมาแปะเข้าให้ที่บล็อกของตน เอาไว้ใต้หัวข้อบทความค่ะ ตามมาดูวิธีการนำ ปุ่ม social share เหล่านี้แปะใต้หัวข้อบทความใน blogger กันคะ

1. หลังจาก Login เข้าใช้งาน blogger มาที่เมนู แม่แบบ เพื่อความแน่ใจ ให้ สำรองข้อมูล ก่อนการแก้ไข code ใน blogger ก่อนค่ะ
2. หลังจากสำรองข้อมูลเสร็จ แล้ว คลิ๊ก แก้ไข HTML

3. กด คลิ๊ก crtl+f แล้วค้นหา code ตัวนี้ <data:post.body/>
เมื่อเจอโค้ดดังกล่าว ให้คัดลอก โค้ดที่อยู่ด้านล่างนี้ไปวางไว้ก่อน <data:post.body/>
<!-- Scripts Start --> <b:if cond='data:post.isFirstPost'> <!-- Facebook --> <div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- Google +1 --> <script type='text/javascript'> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <!-- Twitter --> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </b:if> <!-- Scripts End --> <!-- Horizontal social buttons Start --> <div class='horizontal-social-buttons' style='padding:10px 0 10px;'> <!-- Twitter --> <div style='float:left;'> <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </div> <!-- Google +1 --> <div style='float:left;'> <g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/> </div> <!-- Facebook Like+Send --> <div style='float:left;'> <fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/> </div> <!-- Pinterest Start --> <b:if cond='data:blog.pageType == "item"'> <div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'> <a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a> <span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span> </div> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script> <style type='text/css'> #pin-wrapper > a {background-image:none !important;} </style> </b:if> <!-- Pinterest End --> </div> <div style='clear: both;'/> <!-- Horizontal social buttons End –> |
4. ต่อจากนั้นคลิ๊ก บันทึก แล้วลองเข้าไปดูบทความในเวบบล็อกได้เลยค่ะ เจอหรือยังคะ ปุ่ม social share อ้อ ! บาง template จะปรากฏ <data:post.body/> 2 แห่ง ใน template วาง code ไว้ <data:post.body/> ตัวที่ 2 ค่ะ
ปล.หากต้องการให้ปุ่ม social share ปรากฏอยู่ด้านล่างของบทความ ให้วางโค้ดไว้หลัง <data:post.body/> ค่ะ
ที่มา http://www.bloggersentral.com/
8 comments:
พี่คับ ผมเจอ 3 ตัว ทำไงดี
ทดลองวางทีละตัวก็ได้ค่ะ แล้ว publish ดู ไม่ได้ค่อยลบออก
ลองทำแล้วไมได้ครับ มัน error
ไม่ได้ครับ มันขึ้น
ไม่สามารถโหลดตัวอย่างเทมเพลตได้: เกิดข้อผิดพลาดในการแยกวิเคราะห์ XML บรรทัดที่ 733 คอลัมน์ 45: The string "--" is not permitted within comments.
ของผมมี 3 ตัว
ลองทำถึงขึ้นตอนการคัดลอกโค้ดที่ให้เเล้วค่ะ เเต่พอบันทึก มันขึ้นตัวหนังสือสีเเดงบอกว่า บรรทัด
นี้ผิด ต้องทำอย่างไรค่ะ ถึงจะเเก้ปัญหานี้ได้
code ไม่มี ทำงไงดีครับ
can not kha
คิดว่า code ผิดนะครับ copy ลงไป มันก็ขึ้นตัวแดงแล้ว
โพสต์ความคิดเห็น