Blogger: ลบหรือซ่อนคำว่า "บทความที่ใหม่กว่า หน้าแรก บทความที่เก่ากว่า "


0 ความคิดเห็น

วิธีลบให้ข้อความ "บทความที่ใหม่กว่า หน้าแรก บทความที่เก่ากว่า" หายไป (Removing The Newer Post - Home - Older Posts Links From Blogger Blogs) สามารถทำได้ดังนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. สั่งค้นหา
]]></b:skin>

ขั้นตอนที่ 3. แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
.blog-pager {display: none;}
]]></b:skin>

ขั้นตอนที่ 4. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' ก็เสร็จแล้ว

อธิบายเพิ่มเติม
นอกจากนี้ถ้าต้องการลบคำว่า "สมัครสมาชิก: บทความ (Atom)" ก็สามารถทำได้ตามลิงก์นี้ครับ
http://tip.maxlayout.com/2013/08/blogger-remove-subscribe-to-posts-atom.html


Credit: http://blogging.nitecruzr.net/2007/08/removing-newer-post-home-older-posts.html

Blender: import mmd


0 ความคิดเห็น

Step 1.
Go to the mmd_tools download link below then click "Download ZIP"
https://github.com/sugiany/blender_mmd_tools

Step 2.
Extract ZIP File.

Step 3.
Now you have a new folder that is named "blender_mmd_tools-master". Go inside that folder once

Step 4.
Cut and paste the "mmd_tools" into your addons folder.
(EX: Program Files\Blender Foundation\Blender\2.76\scripts\addons)

Step 5.
Open up blender and go to "File" then "User Preferences"

Step 6.
Once the Preferences box pops ups search "MMD" and to your right "object: mmd_tools" should be seen. the next step is important

Step 7.
Check the  box  next to the little running man and at the bottom click save user preferences
(If you don't you're not going to be able to import .pmd or .pmx files)

Step 8.
Go to "File" then "Import" and import your MMD Files.

Credit:
https://www.youtube.com/watch?v=WBX7DHfQ9SU
https://www.youtube.com/user/PurpleHazePro
https://www.youtube.com/watch?v=ez8LLV7JUgo
http://hanatsuki-kimiko.deviantart.com/art/MMD-to-Blender-Tutorial-1-The-Basics-415726940

Blogger: สไลเดอร์รูปภาพแบบหีบเพลงยืดหด


3 ความคิดเห็น

วิธีสร้างสไลเดอร์รูปภาพแบบยืดหด (jQuery accordion slider) ซึ่งสามารถปรับการจัดเรียงได้ทั้งเป็นแนวตั้ง (Vertical) และ แนวนอน (Horizontal) สามารถสร่างได้ดังนี้

Step 1.
เข้าสู่เมนูจัดการบล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'


Step 2.
กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหา
  </head>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดด้านล่างนี้
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>

<script type="text/javascript">
   $().ready(function() {
         $('#example .kwicks').kwicks({
      max : 300,
      spacing : 3,
      isVertical : true
     });
       });
</script>
  </head>



Step 3.
สั่งค้นหา
]]></b:skin>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดด้านล่างนี้
.kwicks {
 list-style: none;
 position: relative;
 margin: 0;
 padding: 0;
}

.kwicks li{
 display: block;
 overflow: hidden;
 padding: 0;
 cursor: pointer;
}

#example .kwicks li{
 width: 240px;
 height: 120px;
 margin-bottom: 3px;
}

]]></b:skin>



Step 4.
จากนั้นกดปุ่ม 'บันทึกเทมเพลต' ก็จะทำให้ javascript และ CSS codes ถูกบันทึกลงในเทมเพลท


Step 5.
เข้าสู่บล็อกของคุณจากนั้นไปที่
'รูปแบบ'
โดยให้กดเลือก
'เพิ่ม Gadget'
แบบ
'HTML/จาวาสคริปต์'


Step 6.
นำโค้ดแบบใดแบบหนึ่งด้านล่างนี้แล้วคัดลอกใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว

แบบที่ 1. โชว์ภาพที่ดูได้อย่างเดียว
<div id="example"><ul class="kwicks">
<li id="kwick1"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
<li id="kwick2"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
<li id="kwick3"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
<li id="kwick4"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
</ul></div>


แบบที่ 2. โชว์ภาพที่กดลงไปแล้วเป็นลิงก์ด้วย
<div id="example"><ul class="kwicks">
<li id="kwick1"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title" src="IMAGE_URL"/></li></a>
<li id="kwick2"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title" src="IMAGE_URL"/></li></a>
<li id="kwick3"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title"  src="IMAGE_URL"/></li></a>
<li id="kwick4"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title"  src="IMAGE_URL"/></li></a>
</ul></div>


ซึ่งตั้งค่าได้ดังนี้
LINK_URL คือ ลิงก์ปลายทางของรูปภาพ
LINK_Title คือ คำอธิบายลิงก์
IMAGE_Title คือ คำอธิบายรูปภาพ
IMAGE_URL คือ ที่ตั้งของรูปภาพ

เพิ่มหรือลดจำนวนลิงก์
ถ้าต้องการเพิ่มลิงก์ก็ทำโดยคัดลอกรูปแบบของลิงก์เดิมแล้วใส่ตัวเลขเพิ่มลงไป
เช่นสร้างเป็น
<li id="kwick5">...
<li id="kwick6">...
<li id="kwick7">...
เขียนเพิ่มต่อไปเรื่อยๆ
แต่ถ้าจะลดจำนวนก็ลบลิงก์ทิ้งไป


ตัวอย่าง

นี่คือตัวอย่างวิธีสร้างเมนูภาพในขั้นตอนที่ 6 ซึ่งต้องผ่านการทำขั้นตอนที่ 1-5 ก่อนจึงจะใทำงานได้ครับ

