Cara membuat halaman sitemap (daftar isi) blog otomatis

Apa sih fungsi Halaman Sitemap ? Apakah halaman sitemap memang merupakan halaman (anggaplah) wajib untuk sebuah situs / blog ? Sebelum membahas tentang bagaimana cara membuat sitemap blog secara otomatis, sedikit akan kita tinjau mengenai apa itu Sitemap blog.

Dalam blogging, kata sitemap digunakan untuk mewakili 2 jenis konten. Pertama, Sitemap XML, yaitu sebuah file XML yang berisi URL-URL postingan blog. 

Selain untuk Sitemap XML, kata ini juga sering kali digunakan untuk mewakili Halaman daftar isi blog. Dengan kata lain, kata sitemap juga bisa mengarah pada halaman html yang berisi link menuju ke semua postingan blog. Halaman daftar isi blog ini bisa kita sebut sebagai Halaman Sitemap.

Antara Sitemap XML dan Halaman Sitemap jelas berbeda. Sementara Sitemap XML merupakan sebuah file XML, Halaman Sitemap tidak ubahnya seperti halaman web pada umumnya.

Dilihat dari fungsinya, sitemap xml dan halaman sitemap memiliki fungsi yang sama yaitu untuk memudahkan crawler mesin pencari dalam menjelajahi / mengindeks halaman blog.

Jika saya sudah melakukan submit sitemap xml di google search console, apakah saya juga perlu membuat halaman sitemap ?

Proses penambahan sitemap XML tidak akan banyak membantu untuk keperluan indeks halaman yang akan diterbitkan selanjutnya. Dengan kata lain, crawler google tidak melakukan scan ulang terhadap file sitemap XML yang ditambahkan secara berkala.

Untuk lebih jelasnya, saya misalkan blog anda memiliki 20 postingan yang belum terindeks oleh google. Ketika anda menambahkan URL sitemap XML di google search console, crawler google hanya akan membaca file sitemap ini satu kali. Postingan yang akan anda terbitkan selanjutnya tidak akan secara otomatis ditambahkan pada daftar konten yang tersubmit.

Fungsi Halaman Sitemap

Untuk keluar dari keterbatasan diatas, pembuatan halaman sitemap menjadi langkah yang sangat tepat. Sedikit mengulang apa yang telah disampaikan pada halaman utama belajar SEO, cara crawler mesin pencari dalam menemukan halaman-halaman baru adalah dengan mengikuti link-link pada suatu halaman yang akan membawa mereka pada halaman lainnya. Disinilah kekuatan Halaman sitemap bekerja. Dengan membuat halaman sitemap, kita �memberikan jalan� kepada crawler mesin pencari untuk dapat meng-crawl semua postingan / konten blog dengan lebih mudah.

Cara membuat halaman sitemap

• 1Pertama, buat halaman statis baru.
  
  
  
