Breaking News
Loading...

Game Reviews

Tech News

New Design

Recent Post

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
5 Cara Agar Blog Anda Lebih Ringan

5 Cara Agar Blog Anda Lebih Ringan


hai sobat blogger selamat sore.. di daerah ane lagi ujan deres nih... dingin uy :D dari pada bengong gak jelas mending ane ingin berbagi tips agar loading blog lebih cepat dari BLOG Culkiboy

tentu saja loading blog juga mempengaruhi trafik blog karena pada dasar nya pengunjung tidak suka dengan blog yang terlalu berat dan akhir nya pengunjung pun langsung menutup blog sobat

buat sobat yang merasa blog nya berat coba sobat ikuti beberapa tips & trick ini..

1.Background Blog
mungkin memasang background blog dengan gambar mungkin akan terlihat lebih menarik,keren tapi di balik itu blog sobat akan terasa lebih berat karena setiap melakukan loading, gambar background akan otomatis terbaca,jika sobat ingin tetap memasang background, sobat bisa memasang background blog hanya dengan warna saja

2.Widget / Gadget
widget merupakan suatu hal yang penting bagi blog,tapi akan ada buruk nya juga bila kita memasang nya terlalu banyak (apa lagi yang gak penting,contoh nya seperti widget animasi,kalender,jam,efek blog dengan hujan salju) dengan sobat memakai widget yang terlalu banyak maka loading blog sobat menjadi sangat berat

3.Link Iklan
terlalu banyak memasang link iklan akan menambah berat blog,pengunjung juga tidak suka kehadiran link iklan yang terlalu banyak dan akhir nya pengunjung meninggalkan blog sobat,trafik blog sobat juga akan menurun

4.JavaScript
jika template sobat mengandung script orang lain maka sebaiknya sobat ganti dengan nama sobat sendiri contoh nya seperti sript recent comment
http://scriptoranglain.googlecode.com/files/recentcomment.js sobat bisa membuat file hosting dengan nama sendiri di
http://yourjavascript.com/ 
https://drive.google.com/
 atau
http://code.google.com untuk tutorial membuat host sendiri di google banyak kok ^^

5.Postingan 
pada halaman utama (hompage) jumlah posting / artikel juga mempengaruhi loading blog, karena apabila artikel yang di tampilkan terlalu banyak itu sangat mempengaruhi loading blog,untuk mengatur nya sobat tinggal login bloggger-->tata letak-->pada posting blog klik edit-->pada menu Jumlah posting di halaman utama:-->pilih 5 (angka sewajar nya) simpan
dan jangan lupa untuk memasang auto read mroe 

jika blog sobat ingin mempercepat loading blog tidak ada salah nya mengikuti cara di atas
cara di atas juga ane dapatkan dari sobat blogger lain nya ^^

semoga bermanfaat

selamat mencoba
Cara Mudah Membuat SITEMAP atau Peta Situs di Blogspot

Cara Mudah Membuat SITEMAP atau Peta Situs di Blogspot


Cara Mudah Membuat SITEMAP atau Peta Situs di Blogspot - Kata para Suhu di dunia SEO untuk mendapatkan posisi yang baik di Search Engine / artikel cepat terindex anda harus membuat SiteMap. Para master diluar sana sudah banyak yang memberikan cara membuat sitemap mulai dari yang mudah sampai yang aga sulit. Disini saya memberikan yang Simple saja.

Sebelumnya saya sarankan anda untuk membaca artikel tentang Cara Menggunakan Webmaster


Cara Mudah Membuat SITEMAP atau Peta Situs di Blogspot :

Misalnya alamat blog anda adalah "http://diajarblogger.blogspot.com", maka sitemap blog anda adalah "http://diajarblogger.blogspot.com/feeds/posts/default?max-results=400". Jadi anda cukup menambahkan akhiran "feeds/posts/default?max-results=400". sitemap atau peta situs blog anda sudah jadi. Simple, Mudah Singkat :D

Pasti bisa kan? Sekaran anda hanya perlu Sumbit Sitemap anda di Webmaster Tools Cara nya baca : Cara Sumbit Sitemap dan Daftar Webmaster Tool

Baca juga ya : Cara Mendaftar Google Analystics
Semoga Bermanfaat :)
Cara Mendaftar Google Analystics dan Memasang Kode di Blogspot Mudah

Cara Mendaftar Google Analystics dan Memasang Kode di Blogspot Mudah

Cara mendaftar Google analytics
Cara Mendaftar Google Analytics dan Memasang Kode di Blog - Anda ingin mengetahui trafik blog anda? Atau ingin mengetahui seberapa ramai blog anda? Google Analytics adalah aplikasi yang tepat untuk memonitor blog anda, terlebih google analytic juga sangat penting untuk pelaku bisnis online dan para pencari uang di internet karena lewat aplikasi milik google ini kita bisa mengetahui seberapa ramai blog kita. Nah, karena aplikasi ini sangat berguna sekali, maka saya share deh Cara Mendaftar Google Analytics yang saya dapat dari Trik SEO Simple.

Kita langgung saja ke tutorial cara mendaftar google analytics dan memasang kode diblog anda.

Cara Mendaftar Google Analytics Universal

  • Kunjungi Halaman Googel Analiytics
  • Setelah berada pada halaman google analytics, klik link MASUK di kanan atas.
  • Klik PENDAFTARAN untuk membuat akun analytics baru.
