Templet Koleksi Video dari Johny Crottube, Mantab Abis

Buat Anda yang suka mengkoleksi video dari Youtube.  Kali ini saya buat untuk versi konten video dan hanya dari Youtube.  Disini saya hanya memanipulasi gambar dari iframe youtube untuk dijadikan thumbnail di homepage, dan masih menggunakan ytimg.com tapi untuk template ini diletakkan di dalam postingan bukan di Edit HTML template. Template bisa anda lihat tampilannya dengan meng klik Demo dibawah, dan yang mo download tinggal klik Download tinggal klik download aja.

Demo | Download

Ikuti totorial sederhana cara membuat postinagannya di bawah ini:

• Pertama yang harus dilakukan adalah masuk ke Youtube.Com kemudian lakukan klik kanan pas di tengah tayangan layar ketika video pavorite kita.  
• Ambil pilihan Salin kode semat atau bahasa arabnya sih kurang lebih copy this emded code. Sebagi contoh hasilya sebagai berikut

<iframe width="640" height="360" src="http://www.youtube.com/embed/Z6v7C7-tbfc?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

• Kemudian kode tersebut paste kan  edit entri blogger kita,  tapi yang HTML yah bukan yang Compose.
• Video dari Youtube sudah nampak di postingan jika kita preview, tapi thumbnailnya belum akan kelihatan di Homepage. Untuk menampilkan thumbnail di halaman depan (homepage) kita harus menambahkan kode yang ini setelah kode iframe dari Youtube.

 <img border="0" height="0" width="0" src="http://i2.ytimg.com/vi/kode seri video/0.jpg" />

• Jadi keseluruhah kode diatas jika di satukan adalah sebagai berikut :

 <iframe width="640" height="360" src="http://www.youtube.com/embed/Z6v7C7-tbfc?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
<img border="0" height="0" width="0" src="http://i2.ytimg.com/vi/kode seri video/0.jpg" />

Perhatikan tulisan kode seri video (warna merah), anda isi dengan kode seri warna merah diatasnya (Z6v7C7-tbfc). Kode seri video dari Youtube ini berbeda-beda untuk tiap video, jadi jika Anda memasukkan video jangan lupa untuk mengganti juga kode seri-nya harus sama dengan kode diatasnya. Dan postingan untuk video itu akan nampak seperti gambar di bawah ini :

Sekarang untuk menampilkan widget Video Category yang ada pada template ini. Yang Anda harus lakukan hanya membuka widget Video Category 1 dan 2 kemudian masukkan/ketik label di dalam kotak HTML/Javascript seperti gambar di bawah ini :

Dari gambar diatas Pop Sunda adalah label yang saya tampilkan pada video category 1, Anda ganti dengan label yang diinginkan, demikian juga dengan widget Video Category 2.

Untuk mengaktifkan reply pada kotak komentar, masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode berikut :

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=1128587339572285487&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

Template ini juga dilengkapi fitur related video di setiap postingan dan slider otomatis yang menampilkan postingan terbaru Anda. Template ini bisa digunakan juga untuk konten gallery gambar biasa, dan untuk video hanya khusus dari Youtube, tapi jika anda ingin menambahkan video selain Youtube harus membuat thumbnail manual dulu kemudian baru di upload saat buat postingan. Segitu dulu tutorial cara instalasi untuk template Johny Crottube kali ini.  Selamat mencoba dan semoga bermanfaat.

Template Toko Online Sederhana (Tanpa Cart)

Postingan kali ini mengenai  template Toko Online yang tanpa menggunakan fitur Shopping Cart  koleksi Mas Template. Tampilan yang baguslah bagi kami yang masih belajar nge-blog apa lagi jika di padukan dengan tampilan toko online. template ini juga yang kami gunakan untuk http://bintaraselluler.blogspot.com. Terimakasih kepada Mas Kolis  yang menyediakan banyak variasi template blogger, yang sebagiannya sudah kami gunakan juga tutorialnya sangat, sangat bermanfaat. Kami ambil salah satu koleksinya yaitu:

Johny Ganteng Store

Demo | Download

 

Tidak ada fitur khusus pada kedua template ini, slider yang saya pasang otomatis menampilkan postingan terbaru Anda. Untuk membuat sebuah postingan yang perlu Anda lakukan hanya menambahkan kode dibawah ini di awal setiap postingan pada posisi Edit HTML bukan compose:

<span class="item_price">Rp 1.000.000,00</span>

Ganti harga warna biru diatas dengan harga Anda tentunya dan setelah kode diatas, silahkan Anda menulis artikel atau deskripsi barang maupun upload gambar seperti biasanya. Kedua template ini juga saya tambahkan fitur tooltip image otomatis pada setiap gambar di homepage (arahkan mouse anda ke salah satu gambar). Dan untuk mengaktifkan fungsi reply pada kotak komentar cari ID blog  ganti dengan ID blog Anda. Untuk Johny Ganteng Store ID blognya : 9133655087310583622

Jika Anda ingin mengupload gambar, disarankan untuk memilih gambar yang persegi panjang dengan ukuran pixel lebih besar lebih bagus, contoh seperti gambar dibawah ini :

Fitur shopping cart disini saya ganti dengan form order barang tombolnya sudah saya sediakan dibawah setiap post di homepage. Untuk membuat form order seperti pada demo kedua template ini, tentunya Anda harus membuatnya terlebih dahulu pada situs-situs layanan form online. Disini saya memakai Google Docs, karena layanan form ini buatan Google mungkin tidak terlalu menghambat dalam proses loading blog. Setelah Anda membuat form order, langkah selanjutnya adalah membuat halaman statis (pages), buka New Pages kemudian copy paste kode dari Docs Google (mana ya yang bener, Google Docs apa Docs Google...???) ke dalam postingan terserah mau dikasih judul apa. Untuk contohnya bisa diklik tombol order yang ada di bawah gambar.

Setelah halaman order Anda sudah jadi, arahkan link dari halaman statis order anda ke dalam link order yang ada di Edit HTML, caranya seperti dibawah ini :

1. Untuk Johny Ganteng Store, cari kode ini di Edit HTML jangan lupa untuk centang Expand Widget Templates :

   <input class='order' onclick='window.location=&apos;http://johny-gantengstore.blogspot.com/p/sample-page-no-image.html&apos;' type='button' value='Order'/>

   Ganti URL warna kuning diatas dengan URL halaman order yang sudah Anda buat.
2. Untuk Johny Joss Mobile Phone, cari kode berikut di Edit HTML jangan lupa untuk centang Expand Widget Templates :

   <a class='item_add' href='http://johnyjoss.blogspot.com/p/sample-page-no-image.html'>Order</a>

   Ganti URL warna kuning dengan URL  halaman order Anda.

Sepertinya hanya itu yang perlu diperhatikan jika Anda ingin memakai satu diantara kedua template ini. Sebelumnya jangan menanyakan bagaimana cara menambahkan fitur Shopping cart pada template ini ya, karena template ini dibuat memenuhi permintaan beberapa teman blogger agar fitur shopping cart pada template toko online sebelumnya dihilangkan. Jadi jika ada diantara Anda yang ingin memakai template Toko Online dengan menggunakan Shopping Cart bisa memakai Johny Blackstore dan Johny Magstore. Selamat mencoba dan semoga bermanfaat.

Tips Tentang SEO Saran Google

Kalau dipikir-pikir agak aneh juga, sebagai search engine, Google mengeluarkan dokumen resmi yang berisi Tips SEO, Tapi gak palah mungkin untuk kebaikan juga... he he. Berikut ini beberapa tips SEO yang ada pada artikel Google tersebut

1. Membuat judul unik dan akurat

Dalam pelajaran bahasa Indonesia, judul karangan boleh dibuat menggelitik agar menarik pembaca. Misalnya sebuah cerpen percintaan dapat diberi judul "bunga sakura”, meskipun dari awal tidak dibahas mengenai bunga sakura ternyata di akhir cerita menggambarkan sepasang kekasih yang bertemu di bawah pohon sakura.
Dalam pandangan SEO, judul "bunga sakura” tepat jika artikelnya membahas tentang bunga sakura, misalnya wujud, jenis, atau cara menanamnya.

Saran Google:

• Membuat judul yang akurat, unik, dan berbeda-beda untuk setiap halaman.
• Membuat judul yang singkat tetapi jelas.
• Kesalahan umum yang harus dihindari dalam SEO:
• Judul default seperti ‘Untitled’ atau nama perusahaan untuk semua halaman (jika nama perusahaan hanya homepage saja tak masalah).
• Judul terlalu panjang.
• Menambahkan keyword yang tak diperlukan dalam judul secara berlebihan.

2. Menggunakan meta description