• 2Beri judul "Daftar isi" atau "Sitemap" (atau apapun yang anda kehendaki). Copy dan paste semua kode dibawah ini kedalam Editor Laman dengan mode HTML.
  
  
  Kode (CSS & Javascript) - Update 16 April 2020

  <!-- Sitemap by wiBlogger.com -->

  <style>

  #w-sitemap-wrapper {font-size:13px}

  #w-sitemap-wrapper li {position:relative;padding:.385em 0 .385em 6.923em;border-top:none;border-bottom:1px solid #f6f6f6}

  #w-sitemap-wrapper span {position:absolute;left:0;color:#bd8b56}

  #w-sitemap-wrapper a {font-weight:bold}

  #w-sitemap-loading-msg {height:100px;line-height:100px;text-align:center;font-weight:bold;letter-spacing:1px;font-size:18px;color:#bbbbbb}

  </style>

  
  

  <script>

  (function(c,m){var F=function(s){return s.replace(/&(?!(amp|gt|lt|quot|apos);)/g,function(a){return"&amp;"}).replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;")};var h=window;var l=document;var e="w-sitemap-wrapper";var g="w-sitemap-loading-msg";var b=h.location;var n=b.protocol;var f=b.hostname;var k=0;l.write("<div id='"+e+"'><ol></ol><div id='"+g+"'>"+m+"</div></div>");var a=l.getElementById(e);var d=l.getElementById(g);var j=l.getElementById(e).getElementsByTagName("ol")[0];function i(o){var p=l.createElement("script");p.src=n+"//"+f+"/feeds/posts/summary?alt=json-in-script&callback=wijs_get_sitemap&start-index="+o+"&max-results=150";a.appendChild(p)}h.wijs_get_sitemap=function(E){var A=E.feed.entry;var u=parseInt(E.feed.openSearch$totalResults.$t);var x=A.length;var w="";for(var s=0;s<x;s++){var o=A[s];var C=o.title.$t;var p;var D=o.link;var y=D.length;for(var r=0;r<y;r++){if(D[r].rel==="alternate"){p=D[r].href;break}}var z=o.published.$t;var q=z.substring(0,4);var t=z.substring(5,7);var v=z.substring(8,10);var B=c.replace("dd",v).replace("mm",t).replace("yyyy",q);w+="<li><span>"+B+"</span><a href='"+p+"'>"+F(C)+"</a></li>"}j.innerHTML+=w;k+=x;if(k<u){i(k+1)}else{d.parentNode.removeChild(d)}};i(1)})("dd/mm/yyyy","Loading......");

  </script>

• 3Publikasikan laman.
  
  
  

Hasil

Hasil pembuatan sitemap dengan kode diatas kurang lebih seperti gambar dibawah (Warna link akan mengikuti style / CSS blog). Anda juga bisa menambahkan paragraf awal atau akhir pada konten sitemap.

Info:
Pada script diatas, label setiap postingan sengaja tidak saya sertakan. Hal ini untuk menghindari resiko terdeteksi spam oleh crawler mesin pencari (terlalu banyak duplikat link).

Tambahan

Pada kode diatas, beberapa bagian yang ditandai dengan warna merah bisa anda sesuaikan.

• 13px
  Ukuran font
• 18px
  Ukuran font text loading
• #f6f6f6
  Kode warna HTML untuk border
• #bd8b56
  Kode warna HTML untuk waktu publikasi
• #bbbbbb
  Kode warna HTML untuk text loading
• Loading......
  text yang ditampilkan pada proses loading
• dd/mm/yyyy
  Format waktu publikasi. dd adalah tanggal, mm adalah bulan, yyyy adalah tahun. Misal, jika format ini anda ganti menjadi dd-mm-yyyy, hasil akan berupa 28-01-2018. Selain pembatas, anda juga bisa menyesuaikan urutan data.

Menambahkan sitemap pada menu navigasi blog

Agar halaman sitemap ini dapat dengan mudah ditemukan oleh crawler mesin pencari, langkah selanjutnya yang sangat penting adalah menambahkan link halaman yang telah dibuat ke navigasi blog. Sebagai contoh, link sitemap blog wiBlogger.com ini saya letakkan pada navigasi halaman dibagian bawah blog (footer).

Setiap tema (template) memiliki struktur dan dukungan widget yang berbeda, ikuti panduan tema yang anda gunakan untuk menambahkan link sitemap ke navigasi blog.


Tips:

• Untuk mempercepat proses indeks postingan, selalu luangkan waktu untuk melakukan fetch as google setiap kali anda menerbitkan postingan baru.
• Terkait fitur Fetch as google di google search console, anda bisa melakukan fetch halaman sitemap ini dengan memilih opsi mode pengindeksan "Rayapi URL ini dan link langsungnya".
  
  
  
  
  Direkomendasikan untuk melakukan hal ini setidaknya satu bulan sekali untuk menjaga agar setiap postingan anda tetap terindek oleh google. 

Sumber : wiblogger.com

http://jasa-akuntansi-bandung.blogspot.com/p/jasa-akuntansi.html
https://omega99data.blogspot.com/
https://ronketodiet.blogspot.com/
https://ronmanagedwp.blogspot.com/

[UPDATE] Cara Membuat Contact Form Blogger pada halaman statis

 Contact form adalah sebuah formulir yang bisa digunakan pengunjung sebagai sarana untuk berkomunikasi secara pribadi lewat email dengan pemilik blog / Website. Secara umum formulir kontak terdiri dari beberapa kolom isian seperti nama, email, dan pesan yang ingin disampaikan.

Keberadaan Contact form pada sebuah situs web / blog. Bisa dijadikan sebagai indikator bahwa situs tersebut memiliki keseriusan dalam pengelolaan, sehingga dapat meningkatkan kepercayaan pengguna terhadap apa yang ada di dalamnya.

Sebenarnya Blogger.com sudah menyediakan fitur / layanan formulir kontak gratis yang bisa dipasang sebagai widget contact form di Blogspot. Tapi, sepertinya jarang sekali kita jumpai blog yang menggunakan widget formulir kontak. Mereka lebih memilih untuk membuat contact form pada halaman statis, meskipun harus menggunakan layanan contact form dari pihak ketiga.

Pada tutorial kali ini saya akan menjelaskan cara membuat / memasang Contact Form Blogger pada halaman statis blog. Silahkan ikuti langkah-langkah berikut ini.

1. Masuk Blogger, pilih Blog yang ingin Anda buatkan halaman contact form.

2. Pilih menu Laman (Pages), kemudian klik Laman baru.

3. Buat judul laman, misalnya Contact Us, Contact Me, Hubungi Kami, atau yang lainnya.

4. Masuk mode HTML (sebelah compose), kemudian copy dan pastekan kode di bawah ini sebagai isi Laman.

<script>
var blogId = '134777113111111111';
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
var contactFormEmptyMessageMsg = 'Bidang pesan harus diisi.';
var contactFormInvalidEmailMsg = 'Alamat email harus valid.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<div class="Form">
<form name="contact-form">
<p></p>
Nama
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Pesan
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<p></p>
<div style="max-width: 400px; text-align: center; width: 100%;">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>

5. Ganti kode yang ditandai warna merah dengan kode blogId milik blog Anda. Untuk mendapatkan kode tersebut, Anda bisa melihatnya pada bar address di halaman manapun dari dasbor blog Anda. Lihat contohnya pada gambar di bawah ini.

6. Nonaktifkan kolom komentar, kemudian langsung publikasikan halaman contact form pada mode HTML.

7. Lihat atau kunjungi halaman contact form Anda, kemudian cobalah kirim pesan untuk mengetahui apakah formulir kontak bekerja sesuai dengan yang diharapkan

---

Catatan:

• Selama proses pembuatan halaman contact us / contact form, sebaiknya Anda tidak mengubah atau bergonta-ganti mode penulisan.
• Jika Anda ingin melakukan pengeditan setelah halaman contact form dipublikasikan, usahakan agar langsung masuk pada mode HTML.

UPDATE!!!
Lama tidak login Blogger, ternyata banyak perubahan baru pada Blogger. Dan artikel ini salah satu yang terkena dampaknya, Contact Form Blogger tidak bisa mengirim pesan.

Untuk mengatasi hal ini, kalian bisa bisa gunakan salah satu dari dua cara berikut

Pilihan Pertama
Jika anda ingin menggunakan / mempertahankan kode diatas (bagi yang sudah mengikuti tutorial ini sebelumnya). Maka anda harus menambahkan widget contact form / Formulir kontak pada bagian sidebar.

Kemudian tambahkan kode css berikut ke dalam HTML template untuk menyembunyikan tampilan widget Contact Form pada bagian sidebar.

#ContactForm1{display:none;}

Dengan cara seperti ini Blogger Contact form pada halaman sastis akan berfungsi kembali.

Pilihan Kedua
Jika anda tidak ingin menambahkan widget contact form Blogger pada sidebar atau lainnya. Silahkan hapus semua kode di atas, kemudian ganti dengan kode berikut

<div class="Form">
<form name="contact-form">
<p></p>
Name
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Message
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" />
<p></p>
<div style="max-width: 400px; text-align: center; width: 100%;">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'xxxxxxxxxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dxxxxxxxxxxxxxxxxx','//bakuloreg.blogspot.com/','xxxxxxxxxxxxxxxxx');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'xxxxxxxxxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Selanjutnya ganti semua kode xxxxxxxxxxxxxxxxx dengan ID blog anda (semua ada 4).

Ganti juga kode //bakuloreg.blogspot.com/ dengan alamat blog anda.

Untuk catatannya sama seperti di atas. Sekian dan mudah - mudahan tidak ada masalah lagi kedepannya. 

Sumber : bakuloreg.blogspot.com

http://belajar-cara-membuat-website.blogspot.com
http://jasa-akuntansi-bandung.blogspot.com/p/jasa-akuntansi.html

http://www.leetchi.com/c/life-contribution
https://ronwordpresshostingplans.au-syd.mybluemix.net/
https://dev.azure.com/genpromo/_git/Wordpress%20Hosting%20Plans
https://dev.azure.com/genpromo/Wordpress%20Hosting%20Plans/_wiki/wikis/Wordpress-Hosting-Plans.wiki/1/Cheap-Web-Hosting
https://www.twitch.tv/genpromo
https://omegaquartos.wixsite.com/healthwellness
 

Cara Back Up Data Blogspot

Meski hal ini terlihat sepele, tapi sangat penting untuk dilakukan oleh anda pengguna Blogger / Blogspot. Terlebih lagi jika anda cukup aktif membuat posting baru setiap hari di blog kesayangan anda, tentu setiap seminggu sekali atau setiap sebulan sekali perlu untuk mem-back up data blog anda.
Hal itu dilakukan untuk menghindari hal-hal yang tidak diinginkan oleh anda. Misalnya tiba-tiba blog di hapus pihak Blogger. Atau mungkin anda lupa pasword untuk log in ke akun Blogger. Atau mungkin yang lainnya.

Kebetulan blog saya Cara Ririn Blogspot itu sudah di back up 70%. Sisanya tidak bisa diselamatkan, yakni sekitar 100 artikel hilang, karena blog tersebut di hapus oleh pihak Google/Blogger. Tentu anda tidak menginginkan hal serupa kan? Untuk itu, sebaiknya lakukan back up secara berkala. Jangan sampai blog anda di hapus duluan oleh pihak blogger.
Dalam kesempatan kali ini saya akan share tentang tata cara melakukan back up. Utamanya pada platform Blogger / Blogspot, produk dari Google.

Cara Back Up Data Postingan Blogspot

1. Silahkan log in ke akun Blogger anda di url ini www.blogger.com

2. Silahkan masuk ke Dashboard, kemudian pilih Menu Settings/Setelan, setelah itu pilih sub menu Lainnya/Other.
3. Pada Alat Blog, silahkan klik tulisan Eksport Blog
4. Silahkan klik tombol Unduh Blog
5. Pilih opsi Save File dan kemduian klik tombol Ok

Cara Back Up Data Template Blogspot

1. Untuk memback up template, silahkan masuk ke Dashboard. Pilih menu Template
2. Silahkan klik tombol Cadangkan / Pulihkan
3. Langkah berikutnya, silahkan klik tombol Unduh Template Lengkap
4. Pilih opsi Save File, baru kemudian silahkan klik tombol Ok
 

Keterangan:
(i) Back up data postingan blog, itu kita mendownload data-data postingan beserta komentar-komentar pengunjung nya juga ikut terdownload. Format file yang di unduh adalah XML
(ii) Back up data template blog, itu kita mendownload data template blog secara lengkap. Data template ini meliputi widget yang terpasang, kode-kode script, dan masih banyak lagi.
Demikian informasi yang bisa sampaikan untuk anda tentang Cara Back Up Data Blogspot. Semoga bisa bermanfaat.

Sumber :  cara-ririn.com/
http://cara-buat-website.com/konsultan-bisnis

Tutorial Lengkap Blogger Store v2.0

Ini Blogger Store v.2 blogger template terbaik 2012 yang pernah dibuat. Hadir dengan desain segar lebih elegan, sederhana dan segar. Keindahannya bisa Anda lihat dalam pola latar belakang pada tubuh dan konten utama dikombinasikan dengan warna latar belakang yang sesuai.

Live Demo | Download Template

Installing and Customize Blogger Store v.2.0

INSTALL THE TEMPLATE

Download the file, extract file to spesific folder on your computer, login to your blogger account and select one blog that will be installed with this template, click on template menu and point your eyes to upper right corner, you will see Backup/Restore options.. Click that button and select the XML file from your directories and click upload.

After the template installed succesfully, now it�s time to start a costumizations..

CUSTOMIZE THE TEMPLATE

1. Shopping Cart Setting

The code for Shopping Cart setting is appear after opening  <head>, it look like :

<script type='text/javascript'> //<![CDATA[ /* SIMPLE CART SETTING >>>>>>>>>>>>>>>>>>>>>>>>*/ simpleCart.email = 'rifkiblogger@gmail.com'; simpleCart.checkoutTo = PayPal; simpleCart.currency = USD; simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment',  'decrement','Total']; //]]> </script>

simpleCart.email
Replace with your email address.

simpleCart.checkoutTo
It have three payment method options, Paypal, GoogleCheckout and Email method. But for blogger only can using Paypal and GoogleCheckout only because using Email methode it required PHP code.

simpleCart.currency
You can set the currency by replace this line with your currency, sample usage if you using Poundsterling Currency:

simpleCart.currency = GBP;

List of available currency is located on download folder. and specifically for Indonesian Rupiah you can set to IDR, but it just a fake because Indonesian Rupiah currently not listed on paypal.

simpleCart.cartHeaders
No required any customize here.

2. Customize Background and text

This template is support for Advanced Blogger Template Designer and available for 3 customizations:

a. Body Background Color

b. Main Menu Background Color

c. Text Link Color

d. Blog Description Color

e. ShoppingCart Border Color

f. ShoppingCart Background Color

Now lets customize yor template color scheme, click Customize and you will redirect to Blogger Template Designer. You can see the option on screenshot below :

3. Dropdown Menu and Social Menu

I�m using jQuery superfish menu for drowpdown menu, superfish make it have smooth animate.

a. Top Dropdown Menu.

For edit link on top menu, find code like this :

<ul id='top-nav'> <li><a href='#'>Home</a></li> <li><a href='#'>Category</a>     <ul class='sub-menu'>     <li><a href='#'>Category 1</a></li>     <li><a href='#'>Category 2</a></li>     <li><a href='#'>Category 3</a></li>     </ul> </li> <li><a href='#'>Contact</a></li> <li><a href='#'>About</a></li> </ul>

b. Main Dropdown Menu.

<ul class='nav'> <li><a class='current' href='/'>Home</a></li> <li><a href='#'>Product Category</a>     <ul>     <li><a href='#'>Camera</a></li>     <li><a href='#'>Gadget</a></li>     <li><a href='#'>Electronic</a></li>     <li><a href='#'>Phone</a></li>     </ul> </li> <li><a href='/p/sample-page.html'>Sample Page</a></li> <li><a href='#'>How To Use ?</a></li> <li><a href='#'>Get it !</a></li> </ul>

c. Social Menu

<ul id='top_social'> <li class='social_facebook'> <a href='#' tooltip='facebook'><span>facebook</span></a></li> <li class='social_twitter'> <a href='#' tooltip='twitter'><span>twitter</span></a></li> <li class='social_linkedin'> <a href='#' tooltip='linkedin'><span>linkedin</span></a></li> <li class='social_rss'> <a href='#' tooltip='linkedin'><span>linkedin</span></a></li> </ul>

4. Featured Content

As you know my framework is using Automatic Slider or Featured Content on all my template with JavaScript, this is a new revolutions for blogger.

How to activate the slider?

For default it will showing your latest post, and you can change to showing your post by spesific label/category or showing post from another blog. I�m using two following code for it.

<script type='text/javascript'> //<![CDATA[ random = true; product_image = new Array(); product_image[0] = "/noimage.png"; // Image URL for product wich have no a thumbnail. product_image_width = 110; // Product image width. product_image_height = 110; // Product image height. product_image_number = 9; // Value to show item. //]]> </script>

and

<script src='/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=featured_product' type='text/javascript'/>

How to make it showing your post by spesific label/category?

<script type="text/javascript" src="/feeds/posts/default/-/YOUR LABEL HERE?orderby=updated&amp;alt=json-in-script&amp;callback=featured_product"></script>

How to displaying post from another blog?

<script src='BLOG URL/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=featured_product' type='text/javascript'/>

POSTING

After  finished with customizable templates now is the time to try to create a post.

Notes : This template is required template post for best result.

1. Create a template post.

Go to Setting and select Post and Comments options, copy the template post bellow to your template post field.

<div class="item_image"> <img border="0" class="item_thumb" src="product_image.jpg" /> <span class="item_price">$00.00</span> </div> <div class="item_Description"> Descriptions... </div>

2. Create a Post

Now lets start to create one test post.

Step 1. Create Product Title

Give the title for this post on Post Title field. Example : Product 1.

Note : this title will used for product name on ShoppingCart, so i suggest to create short title.

Step 2. Create Product Image and Thumbnail

Upload an image as usual, set the field to HTML and copy the image URL, then paste it to your template post, recommended to use square image size ex : 140�140

Example :

<div class="item_image"> <img border="0" class="item_thumb" src="http://example.com/product_image.jpg" /> </div>

Step 3. Set The Price

Set your product price using span tag after image.

Example :

<div class="item_image"> <img border="0" class="item_thumb" src="http://example.com/product_image.jpg" /> <span class="item_price">$00.00</span> </div>

Step 4. Product Descriptions

Give a description for your product by using div tag.

Example :

<div class="item_Description"> Mauris sit amet orci arcu, nec imperdiet quam. Praesent luctus orci sit amet lectus accumsan id auctor purus rhoncus. In lorem dui, bibendum sit amet tempor vitae, tincidunt eu nulla. </div>

Step 5. Publish

check back all the code from your post and make sure everything is arranged properly. And whole should look like this

<div class="item_image"> <img border="0" class="item_thumb" src="http://example.com/product_image.jpg" /> <span class="item_price">$00.00</span> </div> <div class="item_Description"> Mauris sit amet orci arcu, nec imperdiet quam. Praesent luctus orci sit amet lectus accumsan id auctor purus rhoncus. In lorem dui, bibendum sit amet tempor vitae, tincidunt eu nulla. </div>

And then click publish.

Bagaimana cara mengaktifkan link 'Read more' atau 'More info' pada template blogger store v2 yang berada di bawah gambar produk agar bisa masuk pada halaman penjelasan produk?

1. Masuk ke bagian edit html template anda
2. Jangan lupa centang dulu tulisan 'expan widget template' yang ada di bagian kanan atas pada halaman edit html untuk memunculkan kodenya.
3. Cari kode di bawah ini dengan menekan Ctrl + F dan paste-kan pada colom find agar mudah menemukannya :

<a class='more_info' href='javascript:;'>More Info</a>

     4.  Kemudian ganti kode di atas dengan kode di bawah ini :

<a class='more_info' expr:href='data:post.url'expr:title='data:post.title'>More Info</a>

     5.  Terkhir 'save' dan lihat hasilnya pasti sukses!

Bagaimana cara menghapus tombol read more / more info dan add to cart?

Temukan kode dibawah ini dan hapus (terlebih dahulu centang tanda 'expand widget') :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<a class='item_add' href='javascript:;'>Add to Cart</a>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a class='more_info' expr:href='data:post.url' expr:title='data:post.title'>More Info</a>
</b:if>
</b:if>

Mengapa simplecart script di template blogger store v2 tidak berfungsi?

Jawab : Itu karena anda belum memperbaharui url simplecart yang terbaru dari pemiliknya, yaitu dengan mengganti dengan script di bawah ini:

<script src='http://files.javatemplates.com/js/simpleCart.js'type='text/javascript'/>

Mengapa tampilan gambar produk dan slide produknya di template blogger store v2 yang saya download tidak tampak jelas dan tidak beraturan atau tidak sesuai dengan contoh demonya?

Jawab : Itu disebabkan karena pada saat pertama kali anda melakukan posting produk di template blogger store v2 dan langsung melihat hasilnya, pada saat itu produk yang anda publish belum cukup minimal 6 produk. 

Bagaimana cara posting artikel di Blogger Store V.2 agar gambar produknya tidak melewati batas kotak list produknya? dan Bagaimana juga agar harga produk di template toko onlineBlogger Store V2 bisa terlihat langsung di halaman muka dengan terblog berwarna merah seperti di contoh demonya?

1.  Pilih menu 'Posting artikel baru' pada blog anda kemudian klik tombol 'Insert Image' untuk memasukkan gambar ke postingan anda (tentunya gambar produk yang akan anda posting). Sebaiknya lakukan ini terlebih dahulu sebelum memberikan keterangan produk anda.

2.  Bila gambar telah di-upload, selanjutnya klik tombol 'HTML' yang ada di posisi kanan atas halaman posting artikel anda (untuk tampilan blogger lama) atau di bagian kiri atas (untuk tampilan blogger baru).

3.  Langkah selanjutnya setelah anda masuk pada bagian edit html postingan artikel anda adalah dengan melakukan enter 2 kali (gunanya untuk memisahkan antara kode gambar yang sudah ada dan kode yang akan anda paste seperti di bawah ini). Setelah itu, langsung paste saja code di bawah ini ke dalam baris paling atas halaman HTML postingan artikel anda seperti penjelasan no. 2 di atas (Ingat! Bukan halaman HTML template anda).

<div class="item_image">
<img border="0" class="item_thumb" src="product_image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Isi dengan Penjelasan Produkmu DiSini
</div>

Tentunya pada saat anda pertama kali masuk pada halaman edit html artikel anda akan menemui code gambar yang sudah anda upload tadi seperti penjelasan no. 1 di atas, misalnya contohnya akan seperti ini setelah anda mem-paste kode di atas (ingat! Contoh kode pada paragraf kedua di bawah hanya contoh. jangan copy-paste ke blog anda karena sudah ada formatnya di blog anda sendiri) :

<div class="item_image">
<img border="0" class="item_thumb" src="product_image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Isi dengan Penjelasan Produkmu DiSini
</div> 

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBlYLFl9FixoMtAkJob6_-6CEuFWnMzz8egSSn4gEpIrXrdd1DUCjd-FsqDgzfIDq88xJYjlO2KbfyPye5juqgoJAKdZihwJfsSsVhwcswtz2YCie7-aoE9Oa61oonodPvSYKizH-k6tOQ/s1600/baju-merah-putih.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBlYLFl9FixoMtAkJob6_-6CEuFWnMzz8egSSn4gEpIrXrdd1DUCjd-FsqDgzfIDq88xJYjlO2KbfyPye5juqgoJAKdZihwJfsSsVhwcswtz2YCie7-aoE9Oa61oonodPvSYKizH-k6tOQ/s200/baju-merah-putih.jpg"width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div> 

4.  Agar tampilan template Blogger Store V2 anda sesuai dengan yang dicontohkan/demo sumber aslinya, maka langsung copy saja contoh kode berwarna oranye pada paragraf kedua di atas dan paste atau timpakan atau ganti pada kode berwarna oranya paling atas yang berada di paragraf pertama di atas, sehingga jadinya akan seperti ini setelah anda menghapus seluruh kode pada paragraf kedua di atas:

<div class="item_image">
<img border="0" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBlYLFl9FixoMtAkJob6_-6CEuFWnMzz8egSSn4gEpIrXrdd1DUCjd-FsqDgzfIDq88xJYjlO2KbfyPye5juqgoJAKdZihwJfsSsVhwcswtz2YCie7-aoE9Oa61oonodPvSYKizH-k6tOQ/s200/baju-merah-putih.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Isi dengan Penjelasan Produkmu DiSini
</div> 

Jadi, Ingat! kode pada paragraf kedua di atas harus di hapus semua setelah kode berwarna oranyenya dipindahkan ke kode berwarna oranye yang ada pada paragraf pertama (

src="product_image.jpg'). 

5.  Terakhir, tinggal kembali ke halaman compose atau penulisan artikel dengan mengklik tombol 'Compose' yang berada di posisi kanan atas halaman posting artikel anda (untuk tampilan blogger lama) atau di bagian kiri atas (untuk tampilan blogger baru). Dan anda tentunya akan menemui halaman postingan anda hanya akan berisi gambar, harga dan tulisan "Isi dengan Penjelasan Produkmu DiSini".Tinggal mengganti harganya dan tulisan tersebut sesuai dengan penjelasan produk yang diinginkan lalu klik 'Publish' atau 'Publikasikan' jika sudah selesai.

Kedengarannya prosesnya panjang kan? Tapi, ini hanya terlihat dari penjelasannya saja mengenai cara posting artikel di Blogger Store V.2 yang saya buat sangat detail agar anda mengerti, namun pada praktekkany sangat simpel sebenarnya.

Selanjutnya saya akan menjawab pertanyaan ringan mengenai masalah penggunaan Blogger Store V.2, yaitu Kenapa pada saat pertama kali memposting produk di tempalate Blogger Store V.2 slide gambar flash produknya yang berada di bagian atas tersembunyi atau tidak normal?


Jawabnya: Itu hanya karna anda masih memposting atau menampilkan produk kurang dari sepuluh gambar produk. Bila anda sudah memposting minimal 10 produk tampilannya akan menjadi normal lagi.

Sumber : masterwebpro.blogspot.com

https://belajar-cara-membuat-website.blogspot.com

https://jasa-akuntansi-bandung.blogspot.com/p/jasa-akuntansi.html

https://omega99data.blogspot.com/
https://ronketodiet.blogspot.com/
https://ronmanagedwp.blogspot.com/