Iklan
Showing posts with label TutorialFree. Show all posts
Showing posts with label TutorialFree. Show all posts

Saturday, 20 April 2013

Templet Koleksi Video dari Johny Crottube, Mantab Abis

12:07
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.


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)

      10:52
      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




       

      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.

      Labels

      Labels

      Labels

      Copyright © Blog'e Aji Bintara. All rights reserved. Template by CB Blogger