ตัวอย่างแบบที่ 1 ภาพไม่มีลิงก์
<div id="example"><ul class="kwicks">
<li id="kwick1"><img alt="Singha Myanmar" src="http://4.bp.blogspot.com/-0Wd_XVrQgBM/TiZLFN9FHYI/AAAAAAAADAc/dYXo2xhRY_o/photoshop-page-curl-018.png"/></li>
<li id="kwick2"><img alt="Otaru Orgel Museum" src="http://3.bp.blogspot.com/-b21lbzhOpDM/T3hg0ulfKaI/AAAAAAAAEZI/l9qT5f1MIHA/s400/photoshop-distort-ripple-frame-008.png"/></li>
<li id="kwick3"><img alt="Uni"  src="http://2.bp.blogspot.com/-xg09jRqgJS4/T3bYO_aMIkI/AAAAAAAAEX4/xBlxATpd6CM/s400/photoshop-feather-frame-contract-selection-006.png"/></li>
<li id="kwick4">"><img alt="Otaru Canal"  src="http://2.bp.blogspot.com/-Ysa1JClu1HQ/T3Z_0-1SNdI/AAAAAAAAEWU/ZXGgtRBGlRc/s430/photoshop-change-canvas-size-otaru-canal-004.png"/></li>
</ul></div>


ตัวอย่างแบบที่ 2 ภาพมีลิงก์ด้วย
<div id="example"><ul class="kwicks">
<li id="kwick1"><a href="http://tip.maxlayout.com/2010/07/page-curl-in-photoshop.html" title="สิงห์พม่า"><img alt="Singha Myanmar" src="http://4.bp.blogspot.com/-0Wd_XVrQgBM/TiZLFN9FHYI/AAAAAAAADAc/dYXo2xhRY_o/photoshop-page-curl-018.png"/></li></a>
<li id="kwick2"><a href="http://tip.maxlayout.com/2010/08/photoshop-distort-ripple-frame.html" title="พิพิธภัณฑ์กล่องดนตรีโอตารุ"><img alt="Otaru Orgel Museum" src="http://3.bp.blogspot.com/-b21lbzhOpDM/T3hg0ulfKaI/AAAAAAAAEZI/l9qT5f1MIHA/s400/photoshop-distort-ripple-frame-008.png"/></li></a>
<li id="kwick3"><a href="http://tip.maxlayout.com/2010/08/photoshop-feather-frame-contract.html" title="ไข่หอยเม่น"><img alt="Uni"  src="http://2.bp.blogspot.com/-xg09jRqgJS4/T3bYO_aMIkI/AAAAAAAAEX4/xBlxATpd6CM/s400/photoshop-feather-frame-contract-selection-006.png"/></li></a>
<li id="kwick4"><a href="http://tip.maxlayout.com/2010/08/photoshop-change-canvas-size.html" title="คลองโอตารุ"><img alt="Otaru Canal"  src="http://2.bp.blogspot.com/-Ysa1JClu1HQ/T3Z_0-1SNdI/AAAAAAAAEWU/ZXGgtRBGlRc/s430/photoshop-change-canvas-size-otaru-canal-004.png"/></li></a>
</ul></div>



อธิบายเพิ่มเติม

เกี่ยวกับ Step 2
ขนาดของภาพเมื่อขยายออกมาขณะเอาเมาส์วางไว้เหนือรูปคือ
      max : 300

เปลี่ยนการจัดเรียงของสไลด์รูปภาพจากแนวตั้งให้กลายเป็นแนวนอนได้โดยเปลี่ยนจาก
      isVertical : true
ให้เป็น
      isVertical : false

เกี่ยวกับ Step 3
ขนาดของภาพที่ยังไม่ขยายออกมาคือ
 width: 360px;
 height: 120px;


Credit: http://www.itechcolumn.com/2012/01/jquery-accordion-vertical-image-slider.html

Unity: ส่งออก Terrian เป็นไฟล์ Obj


3 ความคิดเห็น

Step 1.
ใช้ Unity สร้างวัตถุ Terrian ขึ้นมา

Step 2.
ในโฟลเดอร์ "Assets" ให้สร้างโฟลเดอร์ชื่อว่า "Editor" ขึ้นมา

Step 3.
สร้าง C# Script ชื่อว่า "ExportTerrain.cs" ไว้ที่
Assets>Editor>ExportTerrain.cs

Step 4.
แทนที่สคริปต์ของ ExportTerrain.cs ด้วยโค้ดด้านล่างนี้

// Converted from UnityScript to C# at http://www.M2H.nl/files/js_to_c.php - by Mike Hergaarden
// C # manual conversion work by Yun Kyu Choi

using UnityEngine;
using UnityEditor;
using System;
using System.Collections;
using System.IO;
using System.Text;

enum SaveFormat { Triangles, Quads }
enum SaveResolution { Full=0, Half, Quarter, Eighth, Sixteenth }

class ExportTerrain : EditorWindow
{
   SaveFormat saveFormat = SaveFormat.Triangles;
   SaveResolution saveResolution = SaveResolution.Half;

   static TerrainData terrain;
   static Vector3 terrainPos;

   int tCount;
   int counter;
   int totalCount;
   int progressUpdateInterval = 10000;

   [MenuItem("Terrain/Export To Obj...")]
   static void Init()
   {
      terrain = null;
      Terrain terrainObject = Selection.activeObject as Terrain;
      if (!terrainObject)
      {
         terrainObject = Terrain.activeTerrain;
      }
      if (terrainObject)
      {
         terrain = terrainObject.terrainData;
         terrainPos = terrainObject.transform.position;
      }

      EditorWindow.GetWindow<ExportTerrain>().Show();
   }

   void OnGUI()
   {
      if (!terrain)
      {
         GUILayout.Label("No terrain found");
         if (GUILayout.Button("Cancel"))
         {
            EditorWindow.GetWindow<ExportTerrain>().Close();
         }
         return;
      }
      saveFormat = (SaveFormat) EditorGUILayout.EnumPopup("Export Format", saveFormat);

      saveResolution = (SaveResolution) EditorGUILayout.EnumPopup("Resolution", saveResolution);

      if (GUILayout.Button("Export"))
      {
         Export();
      }
   }