Sign up Google Analytics
  • Setelah anda masuk lengkapi formulir pendaftaran
  • Pastikan opsi yang anda pilih adalah WEBSITE bukan APLIKASI
  • Geser kebagian bawah anda akan memilih opsi dari google analytics dan pastikan pilih yang UNIVERSAL ANALYTICS karena fiturnya lengkap dan sama gratisan.
formulir Googel analytics
  • Selanjutnya klik setuju pada PRIVACY POLICE
privacy police
  • Setelah anda klik SETUJU, anda akan dibawa kehalaman akun anda, dan akan ada kode analytics yang anda harus pasang pada blog anda.
  • Silahkan copy kode tersebut

Memasang ID Tracking Google analytics pada blog anda

  • Masuk pada akun blogger anda
  • Pilih menu TEMPLATE
  • Pilih EDIT TEMPLATE
  • Cari kode </head> pada blog anda dan paste kode analytics tepat diatas </head>
  • Simpan Perubahan
  • Coba buka kembali halaman google analytic dan tekan F5 dan lihat apakah ada pemberitahuan KODE PELACAKAN berhasil atau tidak.
  • Jika belum Coba alternatif berikut
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);

  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ?  'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
  • Ganti kode UA-XXXXX-X dengan ID pelacakan anda.
  • Hapus kode diatas </head> yang sebelumnya anda pasangdan ganti dengan kode script diatas.
  • SIMPAN TEMPLATE
  • Coba tekan F5 kembali pada halaman google analytics.. mudah-mudahan berhasil

Sebenarnya anda juga bisa memasang ID pelacakan melalui pengaturan lalu pilih lainnya pada kolom google analytics masukan kode PELACAKAN ANDA (UA-XXXXX-X). (lihat gambar)


instal Google Analytics
Dengan terpasangnya id pelacakan pada blog anda maka anda bisa mengetahui trafik blog anda dan tetunya sudah lebih SEO. Demikian cara daftar google analytics dan memasang kode diblog anda sudah seesai, OK saya rasa cukup sampai disini dulu trimakasih sudah mampir dan membaca artikel saya.
Cara Mendaftarkan, Vertifikasi dan Sumbit Sitemap Blog di Webmaster Tools

Cara Mendaftarkan, Vertifikasi dan Sumbit Sitemap Blog di Webmaster Tools

Google webmaster Tool
Trik SEO Simple - Google webmster tools  adalah salah satu fitur gratis yang di berikan google untuk memaksimalkan website atau blog kita, fitur yang bisa di gunakan antara lain: untuk mengamati top search Keyword, dominasi keyword di blog, masalah brokn link, crawls eror dll.  sebagai blogger baru anda wajib mendaftarkan blog anda kepada Google webmaster karena ini adalah salah satu hal penting untuk blog anda.

jika blog anda menggunakan flatform blogger atau blogspot berbahagialah karena anda akan mundah dalam pendaftaran google web master. anda cukup menggunakakn gmail anda untuk login.

Melakukan Site Verivication

  • Setelah anda login maka pada halaman beranda webmaster akan tampil blog anda meliputi nama url blog dan gambar blog anda >> Pilih MANAGE SITE atau KELOLA SITUS di sebelah kanan.
  • selanjutnya klik ADD OR REMOVE USER atau TAMBAHKAN ATAU HAPUS PENGGUNA. Umumnya jika blog anda mengunakan blogger secara otomatis sudah terverivikasi.
  • Silahkan cari Link VERIFY USING A DIFFERENT METHOD atau VERIVIKASI MENGGUNAKAN METODE LAIN.
  • Pilih Add a meta tag on your site's home page atau tambahkan tag meta ke beranda situs anda >>  kopy dan simpan kode html yang di berikan.
  • Silahkan letakan kode yang anda kopy tadi tepat dibawah <Head> template anda.
  • simpan template anda.
  • jika sudah tersimpan kembali ke jendela google webmaster dan klik VERIFY di bagian bawah halaman.
  • jika anda melakukan dengan benar maka akan ada pemberitahuan SUCCESS.

Submit Sitemap/peta situs

  • kembali ke halaman beranda Google webmaster
  • Klik pada link url atau alamat blog anda
  • pilih peta situs
  • pada halaman peta situs pilih tambahksan/uji peta situs
  • masukan peta situs dibawah ini:
feeds/posts/default
feeds/posts/default?alt=rss
/atom.xml?redirect=false&amp;start-index=1&amp;max-results=500

submit site map

  • setelah anda submit biasanya akan tampil seperti gambar di atas
  • selesai
Baca cara membuat peta situs untuk blogspot agar blog anda amemiliki sitemap
pelajari selengkapnya cara membuat sitemap untuk blog anda,
silahkan klik link cara membuat sitemap atau peta situs untuk blogspot
blog anda sudah memiliki site map dan sudah terdaftar di google webmaster.

demikian cara mendaftar google webmaster tools untuk blog anda, mudah-mudahan bisa membantu blog anda agar lebih cepat terindex
Cara Vertifikasi atau Memasang OpenID di Blogspot

Cara Vertifikasi atau Memasang OpenID di Blogspot

Cara Vertifikasi atau Memasang OpenID di Blogspot - Caranya mudah banget lho.. kebanyakan orang memang berkomentar menggunakan OpenID karena banyak sekali ke hebatannya :v . selain berkomentar dengan OpenID itu mudah, juga anda akan mendapatkan Backlink dari BLOG yang anda komentari, jika beruntung. hee


Langsung saja Cara Vertifikasi atau Memasang OpenID di Blogspot :
- Masuk dulu ke blogger.com
- Pergi ke template => Edit HTML
- Cari kode <head>
Lalu masukan kode dibawah ini tepat dibawah kode <head> :
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
- Klik Simpan template dan silahkan anda coba untuk berkomentar di blog ini dengan mode OpenID  :)

