ขับเคลื่อนโดย Blogger.

โชว์บทความที่มีป้ายกำกับเฉพาะหัวข้อบทความ

Written By Aucharaporn Theemcle on วันอังคารที่ 19 กรกฎาคม พ.ศ. 2554 | 18:17

ย้อนกลับไปเมื่อ 3 ปีที่แล้ว ที่เริ่มสร้างบล็อกใหม่ ๆ  ตอนนั้นตั้งใจเขียนบทความเหล่านี้ไว้เพื่อเป็นบันทึกความรู้ที่ไปค้นคว้ามา  และเอาไว้แบ่งปันกับเพื่อน ๆ คิดว่าก็คงไม่กี่คนที่ผ่านเข้ามาอ่าน และคงมีไม่กี่บทความที่จะเขียนได้   หลายปีผ่านไป ผลปรากฏว่ามีเพื่อน ๆ เข้ามาทักทาย สอบถาม แลกเปลี่ยนความรู้  อีกทั้งยังติชม เข้ามามาก  ดังนั้นดิฉันจึงต้องค้นคว้าหาถามรู้เพื่อตอบปัญหาให้กับเพื่อน ๆ จากที่คิดว่าคงเขียนไม่กี่บทความ  ก็กลายเป็นคงต้องเขียนอีกหลายบทความ image

และวันนี้ก็เช่นกัน   เพื่อนใหม่เข้ามาทักทาย สอบถามถึงวิธีการปรับแต่งเวบบล็อก  เมื่อคลิ๊กที่ป้ายกำกับ( Tag) แล้วจะปรากฏเฉพาะหัวข้อบทความที่มีป้ายกำกับดังกล่าว   ดังรูปด้านบน  โดยหากเพื่อนไม่ปรับแต่ง  ผลการแสดงเมื่อคลิ๊กที่ป้ายกำกับ (Tag) จะปรากฏเป็นเนื้อหาบทความยาวเหยียด ทุกบทความที่มีป้ายกำกับเหล่านั้น    การแสดงผลดังกล่าว คงไม่ทำให้ผู้เยี่ยมชมท่านใดเกิดความประทับใจแน่ ๆ เพราะฉะนั้นเรามาหาลองปรับแต่งการแสดงผลป้ายกำกับ ( Tag) กันเถอะคะ

image

ขั้นตอนของการปรับแต่งเริ่มจาก

1 . login เข้า blogger แล้วไปที่ บล็อกที่ต้องการปรับแต่ง > การออกแบบ> แก้ไข html   ติ๊กเครื่องหมายถูกที่ ช่อง ขยายเทมเพลตวิตเจ็ต ดังรูปด้านบน

2 . คลิ๊ก crtl+f เพื่อค้นหา code

<b:include data='post' name='post'/>

เมื่อเจอแล้วให้ลบโค้ดดังกล่าวทิ้งแล้วแทนที่ด้วย code ในกรอบสี่เหลี่ยมด้านล่างนี้แทน

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<center><a expr:href='data:post.url'>
<b><data:post.title/></b></a></center><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

 

3. กดบันทึกแม่แบบ  แล้วลองเลือกดูการแสดงผลได้เลยค่ะ เรียบร้อยหรือเปล่าคะ ? แล้วเจอกันบทความหน้าค่ะ

 


18:17 | 24 comments | Read More

เพิ่มปุ่ม google 1 plus ในเวบบล็อก

Written By Aucharaporn Theemcle on วันจันทร์ที่ 18 กรกฎาคม พ.ศ. 2554 | 18:28

ผ่านไปอ่านบทความที่่เวบโปรดแห่งหนึ่ง  เหลือบไปเห็นสัญลักษณ์ google 1 plus ซึ่งมีหน้าตาเป็นปุ่มคล้าย ๆ facebook like โดยปุ่ม google 1 plus ก็คล้าย ๆ กับ facebook like คือเหล่านักอ่านคนใดเกิดชอบใจบทความก็จะกดปุ่ม +1 ให้ คล้าย กัน

เพิ่มปุ่ม 1 plus ในเวบบล็อก

โดยคะแนน +1 นี้จะเป็นคะแนนที่ผู้อ่านบทความแจ้งกับ google ถึงคุณภาพของบทความหรือคุณภาพของเวบไซต์   ความสำคัญมันอยู่ที่ คะแนนที่ได้จะแจ้งตรงต่อ google นี่ซิ  มันหมายถึงหากมีคะแนนมาก search engine ใหญ่อย่าง google ก็จะให้ความสนใจกับบทความหรือเวบบล็อกของเรา  อันนี้หล่ะเหล่าบล็อกเกอร์น่าจะติด google 1 plus ไว้ในบทความด้วย หากแวะเข้าไปที่ google webmaster จะสังเกตเห็นเมนูที่ใช้วิเคราะห์จาก ปุ่ม google 1 plus ด้วย เป็นโอกาสเพิ่ม traffic แจ่ม ๆให้กับเวบบล็อกได้อีกทางเลยหล่ะค่ะ 