   void Export()
   {
      string fileName = EditorUtility.SaveFilePanel("Export .obj file", "", "Terrain", "obj");
      int w = terrain.heightmapWidth;
      int h = terrain.heightmapHeight;
      Vector3 meshScale = terrain.size;
      int tRes = (int)Mathf.Pow(2, (int)saveResolution );
      meshScale = new Vector3(meshScale.x / (w - 1) * tRes, meshScale.y, meshScale.z / (h - 1) * tRes);
      Vector2 uvScale = new Vector2(1.0f / (w - 1), 1.0f / (h - 1));
      float[,] tData = terrain.GetHeights(0, 0, w, h);

      w = (w - 1) / tRes + 1;
      h = (h - 1) / tRes + 1;
      Vector3[] tVertices = new Vector3[w * h];
      Vector2[] tUV = new Vector2[w * h];

      int[] tPolys;

      if (saveFormat == SaveFormat.Triangles)
      {
         tPolys = new int[(w - 1) * (h - 1) * 6];
      }
      else
      {
         tPolys = new int[(w - 1) * (h - 1) * 4];
      }

      // Build vertices and UVs
      for (int y = 0; y < h; y++)
      {
         for (int x = 0; x < w; x++)
         {
            tVertices[y * w + x] = Vector3.Scale(meshScale, new Vector3(-y, tData[x * tRes, y * tRes], x)) + terrainPos;
            tUV[y * w + x] = Vector2.Scale( new Vector2(x * tRes, y * tRes), uvScale);
         }
      }

      int  index = 0;
      if (saveFormat == SaveFormat.Triangles)
      {
         // Build triangle indices: 3 indices into vertex array for each triangle
         for (int y = 0; y < h - 1; y++)
         {
            for (int x = 0; x < w - 1; x++)
            {
               // For each grid cell output two triangles
               tPolys[index++] = (y * w) + x;
               tPolys[index++] = ((y + 1) * w) + x;
               tPolys[index++] = (y * w) + x + 1;

               tPolys[index++] = ((y + 1) * w) + x;
               tPolys[index++] = ((y + 1) * w) + x + 1;
               tPolys[index++] = (y * w) + x + 1;
            }
         }
      }
      else
      {
         // Build quad indices: 4 indices into vertex array for each quad
         for (int y = 0; y < h - 1; y++)
         {
            for (int x = 0; x < w - 1; x++)
            {
               // For each grid cell output one quad
               tPolys[index++] = (y * w) + x;
               tPolys[index++] = ((y + 1) * w) + x;
               tPolys[index++] = ((y + 1) * w) + x + 1;
               tPolys[index++] = (y * w) + x + 1;
            }
         }
      }

      // Export to .obj
      StreamWriter sw = new StreamWriter(fileName);
      try
      {

         sw.WriteLine("# Unity terrain OBJ File");

         // Write vertices
         System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US");
         counter = tCount = 0;
         totalCount = (tVertices.Length * 2 + (saveFormat == SaveFormat.Triangles ? tPolys.Length / 3 : tPolys.Length / 4)) / progressUpdateInterval;
         for (int i = 0; i < tVertices.Length; i++)
         {
            UpdateProgress();
            StringBuilder sb = new StringBuilder("v ", 20);
            // StringBuilder stuff is done this way because it's faster than using the "{0} {1} {2}"etc. format
            // Which is important when you're exporting huge terrains.
            sb.Append(tVertices[i].x.ToString()).Append(" ").
               Append(tVertices[i].y.ToString()).Append(" ").
               Append(tVertices[i].z.ToString());
            sw.WriteLine(sb);
         }
         // Write UVs
         for (int i = 0; i < tUV.Length; i++)
         {
            UpdateProgress();
            StringBuilder sb = new StringBuilder("vt ", 22);
            sb.Append(tUV[i].x.ToString()).Append(" ").
               Append(tUV[i].y.ToString());
            sw.WriteLine(sb);
         }
         if (saveFormat == SaveFormat.Triangles)
         {
            // Write triangles
            for (int i = 0; i < tPolys.Length; i += 3)
            {
               UpdateProgress();
               StringBuilder sb = new StringBuilder("f ", 43);
               sb.Append(tPolys[i] + 1).Append("/").Append(tPolys[i] + 1).Append(" ").
                  Append(tPolys[i + 1] + 1).Append("/").Append(tPolys[i + 1] + 1).Append(" ").
                  Append(tPolys[i + 2] + 1).Append("/").Append(tPolys[i + 2] + 1);
               sw.WriteLine(sb);
            }
         }
         else
         {
            // Write quads
            for (int i = 0; i < tPolys.Length; i += 4)
            {
               UpdateProgress();
               StringBuilder sb = new StringBuilder("f ", 57);
               sb.Append(tPolys[i] + 1).Append("/").Append(tPolys[i] + 1).Append(" ").
                  Append(tPolys[i + 1] + 1).Append("/").Append(tPolys[i + 1] + 1).Append(" ").
                  Append(tPolys[i + 2] + 1).Append("/").Append(tPolys[i + 2] + 1).Append(" ").
                  Append(tPolys[i + 3] + 1).Append("/").Append(tPolys[i + 3] + 1);
               sw.WriteLine(sb);
            }
         }
      }
      catch(Exception err)
      {
         Debug.Log("Error saving file: " + err.Message);
      }
      sw.Close();

      terrain = null;
      EditorUtility.DisplayProgressBar("Saving file to disc.", "This might take a while...", 1f);
      EditorWindow.GetWindow<ExportTerrain>().Close();    
      EditorUtility.ClearProgressBar();
   }

   void UpdateProgress()
   {
      if (counter++ == progressUpdateInterval)
      {
         counter = 0;
         EditorUtility.DisplayProgressBar("Saving...", "", Mathf.InverseLerp(0, totalCount, ++tCount));
      }
   }
}


Step 5.
รอสักครู่จะพบว่าในแถบเมนูด้านบนจะมีหัวข้อ Terrian โผล่ออกมา โดยให้กดบนหัวข้อนั้นแล้วเลือกที่ "Export To Obj.."