Cara berkomentar dengan mode OpenID disimak Gambar dibawah :

Cara Vertifikasi atau Memasang OpenID di Blogspot
Cara Vertifikasi atau Memasang OpenID di Blogspot

Pasti udah bisa kan? ya udah.. kalo udah bisa, udah dulu ya.
Semoga bermanfaat.. Good Bye :D
Cara membuat Kotak Tentang Penulis atau Admin/ Author BOX di Blog

Cara membuat Kotak Tentang Penulis atau Admin/ Author BOX di Blog

HAIIIIII !!

Nah,saya sekarang mau share ilmu lagi nih. Itung-itung kan buat pahala

Nah, Kalian tau kan ada beberapa blog yang di bawah postingan di tulis :

"About The Autor, blablabla" Gak mudeng ya? Oke ini saya kasih pict nya

Cara membuat Kotak Tentang Penulis atau Admin/ Author BOX di Blog


Klik Zoom aja kalau mau diperbesar yaaa 



Nah, penasaran? Mau membuatnya juga? Okee ikutin dengan teliti yaaa!

1. Masuk Ke akun blog kalian

2. Klik Rancangan -> Edit HTML -> Lanjutkan -> Centang Expand Template Widget

3. Copas Kode Berikut dan Letakkan di ATAS kode <div class='post-footer'>
<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSVCjzNeN818PRBA-hS01Y7q8wQkCxQnD430sFzZnd8S4DBxZcguMKG2tNV0a_ErRS6AFZ1t8B86RoPAAFdD2F8x962RJ2dDGeXPe70SShfpxGh0Rnya9K94ys40J2XWPoaIsAkO3Rpps/s124/SP_A4083.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href=' http://websitepunyague.blogspot.com/2012/09/cara-membuat-kotak-tentang.html ' target='_blank'>:: Buat Widget Seperti Ini ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
4. Kemudian Cari kode ]]></b:skin>

5. Copas Kode Berikut DIATAS kode ]]></b:skin>
.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

5. Klik Save, dan Lihat .

Penjelasan :

- Tulisan Warna Kuning Anda Isi dengan Deskripsi Blog anda

- Tulisan Warna Biru Anda ganti dengan URL Foto anda

- Tulisan Warna Merah bisa anda Edit sesuka hati anda


Nah, gampang kan?
Okeee segitu dulu yaaa, Salam Bloggers

Sumber : Websitepunyague.blogspot.com
Cara Mudah Membuat Semua Link Open New Tab Pada Blog

Cara Mudah Membuat Semua Link Open New Tab Pada Blog

Cara Mudah Membuat Semua Link Open New Tab Pada Blog

Halo Sobat.. Kali ini saya share Cara Mudah Membuat Semua Link Open New Tab Pada Blog.
Contoh Link yang open in new tab :

KLIK DISINI

Udah tau kan sekarang?
Cara Cara Mudah Membuat Semua Link Open New Tab Pada Blog :

1. Buka akun blogger anda terlebih dahulu
2. Masuk ke menu template => Edit Html
3. Silahkan anda cari kode </head> (Cari menggunakan CTRL+F agar lebih mudah)
4. Lalu salin / copy kode dibawah ini dan simpan tepat di atas kode </head>
<base target='_blank' />
 5. Klik Simpan. Lihat hasilnya. :)

~Happy blogging. semoga bermanfaat
Cara UnFollow Blog Orang Lain

Cara UnFollow Blog Orang Lain

Malam Sob...

Pernah gak sih kalian ngerasa bete? Kalau kita udah follow blog si A tapi si A itu gak followback blog kita? Padahal kita tau si A nya itu sok gatau kalo kita udah follow blog dia. Ya itu sering terjadi kok dimana aja hehe :)

Jadi sama-sama impas, kita gak follow blog dia, dan dia gak follow blog kita. Apasih follow ? Apasih unfollow ? Istilah di facebook, yaa kayak add as friend gitu. Tapi dalam bahasa yang sedikit berbeda :)
Nah disini makanya kenapa saya ngasih tips buat unfollow blog orang.

Nah, alasan kuat kamu unfollow blog mereka apasih? Mungkin ada disini alasannya :


  • Blog yang udah kamu follow ternyata udah tidak aktif
  • Content blog yang udah kita follow, ternyata berubah menjadi konten dewasa/semacamnya
  • Admin si A ngasih tau kalo dia lupa password blog nya

Nah dari situ kalian pasti ada keinginan untuk unfollow, tapi kurang ngerti caranya.
Udah gasabar pengen unfollow blog yang gak follback kalian? Okee ikutin cara tia berikut inii :D

1. Masuk ke akun blogger kalian

2.




Nah, kan udah ada fotonya. Klik itu :) Jelas kaan? Oke kita ke step 3

3.




Nah, abis step 2 di klik. Muncul layar kaya di step 3 ini nih, kamu klik aja itu yang di anjurin di fotonya :)

4. 



Perhatiin sebelah kanan itu, "Berhenti ikuti situs ini" ya kan? klik ajaaa itu ;)

5.



Abis klik step ke 4, ntar ada muncul kaya gitu tuh yang di step 5. Trus ikutin deh klik "Berhenti Mengikuti"

NB : Maaf buat blog nyaa, itu cuma dijadiin sample kok hehe peacee :D


DAN... TARAA!! Kamu udah resmi unfollow blog si A.

