Cara Pasang Tombol Google Plus Di Blogspot

Cara Pasang Tombol Google Plus Di Blogspot, tutorial blog  id creative kali ini saya akan berbagi cara pasang button google plus  (google+ 1) di posting blog "menyambung postingan saya sebelumnya tentanng fungsi google plus one , namun saya terangkan beberapa hal kegunaan button google plus ini , fungsi dari plugin google ini sama seperti fungsi yang lain yaitu untuk berbagi dan menyebarkan informasi pada pengguna google+ , namun fungsi utama saya gunakan google plus button ini untuk menjadikan salah satu teknik seo , sehingga bisa mendapatkan hasil terbaik blog dalam pemburuan seo , jadi apa salahnya menggunakan plugin gratis google ini untuk melakukan seo maupun pemasaran.

Ada beberapa cara untuk memasang google plus button ini diantaranya memasang google plus di atas posting blog , maupun Cara memasang google plus di bawah posting blog .

Oke Langsung saja ke Cara Pasang Tombol Google Plus Di Posting Blog

1. Masuk ke akun blog anda --> rancangan --> edit html --> Expand Template Widget
2. Cari kode ini </head>
3. Pasang kode script google plus ini di atas kode tadi

Kode google plus button untuk blog berbahasa inggris

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Kode google plus button untuk blog berbahasa indonesia

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang:'id'}</script>

4. Masukan kode google plus button di blog ,keterangan nya akan dibahas satu persatu dibawah.
Untuk mencari ukuran kode google plus silahkan anda baca posting saya Cara Pasang button google plus | tombol google+ di blog

Cara Pasang google plus di kanan atas posting

Untuk memasang google plus di kanan posting anda cari kode berikut ini:

<data:post.body> (bila menemukan beberapa kode yang sama , simpan pada kode yang kedua bila yang telah menggunakan related posts , apabila belum berhasil coba satu persatu karena setiap template berbeda )

Lalu simpan kode ini diatas kode tadi

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:right'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</b:if>

Simpan
Pasang google plus di kiri atas posting

Untuk memasang google plus di posting kiri atas anda cukup mengikuti proses yang telah diterangkan tadi dan cukup mengganti kode google plus <div style='float:right'> dengan <div style='float:left'> lalu simpan google plus plugin anda.


Pasang Google Plus Button Di Bawah Posting
Saya akan menerangkan cara pasang button google plus di kiri bawah posting dan cara pasang google plus button di kanan bawah posting blog .

Pasang google plus di kanan bawah posting

Untuk cara pasang google plus di kanan bawah posting ini anda cukup mengulangi proses 1 sampai 3 Diatas dan cari kode berikut ini

<data:post.body> (bila menemukan beberapa kode yang sama , simpan pada kode yang kedua bila yang telah menggunakan related posts , apabila belum berhasil coba satu persatu karena setiap template berbeda )

Lalu pasang kode berikut ini di bawah kode tadi

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:right'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</b:if>

Pasang google plus di kiri bawah posting
Untuk memasang google plus di posting kiri bawah anda cukup mengikuti proses yang telah diterangkan tadi dan cukup mengganti kode google plus <div style='float:right'> dengan <div style='float:left'> lalu simpan google plus plugin anda.

Apakah anda berminat mencobanya? tungguapalagi.com. . . he. .he alay

Read more

Fungsi google +1 (Google Plus One)

Fungsi google +1 Menurut kabar yang banyak beredar (bloggerbuster.com), Google Plus One ini fungsinya hampir sama dengan tombol “like” nya facebook. Namun para blogger juga menyebutkan bahwa bisa saja di masa yang akan datang Google Plus One ini menjadi tolak ukur perangkingan suatu web/blog sebagai yang paling banyak di rekomendasikan. Dengan semakin banyak orang yang merekondasikan ini maka posisi blog di SERP akan semakin baik dan peluang muncul di Page One Google juga semakin besar. Oh ya saat bulan maret saya ingat dalam promosinya di akun google adsense saya, "Pasang google +1 di situs Anda untuk hasil pencarian lebih baik dengan rekomendasi dari teman-teman Anda"
Awalnya id creative juga bingng dengan fu ngsi google plus one tersebut.. tapi setelah muter2 barusan akhirnya juga ketemu.

Sepertinya google terus melakukan uji coba untuk Google Plus One (+1) yang sedang hangat dibicarakan saat ini. Meski menurut kabar bahwa Google Plus One ini sudah diluncurkan lama sejak 30 Maret 2011 yang lalu, namun dalam pelaksanaannya tidak semua orang bisa menemukan tombol +1 ini di pencarian google. Beruntung hari ini saya menemukan secara tidak sengaja penampakan tombol +1 ini dihasil pencarian google.


Kalau dulu saya masih ingat ada tanda bintang di hasil SERP namun kini berganti jadi tombol google +1..

Apakah anda tertarik untuk memasang google plus one diblog anda? silahkan baca "cara memasang google plus di blogspot"

Read more

Cara membuat blog tidak bisa dicopy paste

Cara membuat blog tidak bisa dicopy paste atau blog anti copas, sudah sering diposting oleh blogger anti copas di blog lainnya, tapi disini id creative juga akan sedikit menjelaskan bagaimana cara efektif dan lumayan tidak membuat sebel para pengunjung blog kita, karena walaupun blog yang kita buat tidak bisa dicopas dengan klik kanan (disable right click), tapi masih banyak akal untuk sekedar mengcopykan artikel blog kita.

Dengan memakai script ini para pengunjung blog kita masih bisa menggunakan klik kanan, walaupun agak susah untuk melakukan copasnya, tapi dengan sedikit lebih teliti, akhirnya masih bisa dicopas alias dicopy pastekan. mana tau buat tugas kuliah, hehe.

Oke lansung aja ketahapannya.

1. Login ke Blogger
2. Klik Rancangan
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil  Expand Template Widget
5. Silahkan cari di dalam template anda kode </head>

Kalau sudah ketemu, anda Copy Pastekan script yang ada berikut tepat dibawah kode </head>.

<script type="text/javascript">
<br>
if (typeof document.onselectstart!="undefined") {<br>
document.onselectstart=new Function ("return false");<br>
}<br>
else{<br>
document.onmousedown=new Function ("return false");<br>
document.onmouseup=new Function ("return true");<br>
}<br>
</script><br />
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
<br /></div>

