Cara Membuat Menu Tab View Di Blog

Cara Membuat Menu Tab View Di Blog, Sebenarnya ini sudah banyak di publish di blog tetangga, tapi apa salahnya publih lagi untuk Anda yang belum membuat dan ingin Membuat Menu Tab View Di Blog.
Bagaimana Cara Pasang Tab View Menu Di blog ?, Jangan kemana-mana ikuti terus Master Chef karena Master Chef akan membahas tuntas mengenai resep ini. Berikut langkah-langkahnya :

1. Silahkan masing-masing login kehalaman blog
2. Jika semua sudah masuk ke akun blog masing-masing, sekarang Akses halaman Edit HTML Blogspot
3. Jangan lupa juga untuk download template lengkap untuk antisipasi kesalahan dalam edit HTML
4. Jika sudah masuk hlaman Edit HTML cari kode ]]></b:skin> ( Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode )
5. Jika kode sudah ditemukan Copy kode dibawah dan letakan diatas kode ]]></b:skin>

div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 90px; /* Lebar Menu Utama Atas */ text-align: center; height: 24px; /* Tinggi Menu Utama Atas */padding-top: 3px; vertical-align: middle; border: 1px solid #000; /* Warna border Menu Atas */ border-bottom-width: 0; text-decoration: none; font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */font-weight: 900; color: #000; /* Warna Font Menu Utama Atas */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #FF9900; /* Warna background Menu Utama Atas */ } div.TabView div.Pages { clear: both; border: 1px solid #6E6E6E; /* Warna border Kotak Utama */ overflow: hidden; background-color: #FF9900; /* Warna background Kotak Utama */ } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }

 6. Kode yang berwana Biru merupakan keterangan dari kode yang bisa kamu rubah untuk penyesuaian dengan halaman blog kamu

7. Sekarang Klik Simpan template 8. Ok Langkah selanjutnya, Kembali ke dashbord blog kamu pilih "Tata Letak atau Layout" 9. Klik Add a Gadget atau Tabah a Gadget 10. Tunggu bebera saat akan muncul tampilan seperti dibawah, kemudian pilih Widget HTML/JavaScript 11. Copy Kode Berikut dan letakan kedalam kolom Widget HTML/JavaScript

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width: 350px;"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a> </div> <div class="Pages" style="width:350px; height: 250px;"> <div class="Page"> <div class="Pad"> Tab 1.1<br /> Tab 1.2 <br /> Tab 1.3 <br /> </div> </div> <div class="Page"> <div class="Pad"> Tab 2.1 <br /> Tab 2.2 <br /> Tab 2.3<br /> </div> </div> <div class="Page"> <div class="Pad"> Tab 3.1<br /> Tab 3.2 <br /> Tab 3.3 <br /> </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

Keterangan :
1. Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
2. Code yang berwarna Merah adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)

Contoh punya saya: Tab 1 ganti dg BLOG

Tab 2 ganti dg Facebook

Tab 3 ganti dg Tips Trik

                        3. Code yang berwarna Pink diatas adalah halaman dari tabel yang bisa  kamu pasangi code-code gagdet, gambar atau link.

          12.  Klik Simpan
          13. Selesai dan Lihat hasilnya

Read More

Cara Membuat Gambar Membesar saat disentuh Kursor di Blog

Pada kali ini mazinu akan jelaskan kepada kalian tentang Bagaimana cara agar Gambar yang ada di Blog kita apabila disentuh oleh kursor maka gambar tersebut akan membesar.
Sahabat Mazinu ingin tahu caranya??
Jika Sahabat ingin memasangnya silahkan disimak langkah-langkah berikut ini :

• Masuk ke akun blogger kalian.
• Pilih Template > Edit HTML.
• Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard
• Jika sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

• Simpan, dan Lihat hasilnya!

Semoga Artikel tentang Cara Membuat Gambar Membesar saat disentuh Kursor di Blog diatas bermanfaat buat kalian!

dan dapatkan informasi terbaru dan yang paling populer dari kami dengan cara Lihat dan Klik Disini ,, sukses selalu kawan! :)

Apakah kalian menyukai artikel tentang Cara Membuat Gambar Membesar saat disentuh Kursor di Blog ini?

Read More

Cara Mengganti Kursor Blog Dengan Gambar Atau Animasi

URL : http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/tail2.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/banana1.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif

