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





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

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

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

4. การเปรี่ยนรูปด้านบน

อันดับแรกเข้าไปที่ แก้ไข HTML  กดCtrl+F แล้วค้นหาคำนี้ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzUV1LCoOWb7_E6ZcxtxSDGAc_3b7ZJzlkrZMO8piQdOoIuopvXLWlBfKaV1T1AxyNYtS-LpaX9BXUg7VB_y0Ddk3mBvHhnG2oUnJ-k_6W6E_CIX7aItiKqHmqxtSFYV6Epzp5k5O_KBU/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/AVvXsEhzUV1LCoOWb7_E6ZcxtxSDGAc_3b7ZJzlkrZMO8piQdOoIuopvXLWlBfKaV1T1AxyNYtS-LpaX9BXUg7VB_y0Ddk3mBvHhnG2oUnJ-k_6W6E_CIX7aItiKqHmqxtSFYV6Epzp5k5O_KBU/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/AVvXsEhI8ivYXDr2_aD72Ix4lYnizD6PZsOl097MzC4kuklJt5a5AdgypPYhynRaXslMxacXJXxRTTtDYWwg38TTDYuvTYgZ0zgrqK5qp7YJCHVwa3KvHFPqbu_fbEGq6ePF5YswXNgklKLKids/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/AVvXsEjU8fG-Gyh1K3su5YcohUQ6TKBb1IGSHR1OnAQrQWw1HFrYAY9MRyTlM48eSE1dbXI3o4HdW66AVwka6w3WrgbcFBWqged5QyyN5a0wgQq7nmEj7D3SIg6Di4EHES3a-eC9kyLVnul8Gsg/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/AVvXsEhqTWomZ3KIjStv-LUsVcEn2H0MxZhte0pPjH9hXU0MfrOfqNKJEHIeB_Ar8PD2iJJZnAf_1qsPDPzCMZITRqqfe9avDw7rVmUCwxwQofnbvlIqM7R7TNm_aNtv2KPKoVUN1XZ9P5sVH7U/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/AVvXsEinDeEB7T8RvAByV5J1_crcwH_TdGbkFGitLnihEANzADs_KPDATV0q0_hVdwP3yYO9LqnilRIwu8lKAsX5BjA8LRVwRk6qNXXMT_gsnbbFm4Objfobai-kg-eB4YEIPvGJoi4xFm043Zs/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>

อธิบายเพิ่มเติม ข้อ 4 ซึ่งจะเจอตาม 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;'/>

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

เขียนโดย
ป้ายกำกับ: ,

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)