Step 6.
จากนั้นเมื่อปรับรายละเอียดแล้วก็สั่งปุ่ม Export ได้เลย


Credit: http://wiki.unity3d.com/index.php?title=TerrainObjExporter

Blogger: แสดงบทความล่าสุดจำแนกตามป้ายกำกับแบบเลือกเอง


2 ความคิดเห็น

บทความนี้คือวิธีแสดงบทความล่าสุดของบล็อกโดยจำแนกตามป้ายกำกับ Label ที่แตกต่างกันไว้ใน Gadget อันเดียวกัน
ซึ่งจริงๆ แล้วก็คือการนำสคริปต์ของลิงก์ข้างล่างนี้มาปรับการแสดงผลใหม่เท่านั้นเอง
http://tip.maxlayout.com/2014/02/blogger-add-gadget-for-show-all-post.html
โดยจะมีวิธีทำได้ดังนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'รูปแบบ'

ขั้นตอนที่ 2. ให้เลือก 'เพิ่ม Gadget' แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว
โดยตั้งค่า URL และปรับขนาดต่างๆ ของเนื้อหาได้ด้วยตนเองตามส่วนอธิบายเพิ่มเติมด้านล่างครับ

<!-- Label Recent Posts Style Start -->
<style type='text/css'>
div.labelrecentlist div {
    height: 320px; width:210px; padding:2px; margin:0 5px 15px; border:1px solid silver; background:#ffffff; display:inline; float:left;
}
div.labelrecentlist div p {
     color:black; font-size:18px; text-align:center; font-weight:bold; line-height:100%;
}
div.labelrecentlist div div {
    height: 265px; width:210px; padding:0; margin:0; border:none; background:#ffffff; display:inline; float:center;
}
div.labelrecentlist div div img {
    margin-bottom:5px;
}
</style>
<!-- Label Recent Posts Style End -->
<!-- Label Recent Posts Script Start -->
<div class='labelrecentlist'>
<script type="text/javascript">
function recentpostslist3(json)
{
 var defaultThumbnail = 'https://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/s72-c/maxlayout-pencil-blogger-no-image-2013.png';
 var thumbnailSize  = '210'; // 1600 = Largest Size of Image.

 var i,j;
 var entryUrl,entryLink,entryTitle,entryThumbnail;
 var thumbnailSizeC  = 's'+ thumbnailSize + '-c';

 for (i = 0; i < json.feed.entry.length; i++)
 {
  for (j = 0; j < json.feed.entry[i].link.length; j++) {
   if (json.feed.entry[i].link[j].rel == 'alternate') {
    break;
   }
  }

  entryUrl = json.feed.entry[i].link[j].href;//bs
  entryLink = '<a href="' + entryUrl + '">';
  entryTitle = json.feed.entry[i].title.$t;

  if(typeof json.feed.entry[i].media$thumbnail != 'undefined') {
   entryThumbnail = json.feed.entry[i].media$thumbnail.url;
  } else { entryThumbnail = defaultThumbnail; }

  document.write('<div>' + entryLink + '<img src="' + entryThumbnail.replace('s72-c',thumbnailSizeC) + '" alt="' + entryTitle +  '"></img></a>' +
   entryLink + entryTitle + '</a></div>');
 }
}
</script>
<!-- List Start -->

<div>
<p>Lightwave</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Lightwave?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>

<div>
<p>Photoshop</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Photoshop?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>

<div>
<p>Illustrator</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Illustrator?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>

<div>
<p>Fireworks</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Fireworks?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>

<!-- List End -->
</div>
<!-- Label Recent Posts Script End -->


อธิบายเพิ่มเติม
ตอนนำไปใช้เองก็ให้แทนที่ URL ด้วยวิธีดังนี้
ส่วนแสดงเนื้อหาว่าจะมาจากบล็อกใดเขียนอยู่ในส่วนท้ายระหว่าง <!-- List Start --> และ <!-- List End -->
มีโครงสร้างคือ
<div>
<p>ชื่อหัวข้อ</p>
<script src="ที่ตั้งบล็อก/feeds/posts/summary/-/ชื่อป้ายกำกับ?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>

ซึ่งในตัวอย่างด้านบนอันแรกสุดนั้นผมต้องการให้อันแรกแสดงข้อมูลจากป้ายชื่อ Lightwave จึงต้องแทนที่
ชื่อหัวข้อ คือ Lightwave (จะเขียนว่าอะไรก็ได้)
ที่ตั้งบล็อก คือ http://tip.maxlayout.com
ชื่อป้ายกำกับ คือ Lightwave (ต้องเขียนให้ถูกหมดทั้งตัวพิมพ์เล็กพิมพ์ใหญ่และการเว้นวรรค)

ดังนั้นจะเขียนใหม่ได้ดังนี้
<div>
<p>Lightwave</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Lightwave?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>

โดยสามารถนำเนื้อหาที่เขียนด้วยโครงสร้างแบบนี้ใส่เพิ่มลงไปได้เรื่อยๆ ซึ่งถ้ามันเต็มแถวแล้วก็จะถูกดันไปอยู่บรรทัดใหม่เองโดยอัตโนมัติ

Blogger: ให้หน้าแรกแสดงภาพตัวอย่างขนาดเล็กพร้อมเนื้อหาที่เราเลือกไว้


0 ความคิดเห็น

คำอธิบาย
บทความนี้คือวิธีแสดงและซ่อนเนื้อหาบทความให้มองเห็นเนื้อหาบางส่วนในหน้าแรก โดยที่หน้าแรกนั้นจะแสดงรูปตัวอย่างขนาดเล็กทางด้านซ้าย และแสดงเนื่้อหาที่เราเลือกไว้อยู่ทางด้านขวามือของรูปนั้น

ซึ่งบทความนี้อาจไม่เหมาะสำหรับผู้เขียนบล็อกที่ไม่ชอบการแก้ไข HTML ภายในแต่ละบทความ โดยสำหรับผู้ที่ต้องการใช้ตัวข้ามเนื้อหาแบบธรรมดาของบล็อกเกอร์ซึ่งง่ายกว่าบทความนี้เยอะก็สามารถทำตามลิงก์นี้ได้ครับ
http://tip.maxlayout.com/2010/08/blogger-insert-jumb-break.html