NB : Maaf buat blog nyaa, itu cuma dijadiin sample kok hehe peacee :D
Sumber : Websitepunyague.blogspot.com
Cara Pasang TV Online di Blog Dengan Mudah

Cara Pasang TV Online di Blog Dengan Mudah

Pernahkan anda melihat blog orang yang ada TV nya?
Bagus ngga? Mau Ngga? Kalo Mau, anda sudah berada di tempat tutorialnya yaitu Cara Pasang TV Online di Blog Dengan Mudah.

Cara Pasang TV Online di Blog Dengan Mudah
Langsung saja ya...

  1. Masuk ke akun blogger.com anda, sudah?
  2. Buat Postingan baru / Entry baru
  3. Klik Mode HMTL. Lalu Masukan Kodenya. Lihat GAMBAR/FOTO
Cara Pasang TV Online di Blog Dengan Mudah

Ini Kode nya :
<embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="790" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=' + Math.round(Math.random() * 99999) + '" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed>
Note : Kode yang berwarna Biru anda ganti / sesuaikan dengan template blog anda :)

Kalo Kode Cara Pasang TV Online di Blog Dengan Mudah udah dimasukin tinggal publish aja...
Selesai deh~ :D

Cukup mudah kan? Pasti bisa dong.. Semoga Artikel kali ini yang berjudul Cara Pasang TV Online di Blog Dengan Mudah bisa bermanfaat. Minta Komennya ya! :D
Tips Agar Postingan Blog Anda Banyak Yang Berkomentar

Tips Agar Postingan Blog Anda Banyak Yang Berkomentar


Cara Agar Postingan Banyak Komentar

Cara Agar Postingan Banyak Komentar - Kalo blog itu, kita tau gak bakal pernah lepas dari 2 hal. Yap, apalagi kalau bukan 'Postingan' dan 'Pengunjung'. Dua faktor itu yang menjadi penunjang agar blog maju. Tetapi perlu diperhatikan, kita yang notabene sebagai pemilik blog, juga ingin mendapatkan feedback dari para pembaca artikel blog kita. Nah, itu lah kenapa di sediakan kotak komentar. 

Sekarang, misalnya kita membuat salah satu artikel, terus tidak ada yang memberikan komentar satupun, rasanya kayak nyesek ya? Kita kan ngarepnya dikasih tanggapan atas artikel yang kita buat, eh malah silent reader semua visitor blognya. Nah, kali ini kalau kalian punya nasib yang sama kayak cerita aku diatas...saya akan mau beberapa 'cara atau tips agar postingan blog kalian banyak di komentari orang' yang saya dapat dari TIA BLOG
1. Buat artikel yang menarik/yang memancing agar para pengunjung tertarik untuk berkomentar di suatu artikel kalian

2. Lalu, Sekarang ke "Setelan" Blog. Kalau yang tidak jelas, bisa di klik gambar ini :

Cara Agar Postingan Banyak Komentar

Nah, biar aku jelasin ya.
- Abis dari menu "Setelan", kalian pilih menu "Pos dan Komentar"
- Lalu, coba lihat ke arah menu 'Moderasi Komentar', dan pilih option SELALU.
- Lalu, dibawahnya ada menu Tampilkan Verifikasi Kata, dan pilih option Tidak.

Nah Save deh.


Pasti beberapa ada orang yang nanya, kenapa verifikasi katanya dihilangkan? Bukannya itu mencegah Robot? Nah, gini penjelasannya.


Verifikasi di blogger itu kadang bentuknya rumit, ribet buat diikutin. Ada beberapa orang yang tadinya sudah mau berkomentar di blog, tetapi malah mengurungkan niatnya. Karena mereka sudah kesal duluan dengan Verifikasi Kata nya yang salah terus. Ada baiknya untuk memilih 'Moderasi' saja, kenapa? Karena, setiap komentar yang masuk, bisa kalian pilih untuk kalian publikasikan di blog kalian.


Nah, gimana? Sudah ngerti? Yasudah, semoga infonya bermanfaat dan siap-siap artikel kamu di banjiri oleh komentar visitor kamuuu, yuhuuuu!
Cara Membuat Scroll Pada Widget Mudah (Label, Popular Post dll)

Cara Membuat Scroll Pada Widget Mudah (Label, Popular Post dll)

Yang Blognya kebanyakan Widget, mungkin bisa dipersimple lagi dengan menggunakan Scroll pada salah satu widgetnya misalnya pada Label / Popular Post atau juga pada Link Teman / Partner


Cara Membuat Scroll Pada Widget Mudah (Label, Popular Post dll) :
Nah, kali ini saya coba dulu untuk membuat Scrollnya pada Labels

1. Masuk Ke Blogger.com
2. Silahkan Anda Pergi Ke Menu Template -> Edit HTML
3. Kemudian Cari Kode ]]></b:skin> (Gunakan tombol CTRL+F, untuk mempercepat, dan memudahkan proses pencarian)
4. Copy Kode dibawah ini dan simpan tepat di atas kode  ]]></b:skin>

#Label1 .widget-content{ height:150px; width:auto; overflow:auto; }
 5. Simpan Template dan lihat hasilnya.

Pertanyaan yang mungkin ingin anda sampaikan : Bagaimana cara membuat Scroll di Widget yang lain ?

Untuk membuat Scroll pada Widget lain tinggal anda rubah Kode #Label1 dengan kode widget yang anda inginkan.
Cara Mencari Kode Widget, Misalnya kita akan mencari Kode Widget Popular Post :


Sudah Mengertikan ? Jadi Nantinya kita rubah kode tadi menjadi :