Jika Anda terbiasa mengedit HTML, Anda dapat memberikan kata-kata yang sesuai untuk meta description. Pada sebagian direktori bahkan tidak mengindeks halaman, hanya meta description dan meta keywordnya saja yang masuk ke dalam database mereka.
Saran Google:

• Membuat meta description yang akurat menggambarkan isinya.
• Membuat meta description yang berbeda-beda untuk setiap halaman.
• Kesalahan umum yang harus dihindari dalam SEO:
• Membuat meta description yang tak ada hubungannya dengan isi.
• Membuat meta description hanya berisi keyword (bukan kalimat).
• Meta description terlalu umum.
• Copy-paste isi halaman ke dalam meta description.
• Membuat meta description yang sama untuk semua halaman atau sebagian halaman.

3. Membuat URL yang baik

Sama seperti yang sudah dibahas di atas, yaitu keyword dalam URL akan turut menentukan posisi halaman tersebut dalam search engine. Misalnya Anda membuat artikel mengenai bunga sakura, lebih baik menggunakan URL:
http://web-anda.com/bunga-sakura/
daripada
http://web-anda.com/p?12
URL akan muncul dalam hasil pencarian (SERP) dan sering digunakan orang sebagai teks link yang mengarah ke halaman tersebut.
Saran Google:

• Menggunakan URL berupa kata atau kalimat.
• Membuat struktur direktori (seperti folder dalam windows) sederhana.
• Satu halaman hanya memiliki satu URL.
• Kesalahan umum yang harus dihindari dalam SEO:
• URL terlalu panjang, terlalu umum, atau terlalu banyak mengulang kata kunci.
• Membuat struktur direktori yang kompleks atau tak ada hubungannya dengan isi.
• Mencampur-adukkan URL, kadang dengan awalan www, kadang tanpa www. Kadang dengan akhiran "/”, kadang tidak. Sebaiknya konsisten.
• Menggunakan perpaduan huruf besar dan kecil, sebaiknya hanya huruf kecil.

4. Membuat navigasi situs mudah dan sederhana

Google menyarankan situs dibuat dengan navigasi yang sederhana dari umum ke spesifik. Misalnya pada halaman utama ada "profil perusahaan”, di dalam halaman "profil perusahaan” ada link ke "bidang usaha”, "AD/ART”, "manajemen”, dsb. Di dalam halaman "bidang usaha” ada link ke "off air”, "on air”, dsb.

Saran Google:

• Membuat hirarki navigasi yang simple dan natural.
• Menggunakan link berupa teks dalam navigasi.
• Menggunakan teks yang menyatakan posisi pengunjung sedang dimana (breadcumb), yang memungkinkan pengunjung dapat dengan mudah menuju ke level yang lebih tinggi, misalnya ditampilkan saat ini pengunjung sedang berada di: profil perusahaan > bidang usaha > off air
• Membuat sebuah HTML sitemap, yaitu sebuah halaman yang di dalamnya terdapat link ke semua halaman atau halaman-halaman penting dalam situs Anda.
• Pertimbangkan jika sebagian URL dihilangkan. Misalnya link ke artikel ini: pertimbangkan apakah link tersebut valid jika link-nya dipotong menjadi http://www.ajibintara.com/2012/12/
• Membuat halaman 404 yang berguna. Halaman 404 adalah halaman yang ditunjukkan saat pengunjung mengklik atau menulis URL sebuah halaman yang tidak ada di dalam situs Anda. Halaman 404 dapat berisi link ke homepage atau link ke artikel atau halaman yang populer di web Anda.

Kesalahan umum yang harus dihindari dalam SEO:

• Membuat navigasi yang sangat kompleks, misalnya semua halaman saling berkaitan.
• Membuat halaman yang terlalu dalam, halaman tersebut hanya dapat dibuka dengan berkali-kali klik dan membuka halaman lain yang sangat banyak terlebih dahulu.
• Menggunakan banyak gambar dan animasi untuk link (sebaiknya teks).
• HTML sitemap mengandung link yang tidak valid atau tidak terorganisir dengan baik.
• Membiarkan halaman 404 terindeks search engine, hanya pesan singkat "Not Found” atau "Error 404″ tanpa penjelasan, dan menggunakan design yang tak konsisten misalnya hanya halaman putih.

Cara Buat Artikel Terkait Dengan Scroll Bar di Blogspot