อย่างไรก็ตาม ก่อนที่จะแก้ไขตามบทความนี้ควรเข้าไปที่ 'ดาวน์โหลดแม่แบบฉบับเต็ม' เพื่อป้องกันความผิดพลาดโดยดาวน์โหลด Template เดิมที่ใช้อยู่มาเก็บสำรองไว้ในเครื่องของคุณเองก่อนเริ่มการปรับแต่ง

ซึ่งหลังจากทำตามบทความนี้แล้ว จะสามารถแสดงและซ่อนเนื้อหาได้โดยขณะอยู่ในหน้าเขียนบทความหรือโพสต์ให้กดที่แท็บ HTML แล้ว ใช้ Class กำหนดเนื้อหาได้ดังตัวอย่างนี้

กำหนดเนื่้อหาที่ต้องการแสดงในหน้าแรกโดยเขียนว่า
<div class="hide">
เนื้อหาที่แสดงให้เห็นในหน้าแรก
</div>

กำหนดเนื่้อหาที่ต้องการซ่อนจากหน้าแรกโดยเขียนว่า
<div class="seek">
เนื้อหาที่ต้องการซ่อนจากแรก
</div>

แต่มีเงื่อนไขคือ ถ้าไม่มีการเขียน class ทั้งสองอันนี้ครอบลงไปในบทความ จะไม่เกิดการซ่อนเนื้อหาแต่จะทำให้ระบบนำเนื้อหาแบบปกติพร้อมรูปมาแสดงไว้ด้านขวาของรูปตัวอย่างในหน้าแรกแทน


ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'


ขั้นตอนที่ 2. กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหา
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>


ขั้นตอนที่ 3. จะพบว่าบริเวณข้างใต้โค้ดที่ได้หาเจอนั้นจะมีโค้ดเป้าหมายสำหรับการแก้ไขโค้ดของเรา
เขียนอยู่ในบรรทัดถัดลงมาซึ่งก็คือ
<data:post.body/>


ขั้นตอนที่ 4. จากนั้นให้สั่งแทนที่โค้ดเป้าหมายที่จากขั้นตอนที่แล้วซึ่งก็คือ
<data:post.body/>

ด้วยโค้ดข้างล่างนี้
<!-- maxlayout post hide and seek - start -->
<b:if cond='data:blog.url != data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=250;
var show_default_thumbnail=true;
var default_thumbnail="https://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/s250/maxlayout-pencil-blogger-no-image-2013.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url'><script type='text/javascript'>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script></a>

<!-- maxlayout clone label and comment counter start -->
    <div class='clone-post-label'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>
    </div>
  <br/>
    <div class='clone-post-comment-counter'>
      <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <b:include data='post' name='comment_count_picker'/>
            </b:if>
          </b:if>
        </b:if>
      </span>
    </div>
  <br/>
<!-- maxlayout clone label and comment counter end -->
<div class='post-hideandseek'>
<data:post.body/>
</div>
<b:else/>
<data:post.body/>
</b:if>
<!-- maxlayout post hide and seek - end -->



ขั้นตอนที่ 5. สั่งค้นหา
]]></b:skin>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดด้านล่างนี้
]]></b:skin>
<!-- maxlayout post index hide and seek - start -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
.jump-link,
.post-footer,
.post-hideandseek .hide {
display:none;
}

.postthumb {
  float: left;
  overflow: hidden;
  display: inline;
}

.clone-post-label,
.clone-post-comment-counter {
  float: left;
  padding-left: 50px;
  display:block;
}

.post-hideandseek .seek {
  float: right;
  position: absolute;
  padding-left: 50px;
  display: inline;
}
</style>
</b:if>
<!-- maxlayout post index hide and seek - end -->



ขั้นตอนที่ 6. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' แล้วก็ทำตามส่วนอธิบายด้านบนได้เลย

Blogger: ทำลิงก์เชื่อมโยงจุดอ้างอิง (Anchor Link)


0 ความคิดเห็น

คำอธิบายเกี่ยวกับลิงค์แบบ Anchor Links คือ

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

ซึ่งคำอธิบายยืดยาวแบบข้างบนนี้อาจทำให้บางคนสับสนได้ ผมเองลองกลับไปอ่านที่ตัวเองเขียนไว้ดูก็งงเหมือนกัน ดังนั้นใช้เมาส์กดลิงก์ตัวอย่างข้างล่างนี้ดูจะเข้าใจได้ง่ายกว่า
ตัวย่างที่ 1 ลิงก์ไปสู่ส่วนท้ายของบทความนี้ (โดยปลายทางจะมีคำว่า "จบแล้วจ้า" เขียนอยู่ด้านบน)
จบแล้วจ้า
ตัวย่างที่ 2 ลิงก์ไปสู่ปลายทางภายในบทความอื่น (โดยส่งไปสู่ขั้นตอน 13 ที่อยู่กลางบทควา่มนั้น)
ตัวอย่างการใช้ Photoshop ทำ Inverse Selection

โดยวิธีสร้างลิงก์ดังกล่าวทำได้ด้วย 2 ขั้นตอนดังต่อไปนี้

วิธีสร้างจุดอ้างอิง

เราต้องสร้างจุดอ้างอิงสำหรับใช้เป็นปลายทางของลิงก์ขึ้นมาก่อน
ซึ่งสร้างโดยเข้าไปในบทความนั้นๆ แล้วก็กดเป็นโหมด HTML จากนั้นก็วางโค้ดลงไป

ซึ่งจุดอ้างอิงปลายทางโดยทั่วไปจะมีโครงสร้างดังนี้
<div id="ชื่อจุดอ้างอิง">ข้อความที่แสดง</div>
โดยมีความหมายดังนี้
ชื่อจุดอ้างอิง -  คือสิ่งที่ต้องระบุไว้ในลิงก์ที่เราสร้างขึ้น
ข้อความที่แสดง - จะเป็นสิ่งที่ผู้ชมเว็บมองเห็น

