Bikin Blogger: Blogger Template

Showing posts with label Blogger Template. Show all posts

Wednesday, July 3, 2013

Membuat Artikel Terkait di Template Blogspot Seluler

Cara Mudah Membuat Artikel Terkait di Template Blogspot Seluler. Update artikel kali ini Bikinblogger akan memberikan Tips Blogging atau Tutorial Blogger mengenai cara membuat artikel terkait atau related post di template blogspot seluler. Biasanya jika blogspot diatur kedalam template versi seluler atau mobile, tidak ada artikel terkait seperti dalam tampilan desktop. Oleh karena itulah, Anda harus membuatnya sendiri dengan cara memasang artikel terkait ke dalam template seluler.

Sebelum Anda memasang artikel terkait ke dalam template blogspot seluler, pastikan terlebih dahulu blogspot Anda sudah di atur ke dalam versi mobile sesuai dengan custom template. Kemudian setelah itu Anda tinggal pasang kode atau script artikel terkait untuk template blogspot seluler.

Berikut ini cara pasang artikel terkait agar bisa tampil di template blogspot versi seluler/mobile:

1. Login ke Blogger.com => => Template => Edit HTML, kemudian cari kode </head> dan masukkan kode berikut ini di atasnya.

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + 
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>

2. Kemudian cari kode <b:includable id='mobile-post' var='post'>, kemudian cari kode bagian footernya, kodenya seperti ini biasanya <div class='post-footer-line post-footer-line-2'>, setelah itu Anda tinggal pasang kode berikut ini di bawah kode tersebut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mobile-related-posts'>
<div style='text-align: justify;'>
<h4><b>Artikel Terkait: </b></h4>
<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</div>
</b:if>

3. Setelah itu klik Save template dan Anda bisa lihat hasilnya dengan cara menampilkan blog Anda dalam tampilan seluler/mobile yaitu dengan mengetikkan www.namablogAnda.blogspot.com/?m=1.

Demikianlah tips blogging kali ini tentang cara mudah membuat artike terkait di template blogspot seluler. Cara ini sudah saya praktekkn sendiri dan terbukti berhasil. Semoga bermanfaat.di sini gambar luh

mak nyus....

Dapatkan Wisbenbae versi Android,GRATIS di SINI ! Lihat yg lebih 'seru' di sini !
Follow @wisbenbae

Sunday, March 17, 2013

Membuat Recent Post Pada Setiap atau Satu Kategori Label

Di dunia blogger, up to date adalah hal yang harus kita lakukan agar blog kita terlihat selalu beraktifitas. Pembuatan Recent Posts juga merupakan kategori yang harus kita utamakan untuk memberikan kemudah pengunjung melihat artikel terbaru yang ada dalam halaman situs website kita.

Namun kali ini sedikit berbeda, recent posts yang ingin saya ajarkan adalah recent post yang tampil di setiap labelnya. Atau kita dapat melakukan pengaturan terhadap label atau kategori apa saja yang ingin dijadikan recent posts. Bagaimanakah Cara Membuat Recent Post Per Label ini ? ikuti saja yuk cara pembuatannya.

Biasanya penggunaan recent posts per kategori ini sering terlihat di beberapa media berita yang proffesional seperti kompas dan lainnya. Berikut cara membuat recent posts di blogger :

Login ke blogger, lalu masuk ke Template klik EDIT HTML.
Centang kotak Expand Template Widget.
lalu carilah kode ]]> </b:skin> dan paste kode di bawah ini tepat diatasnya.

img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}

img.label_thumb:hover{background:#f7f6f6}

.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}

ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}

.label_with_thumbs a{}

.label_with_thumbs strong{}

4. Kemudian cari kode </head> dan letakkan kode dibawah ini tepat di atas kode </head>.

5.Save template anda dan tinggalkan halaman edit HTML dan menujulah kehalaman rancangan.

6.Klik add gadget » HTML/Java Script.

7.Masukkan kode di bawah ini tepat pada kolom yang sudah disediakan.

Ket :

ganti tulisan NAMA LABEL dengan nama kategori yang Anda inginkan.
ganti angka 3, sesuai jumlah postingan yang diinginkan pada recent posts tersebut.
jika ingin menonaktifkan tumbnails, ketik false pada tulisan true seperti yang berwarna merah kode script diatas.