Jangan lupa disimpan. .

Saya sebenarnya tidak terlalu bermasalah dengan artikel yang dicopi paste (copas) selagi masih menyertakan sumbernya, gimna pendapat agan2?

Akhirnya selesai artikel "Cara membuat blog tidak bisa dicopy paste", bagi sobat creative (kreatif) yang tertarik dengan cara membuat blog silahkan baca-baca artikel tutorial blogspot diblog id creative ini, terima kasih telah berkunjung.

Read more

Blog ID Creative Kebagian PR 2

Blog ID Creative Kebagian PR 2, Akhir akhir ini saya jarang banget posting lagi, tapi ga taunya pas saya liat barusan,, eee ternyata PR ID Creative Udah dapet dua, ya walaupun ga terlalu tinggi sich, tapi udah lumayan bagi pemula.Gak tau kapan google update PR, tapi yang jelas lumayan lah akhirnya dapet PR 2.
Setelah beberapa hari yang lalu saya posting tentang "kapan blog saya kebagian pr "Page Rank", sekarang baru kebagian id creative pr 2..

Oya ini Screenshootnya

Read more

Claim Blog di Technorati

Claim Blog di Technorati, Buat anda yang telah mendaftarkan blognya di Technorati dan bingung cara claim disini saya share sedikit tentang cara claim blog di Technorati. Setelah anda mendaftarkan blog anda dan mengklik tombol Check Claim

Selanjutnya akan muncul window baru yang di dalamnya terdapat sebuah kode unik seperti yang tertera pada gambar dibawah ini

1. ID Creative http://idcreativity.blogspot.com/ Jun 18, 2011. We could not find the claim token 6JEK8VS329N7 in any posts in your feed. Please make sure that you have entered it correctly in a post body and that the token appears in the feed whose URL you have given us. Once you are sure we should be able to find the claim token, use "Update Site Feed URL" so that we can check again.

Buatlah sebuah postingan apa saja dan sertakan kode uniknya di dalam postingan seperti pada postingan ini, Agar spider/robot Technorati bisa melacak keberadaan kode tersebut.

Lihat gambar diatas  6JEK8VS329N7 adalah kode unik yang harus di lampirkan di salah satu postingan blog agar bisa di claim. Setelah kode ini diletakan di postingan blog kemudia klik Verify Claim Token.

Jika muncul pesan seperti berikut
"We could not find the claim token in any posts in your feed. Please make sure that you have entered it correctly in a post body and that the token appears in the feed whose URL you have given us"
berarti postingan yang berisi kode verify belum terindeks di feed, tunggu hingga postingan anda terindeks di feed, atau anda salah memasukkan url feed saat mendaftar, Setelah terindeks di feed blog bisa lakukan klaim ulang.

Jika muncul pesan seperti berikut
"We have successfully crawled your blog and found the claim token, and your claim is now awaiting review"
berarti blog anda sudah melewati tahap verifikasi, selanjutnya hanya menunggu review dari tehnorati, jika lolos review maka blog anda akan terdaftar di technorati. sekedar review cara "CLAIM BLOG DI TECHNORATI"

Unique code :  6JEK8VS329N7 |  6JEK8VS329N7

Read more

Title Search Widget " Pencarian yang berkaitan Dengan kata kunci yang diketik"

Title Search widget adalah widget yang menampilkan beberapa judul post/artikel kamu yang cocok dengan keywords (kata kunci) yang kamu ketikkan. Dengan widget ini, kamu ga perlu lagi pindah ke halaman lain untuk melihat hasil pencarian kamu, jadi langsung ditampilkan di halaman itu.
Selain menampilkan judul beserta link dari artikel kamu, widget ini juga menampilkan ringkasan dari artikel kamu. (lihat screenshot-nya)

Kalo liat dari judul posting id kali ini agak bingungin ya, kalo masih bingung coba ketik aja kata kunci yang ingin kamu cari di kotak pencarian sebelah kanan, dan kamu akan melihat hasil kata kunci yang berkaitan dengan kata tersebut akan muncul dibawahnya. udah bisa dimengertikan.

Kalo masih bingung juga kamu praktekin aja dblogmu, habis itu lihat hasilnya.

Kamu bisa lihat contohnya pada kotak pencarian di bagian sebelah kanan blog ini.

Widget ini hanya akan memuat feed dari blog tersebut saat kotak pencariannya diklik, jadi tidak akan begitu memberatkan waktu loading awal blog.

Caranya:

1. Masuk ke account Blogger kamu, klik "Layout" - "Page Elements",
2. Klik "Add a Gadget" - "HTML/JavaScript",
3. Tulis judul yang kamu inginkan dan tambahkan kode-kode di bawah ini:
   
   Kode untuk kotak pencarian:
   

   <form action='/search' method='get'>
   <input name='q' onfocus='ts_loadFeed()' 

   onkeyup='ts_titleSearch(this.value)'/>
   <input type='submit' value='Search'/>
   </form>

   
   Kode untuk hasil pencarian:
   

   <div id='ts_content_list'></div>
   <script type='text/javascript'>
   var ts_summary_length = 200;
   var ts_blog_url = "http://BLOGKAMU.blogspot.com";
   
   // ganti variabel2 di bawah jika kamu ingin mengganti bahasa
   var ts_LOADING       = "Memuat...";
   var ts_TYPE_KEYWORDS = "Silakan ketik kata kuncinya";
   var ts_NO_RESULTS    = "Tidak ada judul yang cocok";
   var ts_SEE_SUMMARY   = "Lihat Rangkuman";
   var ts_HIDE_SUMMARY  = "Sembunyikan Rangkuman";
   </script>
   <script src="http://copycat91.googlecode.com/svn/trunk/titlesearch.js"/>
   </script>

4. Kamu boleh mengganti kode-kode yang ditebalkan:
   
   • ts_summary_length adalah jumlah karakter (kurang lebih) ringkasan dalam hasil pencarian,
   • ts_blog_url adalah URL blog kamu (khusus yang memakai Blogger saja),
   • dan variabel lainnya yang berhuruf kapital adalah untuk memudahkan dalam mengganti bahasa.