โดยจุดอ้างอิงของตัวอย่างที่ 1 ซึ่งอยู่ด้านบนนั้นเขียนได้ดังนี้
<div id="anchortext1">จบแล้วจ้า</div>
ซึ่งค่าที่ผมกำหนดไว้มีดังนี้
ชื่อจุดอ้างอิง ผมตั้งไว้เป็น  anchortext1
ข้อความที่แสดง ผมตั้งไว้เป็น จบแล้วจ้า


วิธีสร้างลิงก์ไปสู่จุดอ้างอิง

วิธีสร้างลิงก์แบบจุดอ้างอิงก็คล้ายกับการกำหนดที่ตั้ง URL แบบปกติแต่ให้เขียนต่อท้ายด้วย "#" แล้วค่อยตามด้วย "ชื่อจุดอ้างอิง" อีกทีหนึ่ง

ซึ่งมีโครงสร้างดังนี้
ที่ตั้งของหน้า#ชื่อจุดอ้างอิง
ตัวอย่างเช่นที่ตั้ง URL ของหน้านี้คือ
http://tip.maxlayout.com/2014/05/blogger-create-anchor-text-link.html
ดังนั้นที่ตั้งของจุดอ้างอิง anchortext1 ก็คือ
http://tip.maxlayout.com/2014/05/blogger-create-anchor-text-link.html#anchortext1
โดยพอนำที่ตั้ง URL ที่กล่าวมาไปสร้างเป็นลิงก์ข้อความแบบง่ายๆ ก็จะมีโครงสร้างคือ
<a href="ที่ตั้งของหน้า#ชื่อจุดอ้างอิง">ข้อความลิงก์</a>
ดังนั้นลิงก์ข้อความในตัวอย่างที่ 1 จะสามารถเขียนได้ดังนี้
<a href="http://tip.maxlayout.com/2014/05/blogger-create-anchor-text-link.html#anchortext1">จบแล้วจ้า</a>

ส่วนลิงก์ข้อความตามตัวอย่างที่ 2 นั้นตามปกติแล้วจะเขียนว่า
<a href="http://tip.maxlayout.com/2010/07/page-curl-in-photoshop.html#anchortext2" >ตัวอย่างการ Inverse Selection</a>
แต่ผมต้องการให้ลิงก์นี้ให้เป็นชนิดสั่งเปิดในหน้าต่างใหม่โดยเขียน
target="_blank"
เพิ่มไปด้านหลังที่ตั้ง URL ซึ่งจะกลายเป็นดังนี้
<a href="http://tip.maxlayout.com/2010/07/page-curl-in-photoshop.html#anchortext2" target="_blank">ตัวอย่างการ Inverse Selection</a>

Credit:
http://blogtimenow.com/how-to/create-anchor-links-wordpress-blogger-jump-links/


จบแล้วจ้า

Blogger: การทำปุ่มเปิดปิดเพื่อซ่อนหรือแสดงเนื้อหาบางส่วน


0 ความคิดเห็น

สามารถสร้างปุ่มที่ใช้ซ่อนเหนือหา โดยเมื่อเอาเมาส์คลิกลงที่ปุ่มนี้ก็จะมีเนื่อหาแสดงออกมาได้ดังนี้

วิธีเริ่มสร้างปุ่ม

ทำได้โดยคัดลอกโค้ดแบบใดแบบหนึ่งด้านล่างนี้ไปวางในช่อง HTML ของโพสต์หรือของ Gadget ก็ได้

แบบที่หนึ่งมีเนื้อหาแสดงออกมาด้านบนของปุ่ม


<div id="spoiler" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <br />
แบบที่สองมีเนื้อหาแสดงออกมาด้านล่างของปุ่ม

<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <div id="spoiler" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <br />
วิธีปรับแต่งเนื่อหา
โครงสร้างของปุ่มมีดังนี้ เนื้อหาที่ถูกซ่อนไว้ก็คือ ADD YOUR HIDDEN CONTENT HERE. ข้อความที่แสดงอยู่บนปุ่มคือ Open/Close ข้อความไตเติ้ลที่แสดงออกมาเมื่อเอาเมาส์วางเหนือปุ่มคือ Click to show/hide
วิธีทำปุ่มนี้หลายอันไว้ในหน้าเว็บเดียวกัน
ทำได้โดยให้เพิ่มเลขลงไปที่ด้านหลังคำว่า spoiler ซึ่งในแต่ละปุ่มจะมีกำหนดไว้อยู่ 4 จุดเช่นเดียวกับตัวอย่างข้างล่างนี้ เช่นถ้าโค้ดปุ่มแรกคือ
<div id="spoiler" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <br />
ดังนั้นปุ่มที่สองจะเขียนได้โดยแทนที่คำว่า spoiler ด้วย spoiler1 ก็จะเป็นดังนี้
<div id="spoiler1" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <br />
ดังนั้นปุ่มที่สามก็จะเขียนได้โดยแทนที่คำว่า spoiler ด้วย spoiler2 ก็จะเป็นดังนี้
<div id="spoiler2" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <br />
Credit:
http://www.bloggersentral.com/2009/12/create-show-hide-or-peek-boo.html http://www.allbloggertricks.com/2013/05/how-to-add-openclose-button-to-blogger.html

Blogger: แสดงบทความทั้งหมดไว้ในหน้าเดียวกัน


33 ความคิดเห็น

Update: 2014/09/12

บทความนี้คือวิธีแสดงบทความทั้งหมดของบล็อกเกอร์ไว้ภายในเครื่องมือ Gadget อันเดียวกัน
ซึ่งบทความจะมีโค้ดให้เลือกอยู่ 2 แบบคือ สำหรับแสดงภาพเป็นจัตุรัสหรือสี่เหลี่ยมผืนผ้า โดยสามารถตั้งค่า URL และปรับขนาดต่างๆ ของเนื้อหาได้ด้วยตนเองตามส่วนอธิบายเพิ่มเติมด้านล่างครับ
ซึ่งสามารถดูตัวอย่างได้ที่นี่ http://www.maxlayout.com/ โดยจะมีวิธีทำได้ดังนี้

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

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'รูปแบบ'