8. Klik Save.

Sumber Article : http://impoint.blogspot.com/2013/01/cara-membuat-recent-post-1-kategori
Lihat yg lebih 'menarik' di sini !
Follow @wisbenbae

Thursday, February 7, 2013

CARA MENAMPILKAN LINK OTOMATIS KETIKA DI COPAS

1. Masuk ke menu template yang ada di blogger

2. Pilih Edit HTML >>lanjutkan >> centang expand template widget..

3. Tekan CTRL + F kemudian cari kode </body>

4. Tambahan kode dibawah ini di atas kode </body> itu

catatan : sebaiknya paste dulu ke notepad dan bersihkan dari link sumber saya... semoga bermanfaat.

Lihat yg lebih 'menarik' di sini !
Follow @wisbenbae

Wednesday, January 25, 2012

Template Toko Online Blogspot lengkap

BJB Template atau BlogJualBeli Template merupakan template powerful yang cocok digunakan sebagai toko online yang kaya akan fitur unggulan seperti:

Clean-view
Keranjang belanja
Tampilan grid product
Order via paypal dan google checkout
Order via email
Homepage slideshow widget
4 coloumn footer
Header Ads Place
Custom Header Logo

Dengan menggunakan template ini, pengunjung tidak akan percaya bahwa toko online yang anda buat menggunakan platform blogger/blogspot karena ini lebih terlihat seperti tampilan toko online sesungguhnya layaknya prestashop, opencart, magento, dlsb.

Penasaran ingin melihat langsung penampakannya?

Langsung kunjungi demonya: http://bjb-template.blogspot.com

Atau tidak sabar ingin mengunduh? Mari terus kita simak!

BJB TEMPLATE FOR BLOGGER

(BlogJualBeli Template / Template Blog Jual Beli Online)

Tampilan penuh template (Clean view & Professional) :

KAYA AKAN FITUR MENAWAN:

Keranjang Belanja

Dengan memanfaatkan cookies browser, teknologi javascript SimpleCart.js dari WojoGroup memberikan sentuhan otomatis memasukkan barang yang dipilih langsung ke keranjang belanja dan akan selalu tersimpan disana sebelum menekan tombol 'Kosongkan' atau tombol 'Order' selama masih ada cookies yang tersimpan.

Homepage Wide Slideshow

Tampilan gambar animasi bergerak yang didasarkan pada javascript dan kustomisasi CSS ini mudah diedit dan ditambah gambarnya hanya dengan mengubah link gambar yang terdapat pada widget yang bersangkutan. Satu lagi yang menarik, slideshow widget ini hanya tampil di halaman utama, sehingga tidak mengganggu ketika membuka halaman produk atau halaman lain.

Tampilan grid produk

Ini dia yang membuat seseorang tidak mengira bahwa toko online ini berplatform blogger yang khas dengan tampilan posting melebar standar blogger. Tampilan grid produk membuat tampilan posting untuk produk seperti layaknya toko online sungguhan dengan hanya menampilkan harga, thumbnail gambar dan judul posting/nama produk.

4 Coloumn Footer

Dengan tampilan footer 4 kolom anda dapat dengan leluasa meletakkan link, widget, info kontak, dlsb. Feel free :D

Custom Header Logo

Tidak lagi header dengan sekedar Text link nama blog/toko online. Buat lebih elegan dengan menempatkan logo terbaik anda disini :)

Header Ads Place

Ingin meletakkan banner iklan atau produk di tempat terbaik? Letakkan di header sebelah logo.

Sekarang mari kita ikuti langkah menyulap blogspot menjadi toko online:

1. Download file dalam bentuk zip yang berisi template BJB-Template.xml dan file posting contoh dummy-post.xml.

KLIK DOWNLOAD TEMPLATE (Local Server - Indowebster)
KLIK DOWNLOAD TEMPLATE (International Server - Box.Net)

2. Unggah file BJB-Template di menu Rancangan > Edit HTML

3. Anda dapat mengunggah contoh file posting untuk dapat memiliki blog dengan contoh produk, menu dan widget yang sudah disetting sebelumnya. Klik menu Setelan > Dasar > Impor Blog dan pilih file Dummy-Post.xml. (Optional)

4.. Sekarang template telah terpasang dengan baik pada blog anda, kini tinggal langkah kustomisasi yang perlu diubah untuk penyesuaian pada masing-masing toko online.

