แจกธีม หรือTemplate blogger รูปแบบ MagazinePlus




1. อันดับแรกไปทำความเข้าใจ การติดตั้งธีม หรือTemplate blogger 

2. ไฟล์ที่ท่านได้โหลดไป สามารถอัปขึ้นแม่แบบได้เลย โดยไม่ต้องทำการแตกไฟล์ เหมือนที่โหลดเว็บอื่นมา
การอัปดูตัวอย่างข้างล่างนี้คัฟ

3. เส็จแล้วก็ลองกดดูบล็อกนะครับ

4. การเปรี่ยนรูปสไลด์ด้านบน

อันดับแรกเข้าไปที่ แก้ไข HTML  กดCtrl+F แล้วค้นหาคำนี้ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2xljhrhw2dB3RRVDAYTwy_eF0gOyo-HcVtUG1Z3fZ9lH8xPPXJYN0MGslhLy8IVQkPAfk9RZF5gSOJI6f6Pcja5ZnbElvDLyotBd-HxEq0-hGawgmL3SsEsGJhGqODZIjCt0GMG9zVYOB/s1600/1.jpg  เมื่อเจอแล้วก็แก้ไขเป็นURL ของรูปของคุณแทนที่ URL นั้นไปเลยครับ

อธิบายเพิ่มเติม ข้อ 4 ซึ่งจะเจอตาม code ด้านล่างนี้ครับ รูปภาพจะมีอยู่ 5 รูปนะ สีแดงคือ URL ของรูปภาพ สีน้ำเงินตัวหนาคือ titleตรงรูปภาพ สีน้ำเงินตัวเล็กคือคำอธิบายตรงรูปภาพแหละครับ
<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2xljhrhw2dB3RRVDAYTwy_eF0gOyo-HcVtUG1Z3fZ9lH8xPPXJYN0MGslhLy8IVQkPAfk9RZF5gSOJI6f6Pcja5ZnbElvDLyotBd-HxEq0-hGawgmL3SsEsGJhGqODZIjCt0GMG9zVYOB/s1600/1.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 1 title</a>
</h3>
<p>
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com. 
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxD57qYh_-WDDe2GPRkke6NEqAc0JrZ0QpDc7cCp8FITKZfTjHOgNuHXHgWB8ssZzRJ7Er39OaKwA4Z0WBSe3rxfXcviP3ZXmldaT44c1hfzsW1wgiPbAtqDID4Mg_-7J5wLw_hp_osElb/s1600/2.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 2 title</a>
</h3>
<p>
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com. 
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlSfxqUP_XPCrSZZsb0KXQ6tWUvE6O0yJLGvsxC__zxZBmB34zvIZHKRGBYYLVrop81ZJODjcXtlDDAK42dTHsUNtY2KnwRoOA9Y9Eb16oir_5FwE3NsgxXd46CiAMZg-G9a_JP0WTTOKE/s1600/3.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 3 title</a>
</h3>
<p>
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com. 
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZz31APXj9uCF3aN6Ka0qkHzDbNmYkPMaWcT2L7YEnLwqR2sSpfEixz1QV5dgB5sOBstKfjz4S_or722r9_iExTDG8kgBkJaG3ZuH1gJSMmvkSzHXY-FeaSnw4AQjzrBkmJgmjjVZaYoH2/s1600/4.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 4 title</a>
</h3>
<p>
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com. 
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj53shNUq9c6KNil1oorwf0xXpm9vTtAN9cnRYk0U11r6oc-4cFZzdzvDC5g9uzXRYF5rA3BpofXEEIBxAfdNtnQ7n0X0rElvsHoYIrIpFaHBRz-JUxWRwREI_JWSeYKePv5Mb2S9OM9r_z/s1600/5.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 5 title</a>
</h3>
<p>
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com. 
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 5 Code End -->

</div>

5. การแก้ไขแถบเมนู

อันดับแรกเข้าไปที่ แก้ไข HTML  กดCtrl+F แล้วค้นหาคำที่อยู่ตรงเมนูนั้นเช่น Business เมื่อเจอแล้วก็แก้ไขเป็นคำที่ต้องการเลย และก็ใส่ URL หรือลิ้งค์ แทนที่ เครื่องหมาย # ด้วยนะ เช่น <li><a href='http://anurak-it-health-beauty.blogspot.com/'>การสร้างบล็อก</a></li>

อธิบายเพิ่มเติม ข้อ 5 ซึ่งจะเจอตาม code ด้านล่างนี้ครับ สีแดงคือเมนูหลัก สีน้ำเงินคือเมนูย่อยจากสีแดง สีม่วงคือเมนูย่อยจากสีน้ำเงิน
<ul class='menus menu-secondary'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>

<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>

<li><a href='#'>Featured</a></li>

<li><a href='#'>Health</a>
<ul class='children'>
<li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>

<li><a href='#'>Uncategorized</a></li>

</ul>
</div>
</div>
<div style='clear:both;'/>

6.  วีธีการแก้ไข Social Buttons ต่างๆ
เข้าไปที่ แก้ไข HTML  แล้วค้นหา กดCtrl+F คำว่า <div class='social-profiles-widget'>
เพียงแค่แก้ไขตรง URLสีน้ำเงิน เองครับ