#PopularPosts1 .widget-content{ height:150px; width:auto; overflow:auto; }
Cukup sampai disini semoga berhasil. Cara Membuat Scroll Pada Widget Mudah (Label, Popular Post dll)
Cara Membuat Random Post di Blog dengan Mudah, Tanpa Edit HTML

Cara Membuat Random Post di Blog dengan Mudah, Tanpa Edit HTML

Cara Membuat Scroll Pada Widget (Label, Popular Post dll) Simple dan Mudah
Images Source : Yoga-Tc BLOG                       

Langsung saja ini dia cara membuat Random Post di Blog dengan Mudah, Tanpa Edit Html :

  • Yang pertama pastinya, anda sudah Login ke Blogger.com!
  • Silahkan Masuk Ke Tata Letak / Page Element
  • Silahkan klik tambahkan Gadget -> Pilih HTML/Javascript
  • Lalu Masukan Kode dibawah ini
<script type = "text/javascript">
var randarray=new Array();
var l=0;
var flag;
var numofpost=5;
</script>
<script src="https://googledrive.com/host/0By9Vs49VphQqaDFNWTNZZVlMR2s" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts"type="text/javascript"></script>

Note :
Sesuaikan Angka 5 dengan jumlah Post yang ingin anda tampilkan. Tapi Jangan Kebanyakan ya. hee

Itu saja ya Cara Membuat Random Post di Blog dengan Mudah, Tanpa Edit HTML Simple kan ? Pasti Work deh :D Thanks
Widget Ajaib Peningkat SEO

Widget Ajaib Peningkat SEO

Cara rahasia meningkatkan SEO.

Meningkatkan seo di chkme.com menggunakan free links building
Pada articel lalu saya jelaskan menggunakan terlalu banyak widget dapat mengurangi SEO

namun ternyata widget yang ini beda sama yang lainnya.

FREE LINK FOR SEO
Langsung saja ke TKP.
Pertama sebelum mencoba anda cek dulu SEO anda di chkme.com

PERGI KE SINI LINK FOR YOU SEO
Lalu masuk ke blogger.com jika anda belum masuk
pilih tata letak -> pilih lagi HTML/JAVASCRIPT

masukan kode yang anda dapatkan dialamat tadi atau yang lebih mudahnya masukan saja kode ini di HTML/JAVASCRIPT tadi

<!-- Start Backlink Code --><a title="SEO Links Exchanges | Blog Link Building Service" target="_blank" href="http://seo-links-exchanges.blogspot.com/"><img width="80" alt="SEO Links Exchanges, Blog Link Building Service" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdB9LvUmsvtQdxzsz1Xc1vl-s2c4JDy47q6fq5Zq9mW09Xqolv1u-35tsYyWf-IHhBlCEGtUw-mvUZZ4ZW8y_LOdY_pzAgegi_qAg5dvuvTigrTz_jhmscIcrgeaRWut2CuZEhT3Wdyho/s1600/Free+Links+04.png" height="15" /></a><!-- End Backlink Code -->  <!-- Start Backlink Code --><a title="Build Your Links For Free | Links Building Service" target="_blank" href="http://free-links-building.blogspot.com/"><img width="80" alt="Build Your Links For Free, Links Building Service" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8moEk1uVPdiz2B3gBawD7mnhtsvjT19RqrEv5unmRiZlF13E3BD_T3-vwX9BkPM3RkTKcaHMN4Yx9kphgWF9B0URSfJH7mBMELN7fBe1MMbiwtCOjx5bGo5dxyHGscWru41_V4rr0lqEr/s1600/Free+Links+03.png" height="15" /></a><!-- End Backlink Code -->  <!-- Start Backlink Code --><a title="SEO Links Attitude | Free SEO Links Building " target="_blank" href="http://free-links-exchanges.blogspot.com/"><img width="80" alt="SEO Links Attitude | Free SEO Links Building " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUcr_8ptVGf2FoOjiqJT62TDJYn914bhxqcKyPs4meu3PUJl-LtAiN8E8yKb-BzRzTnkPFApEoyCdhrfkn8_VkDYhFek2UmqdX18m4flA1PPRJ4AwhKWluxyRUvA_npGOLuXT3mBRVDAE/s1600/Free+Links+02.png" height="15" /></a><!-- End Backlink Code -->  <!-- Start Backlink Code --><a target="_blank" href="http://linux-tutor-and-tips.blogspot.com/"><img width="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0yrfqCTdJXTI8e0JJpr9vuMQwEK1xKwnR8fRGXeX0BEvs644CCn_XthlP3WHnUTdlqmoQn5it3XHObKv10o6c26AEFwyw6vKubyWiF58Zcp0R8hiwdcHslasKGug6w49b-6zIyBNfbRA/s1600/Free+Links+01.png" height="15" /></a><!-- End Backlink Code --> <!-- Start backlink -->  <!-- Start Backlink Code --><a title="Free Backlink Service, Links Building 4 Free" target="_blank" href="http://free-backlink-service.blogspot.com/"><img width="80" alt="Free Backlink Service, Links Building 4 Free" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqV_HcqdrG9AgA7BYMRVsckK0VNuGT2JxsindaANsbzM2uTiqAuJyVm0t-m_3UubEy3LM8wFuhOFdH-VVtskRCPq2rDdRhynO46wnYafzTexTdSlJ4zapvhlP8_I7sPbXTlQxoEf3i8xc/s1600/Free+Links+05.png" height="15" /></a><!-- End Backlink Code -->

FREE LINK FOR SEO