Kustomisasi Template:

1. Pengaturan Shopping Cart (Setting Email Paypal dan Currency)

Ubah Pengaturan simpleCart.email menjadi email paypal atau googlecheckout anda, simpleCart.checkoutTo menjadi Paypal atau GoogleCheckout, dan simpleCart.Currency menjadi Mata Uang Support Paypal/GoogleCheckout yakni USD, GBP, EUR, AUD, CAD, CZK, DKK, HKD, HUF, ILS, JPY, MXN, NOK, NZD, PLN, SGD, SEK, CHF, THB. Mata Uang Rupiah (RP) tidak support, namun anda masih dapat memasukkannya hanya sebagai tampilan, dengan kata lain tidak tampil di halaman pembayaran paypal (berubah kembali menjadi dollar).

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

2. Pengaturan Order by E-Mail

a. Buka halaman penyedia contactform email di http://kontactr.com/

b. Klik Sign-Up dan masukkan field yang diminta

c. Setelah berhasil sign-up, login dengan username dan password anda

d. Anda akan menuju halaman utama yang berisi kode-kode untuk menyisipkan contact form, perhatikan yang mana saja, misalkan Ajax Widget. Perhatikan pada angka ID anda setelah kode 'id='. Misal:

<script type="text/javascript"> id = 111323; </script>
<script type="text/javascript" src="http://kontactr.com/wp.js"></script>

e. Centang Expand Template Widget, lalu cari dan ubah angka yang di-bold dibawah ini dengan angka ID anda:

<span class='item_add'><script type='text/javascript'> id=111323; t=1; ctxt="Order via Email";

3. Pengaturan Menu atas, Menu utama dan Menu SocialNetwork

Cari dan ubah kode berikut:

Menu atas:

<ul id='top-nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Kategori</a></li>
<li><a href='#'>Kontak</a></li>
<li><a href='#'>Tentang Kami</a></li>
</ul>

Menu utama:

<ul class='nav'>
<li><a class='current' href='/'>Home</a></li>
<li><a href='#'>Kategori Produk</a></li>
<li><a href='/p/sample-page.html'>Sample Page</a></li>
<li><a href='#'>Peluang Usaha</a></li>
<li><a href='#'>Promo Bulanan</a></li>
</ul>

Menu SocialNetworking:

<ul id='top_social'>
<li class='social_facebook'>
<a href='http://www.facebook.com/wahyu.putra' 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. Sekarang kita akan men-setting format posting blog. Hal ini perlu dilakukan agar postingan anda sesuai dengan format template yang dibuat. Klik Setelan > Format > Template Entri dan masukkan kode sebagai berikut:

<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>

Cara menggunakannya yakni setiap anda membuat post baru, pilih tab Edit HTML pada post-editor, bukan tab Compose. Ubah product_image.jpg dengan link gambar produk anda, ubah $00.00 dengan harga produk (bisa dalam format RP sbg tampilan saja), dan ubah Descriptions... menjadi deskripsi produk anda.

5. Pengaturan logo

Cari dan ganti link gambar dibawah ini dengan link gambar logo anda dengan ukuran 369px x 61px

<div class='clearfix' id='header-wrapper'>
<a expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5s9GzsYzqaxV2Hmf7eGTi0st_7O6SzUEyWRrIj0o3BRFYzybU_-qMUnOY9jYmXiO3kt5JCe4EPE9fJ60u48jQorNKrqbsK-OCiz3f7kzfBtDwyIMPLu24RsYiQNsiLMbxUPfsjNKpPSc/s1600/logo-bjb.png'/></a>

6. Pengaturan jumlah produk pada halaman utama

Produk yang ditampilkan sebaiknya berjumlah kelipatan 4 agar sesuai dengan template. Untuk mengubahnya klik menu Setelan > Format > Ubah 7 posting (default) menjadi kelipatan 4. Misalkan 20 posting.

7. Pengaturan Slideshow

Untuk mengatur dan mengubah slideshow dapat dengan menambahkan atau mengedit kode yang terdapat pada widget dibawah menu utama.

Ganti kode link gambar dibawah ini, atau gandakan kode untuk gambar lebih banyak.