5. Kalau kamu sudah mempunyai kotak pencarian dan tidak ingin menggantinya, cukup cari saja kode name='q' dan tambahkan di sampingnya kode di bawah ini:
   

   onfocus='ts_loadFeed()' onkeyup='ts_titleSearch(this.value)'

   Dan jangan lupa tambahkan juga kode untuk hasil pencarian di tempat yang kamu inginkan (kamu bisa menambahkan gadget HTML/JavaScript untuk menempatkan kode hasil pencarian).

Selamat mencoba!
:D

Read more

Cara Pasang Stripe-Ad "Menghilangkan Navbar dengan cara Menempatkan Sesuatu Diatasnya"

Karena sebelumnya da yang bertanya seperti ini " Gan cara buat =>Dapatkan artikel ID Creative secara gratis via mail, join here! gmn ya?" 

Liat gambar 
Sebenarnya tutorial pasang widget stripe-Ad ala blogger ini saya dapatkan dari sobat blogger lain. Pernah saya praktekan pada blog ini, ternyata hasilnya stripe ad sukses terpasang. Untuk sobat yang berhasrat template blognya dipasangi stripe ad, kebetulan saya masih ingat caranya (pasang widget stripe ad pada template blogger).

Untuk contoh, blog yang memasang widget Stripe-Ad seperti blognya o-om.com atau pada blog lain. Dimana letaknya tepat menempel di bagian atas halaman blog atau diatas elemen header serta ada tombol close nya. Isinya pun bisa kita modifikasi, mulai dari link untuk berlangganan RSS feed, fans page facebook/twitter, atau hanya sekedar pengumuman dari sang admin alias pemilik blog.

Tertarik untuk memasangnya? Silakan ikuti langkahnya di bawah ini:

1. Dalam keadaan login di blogger. pada halaman dasbor sobat klik rancangan lalu edit html.

2. Untuk berjaga-jaga, klik download template lengkap. Ini untuk mengantisipasi bila nanti terjadi kesalahan dalam pengeditan template.

3. Setelah selesai mendownload, beri centang pada kotak disamping expand template widget.

4. Lalu cari kode </head>

5. Setelah ketemu, tepat diatasnya pastekan/masukan kode dibawah ini:

<script src='http://sites.google.com/site/asrizalofficialweb/javascript/Stript-ad.js' type='text/javascript'/>

6. Lanjut, cari kode <body>

7. Tepat dibawah kode <body> masukan kode seperti ini:

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/blogspot/dinwahyu' target='_blank'>Sudah berlangganan artikel blog ini via RSS feed?</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;o-om.com.com&apos;;returntrue;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXmNSdi0jBGNJJkMG1hlcIUI0_vw9VuO-LWHJfpJ3fqX1iz2bRVmoa8pBgfba5p9JKleAD3EW-VZhrnzuNeDp-_3NKxpimdNxyw3kTngAAZoeC6LiHgg1x7av9qjQUs4mSa9iuAeRxgBo9/' style='cursor:hand;cursor:pointer;'/></span></div>

keterangan: pada kode yang berwarna merah adalah URL target link dari teks berwarna biru. Keduanya bisa diganti sesuai selera atau kebutuhan. Sedangkan pada kode warna orange adalah URL gambar dari tombol closenya. Sobat bisa menggantinya dengan gambar yang lain.

8. Selanjutnya cari kode:

]]></b:skin>

9. Setelah ketemu, tepat diatasnya pastekan kode:

#mta_bar {background:#0000ff;margin: 0 0 3px 0;padding:10px;z-index: 100;top:0;left:0;width: 100%;overflow:auto;position:fixed;}
* html #mta_bar{/*IE6 hack*/position:absolute; width:expression
(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#mta_bar .left { float:left; text-
align:center;font-family: Arial;font-size:13px; font-weight:bold; font-style: normal; color:#ffffff;width:92%;}
#mta_bar .right {font-family: Arial,Helvetica,sans-serif; float: right;text-align: center; font-weight:normal; font-size: 10px;letter-spacing: 0; width:30px; white-space: nowrap;}
#mta_bar .right a {font-size:11px; color: #ffffff; text-decoration:underline;}
#mta_bar .right a:hover {font-size: 11px; color: #ffffff;text-decoration: none;}
#left_bar a { text-decoration:none;color: #ffffff;}
#left_bar a:hover {text-decoration: underline; color: #ffffff;}

ket: kode ini #0000ff adalah untuk warna background/latar widget stripe-Ad. Kode #0000ff adalah warna biru. Silakan ganti dengan kode warna yang lain misal #000000 untuk warna background hitam. Sedangkan untuk #ffffff adalah warna teks pada menu stripe ad yang berarti putih. Baik warna background atau teks, keduanya silakan sesuaikan dengan template sobat.

10. Setelah sobat selesai memasukan semua deretan kode diatas. Langkah terakhir klik tombol simpan template. Dan lihat hasilnya.

Otomatis, sebuah widget stripe-Ad akan terpasang pada bagian atas layar Atau header blog. Dan untuk melenyapkannya, tinggal klik gambar tombol close. Setelah diclose, Meski widgetnya hilang sobat jangan khawatir, karna nanti juga akan muncul lagi. Begitupun selanjutnya bila kembali muncul, untuk menghilangkannya klik tombol 'close'.

Selamat mencoba memasang widget stripe-Ad ala o-om.com dan semoga berhasil!
Sumber Halaman "http://www.o-om.com/2008/10/pasang-stripe-ad-ala-navbar-blogger.html"

Read more

Cara membuat widget "Headline News" diblog

Kali ini aku akan membahas tentang membuat headline news untuk blog. Sesuai namanya, widget headline news ini menampilkan judul serta link artikel-artikel terbaru dari blog kamu di bagian atas atau bawah blog kamu.
Kamu bisa lihat contoh gambarnya di bawah:

Judul-judul artikel pada headline news tersebut bergerak, sehingga lebih menarik perhatian pembaca.

Caranya:

1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
2. Klik "Add a Gadget" dan pilih "HTML/JavaScript",
3. Tidak usah diberi judul, kemudian copy-paste kode di bawah ini:
   

   <script type="text/javascript">
    var hn_url_blog = "http://BLOGKAMU.blogspot.com";
    var hn_jumlah_post = 5;
    var hn_warna_latar = "#EEEEEE";
    var hn_warna_garis = "#000000";
    var hn_posisi = "top";
    var hn_tampilkan_judul = true;
    var hn_backlink = true;
   </script>
   <script src="http://copycat91.googlecode.com/svn/trunk/headlinenews.js">
   </script>

4. Berikut adalah penjelasan tentang variabel-variabel di atas:
   
   
   • hn_url_blog adalah URL blog kamu (widget ini hanya untuk pengguna blogger).
     
   • hn_jumlah_post adalah jumlah judul artikel yang ingin kamu tampilkan pada headline news.
     
   • hn_warna_latar adalah kode warna untuk latar belakang headline news. (Baca artikel kode hex warna di sini)
     
   • hn_warna_garis adalah kode warna untuk garis bingkai/border headline news. (Baca artikel kode hex warna di sini)
     
   • hn_posisi menentukan posisi headline news kamu apakah di atas ("top") atau di bawah ("bottom"),
     
   • hn_tampilkan_judul bernilai true kalau kamu ingin menampilkan tulisan "Headline news of BLOGKAMU" di bagian kiri dan bernilai false jika tidak ingin menampilkannya,
     
   • hn_backlink bernilai true kalau kamu ingin menampilkan backlink ke blog ini dan false jika tidak.
     

Selamat mencoba dan semoga bermanfaat! :D

Read more

Kapan Blog Saya Kebagian PR "Page Rank"

Blog ID Creative sudah berumur kurang lebih tiga bulan lebih sekian, terhitung semenjak 23 Januari 2011, tetapi sampai sekarang belum juga kebagian PR "Page Rank" dari google.
Ada apa gerangan?
Apakah blog ini tidak populer atau emang belum saatnya?
Karena walaupun saya tidak begitu paham berapa tahun sekali atau tiap berapa bulan Page Rank blog itu update.
Jika ada sobat blogger yang tau, mohon masukannya.
Untuk informasi PR ini screenshootnya.
Jika sobat juga tertarik untuk cek PR blog anda silahkan masukkan url blog anda dibawah ini, setelah itu.. tararara... akan muncul hasilnya, selamat bagi blog yang udah kebagian PR nya, and doain ya semoga blog ID Creative ini juga cepat kebagian momongan, hehe

Check Page Rank of your Web site pages instantly:

This page rank checking tool is powered by Page Rank Checker service

Ya walaupun PR ga kebagian, untuk alexa berat badannya lumayan menggembirakan, sekarang udah sampai "855,856" untuk links in "29" dan Traffic Rank in ID "11,589" semoga turun lagi.

Read more

Cara Membuat Widget Total Post dan Komentar di Blogspot

Tahukah anda berapa jumlah komentar dan postingan di blog anda ? jika anda belum tau mari kita bahas trik untuk mengetahui Jumlah Komentar da post di blog . sebelum itu anda lihat dulu Screenshoot Widget yg akan kita buat di bawah ini :

nah, dari screenshoot di atas mari kita mulai cara membuatnya :

• Login ke Blogger.com
• Pilih Rancangan >> Tata Letak >> Add Widget >> Html/Javascript
• copy paste Script berikut :

<center><script style="text/javascript">
function totalPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function totalComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>
<script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script></center>
<small><a href="http://idcreativity.blogspot.com/2011/05/cara-membuat-widget-total-post-dan.html" target="_blank">get this</a></small>

Lalu Save

Read more

ID Creative Dapat Sitelink (taut situs)

Sitelink (taut situs), bahagia bercampur rasa haru juga ketika blog id creative dihadiahkan sitelink oleh google *"lebay".
Karena memang sudah lama id creative menginginkan sitelink bisa nempel di blog ini, akhirnya kesampaian juga, walaupun selama hampir 2 bulan karena libur kuliah dan pulang kampung ga bisa update lagi ni blog, tapi ternyata dapat THR juga dari google. hehe

Oya bagi yang belum kenal sitelink ini dia sedikit penjelasannya "

Apa Itu Sitelink atau Taut Situs?Gambarnya (screenshoot) bisa liat dibawah ini, sitelink adalah kumpulan link yang muncul di hasil cari di bawah suatu blog bertraffic tinggi. Sitelink membatu memberi penjelasan lebih tentang suatu blog. Sitelink biasanya muncul ketika orang ketikkan keyword pendek yang seperti merk atau brand. Misal nya saja 'ID Creative'. Jadi ketika Anda ketikkan keyword 'Blog Terbaik' atau 'Blog Teramai', kemungkinan Anda tidak akan menemukan sitelink."

Mau liat klik aja ID CREATIVE.
Screenshootnya bisa liat dibawah ini

Read more

Tampilan Blog Berbeda dengan Dynamic Views Blogger

Seperti yang kita ketahui, blogger atau blogspot beberapa saat yang lalu telah merilis fitur barunya yakni Dinamic blogger yang menjadi “Gubrakan” baru di tahun 2011 ini. Nah, di sini saya akan berbagi sedikit pengetahuan bagi pembaca untuk mengetahui apa sih yang baru dan bagaimana cara mengaktifkannya?

Apa sih yang menarik dari dynamic views?

Blogger memperkenalkan dynamic Views (di Blogger Buzz diberi judul: Fresh New Persepectives for your blog) yang memungkinkan tampilan blog Anda dari banyak persepektif.
- Flipcard, untuk melihat postingan blog Anda dalam thumbnail foto.
- Mosaic, melihat blog Anda dalam bentuk kotak acak
- Sidebar, membaca blog Anda dengan sidebar daftar artikel yang memudahkan berpindah dari satu artikel ke artikel lain. Lebih cepat load nya.
- Snapshot, Postingan anda dengan tampilan daftar foto plus judul artikel di bawah foto
- Timeslide, kolom kiri dengan gambar besar plus artikel, kolom tengah judul plus ringkasan, dan kolom kanan daftar judul artikel.

Bagaimana cara Melihat Dynamic views diblog saya?

Untuk melihat bagaimana tampilan dynamic views dari blog anda, cukup anda menambahkan /view pada halaman blog anda, formatnya seperti berikut (http://namabloganda.blogspot.com/view) dan lihat perbedaan halaman view pada blog anda.

Mengapa Dynamic Views Tidak Bekerja (Error) di Blog saya?

Jika ternyata halaman tersebut ternyata tidak bekerja dengan baik, atau muncul tulisan Sorry, dynamic views aren't available for this blog. You'll be redirect to the blog homepage momentarily. Learn more, Jangan panik karena ada solusinya

Agar Blogger Dynamic Views bisa bekerja, maka syarat pertama adalah layanan ini tidak Anda non-aktifkan (dalam keadaan standart otomatis telah diaktifkan), tapi untuk berjaga-jaga Anda bisa cek ke Dashboard -> pengaturan -> format. Silahkan aktifkan Tampilan Dinamis dengan memilih Ya.

Syarat yang kedua adalah umpan (feed) anda harus ditampilkan secara penuh. Anda bisa cek dengan pergi ke dashboard -> pengaturan -> feed situs. Pada bagian Izinkan Feed Blog silahkan pilih Penuh.

Beberapa pertimbangan menggunakan blogger dynamic views?

Blogger dynamic views memberikan banyak kemudahan yang sangat maksimal terutama kepada pada visitor blog kita. Karena selain cepat, blog akan terload semakin singkat tanpa sidebar seperti blog dengan tampilan biasa.
- Dengan Dynamic Views orang dengan mudah berpindah dari satu halamn ke halaman lain dengan waktu yang sangat cepat. Dan ini mungkin ini akan mengurangi pageviews Anda.
- Dengan Dynamic Views orang mungkin akan tidak berkomentar di blog Anda karena kotak komentar yang berada di bawah postingan langsung jelas lebih menarik perhatian. Di tampilan Dynamic Views arahan komentar hanya berupa link (yang akan membuka ke jendela baru) dan mungkin beberapa orang tidak akan menemukannya.
- Jika blog Anda berat, bersiap-siaplah semua orang akan menggunakan dynamic views untuk membaca blog Anda dengan alasan kemudahan akses. Agar tetap ke blog Anda meski berat, mematikannya adalah salah satu solusi. Namun, saya tetap menganjurkan Anda membuat blog yang ringan.
- Tidak ada banner yang tampak pada dynamic view ini, jadi untuk iklan, adsense, dan lain sebagainya tidak akan terlihat pada halaman dynamic view ini.
Demikianlah beberapa ulasan singkat dari saya, semoga bermanfaat, jika ada tambahan silahkan dipenuhi

Read more

Silahkan COPAS "Copy+Paste" Blog ID Creative

Aku suka dan Bangga di copas Artikelku.Copas =copi panas enak tuch pagi-pagi ngupi ditemenin ama kue pisang goyeng ngutang lagi di warung sambil ngerumpi di puterin lagu India yang lagi ngetrend nyammiee benar gak..? Tapiii kalau artikel kita di COPAS pastilah bikin hati panas mendidih.Pastilah ingin jitak kepalanya kalau ketemu..:( hayooo lari copasiana….gubraakkk

Masalah COPAS Artikel adalah selalu di bicarakan dan selalu mendapat peringatan dari empunya Blog setiap kali kita Blogwalking atau Blogging.Kecuali di ID Creative gak ada tuch “peringatannya” sebab gak ada yang pengen COPAS sichh..wekwekkkk Hayoo siapa yang pengen COPAS silakan walau gak pake link sumbernya..tapiii kalau ikhlas sekalian dech ama Link Sumbernya..he..he..he..Ngarep dot com jujaa.Tapi ini benar kog silakan Copas aku gak nuntut kog ikhlasss bangettt..abisnya Om Drakula udah banyak dosa jadinya itung-itung cari pahala…ngurangin dosa gto…Ho..HO..Ho

Sebab kehadiran para Copasiana ada untungnya juga ..jadinya mereka sering ke Blog kita dan kehadiran mereka adalah warna dalam dunia Blogging.Para Blogger nanti pasti menciptakan cara supaya Artikel mereka gak bisa di COPAS atau paling tidak Link mereka bisa nyantol di Blog para Copasiana.Eyang Googlepun jadi punya kerjaan supaya kinerja mereka manjadi lebih baik dalam pembacaan Artikel Orisinil terbukti dengan di keluarkannya Update Algoritma awal tahun tadi “Google Caffein dan Google Panda ” dan sudah Global tidak untuk Amrik ajah. Buat apa tuch si panda..? gunanya adalah untuk seleksi Blog yang memang berkwalitas baik sebab apabila Blog anda Copy-paste,loding lemot,keyword stuffing atau juga Spamming maka akan di tendang dan di kung-fu oleh Si panda dari SERP/penurun posisi di mesin pencari eyang Google biar Adil dan merata..dan akan terbukti siapa Yang terbaik di jagat Cyber katanya…Ho..Ho..Ho Galak juga piaraan si Eyang Google atuuutt acchh…!!

Tapi sebagai “Mantan” COPASiana yang sering di Copas adalah berita Seleb.Kalau artikel SEO sich emang harus di Copas kode HTMLnya cumin masalah mengulasnya ajah berbeda.Dan untuk mengetahui Artikel kita di Copas oleh siapa silakan ke situs Copyscape dot com masukkan URL blog anda Enter akan ketahuan siapa yang Copydarat artikel punya kita di Blognya.Ada juga untuk mempatenkan artikel kita situsnya myfreecopyright dot com..biar kalau mau komplain bisa nunjukin bukti gto..hitam diatas putihnya kale….tapi ada juga situs yang bisa mengecoh para Copasiana yaitu situs Squidoo dan membuat link anchor/URL kita tak terlihat dan bisa Nongkrong di Blog yang mengcopas karena sembunyi di lensanya mas Squidoo dot com.Untuk nyang tidak bisa di klik kanan untuk mengcopas sebuah artikel caranya sorot kemudian CTRL+C dapat dech artikel yang mau di copas..sssttt tapi jangan beritahu aku ya yang kasih caranya…okeeyy..!

Kenapa saya buka rahasia ini ? karena menurut saya sebagai “mantan Copasiana” karena seringnya COPAS yang COPAS jadi senang baca dan pengetahuannya bisa nambah dan bisa Nulis juga akhirnya dalam artian Kosakatanya nambah di otak dan gak pengen lagi COPAS..sebab banyak membaca adalah modal dasar dalam menulis artikel Orisinil.Jadi harap maklum yach para mas-ter penulis artikel saya hari ini bukan untuk belain para COPASiana hanya untuk melihatnya dari sudut pandang yang berbezzzaaa.Sebab sesuatu hal itu pasti ada sisi positif dan Negatifnya.Bagaimana saudara sebangsaku apa ada yang mau ditambah atau di komplain…silakan komentar..maaf bila ada yang salah..:).BERBAGI ITU INDAH Jangan mengharap Balasannya….twink miracle akan dating akhirnya…wink-wink.

Read more

Widget Yang Banyak Digunakan Blogger

Mungkin Anda gemar koleksi widget d sidebar Anda dan Anda berpikir ke situs penyedia widget-widget terbaru. Sementara Anda melupakan gadget bawaan blogger. Padahal blogger telah mnyediakan banyak sekali widget yang saya nilai sangat mudah pembatannya dan mudah penggunaannya. Cobalah Anda lebih teliti dan tengok gadget bawaan blogger. Anda akan menemukan banyak sekal fungsi disana, tanpa script hanya dengan langkah sederhana. ID Creative akan memberikan gadget bawaan blogger yang akan sangat berguna bagi Anda.

1. Recent Posts Advanced

Ini gadget favorit di blogger. Menampilkan Update terbaru artikel Anda disertai dengan thumbnails foto. Untuk membuatnya sangat mudah.

1. Login ek blogger
2. tata Letak
3. Elemen Halaman
4. Add Gadget
5. Tulis saja di kotak search "Recent Posts"
6. Pilih Seperti gambar di atas, Recent Posts Advanced
7. Lakukan berbagai pengaturan
- Nama Gadget
- Ketinggan Gadget
- Banyaknya Postingan Terakhir Yang Ditampilkan
- Banyaknya Character Untuk Ringkasan
Kalau sudah klik Simpan

2. Share It

Saya pernah membahasa mengenai betapa pentingnya Share Pack nah jika Anda tidak mau kesuliatan berurusan dengan script gunakan gadget ini. Tetapi gadget ini baru menyediakan dua fungsi untuk facebook dan twitter saja. Cara kerjanya adalah, ketika seseorang klik tombol share itu maka artikel dimana posisi dia berada akan otomatis dimasukkan ke facebook atau twitter. Jika Anda berada di halaman depan, maka yang di share adalah blog Anda. Jika Anda berada pada suatu judul postingan, maka otomatis postingan itu yang akan di bagikan. Mantep kan.
Untuk membuatnya langsung saja menuju ke Elemen Halaman, Add gadget. Ketikkan sja di kotak pencari 'Share It' dan pilh yang seperti gambar di atas. Tanpa Pengaturan lalu klik Save.

3. Member Links

Satu lagi gadget yang sangat bagus. Berfungsi untuk mneampilkan link. Cara kerjanya adalah orang yang datang ke blog Anda dapat memasang link ke blognya asal dia menjadi followers Anda. MAntep sekali bukan. Untuk Membuatnya silahkan menuju Elemen Halaman, Add Gadget. Di Kotak Search ketikkan 'Member Links'. pilih saja gadget seperti gambar. Tanpa Pengaturan, Klik Save.

4. GTalk (Google Talk)

Jika Anda berjalan-jalan di suatu blog, maka Anda akan sering melhat widget Yahoo Messenger. nah bagi Anda pengguna akun google, Anda bisa menggunakan GTalk Gadget. Seseorang yang berada di blog Anda dapat dengan mydah berhubungan dengan Anda. Tetapi ia juga harus mempunyai akun google. Untuk menambahkan sangat mudah sekali. Add Gadget, tulis di kotak search 'G Talk'. Pilih seperti gambar di atas. Tanpa pengatran klik Save.

5. Event

Jika Anda mempunyai acara dapat Anda informasikan disini. Seseorang dapat melihat informasi lenbgkap hanya jika ia menjadi followers Anda. Untuk membuatnya silahkan menuju Elemen halaman, Add gaget. Tulis di search 'Event'. Atur nama acara, lokasi dan waktu. Klik Simpan.

Gunakan Link Cepat
Klik saja link berikut ini jika Anda telah login di blogger.
- Add Recent Posts Advanced
- Add Share It
- Add Member Links
- Add GTalk
- Add Event

Salam hangat dari ID Creative.

Read more

Cara Menambahkan Modus Hemat Energi (Stand By) Di Blogspot

Saya kira cuma listrik yang bisa hemat energi, ternyata di blog jg ada istilah hemat energi, hahaa... entah apa pengertian rincinya tentang hemat energi ini, tapi menurut saya ini seperti mode stand by gitu. kalau sobat masih bingung coba aja open new tab blog saya ini dan biarkan kira-kira 1menit, dan lihat kembali tab yang td di buka, contohnya seperti itu. bila sobat berminat silahkan ikuti langkah-langkah berikut ini.

Gambar

Langkah-langkahnya :

1. Login ke akun blogger Sobat

2. Pilih Rancangan

3. Klik Edit HTML, dan centang pada kotak "Expand Template Widget"

4. Carilah kode <head>

5. Copy pastekan kode di bawah ini tepat di atas kode <head>

<script language="javascript" type="text/javascript" src="https://sites.google.com/site/kodeblogger/javascript/energy.js?lang=id"> </script>

6. Simpan Template.


Untuk melihat hasilnya sobat cukup membiarkan halaman blog sobat selama kurang lebih 1menit, setelah itu lihat kembali blog sobat. semoga bermanfaat.

Read more

Cara Mudah Membuat No.Urut Komentar Di Blogspot

Tampilan Komentar akan lebih menarik bila kita kasih nomer urut pd setiap komentar, dan pastinya komentar-komentar akan terlihat lebih rapi dan dengan mudah kita bisa tahu berapa komentar yg sudah ada. mungkin itu fungsi dari judul diatas.
Bila sobat tertarik untuk membuatnya dan menaruh di blog sobat, silahkan ikuti beberapa cara dibawah ini.

Gambar

Berikut langkah-langkahnya :


1. Login ke Blogger Sobat

2. Pilih Tata Letak

3. Edit HTML dan ceklist/centang "Expand Template Widget"

4. Sebelum terlalu jauh, biasakan membackUp template sobat dulu, dengan cara klik "Download Template Lengkap"

5. Carilah kode berikut : <dl id='comments-block'> dan ternyata di template saya gak ada kode tersebut, jadi kalo di template sobat jg gak ada cari dengan kode berikut : <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

6. Kalu sudah ketemu kodenya, selanjutnya sobat simak baik-baik kode dibawah ini :

Cara 1. Karena masing-masing template pasti berbeda saya jg kasih contoh pada template saya sendiri :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author' expr:id='data:comment.anchorName' style='clear: both;'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='external'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='numberingcomments' style='float: right; font-size: 18px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

Cara 2. Nah ini alternatif kode CSS pada templates blog :

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<dt style='clear: both;' class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='numberingcomments' style='float: right; font-size: 18px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>

7. Selanjutnya, sobat hanya perlu menambah kan kode yang di beri warna merah.
Oia di atas ada dua (2) cara, karena saya kode dimasing-masing template kita pastilah berbeda, jadi dari dua cara diatas mana kiranya yg cocok dengan template sobat.

8. Untuk merubah besar kecilnya No. komentar sobat cukup mengganti pada kode berikut : font-size: 18px;

9. Simpan Template, dan lihat hasilnya.


Kiranya cukup sekian dari saya, selamat mencoba dan semoga berhasil.
Sumber : http://anggasona-anotherbestblog.blogspot.com

Read more

Membuat Blockquote Keren Di Blog ala Kang Rohman

Artikel yang saya cari-cari dari dulu, yaitu blockquot yang tampilannya cantik dan menarik dilihat, saya kira itu bukan blockquote melainkan text area yang diberi background, tp ternyata saya salah... hehee
Nah, karna itulah kali ini saya akan bahas cara membuat blockquote.
Seperti yang sudah kita tahu Pada blogger sendiri sudah ada fitur Blockquote , tetapi setiap tampilannya berbeda tergantung kode CSS yang ada pada tempalte blog Sobat.
Bagi Sobat yang ingin membuat tampilan layaknya punya saya, silahkan ikuti langkah-langkah berikut :

Gambar

Contoh tampilannya seperti di bawah ini :

Contoh Blockquote Kode-Blogger

Cara Membuatnya Sebagai berikut :

• Login ke akun Blogger Sobat
• Masuk Tata Letak
• Edit HTML
• Beri centang pada "Expand template widget"
• BackUp template sobat dulu, dengan cara klik "download template lengkap"
• Cari kode Berikut : .post blockquote {
• Berilah imbuhan, sehingga kodenya jadi seperti berikut :

.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0
}

• Simpan Template.

Keterangan :
Cara menggunakannya, waktu buat postingan baru cukup klik gambar "blockquote" yg sudah ada di form posting blogger.
Semoga bermanfaat.

Read more

Membuat Footer 3 Kolom Dengan Background ala O-om

Met pagi sobat blogger, pagi ini saya akan membahas lagi pastinya tentang blogging, yaitu cara membuat/menambahkan 3 kolom di halaman foter dengan background. pastinya membuat lebih bayak ruang di blog kita, dan lagi dengan adanya penambahan halaman/kolom di foter ini, kita bisa menaruh widget yg lumayan berat loadingnya ke halaman foter tersebut, lumayan lho buat memperkecil berat loading blog... yang pasti di bandingkan ditaruh di sidebar dengan di halaman foter itu berbeda. [itu menurut pengalaman saya]... selebihnya sobat bisa buktikan sendiri.
Berikut contoh screenshotnya:

Screenshot

Berikut cara membuatnya:

• Login ke akun blogger sobat
• Masuk ke Rancangan/Design
• Edit HTML
• Beri centang "Expand Widget Templates"
• Jangan lupa, Back Up dulu template sobat! Klik "Download Full Template"
• Lalu cari kode berikut: ]]></b:skin>
• Letakan kode berikut tepat diatas kode ]]></b:skin>