Jangan rubah sedikit pun kode diatas.
jika langkah diatas sudah selesai coba cek SEO anda di chkme.com
pasti ada perubahan... :keren:
Cara Membuat Blog Valid HTML 5 Lengkap dari Kangismet.net

Cara Membuat Blog Valid HTML 5 Lengkap dari Kangismet.net

Cara Membuat Blog Valid HTML5 - Awalnya saya males belajar tentang HTML5 tapi mengikuti perkembangan zaman, akhirnya belajar juga HTML5. Jujur saya terkontaminasi oleh Bung Adhy Kompi Ajaib :)

Apa itu HTML5? HTML5 adalah pengembangan dari versi sebelumnya, dimana tujuan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Intinya, agar web/blog terbaca sempurna di semua browser dan mudah dalam penggunaan.

Cara Membuat Blog Valid HTML 5 Lengkap dari Kangismet.net

Perlukah web/blog valid HTML5? dari berbagai sumber saya temukan bahwa diantara keuntungan mevalidasi blog adalah :
  • Membantu Search Engine meng-indeks dokumen website/blog lebih baik.
  • Render browser lebih baik dan lebih cepat
  • DOCUMENT OBJECT MODEL (DOM) lebih stabil dan konsisten
  • Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.
  • Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)
  • Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini.

Baguskah validasi Blogspot untuk SEO? Nah.. ini yang saya masih belum tau, kalau melihat alasan di atas tentunya baik, tapi kenapa vitur-vitur template blogspot itu sendiri belum valid HTML5. Saya tunggu pendapat sobat tentang validasi untuk SEO.


Cara Membuat Blog 100% Valid HTML5


Langkah 1 : Backup template sebelum melakukan editing.
Langkah 2 : Cari kode seperti ini :
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head>ganti dengan :
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><HTML><head><meta charset='utf-8'/>
Langkah 3 : Ganti kode </html> dengan </HTML> (paling bawah di template)

Langkah 4 : ganti kode ini :
<b:include data='blog' name='all-head-content'/>
dengan kode di bawah ini :
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/><meta content='blogger' name='generator'/><link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/><link expr:href='data:blog.url' rel='canonical'/><link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/><link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/><link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/><link href='http://www.blogger.com/openid-server.g' rel='openid.server'/><link expr:href='data:blog.homepageUrl' rel='openid.delegate'/> <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.postImageThumbnailUrl'><link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/></b:if><b:if cond='data:blog.metaDescription != &quot;&quot;'><meta expr:content='data:blog.metaDescription' name='description'/><b:else/><meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/></b:if></b:if>
Langkah 5 : Ganti <b:skin><![CDATA[ dengan kode dibawah :
<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]<style>
Langkah 6 : Hapus semua kode ini :
<b:include name='quickedit'/>
Setiap kali menambahkan widget baru, hapus kode di atas.
Langkah 7: Hapus semua kode ini (opsional)
<a expr:name='data:post.id'/>
Langkah 8 : hapus kode seperti ini :
<b:include data='post' name='postQuickEdit'/>
atau seperti ini :
<b:includable id='postQuickEdit' var='post'><b:if cond='data:post.editUrl'><span expr:class='&quot;item-control &quot; + data:post.adminClass'><a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'><img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/></a></span></b:if></b:includable>

Langkah 9 : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja)
<div class='post-share-buttons goog-inline-block'>...sampai...</div>
Langkah 10 : Ganti semua code & dengan &amp;

Sampai di sini, template sobat sudah bisa Valid HTML5 untuk Homepage. Akan tetapi pada postingan masih banyak error karena komentar blogger (kecuali komentar hack seperti blog ini). Mudah-mudahan saya bisa share cara mem-fix-an postingan.

Harap Diperhatikan


Kemungkinan dengan langkah-langkah di atas, blog sobat belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini :

1. Selalu gunakan tag alt pada gambar, contoh :
<img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1h6hFapSNVU6i5xymQmqxttJtGLGeEQqCdjWLx7Qnj3pKtw-76xsLO-1W11x0jYaAdC-f2QnHjaWHtMu55D6p4TKZAuKWhWwj9PL6X0A9cyfthgzHVlRcxdc12Tr8doAakfhIID5Z6JA/s1600/html5.png" />

2. Jangan gunakan border="0" pada gambar, sebagai gantinya tambahkan kode :
style="border:none"

atau CSS terpisah seperti
img{border:none}

3. Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode :
style="border:none;overflow:hidden"
atau CSS terpisah seperti
iframe{border:none;overflow:hidden}

4. Pada tag a jangan menggunakan tag name seperti :
<a name='comment-form'>

sebagai gantinya gunakan id seperti :
<a href='#comment-form'>

5. Jangan ada dua id pada template.

6. Hapus kode <b:include name='quickedit'/> setiap menambah widget baru.

Semoga bermanfaat...
Cara Membuat Menu Navigasi Floating Keren di Samping Pada BLOG

Cara Membuat Menu Navigasi Floating Keren di Samping Pada BLOG

Kali ini saya akan berbagi Cara Membuat Menu Navigasi Floating Keren diSamping atau disebelah samping main wrapper. ala maz-waone yang dipublikasikan kembali oleh yoga-tc.

Menu navigasi ini bisa dipasang di blog anda dan akan berada disamping. menu navigasi ini juga bisa buka tutup lho. caranya cukup mudah juga.

Sebelum mencoba, saya sarankan backup dulu template anda biar ngga terjadi sesuatu yang tidak diinginkan :p

Langsung saja. oke!

Cara Membuat Menu Navigasi Floating Keren diSamping

- Login Blogspot.com
- Template - Edit Html
- cari kode ]]></b:skin>