ขั้นตอนที่ 2. ให้เลือก 'เพิ่ม Gadget' แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. เลือกโค้ดด้านล่างนี้แล้วคัดลอกใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว


แบบที่ 1 แสดงภาพตัวอย่างเป็นสี่เหลี่ยมจัตุรัส

สามารถปรับขนาดภาพได้ตรงโค้ดที่เขียนว่า
var thumbnailSize = '210'
โดยเปลี่ยนตัวเลขเป็นขนาดที่ต้องการได้เลย
ซึ่งโค้ดที่ต้องนำไปใส่ในกล่อง Gadget คือ

<!-- Show All Posts Style Start -->
<style type='text/css'>
div.allrecentlist div {
    height: 265px; width:210px; padding:2px; margin:0 5px 15px; border:1px solid silver; background:#ffffff; display:inline; float:left; overflow:hidden;
}
div.allrecentlist div img {
    margin-bottom:5px;
}
</style>
<!-- Show All Posts Style End -->
<!-- Show All Posts Script Start -->
<div class='allrecentlist'>
<script type="text/javascript">
function recentpostslist3(json)
{
var defaultThumbnail = 'https://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/s72-c/maxlayout-pencil-blogger-no-image-2013.png';
var thumbnailSize = '210'; // 1600 = Largest Size of Image.

var i,j;
var entryUrl,entryLink,entryTitle,entryThumbnail;
var thumbnailSizeC = 's'+ thumbnailSize + '-c';

for (i = 0; i < json.feed.entry.length; i++)
{
for (j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}

entryUrl = json.feed.entry[i].link[j].href;//bs
entryLink = '<a href="' + entryUrl + '">';
entryTitle = json.feed.entry[i].title.$t;

if(typeof json.feed.entry[i].media$thumbnail != 'undefined') {
entryThumbnail = json.feed.entry[i].media$thumbnail.url;
} else { entryThumbnail = defaultThumbnail; }

document.write('<div>' + entryLink + '<img src="' + entryThumbnail.replace('s72-c',thumbnailSizeC) + '" alt="' + entryTitle +  '"></img></a>' +
entryLink + entryTitle + '</a></div>');
}
}
</script>
<script src="http://tip.maxlayout.com/feeds/posts/summary/?max-results=9999&alt=json-in-script&callback=recentpostslist3"></script>
</div>
<!-- Show All Posts Script End -->



แบบที่ 2 แสดงภาพตัวอย่างเป็นสี่เหลี่ยมผืนผ้า

สามารถปรับขนาดภาพได้ตรงโค้ดที่เขียนว่า
var image_width=200;
var image_height=120;
โดยเปลี่ยนตัวเลขความกว้าง (width) และความสูง (height) ได้ตามต้องการ
ซึ่งโค้ดที่ต้องนำไปใส่ในกล่อง Gadget คือ

<!-- Show All Posts Style Start -->
<style type='text/css'>
div.allrecentlist div {
    height: 265px; width:210px; padding:2px; margin:0 5px 15px; border:1px solid silver; background:#ffffff; display:inline; float:left; overflow:hidden;
}
div.allrecentlist div img {
    margin-bottom:5px;
}
</style>
<!-- Show All Posts Style End -->
<!-- Show All Posts Script Start -->
<div class='allrecentlist'>
<script type="text/javascript">
function recentpostslist3(json)
{
var defaultThumbnail = 'https://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/s72-c/maxlayout-pencil-blogger-no-image-2013.png';

 // 1600 = Largest Size of Image.
var image_width=200;
var image_height=120;

var const_width = parseInt(image_width);
var const_height = parseInt(image_height);
var const_max = Math.max(image_width,image_height);
var const_margin = '';
if(const_width == const_max){
const_margin = parseInt((image_height - const_max)/2) + 'px 0px 0px 0px';
}else{
const_margin = '0px 0px 0px ' + parseInt((const_width - const_max)/2) + 'px';
}

var thumbnailSize = const_max;

var i,j;
var entryUrl,entryLink,entryTitle,entryThumbnail;
var thumbnailSizeC = 's'+ thumbnailSize + '-c';

for (i = 0; i < json.feed.entry.length; i++)
{
for (j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}

entryUrl = json.feed.entry[i].link[j].href;//bs
entryLink = '<a href="' + entryUrl + '">';
entryTitle = json.feed.entry[i].title.$t;

if(typeof json.feed.entry[i].media$thumbnail != 'undefined') {
entryThumbnail = json.feed.entry[i].media$thumbnail.url;
} else { entryThumbnail = defaultThumbnail; }

document.write('<div><section style="width:' + const_width + 'px;height:' + const_height + 'px;overflow:hidden;">' +
    entryLink + '<img src="'+entryThumbnail.replace('s72-c',thumbnailSizeC)+'" class="postthumb" alt="'+entryTitle+'"' +
    'style="margin:' + const_margin + '"/></a></section>' +
'<p>' + entryLink + entryTitle + '</a></p></div>');
}
}
</script>
<script src="http://tip.maxlayout.com/feeds/posts/summary/?max-results=9999&alt=json-in-script&callback=recentpostslist3"></script>
</div>
<!-- Show All Posts Script End -->



อธิบายเพิ่มเติม

ตอนนำไปใช้เองก็ให้แทนที่ URL ในบรรทัดที่ 3 นับจากด้านล่างสุดของโค้ดจากเดิมที่เขียนว่า
http://tip.maxlayout.com
ให้กลายเป็น URL ของบล็อกคุณเองก็ใช้ได้แล้วครับ