เพิ่มปุ่ม 1 plus ในเวบบล็อก 

สำหรับการติดตั้งใน blogger ก็ไม่ยาก ตามดิฉันมากันเลยค่ะ

กรณีที่ 1  เลือกใช้ปุ่มแบ่งปันของบล็อกเกอร์  ซึ่งจะแสดงอยู่ด้านล่างของบทความ โดยให้เพื่อน ๆ login เข้า blogger ไปที่ การออกแบบ> องค์ประกอบของหน้า> คลิ๊กแก้ไขการตั้งค่าของบล็อกที่มุมล่างสุดของบทความบล็อก

เพิ่มปุ่ม 1 plus ในเวบบล็อก

หลังจากนั้นจะปรากกฏหน้าต่างให้ตั้งค่าบทความ  เลื่อนลงไปคลิ๊ก แสดงปุ่มแบ่งปัน เพื่อให้้ปุ่มแบ่งปันปรากฏอยู่ด้านล่างของบทความในเวบบล็อก

เพิ่มปุ่ม 1 plus ในเวบบล็อก

แค่นี้ก็จะปรากฏปุ่ม google 1 plus ในด้านล่างของบทความแล้วหล่ะค่ะ

กรณีที่ 2  สำหรับเพื่อนท่านใดที่ได้ใช้ bookmark ของ blogger เช่นดิฉัน  ลองมาเพิ่ม google 1 plus ไว้ในบทความอีกวิธีค่ะ นั่นคือนำ code ไปวางในเวบบล็อก

ขัั้นตอนที่ 1  login  เข้า blogger > การออกแบบ> แก้ไข html  ติ๊กเครื่องหมายถูกหน้ากล่อง ขยายเทมเพลตวิตเจ็ต ดังรูปด้านล่างนี้

เพิ่มปุ่ม 1 plus ในเวบบล็อก  2. คลิีก ctrl+f ค้นหา code  </head> แล้ว copy code ด้านล่างนี้ไปวางไว้ก่อน </head>



<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'} </script>



ดังตัวอย่างรูปด้านล่าง



เพิ่มปุ่ม 1 plus ในเวบบล็อก



3. ต่อจากนั้น คลิ๊ก ctrl+f ค้นหา code  <data:post.body> นำ code ในตารางนี้ไปวาง 



โดยหากต้องการให้ปุ่ม google 1 plus  อยู่ด้านล่างของหัวข้อบทความ ก็นำ code ไปวางไว้ก่อน  <data:post.body>



หากต้องการให้ปรากฏด้านล่างบทความก็วาง code ดังกล่าวไว้หลัง <data:post.body>







<div style='float:left'> <g:plusone size="standard" expr:href="data:post.url"/> </div>


ตัวอย่างการนำ code มาวางใน html โดยวางไว้ก่อน <data:post.body> เพื่อให้ปุ่ม google 1plus ปรากฏอยู่ด้านล่างของหัวข้อบทความ 



เราสามารถแก้ไขขนาดของ google 1 plus  ได้โดยแก้ไข size ใน code เปลี่ยนจาก standard เป็น



small  (ขนาดเล็ก 15px)



medium (ขนาดกลาง 20px)



standard (ขนาดมาตรฐาน  24 px)



tall ( สูง 60px)



ลองปรับเปลี่ยนให้เหมาะกับหน้าตาเวบบล็อกของเรากันนะคะ สำหรับ ชวนเพื่อนเขียนบล็อก ขอเลือก standard ค่ะ



เพิ่มปุ่ม 1 plus ในเวบบล็อก



เมื่อเสร็จแล้วก็ทดลอง  เลือกบันทึกแม่แบบ คลิ๊กดูการแสดงผลของบล็อกค่ะ



 เพิ่ม ปุ่ม google 1 plus



 



แค่นี้ก็จะมี google 1 plus อยู่ในเวบบล็อกแล้วหล่ะ  คลิ๊กเลยดีกว่า ดิฉันคลิ๊ก +1 ให้กับบทความตนเอง เลยดีกว่า



เพิ่มปุ่ม 1 plus ในเวบบล็อก

18:28 | 5 comments | Read More