Untuk memasang fitur related article dengan scroll bar, kita harus pastikan dulu, apakah sobat blogger sudah membuat label buat setiap postingan blog kita. Fitur artikel terkait tidak akan muncul di blog bila sobat blogger tidak memberikan label untuk setiap postingan sobat. Buat sobat blogger yang sudah memberikan label untuk setiap postingannya, ikuti langkah di bawah ini :

Cara Membuat Artikel Terkait Scroll Bar :

• Sign In di akun blogger.com
• Pada menu Drop Down, Klik Template
• Backup Template sobat blogger terlebih dahulu.
• Kalau sudah, klik Edit Template
• Klik Proceed dan kasih tanda centang pada Expand Widget Template
• Copy Paste (Copas) kode CSS berikut :

.rbbox{border: 1px solid rgb(192, 192, 192); padding: 5px;background-color: #f0f0f0; -moz-border-radius:5px; margin:5px; } .rbbox:hover{ background-color: rgb(255, 255, 255); }

• Paste kode tersebut sebelum kode ]]></b:skin>
• Selanjutnya, copy kode di bawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

• Paste kode tersebut di bawah kode <data:post.body/>
• Simpan template sobat.

Penting :

1. Terdapat banyak kode <data:post.body/> pada setiap template. Kalau blog sobat blogger sudah memasang fitur Read More, tempatkan setelah <data:post.body/> yang kedua.
2. #f0f0f0 adalah kode warna background sebelum Cursor diarahkan, silahkan ganti dengan warna yang sobat blogger inginkan. Lihat kode warna disini.
3. var maxNumberOfPostsPerLabel = 4; adalah jumlah postingan untuk setiap label dan maxNumberOfLabels = 3; adalah jumlah label. Silahkan sobat blogger sesuaikan kedua kode tersebut.

Demikian smoga bermanfaat.

Cara Memasang FB Like Button Otomatis di Blogspot

Memasang facebook like di posting blog dapat menjadi tolok ukur bagi blogger untuk mengetahui respon pengunjung selain dari comment. Selain itu memasang/membuat  tombol facebook like secara otomatis juga akan mengirim url yang disukai pengunjung ke wall-nya. Ini juga menjadi keuntungan tersendiri, karena publikasi artikel posting dapat menjangkau area yang lebih luas. Hack widget ini akan memunculkan Facebook Like Button di setiap posting Blog Blogger anda.

Ada beberapa jenis Facebook like button. Berikut preview plus script-scriptnya yang dibuat untuk Blogger/Blogspot:

Standard Facebook Like Button

 

<!-- Tombol Facebook Like  -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
</b:if>
<!-- Facebook Like http://buka-rahasia.blogspot.com -->

Box Count Facebook Like Button

<!-- Tombol Facebook Like  -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</b:if>
<!-- Facebook Like http://buka-rahasia.blogspot.com -->

Button Count Facebook Like Button

<!-- Tombol Facebook Like  -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
</b:if>
<!-- Facebook Like http://buka-rahasia.blogspot.com --> 

Kostumisasi widget Facebook like:

a. Secara default, Tombol Facebook like akan muncul disisi kiri. Oleh karena itu, jika ingin menampilkannya di sisi kanan (seperti yang di blog ini), kita dapat menambahkan CSS styling, float ke kanan, dan untuk memberi batas dengan posting ditambahkan padding plus value-nya lalu memasukkan styling tersebut di dalam tag div.

<div style='padding:4px; float: right;'>

</div>

 Cara menyisipkannya:

<!-- Tombol Facebook Like  -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='padding:4px; float: right;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
</div>

</b:if>

<!-- Facebook Like http://buka-rahasia.blogspot.com -->

b. Jika ingin mengubah tampilan Facebook like menjadi gelap (dark), ubah value pada colorscheme=light, ganti light dengan dark colorscheme=dark.

Cara memasang Facebook Like di Blogger:

1. Masuk ke dashboard > Design/Rancangan > Edit HTML.

2. Klik/check "Expand Widget Templates"

3. Pilih salah satu script/kode dari jenis Facebook Like di atas, lalu:

4. Jika ingin memasang button di atas posting, cari <div class='post-header-line-1'/> atau <div class='post-body'> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya. Jika kedua kode tersebut tidak ketemu, letakkan kode di ATAS <data:post.body/>.

5. Jika ingin memasang button di bawah posting, cari  <data:post.body/> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya.

6.  Save template.

7. Selsai dech...