อธิบายเพิ่มเติม ข้อ 6 ซึ่งจะเจอตาม code ด้านล่างนี้ครับ
<div class='widget-container'>
<div class='social-profiles-widget'>
<h3 class='widgettitle'>Social Profiles</h3>
<a href='http://twitter.com/' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLrp4Z0bJ-n91PygusY8ii6frvZBftfvZkXSlX-b0xuz-hL_H5CXFLdKc3jU2CmY872PTE0caQCPiS0AV_zPTRO7M5klD4us6nGRwxv-Mmi9dQVtGO1doG2ZQSGf8toOnK4BzZvDHRSgA/s1600/twitter.png' title='Twitter'/></a><a href='http://facebook.com/' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8v95q-iM-wOx8Bj-mizVmd84M-8awh2omzni2ABbJwGDpkFC88GWl6p2UIloD0iH6PRTm3-C5_RJt_0WZ1odPNrJSdRRglQqd0sbym9ffzCmQ4094fPKZ1O1wr5ZiqbrZoS9P6sq2rgs/s1600/facebook.png' title='Facebook'/></a><a href='https://plus.google.com/' target='_blank'><img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu0DRqYZY-aFphthCdVxRtjWmgn58AjxR7ufgbrqu2nPsQr0qyCYsZILAlUR1DLu3MFgn1pYklNGFfe7aQs5BBXDMJPRIH8BpALaI8G3IyeqepzsVWVshlrqmkQHbCxqrC30uqW3F6q_E/s1600/google.png' title='Google Plus'/></a><a href='http://instagram.com/' target='_blank'><img alt='Instagram' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGsXDl8UC4st6OkSp8ofZfXzmvr71JJ-gdqGnj5P1crGRq-V4a8uhrLiAFgE8BWNXW8hN28BfXZqdKKYjYVimKZ6artzGiwZ6SeeNZqDsXSD1x0oxJLe6Nxajl4iFau1YpCOX7ekLXtw/s1600/instagram.png' title='Instagram'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9wgjH3i728Liq0nNsJyO1oyA4Yj2qTlZwxGzBQI-5pIePaMemHD7dkN0VlyYrrhMacKkg_CsEfPMA0r8idCPlG8aJqDf0qn0rOmlxYmg7Aw3pe0PwBRBtsORJ6g0B9dNc3IF6i8WcOzI/s1600/rss.png' title='RSS Feed'/></a><a href='mailto:your@email.com' target='_blank'><img alt='Email' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vzk44lvVnFylYevcnF_URosxPafR8nUKgz-0kRZSg2QCqAVlV_7R89yUGsI08OHJhYLt6HPV7X2pKx0XAXEmHKrOAcZBOihvHF_sjVNyasyAlEg9XxVlMxkyIHq0wrx_Hdi_W8m0rbw/s1600/mail.png' title='Email'/></a>
</div>
</div>
<div style='clear:both;'/>

ไม่ยากเลยเนอะ สอบถามเพิ่มเติม ให้คอมเม้น ใต้บทความนี้ครับ

5 ความคิดเห็น:

  1. ผมหัดทำบล๊อกอยู่ แต่ไม่เก่งครับ อยากได้ความรู้ ไม่ทราบว่า มีแหล่งความรู้มาจากไหนครับ แล้วอีกอย่างนึง ภาพที่เป็นสไล์ด น่ะครับ ที่ตามตัวอย่างให้แก้รูปได้ ไม่ทราบว่า ถ้าให้มันสามารถ กดแล้วลิงค์เข้าไปบทความเลย ทำยังไงเหรอครับ แล้วมี แทมเพลต เกี่ยวกับกีฬาไม๋ครับ พอดีผมทำแนว ลดความอ้วน อยากเผยแพร่ จะสามารถมีแนวทางเผยแพร่ แล้วทำ google adsend ยังไงครับ

    ขอบพระคุณครับ ตอบแค่คร่าวๆก้ได้ครับ เกรงใจ แต่ไม่รู้จะถามใครจริงๆ

    ตอบลบ
    คำตอบ
    1. แหล่งความรู้เนี้ยมีเยอะครับ ลองค้าหาจาก google ดูนร้า คราฟ
      ส่วนใส่ลิ้งตรงรูปสไลเนี้ย ให้ดูตรงหน้า URL ของรูปนะ จะเห็น # ให้ใส่ลิ้งแทนที่ของ # เลยครับ
      และส่วน google adsend เนี้ย ควรจะเขียนบทความใหม่ๆให้เยอะๆก่อนนะครับที่ไม่ซ้ำใคร หรือเขียนเป็นภาษาอังกริดก็ได้เพราะตอนสมัคร google adsend จะผ่านง่ายครับ เมื่อผ่านแล้ว ก็เขียนภาษาไทยได้ล่ะ และไม่ผิดกดหมายก็พอไม่งั้นโดนระงับบัญชี google adsend แน่ๆ

      ลบ
  2. ผมเอาโค๊ดภาพขึ้นวางบนสไลด์ไม่ได้ครับ ภาพไม่ปรากฏเลย

    ตอบลบ
    คำตอบ
    1. ขนาดรูป ต้อง 930x300 ครับ หรืออาจจะใส่ผิดครับ ต้องอยู่ระหว่าง ' ' สัญญาลักนี้นะครับ

      ลบ
    2. ทำได้แล้ว ขอบคุณมากๆครับ

      ลบ