<div id='casing'>
<div id='slider'>
<div id='mover'>
<div class='slide'>
<img alt="iPad 5" src="http://i56.tinypic.com/4q3jva.jpg" /> </div>
<div class='slide'>
<img alt="iPhone 4" src="http://i56.tinypic.com/ipscyf.jpg" /></div>
</div>
</div>
</div>

Jika sudah melakukan semua kustomisasi, jangan lupa klik tombol 'Simpan Template' untuk menyimpan hasil perubahan. Kini anda dapat melihat tampilan blog anda yang telah disulap menjadi toko online blogspot yang tidak kalah dengan toko online lainnya dengan kelebihan: GRATIS,NO BANDWIDTH & HOSTING LIMITS, SEO-FRIENDLY!!!

Sekarang tinggal duduk manis dan nikmati betapa mengagumkannya blog anda sekarang :)

Tetap jaga link pembuatnya dari footer dan template detail di template blog yang sudah anda download sebagai bentuk apresiasi anda untuk kami. Hal itu sangat kami harapkan :)

Selamat Mencoba!

sumber : disini

Lihat yg lebih 'menarik' di sini !

Sunday, November 18, 2007

Adsense Multi-placement in Blogger-10 tempat buat narok Adsense di Blogger !

Dengan berubahnya basa pemrograman yang menyusun Blogger templates, html xml, nambahin iklan model AdSense langsung di template kadang begitu menjengkelkan, blon lagi masalah error di syntax yang bikin nggak bisa di-save , bener-bener bikin stress !

Apakah kita harus nyerah ? Ya nggak to....halangan itu anggep aja hadiah buat kenikmatan ntar kalo udah jad ! Nah, ini ada daftar 10 tempat di blogger di mana orang biasa narok AdSense ato iklan lu sendiri, dan juga membicarakan kira-kira format iklan ukuran berapa yang cocok di masing-masing bagian itu.

1.SIDEBAR/SISI SAMPING

JUKLAK. Ini sih paling gampang buat ditarokin adsense. Tinggal ke panel elements (staffing / page elements) dan tambahin aja sebuah widget dengan kode html atau bisa juga pake widget AdSense langsung.

Format yang dianjurkeun: 125×125, 120×600 dan 160×600

2.DIANTARA POSTINGAN

Narok diantara postingan sudah gua jelasin di narok Adsense di tengah postingan (versi ala Blogger) atau versi ngulik di Narok Adsense di Postingan...

Format iklan yang dianjurkeun: 468 × 60, 300 × 250 and 336 × 280

3.DIBAWAH HEADER

JUKLAK
- Tentang narok Adsense di Header (pas di headernya) sudah dijelasin sebelumnya
- Lu harus genti dulu (parsing) kode elu menjadi karakter xml. Lu bisa nggunain converter online.
- Lihat kode ini di template eluh


 <div id='header-wrapper'>

- Paste kode yang udah terkonversi tepat setelah baris kode diatas.

Format yang dianjurkeun: 728×90 dan 728×15

4.DI ENTRI KOLOM/atas Judul

JUKLAK:
-Lu convert dulu kode Adsense lu kayak diatas.
-Cari kode dibawah ini di template eluh


 <div id='main-wrapper'>

-Segera Paste kode yang udah terkonversi tadi tepat setelah kode diatas.

Format yang dianjurkeun: 460×68, 468×15 dan 336×280

5.DIBAWAH JUDUL POST (terlihat di seluruh halaman)

JUKLAK
- Lu convert dulu kode AdSense lu lah.
- Jangan lupa, centang Expands template widgets dan cari kode dibawah ini


 <div class='post-header-line-1'/>

(tapi nggak usah ditambahin /)
-Paste kodenya setelah kode di kurungan merah diatas.

Format yang direkomendasikeun: 468×68 dan 468×15

5.Dibawah judul postingan (tapi hanya terlihat di halaman depan saja)

JUKLAK:
-Ubah dulu kode HTML iklan elu.
-Centang Expands template widgets dan carilah kode dibawah ini


  <div class='post-header-line-1'/>

(tapi gak usah make /)
-Kemudian Paste kode berikut menjadi kayak gini:

<B: if cond ='data: blog.pageType == "item"'> <! -- Tarok kode AdSense lu di sini --> </ b: if>

Format yang diandjurkeun : 468 × 68 and 468 × 15

7.SETELAH ALENIA AKHIR POSTINGAN