Cara Posting Black Computer Store - Blogger Template

Menanggapi pertanyaan tentang pertanyaan salah satu sahabat yaitu Wartabeta di kolom komentar postingan Black Computer Store Blogger Template maka postingan ini dibuat khusus untuk memudahkan anda jika ingin menggunakan template tersebut.

Sebenarnya cara postingnya sama saja dengan blogger store v2. Akan tetapi jika ingin menggunakan fitur image transisi tambahan, maka memang agak sedikit rumit. Tapi dengan mengikuti petunjuk dibawah ini, mudah-mudahan semua akan sama dengan yang ada di DEMO.

1. Pertama yang harus diperhatikan disini adalah pada demo tersebut admin menggunakan iklan dari amazone store sebagai media iklan. iklan tersebut di set dengan ukuran gambar 200 x 200px. Bagian tersebut admin anggap sebagai ads-post area. Untuk pemasangannya adalah sebagai berikut.

Masuk kemenu posting baru (new post) dan gunakan mode posting edit HTML, kemudian copy kode dibawah ini setelah kode;
<div dir="ltr" style="text-align: left;" trbidi="on">
 untuk tempat pemasangan iklan.

<div id="ads-post">
Amazone Kindle FireFull <br />
Color 7" Multi-touch Display, Wi-Fi<br />
<a href="http://www.amazon.com/gp/product/B0051VVOB2/ref=as_li_tf_il?ie=UTF8&amp;tag=infogameonlin-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B0051VVOB2"><img border="0" src="http://ws.assoc-amazon.com/widgets/q?_encoding=UTF8&amp;Format=_SL160_&amp;ASIN=B0051VVOB2&amp;MarketPlace=US&amp;ID=AsinImage&amp;WS=1&amp;tag=infogameonlin-20&amp;ServiceVersion=20070822" /></a><img alt="" border="0" height="1" src="http://www.assoc-amazon.com/e/ir?t=infogameonlin-20&amp;l=as2&amp;o=1&amp;a=B0051VVOB2" style="border: none !important; margin: 0px !important;" width="1" />
</div>

**** Ganti kode warna merah tersebut dengan kode iklan anda sendiri.
Jika anda ingin menggunakan iklan yang secara otomatis muncul di setiap postingan, anda juga bisa menanamkan atau memasangnya kedalam template langsung; yaitu dengan cara masuk kemenu;
Design = > Edit Html = > Centang expand widget template.
Kemudian cari tag <data:post.body/> (agar lebih mudah gunakan fitur pencarian cepat dengan menekan CTRL + F) kemudian letakkan kode iklan anda sebelum kode </b:if> diatasnya (<data:post.body/>). Dengan demikian untuk setiap posting-posting selanjutnya, anda hanya perlu langsung mengikuti langkah no. 2.

2. Untuk memasukkan gambar utama yaitu gambar yang akan tampil dihalaman homepage dan category post dan item price, masuk ke posting kemudian copas kode berikut.

<div id="item_image">
<img border="0" class="item_thumb" src=" /image-extra-1.jpg" /><span class="item_price">$00.00</span></div>

**** Ganti kode warna merah dengan URL gambar yang ingin ditampilkan. Dan warna hijau dengan harga produk.

3. Menambahkan Fitur Image Transisi kedalam postingan.

<div id="slider-post">
<div id="tabs">
<div class="feature" id="tabs-1">
<div class="slwrap">
<img alt="Omnis dolor repellendus" class="bigimg" height="243" src="/image-extra-1" width="398" />                 </div>
</div>
<div class="feature" id="tabs-2">
<div class="slwrap">
<img alt="Omnis dolor repellendus" class="bigimg" height="243" src=" /image-extra-2" width="398" />                 </div>
</div>
<div class="feature" id="tabs-3">
<div class="slwrap">
<img alt="Omnis dolor repellendus" class="bigimg" height="243" src=" /image-extra-3" width="398" />                 </div>
</div>
<ul id="tabby">
<li class="item1"><a href="#tabs-1">
<img alt="Omnis dolor repellendus" height="75" src=" /image-extra-1" width="134" />                         </a>
</li>
<li class="item2"> <a href="#tabs-2">
<img alt="Omnis dolor repellendus" class="slimage" height="75" src=" /image-extra-2" width="134" />
</a>
</li>
<li class="item3">
<a href="#tabs-3">
<img alt="Omnis dolor repellendus" class="slimage" height="75" src=" /image-extra-3" width="134" />                         </a>
</li>
</ul>
</div>
</div>

**** Silakan ganti img alt (warna hijau) dengan keyword postingan anda.
**** Ganti kode warna merah dengan URL gambar 1
**** Ganti kode warna biru dengan URL gambar 2
**** Ganti kode warna pink dengan URL gambar 3

4. Item description atau deskripsi produk

<div class="item_Description">
Lorem Ipsum Dolor Sit Amet. Vestibulum eu pellentesque ante. Sed tincidunt quam eu nisl luctus id mattis tellus rhoncus.


Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Donec dapibus eros vitae nibh venenatis faucibus.
</div>

**** Ganti deskripsi yang warna merah dengan deskripsi produk anda. Setelah itu baru di posting.

Tambahan.
1. Untuk fitur slider baru akan berfungsi dengan baik jika blog anda sudah memiliki minimal 10 postingan.
2. Anda bisa menggunakan fitur load posting otomatis dengan cara menyimpan cara tersebut diatas di menu SETTING = > FORMATING = > Post Template dari Dashboard anda.

Selamat mencoba.

Share this post