<style type='text/css'>
HTML,BODY{cursor: url(&quot;http://downloads.totallyfreecursors.com/thumbnails/sweden.gif&quot;), auto;}
</style>

Read More

Cara Memasang Video Youtube Di Blog Agar Valid HTML5 Dan SEO Friendly

Seperti biasa, ini adalah pengalaman tentang kutak-katik blog hehehe... Sebenarnya saya tidak menyadarinya selama ini karena sudah menganggap bahwa cara memasang video Youtube selama ini sudah valid HTML5, jadi saya tidak mengecek ke-SEO-annya. Ternyata pagi ini ada pertanyaan dari teman Kompi Ajaib, Mas Aulia pemilik Abitalita Blog yang ketika mengecek skor SEO templatenya di Chkme terdapat error/bad pada iframe.

Ketika saya lihat pada page source blog Mas Aulia, ternyata pada salah satu artikel yang sekarang tampil di homepage-nya terdapat iframe dari video Youtube. Nah untuk itu kini saya cara memasang video Youtube agar valid HTML5 dan SEO Friendly setelah saya kutak-katik karena saya searching di Google tidak menemukannya.

Biasanya kode embed video Youtube akan seperti di bawah ini:

<iframe width="560" height="315" src="http://www.youtube.com/embed/Bgt9g1q-xj0?rel=0" frameborder="0" allowfullscreen></iframe>

Namun ketika dicek pada validasi HTML5, kode embed di atas tidak valid HTML5. Jadi kalau mau valid HTML5 kodenya harus dirubah, perhatikan kode berwarna merah di atas silahkan ganti dengan tana kutip (") sehingga menjadi seperti di bawah ini.

<iframe width="560" height="315" src="http://www.youtube.com/embed/Bgt9g1q-xj0"></iframe>

Nah dengan cara di atas, kode embed video Youtube sekarang sudah valid HTML5. Namun ternyata setelah dicek untuk skor SEO template, iframe pada kode tersebut error/bad. Nah untuk mengatasinya silahkan gunakan cara di bawah ini.

Ketika Anda klik tombol embed video di Youtube, silahkan gunakan kode embed lama Youtube dengan memberi tanda centang pada "Use old embed code". Dan kodenya akan seperti di bawah ini.

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/Bgt9g1q-xj0?hl=en_US&amp;version=3&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Bgt9g1q-xj0?hl=en_US&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Perhatikan kode yang berwarna merah, silahkan hapus kode tersebut dan kode yang berwarna biru ganti dengan tanda (/), sehingga penampakannya akan seperti di bawah ini.

<embed src="http://www.youtube.com/v/Bgt9g1q-xj0" width="560" height="315"/>

Nah sekarang coba cek validasi HTML5 di W3C dan skor SEO templatenya di Chkme. Bagaimana, mudah kan? Semoga pengalaman ini dapat bermanfaat bagi kita semua.

Read More

Cara Membuka Widget/Gadget Blog Yang terkunci

assalamu alaikum sobat blog haztak bertemu lagi sama saya tentunya ... haztak orang ganteng ini :D pada kesempatan kali ini saya mau kasi trik sama sobat sobat semua

sesuai judulnya Cara Membuka Widget/Gadget Blog Yang terkunci biasanya kalau Lagi Mengganti template Blog , kita menemukan widget/Gadget yang terkunci alias tidak bisa di hapus atau di pindah pindahkan .. nah buat yang kesusahan mengatasi masalah yang seperti di atas Haztak Blog kasi solusinya nih :D

Cara Membuka Widget/Gadget Blog Yang Terkunci

1. Login ke Blogger
2. Masuk ke Design (Rancangan) – Page Elements (Elemen Laman)
3. Lihat judul gadget yang Terkunci. ingat judul gadget itu. Jika tidak ada nama pada gadget tersebut, beri nama!
4. sekarang, Masuk ke Edit HTML
6. Tekan Ctrl+F, masukkan nama gadget tadi Lalu tekan Enter
7. Contoh saya mencari nama gadget Labels. Hasilnya seperti ini :
<b:widget id='Label1' locked='true' title='Labels' type='Label'>
8. Disini dituliskan oleh perancang template bahwa gadget yang bernama Label terkunci. Jika ingin menghilangkan kuncinya, ganti true dengan false nanti jadinya kayak gini <b:widget id='Label1' locked='false' title='Labels' type='Label'>

Coba kembali ke Page Elements. dan liat hasilnya apakah widget atau gadgetnya masih terkunci hehhe pasti udh kebuka kuncinya :D salam blogger Dari Haztak Blog :D

Read More

Bagaimana Cara membuat Read More otomatis di blogspot?

Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah  ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.

Langkah-langkah cara membuat Read More Otomatis di Blogspot

• Login ke Blog anda
• Buka halaman design > Edit HTML > centang Expand template widget
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
• Paste kode berikut tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

• Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.
• Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Finish simpan template dan lihat hasilnya

Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. Yang bisa dirubah adalah berwarna merah saja dan berikut ini adalah keterangannya :

1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
5. Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.

Terima Kasih uda Copas ^ ^ Sebagai balas jasa kamu, Ayo Like -> http://facebook.com/dipromosikan | Sumbernya : http://www.bamz.us/2011/11/cara-membuat-read-more-otomatis-di-blog.html#ixzz2R6bNDOMB

Read More

Cara Membuat Catatan Kaki di Blog

Cara Membuat Catatan Kaki di Blog- Catatan kaki pada artikel biasanya di buat untuk menyampaikan pesan kepada pengunjung blog. Baik ucapan terima kasih, atau pun peringatan untuk tidak melukan copy-paste tanpa memberikan link sumbernya atau kredit plus bagi blog kita.

Untuk menyampaikan pesan pada pengunjung blog tidak hanya menggunakan catatan kaki saja, bisa juga dengan menggunakan permalink atau permanen link. Hanya saja kalau catatan kakipada postingan saya kali ini tidak maenggunakan foto sedangkan pada permalink yang saya posting kemarin menggunakan foto admin dan text area yang otomatis  ter-block.

Langsung saja buat sobat yang ingin memakai catatan kaki di blognya, bisa mengikuti langkah-langkah di bawah ini :

·                     Masuk  dengan akun blog sobat

·                     Pilih menu template dan klik Edit Html 

·                     Centang Expand Template Widget 

·                     Cari Kode <data:post.body/> 

·                     Tekan Ctrl + F  Untuk mempermudah pencarian kode

·                     Letakan script berikut di bawah kode <data:post.body/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='vcard' id='hcard-Riki-Junizar' style='margin-top: 30px; padding: 10px; font-size: 12px; font-family: Arial; background: #ffe6a3; line-height: 1.3em; color: #cc0000'> <span style='color:#cc0000; font-size:18px; margin-top:10px'>Terima Kasih Atas Kunjungan Anda</span><br/>
Judul: <span itemprop='itemreviewed'><data:post.title/></span><br/>
Ditulis Oleh <span class='fn n'><span class='given-name'><span itemprop='reviewer'><data:post.author/></span></span></span><br/> 
<span style='text-align: justify'>Jika mengutip harap berikan link yang menuju ke artikel <b><a expr:href='data:post.url'><data:post.title/></a></b> ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya</span> </div> </b:if>

·                      Simpan template dan lihat hasilnya

Keterangan kode di atas :

·                     Scipt dengan latar kuning adalah scipt untuk memerintahkan HTML code hanya dieksekusi pada halaman-halaman artikel saja. Jadi kode ini tidak akan tampil di beranda blog.

·                     Script latar biru adalah kotak untuk tampilan script ini. Saudara bisa mengubah warna untuk color dan background sesuai dengan selera. Jangan lupa mengubah nama Riki-Junizar, menjadi nama saudara di blogger.

·                     Script dengan latar hijau adalah perintah untuk mengeksekusi kode rich snippet microdata review.  

·                     kode tercetak tebal warna merah adalah kode yang dibutuhkan untuk menampilkan judul artikel dan URL artikel.

·                     Script berlatar putih adalah kata-kata yang ada dalam catatan kaki nanti, sobat bisa mengubahnya dengan kalimat yang sobat inginkan.

Catatan: Jika kode <data:post.body/> lebih dari satu, saudara bisa coba pasang salah satunya dulu. Jika tidak tampil segera pindahkan kode ini ke yang lainnya lagi.

Jika langkah-langkah yang sobat lakukan benar maka hasilnya akan seperti gambar di bawah ini :

 Klik gambar untuk memperbesar

 

Terima kasih telah membaca artikel tentang :

Cara Membuat Catatan Kaki Pada Blog

Read More