#bottom{background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ7pYbxCQLXqqYwj2dJo2cQc2Bi_p-0veKyRUdtJgjqgmqSHBA1zXmNNwDGtt63DJgu_IqjSkVnvmfjB-OwFbMOeMBe5W4m6k3P9A2lhYUF5qC_YQxika5QjVHisuYzeGeUMJvCVHCi1Jr/s1600/buttommenu-c.png) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff}
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#C0C0C0; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:280px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:280px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0; padding-top:10px}

Penting!!
Perhatikan text yg saya beri warna pada kode diatas (harap disesuaikan semuanya dengan template sobat)
Warna merah: itu adalah link background, bisa sobat ganti sesuai kemauan sobat.
Warna hijau: itu adalah lebar dari template sobat, setelah sobat memasangnya bila masih kurang rapi, bisa sobat utak-utik sendiri lebarnya sampai seperti yang sobat harapkan.
Warna orange: itu adalah keterangan dari masing2 kolom. biar jelas saya beri warna.
Belum selesai sobb... lanjut...

• Carilah kode: <!-- end content-wrapper --> atau </div> <!-- end content-wrapper-->
• Letakan kode berikut diatas kode: </div> <!-- end content-wrapper-->

<div id='bottom'>

<b:section class='category' id='category'/>