นอกจากนี้สามารถสั่งให้เครื่องมือนี้แสดงแต่เฉพาะบทความจากป้ายกำกับอันใดอันหนึ่งที่ต้องการก็สามารถทำได้โดยเอาชื่อป้ายกำกับอันนั้นเขียนเติมลงไปใน URL เช่น
จากตัวอย่างด้านบนนี้ถ้าบล็อกที่ต้องการดังบทความมาแสดงคือ
http://tip.maxlayout.com
จะทำให้มีโค้ด URL ของบทความซึ่งถูกเขียนอยู่ในบรรทัดที่ 4 นับจากด้านล่างสุดก็คือ
http://tip.maxlayout.com/feeds/posts/summary/
แต่ว่าเมื่อต้องการแสดงแค่เพียงเฉพาะบทความจากป้ายกำกับที่มีชื่อว่า
Text Effect
ก็ต้องนำข้อความว่า
-/Text Effect
ไปเขียนต่อจาก URL เดิมดังนั้นจะได้ URL แบบใหม่คือ
http://tip.maxlayout.com/feeds/posts/summary/-/Text Effect
โดยต้องเขียนชื่อป้ายกำกับนั้นให้ตรงกันทั้งตัวพิมพ์เล็ก พิมพ์ใหญ่ และการเว้นวรรคจึงจะแสดงข้อมูลได้ครับ

ส่วนปริมาณบทความที่ถูกแสดงไว้ในเครื่องมืออันนี้สามารถตั้งค่าให้น้อยลงได้จากการแก้ไขที่ตัวเลข 9999 ให้เป็นตัวเลขจำนวนที่ต้องการได้เลยครับ

นอกจากนี้ภาพที่ถูกนำมาแสดงเมื่อบทความเหล่านั้นไม่มีรูปตัวอย่างก็คือ
https://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/s72-c/maxlayout-pencil-blogger-no-image-2013.png
ซึ่งสามารถแทนที่ URL นี้ได้ตามต้องการ


วิธีปรับลักษณะการแสดงผล CSS
สามารถปรับขนาดความกว้างยาวสูงและสีพื้นหลังระยะห่างต่างๆ ของบทความขนาดย่อเพื่อให้เหมาะสมพอดีกับบล็อกของแต่ละคนได้ครับ
โดยแก้ไขหรือเขียนเพิ่มเติมโค้ด CSS ลงไปให้อยู่ต่อจากสคริปต์
div.allrecentlist div {

ตัวอย่างเช่น
ปรับขนาดตัวอักษรให้ font เล็กลงก็เขียนโค้ดเพิ่มต่อท้ายสคริปต์ลงไปว่า
font-size:8px;

ตัวกำหนดความสูงของกล่องบทความตัวอย่างแต่ละอันคือ
height: 265px;

เพิ่มช่องไฟระหว่างกล่องสี่เหลี่ยมทำได้โดยแก้ไขตัวเลขของ
margin:0 5px 15px;
แนวตั้งคือ 5
แนวนอนคือ 15

Blogger: เมนูแสดงรายชื่อหัวข้อบทความแบบเลื่อนลง


3 ความคิดเห็น

วิธีสร้างกล่องแสดงรายชื่อหัวข้อบทความแบบเลื่อนลงแบบตัวอย่างข้างล่างนั้นสามารถทำได้ดังนี้

ตัวอย่างที่ 1



ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'รูปแบบ'

ขั้นตอนที่ 2. ให้เลือก 'เพิ่ม Gadget' แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว

<!-- Maxlayout.com Drop-Down Recent Posts List Start -->
<!-- DDRPL - Script Open -->
<script type="text/javascript">
function recentpostslist2(json) {
var allData = '<select style="width:100%;" onchange="location=this.options[this.selectedIndex].value;">' +
'<option>Click to choose a post</option>';
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = json.feed.entry[i].link[j].href;//bs
var entryTitle = json.feed.entry[i].title.$t;
allData += '<option style="width:210px;" value="' + entryUrl + '" title="' + entryTitle + '">' + entryTitle + '</option>';
}
document.write(allData + '</select>');
}
</script>
<!-- DDRPL - Script Close -->
<!-- DDRPL - URL Open -->

<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Blogger?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<!-- DDRPL - URL Close -->
<!-- Maxlayout.com Drop-Down Recent Posts List End -->


อธิบายเพิ่มเติม
ขณะนี้สคริปต์นั้นจะแสดงข้อมูลจากเว็บชื่อ
tip.maxlayout.com
ในป้ายกำกับชื่อว่า
Blogger
ซึ่งทั้งสองจุดนั้นถูกเขียนอยู่ใต้ข้อความว่า
<!-- DDRPL - URL Open -->
โดยสามารถแทนที่โค้ดทั้งสองจุดนั้นลงไปได้เลย
ก็จะพบว่าเครื่องมือนี้แสดงข้อมูลจากบล็อกของคุณแทน

นอกจากนี้ถ้าหากลองสั่งลบคำว่า
/-/Blogger
แล้วสั่งแทนที่แค่เฉพาะ URL ชื่อบล็อกซึ่งก็คือโค้ดว่า
tip.maxlayout.com
ก็จะทำให้เครื่องมือนี้กลายเป็นแสดงรายชื่อบทความจากทั้งหมดในบล็อกแทน

ส่วนผู้ที่ต้องการแสดงเครื่องมือนี้หลาย ๆ อันในบล็อกแห่งเดียวกันก็ให้แก้ไขเฉพาะโค้ดที่อยู่ระหว่าง <!-- DDRPL - URL Open --> ไปจนถึง <!-- DDRPL - URL Close --> โดยนำมาเขียนต่อกันก็พอแล้วซึ่งอาจเขียนชื่อกำกับไว้ด้วยเพื่อให้แยกแยะได้สะดวกตัวอย่างเช่น ให้ลองแทนที่ตำแหน่งดังกล่าวแบบนี้
<!-- DDRPL - URL Open -->
<span style="font-weight:bold;">All Post</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<br/><br/>
<span style="font-weight:bold;">Blogger</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Blogger?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<br/><br/>
<span style="font-weight:bold;">Photoshop</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Photoshop?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<br/><br/>
<span style="font-weight:bold;">Lightwave</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Lightwave?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<!-- DDRPL - URL Close -->

ซึ่งจะให้ผลดังตัวอย่างข้างล่างนี้

ตัวอย่างที่ 2

All Post

Blogger

Photoshop

Lightwave