Selanjutnya letakan kode berikut tepat diatasnya atau tepat diatas kode ]]></b:skin> br />
/* MENU NAVIGASI */
.menu {text-shadow:none;position: fixed;height: 100%;width: 65px;background: #2c3e50;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
.menu:hover {width: 220px;}
.menuItem span {position: absolute;left:80px;top:20px;transition:color 1s;color:rgba(255,255,255,0);}
.menu:hover .menuItem  span {color:rgba(255,255,255,1);}
.menuItem {color:#fff;position: relative;padding: 20px;transition:border .5s, background .2s;}
.menuItem a {color:#fff;}
.menuItem:hover {background: #34495e;cursor: pointer;}
.satu {border-left:5px solid #16a085;}
.satu:hover{border-left:20px solid #16a085;}
.dua {border-left:5px solid #2980b9;}
.dua:hover {border-left:20px solid #2980b9;}
.tiga {border-left:5px solid #8e44ad;}
.tiga:hover {border-left:20px solid #8e44ad;}
.empat {border-left:5px solid #e67e22;}
.empat:hover {border-left:20px solid #e67e22;}
.lima {border-left:5px solid #e74c3c;}
.lima:hover {border-left:20px solid #e74c3c;}
 Next. Cari kode </body> letakan kode dibawah tepat diatas kode tadi.

<div class="menu">
<div class="menuItem satu">1<span><a href="http://masgober.blogspot.com/">Aku</a></span></div>
<div class="menuItem dua">2<span><a href="http://masgober.blogspot.com/">Suka</a></span></div>
<div class="menuItem tiga">3<span><a href="http://masgober.blogspot.com/">Sama</a></span></div>
<div class="menuItem empat">4<span><a href="http://masgober.blogspot.com/">Kamu</a></span></div>
<div class="menuItem lima">5<span><a href="http://masgober.blogspot.com/">Problem ?</a></span></div>
</div>

Terakhir Save/Simpan template.

Demo : http://demo-anak-layangan.blogspot.com/

Cukup mudah bukan? Semoga berhasil dan semoga artikel  yang saya share dengan judul "Cara Membuat Menu Navigasi Floating Keren diSamping" ini bisa bermanfaat. :)
Cara Simple dan Mudah Membuat Burung Twitter terbang pada BLOG

Cara Simple dan Mudah Membuat Burung Twitter terbang pada BLOG

Apakah anda pernah melihat blog seseorang yang mempunyai peliharaan berupa burung atau burung twitter? :D

Nah, kali ini saya akan memberikan tutorialnya. Cara Membuat Burung Twitter Terbang Pada Blog.

Caranya cukup simple. Pertama pasti silahkan login dulu ke akun Blogger anda.
Masuk Tata letak atau Page Element.
Silahkan klik add Gadget atau Tambahkan Gadget. di element mana saja boleh.

Nanti otomatis akan membuka jendela baru berupa pilihan.
Silahkan anda pilih Html/Javascript dijendela yang terbuka itu.
Setelah itu masukan kode dibawah ini!

Cara Membuat Burung Twitter Terbang Pada Blog

<!-- floating twitter Bird http://masgober.blogspot.com -->
<script type="text/javascript" src="http://p4r46h-blog.googlecode.com/files/twitterfloat.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMvk4ek9Z8uc7LnahRRMRQbUAZhPubrE2-xY4WxhLOg5rhbMs4U1Med3xyyqE_M5b5eI9Q4_IWMmEgnrN8gdaQrxlV9A-PPqDmFmMHjrFhPhnWltbj0fwjCWli7FrJePtW3WmReMT6gcAO/s1600/original.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button",
"select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/D27399_ ";var tweetThisText = "follow me";tripleflapInit();
</script>

Klik simpan. Dan lihat hasilnya! :)
Saya harap anda tidak merubah sedikit pun kode diatas agar caranya berhasil.
Oh iya, burung nya juga bisa dirubah lho.  Silahkan anda rubah saja kode yang berwarna merah dengan kode Gambar anda sendiri tapi yang ukurannya sama ya. :p

Cukup itu tutorial saya kali ini, Semoga "Cara Membuat Burung Twitter Terbang Pada Blog" bermanfaat untuk anda. :)
Cara Membuat Like Fanspage Melayang di Blog Mudah

Cara Membuat Like Fanspage Melayang di Blog Mudah

Cara membuat Widget Like Box FansPage Fb Melayang di Blog - Langsung saja To The Point.

DEMO : KLIK DISINI

Cara Pemasangan  :

1. Masuk BLOGGER.COM -> Tata Letak -> Add Gadget -> Pilih Html/Javascript
2. Masukan kode dibawah ini ke dalam kolom yang sudah disediakan ( Tanpa Judul )

Cara membuat Widget Like Box FansPage Fb Melayang di Blog

<a href="https://twitter.com/keheds321" class="twitter-follow-button" data-show-count="false" data-size="large" data-dnt="true">Follow @keheds321</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

“<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbsederhana.id&amp;width=300&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=417513225020019" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowtransparency="true"></iframe>”

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href=" http://svshare7.blogspot.com/ ">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href=" http://masgober.blogspot.com/ ">Get This Widget</a></p>
</div>
Sumber kode : svshare7.blogspot.com

Kode diatas saya tambah dengan Follow Twitter.
Kalo mau dihapus tinggal hapus mulai dari  <a href="https://twitter.com/keheds321" SAMPAI -> 'twitter-wjs');</script>

3. Ubah Kode Yang berwarna merah dengan ID Fanspage anda sendiri. Kalo belum tahu, Apa itu ID Facebook fanspage coba cari di Google. Misalnya gini, ID Fanspage saya http://facebook.com/bsederhana.id yang berwarna merah adalah ID Fanspage saya.

4. Save :)

Cara membuat Widget Like Box FansPage Fb Melayang di Blog
~ENJOY IT
Rahasia Meningkatkan Traffic dan Merampingkan Alexa Rank Mudah Work

Rahasia Meningkatkan Traffic dan Merampingkan Alexa Rank Mudah Work

Langsung saja ini Rahasia Meningkatkan Traffic dan Merampingkan Alexa Rank Mudah Work

1. pergi ke AlexaBootStup.com (Rahasia Meningkatkan Traffic dan Merampingkan Alexa Rank Mudah Work)
2. Disana, silahkan anda daftar dulu / klik Sign up

Rahasia merampingkan alexa 

Daftar dengan memasukan email anda

Rahasia merampingkan alexa

Next, silahkan masuk ke akun alexaboostup anda
disana akan ada gambar seperti dibawah ini

Rahasia merampingkan alexa

  • Dikolom Website silahkan isi dengan url website anda
  • lalu dibawah nya centang -> terakhir save
  • setelah anda menekan save otomatis traffic anda akan lumayan meningkat ^_^


Rahasia merampingkan alexa

lakukan secara rutin, namun traffic anda akan meningkat jika ada pointnya

cara mendapatkan point nya cukup tekan Launch auto surf tunggu beberapa menit otomatis anda akan diberi point dan bisa mendapatkan traffic dan tentunya merampingkan alexa lagi ^_^

Semoga Bermanfaat. Rahasia Meningkatkan Traffic dan Merampingkan Alexa Rank Mudah Work
Cara Membuat Sidebar Akordion dengan jQuery Seperti Johny Wuss Full Tutorial

Cara Membuat Sidebar Akordion dengan jQuery Seperti Johny Wuss Full Tutorial

Cara Membuat Sidebar Akordion dengan jQuery Seperti Johny Wuss Full Tutorial

Cara Membuat Sidebar Akordion dengan JQuery Seperti Johny Wuss | Sidebar akordion memang sangat menarik untuk di pasang di blogger, keunikannya widget-widgetnya yang muncul hanya 1, Atau bisa juga sidebar ini disebut Toggle yang biasa digunakan oleh template Johny Wuss.

maksudnya widget paling atas muncul pertama kali saat blog di buka, widget yang ke 2 ke 3 ke 4 dan seterusnya, disembunyikan, maksudnya yang muncul hanya judul-judulnya saja, jika kurang jelas lihat gambar di bawah ini.
Membuat Sidebar Akordion dengan jQuery Seperti Johny Wuss
Sebelum mencoba artikel ini ada baiknya template sobat di back up dulu, untuk memasang sidebar akordion sobat harus mengenal ID sidebar dan ID sidebar h2 masing-masing, untuk lebih jelasnya lihatlah gambar dibawah ini :

ID #sidebar :

Membuat Sidebar Akordion dengan jQuery Seperti Johny Wuss

ID #sidebar h2 ( judul widget di sidebar ) :

Membuat Sidebar Akordion dengan jQuery Seperti Johny Wuss

Langkah-Langkah Membuat Sidebar Akordion :
  • Pertama-tama masuklah ke halaman editor HTML template Anda, lalu temukan kode </head> (kode javascript ini dengan ID #sidebar-wrapper :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    // Sembunyikan semua tubuh widget (tutup semua panel)
    $('#sidebar-wrapper .widget-content').hide();
    // Tambahkan class 'active' pada elemen <h2> pertama
    // kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    // Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Sembunyikan semua panel yang terbuka dengan efek .slideUp()
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            // Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>
Demo : http://dte-dummy.blogspot.com/

Jika mau bisa dibuka lalu ditutup lagi pakai kode ini :
<!-- Sidebar Akordion dengan JQuery dari Blog Krizeer (www.yoga-tc.blogspot.com) -->
<script type='text/javascript'>
//<![CDATA[
// sidebar
$(function(){$('#sidebar-wrapper .widget-content').hide();$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');$('#sidebar-wrapper h2').css('cursor','pointer').click(function(){$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');if($(this).next().is(':hidden')){$(this).addClass('active').next().slideDown('slow')}else{$(this).removeClass('active').next().slideUp('slow')}})});
//]]>
</script>
Demo : http://demo-anak-layangan.blogspot.com/

Jika di template sobat sudah memasang jQuery, jangan copy kode di atas, karena satu template hanya memasang satu jQuery, jika lebih beberapa widget tidak akan berfungsi.

Tidak berhasil?
Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali template Anda dan temukan baris kode yang menggambarkan deretan widget sidebar blog Anda. Kurang lebih tampilannya seperti ini:
<div id='sidebar-wrapper-2'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>
Atau seperti ini dengan memakai ID #sidebar
 <div id='sidebar'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>
Saya rasa artikel ini sudah cukup jelas, jika ada yang mau ditanyakan, silahkan berkomentar dibawah, klo saya tau, pasti saya jawab, klo saya gk tau saya alihkan pertanyaan sobat pada DTE. Source : DTE

Awas jangan copas sembarangan, apalagi tanpa link sumber ke blog ini, bisa-bisa blog sobat di banned oleh google, karena semua artikel blog ini dilindungi oleh DMCA
Sumber : yoga-tc.blogspot.com
Diberdayakan oleh Blogger.
Copyright © 2013 Diajar BLOG All Right Reserved. Share on Blogger Template Free Download.