<b:section class='left-bottom' id='left-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='center-bottom' id='center-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='right-bottom' id='right-bottom' preferred='yes' showaddelement='yes'/>

</div>

• Simpan template, dan lihat hasilnya.

Sippp... selamat mencoba dan semoga bermanfaat... Salam blogging \m/

Read more

Cara Menambah Dua [2] Kolom Dibawah Kolom Posting Blogspot

Next topik sob, kali ini saya akan membahas bagaimana cara membuat dua (2) kolom di bawah posting blog, lihat contoh gambar dibawah sob, kiranya seperti itulah yang kali ini akan saya buat.
Sebelum kita praktek, saya jelaskan terlebih dahulu apa kiranya fungsi dari kotak box dibawah posting itu. pertama, dengan kotak box tersebut, kita bisa menambahkan elemen-elemen penting agar pengunjung blog bisa lebih mudah menemukan apa yang mereka cari, bisa juga kita menaruh artikel-artikel penting didalamnya. tapi tentunya semua itu tergantung sama kreatifitas kita masing-masing. intinya mempermudah.

Oke, seperti yang sobat lihat pada gambar dibawah, kolom kiri berisi "langganan RSS FEED" sedangkan kotak ke dua berisi "artikel terkait/related post.

Demo

Cara membuatnya sebagai berikut:

• Login ke akun blogger sobat
• Masuk Rancangan/Layout
• Edit HTML
• Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
• Beri tanda centang "Expand Template Widget"
• Carilah Kode: ]]></b:skin>
• Lalu taruh kode dibawah ini, di atas kode: ]]></b:skin>

#related{background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFtDhyt0bWSbJcEoFi1xUqkmE6HYkWR6iXwtUOtL9jATQAjTYpAOS0pNFanOu-JdygSHpKxGLkCpPslGdC2uk0MSQsu3gA81Fyo7P2pWbrObAsafL5qkGsadKG9CIdvAAeccNe7-mphmc/) 45% 0 repeat-y;border:1px solid #ddd;color:#000;margin:0 0 10px;padding:15px}
#related .related-posts{font-weight:400;width:53%;float:right}
#related .related-posts p{margin:0}
#related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;letter-spacing:0;margin:0}
#related .related-posts ol{font-weight:400;margin:2px 0 0}
#related .subscribe{width:43%;float:left;color:#000}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFgM1lAN06R-vTfpRfSaph3J0J46OhFDsDYQ1utvRymxNBqtRqmz8Sp5gjDE5Lp4L28b6s_fmTn6S0A3lGJ_ixtjWPMLwYvLPLipGImYoD-AeNS5DEUDiLPc_ArqdfJIuq5-XVttHJOBM/) 0 50% no-repeat;vertical-align:middle}
#related .subscribe form{margin:0;padding:0}
.clearfix:after{content:".";display:block;
height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

• Kemudian cari kode beririkut:

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

• Letakkan kode di bawah ini diantara kode: <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> dan kode: </b:if>

<div class='clearfix' id='related'>
<div class='subscribe'>
<p class='feed'>
<a href='http://disini letakkan Link Feed Sobat/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>disini letakkan kode Form Berlangganan Sobat</p></div>
<div class='related-posts'>disini letakan kode Related Post Sobat</div></div>

• Perhatikan text berwarna biru, gantilah dengan alamat feed sobat, dan untuk text warna merah ganti dengan kode script form berlangganan sobat, dan untuk warna hijau, ganti dengan kode script related post sobat. Buat tambahan, kode di atas di template saya, saya taruh di bawah kode:

<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Penting!!
Karena setiap template mempunyai kode script yang berbeda-beda, Bila sobat mendapat kesulitan menaruh kode di atas, sobat bisa tinggalkan komentar disini, sebisa mungkin insya4JJL, saya akan bantu.
Cukup sekian dari saya, semoga bermanfaat.

Read more

Menu Horizontal Menggunakan jQuery

Melanjutkan postingan saya yaitu masih seputar Cara Membuat Menu Horizontal Di Blog, nah pada tread kali ini saya akan membahas bagaimana membuat menu horizontal multi level dengan mmenggunakan JQuery dan PHP. Penjelasannya gampangnya seperti ini, Di dalam sebuah website, seringkali kita menemukan/melihat penggunaan menu bertingkat seperti pada gambar dibawah. Menu yang bertingkat tersebut sebenarnya adalah sebuah struktur pohon/tree di mana suatu menu bisa memiliki anak (submenu), dan submenu tersebut juga bisa memiliki anak lagi dan seterusnya sampai level tak terbatas.

Screenshot

JIka berminat, silahkan ikuti langkah-langkah berikut:

• Login ke akun blogger sobat
• Masuk Rancangan/Layout
• Pilih Edit HTML
• Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
• Beri tanda centang "Expand Template Widget"
• Carilah kode: <head>
• Kemudian copy paste kode berikut di bawah kode: <head>

<!--[if lte IE 7]>

<style type="text/css">

html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/

</style>

<![endif]-->



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/kodeblogger/javascript/jqueryslidemenu.js' type='text/javascript'/>

• Lalu masukkan CSS dibawah ini diatas code: ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Kode CSS diatas silahkan edit dan sesuaikan dengan blog sobat.

• Kemudian cari kode berikut:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Kode Blogger (Header)' type='Header'>
<b:includable id='title'>
</b:section>

</div>

• Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template
• Kemudian taruhlah kode berikut tepat dibawah kode diatas

<div id='footheader'>

<b:section class='footheader' id='footheader' preferred='yes'>

</b:section>

</div>

• Simpan Template dan lanjut lagi sob, masih ada tahapan berikutnya neh ??
• Sekarang kembali ke bagian Menu "Page Elements"
• Setelah sobat selesai dengan cara diatas, pasti di bagian Page element sudah terdapat menu kolom baru, lihat screenshot dibawah ini:

Screenshot

• Nah terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik saja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini:

<div id="myslidemenu" class="jqueryslidemenu">

<ul>

<li><a href="/">Home</a></li>

<li><a href="http://kode-blogger.blogspot.com">Tutorial Blog</a></li>

<li><a href="#">Kategori</a>

<ul>

<li><a href="#">Sub Kategori 1</a></li>

<li><a href="#">Sub Kategori 2</a></li>

</ul>

</li>

<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>

<ul>

<li><a href="#">Sub Item 2.1</a></li>

<li><a href="#">Folder 2.1</a>

<ul>

<li><a href="#">Sub Item 2.1.1</a></li>

<li><a href="#">Sub Item 2.1.2</a></li>

<li><a href="#">Folder 3.1.1</a>

<ul>

<li><a href="#">Sub Item 3.1.1.1</a></li>

<li><a href="#">Sub Item 3.1.1.2</a></li>

</ul>

</li>

<li><a href="#">Sub Item 2.1.4</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="http://kode-blogger.blogspot.com">Tutorial Blog</a></li>

</ul>

<br style="clear: left" />

</div>

• Ubahlah Alamat Link dan Nama dari masing-masing sub menu pada kode diatasa, sesuai dengan blog sobat
• Sippp... Simpan/Save, dan lihatlah hasilnya.

Sekian dari saya, semoga bisa bermanfaat.

Read more