Tampilkan postingan dengan label TUTORIAL BLOG. Tampilkan semua postingan
Tampilkan postingan dengan label TUTORIAL BLOG. Tampilkan semua postingan

Sabtu, 11 Agustus 2012

Cara Menampilkan Dan Menyembunyikan Widget Tertentu Di Blog

 Cara Menampilkan Atau Menyembunyikan Widget Tertentu Di Blog - Kali ini saya akan kembali berbagi trik gratis untuk sobat KUCOPAS semua, Trik ini berhubungan dengan widget di blog yang mau di sembunyikan maupun di tampilkan pada halaman tertentu. Mungkin sobat sudah mengerti apa yang saya maksudkan.

 Fungsi dari menampilkan atau menyembunyikan widget tertentu di blog adalah untuk menampilkan atau menyembunyikan widget yang mungkin sobat anggap penting dan tidak penting pada suatu halaman. Alhasil, Sobat bisa sesuka hati menampilkan maupun menyembunyikan widget tertentu dalam suatu halaman tertentu saja. Jangan makin bingung ya sobat, dengar penjelasan dan definisi dari saya, hehehe.

 Untuk lebih jelas lagi saya kasih satu contoh menyembunyikan widget tertentu pada halaman posting, Maksudnya adalah widget ini tidak akan muncul pada halaman posting melainkan widget hanya akan muncul pada halaman utama saja atau Home page. Jadi trik ini juga dapat membantu meringankan loading halaman pada blog sobat saat di buka atau di kunjungi para visitor.

 Jika sobat tertarik untuk menyembunyikan atau menampilkan widget tertentu pada halaman blog, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan Sobat >>Login/masuk ke Account Blog sobat.
2. Pilih Rancangan atau pada tampilan blogger baru pilih Menu >> Template >> Lanjutkan >> Edit HTML. Jangan lupa Centang "Expand Template Widget".

Cara Menyembunyikan Widget Pada Halaman Posting.
  • Silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan pencarian).
  • Jika sudah ketemu, Kemudian sobat letakkan Kode Script berikut ini tepat di bawah atau sesudah kode ]]></b:skin>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#Followers1,#HTML1,#Feed1,#Label1,#HTML9 {display:none;}
</style>
</b:if>

Catatan:
* Kode warna BIRU adalah KODE ID WIDGET SOBAT.
* Silahkan sobat ubah kode yang berwarna BIRU dengan ID widget sobat yang mau disembunyikan pada halaman posting.
* Dan perlu sobat ketahui, Bahwa kode widget memiliki sifat yang unik dan berbeda-beda pada setiap blog. Jadi sesuaikan saja dengan ID widget sobat.

Cara untuk mengetahui ID/kode widget sobat, ikuti caranya sebagai berikut:

* Silahkan sobat menuju ke >> Element Laman/Tata letak
* Arahkan mouse pada tulisan "Edit" dan lihatlah URL dibagian bawah browser akan terlihat widget ID yang dimaksud, Kode bisa berupa Followers1, HTML1, HTML2, Label1, Feed1 dan sebagainya.
Lihat contoh gambar dibawah ini.

Cara Mengetahui kode id Widget Di Blog

Catatan:
  • No 1 adalah contoh dimana mouse diarahkan pada Edit.
  • No 2 adalah ID/kode widget yang muncul di browser bagian bawah.
* Cara lain yang juga bisa sobat ikuti adalah, Arahkan mouse dan klik pada tulisan "Edit" dan lihatlah URL dibagian atas browser akan terlihat widget ID yang dimaksud, Kode bisa berupa Followers1, HTML1, HTML2, Label1, Feed1 dan sebagainya.
Lihat contoh gambar berikut.

Cara Mengetahui kode id Widget Di Blog

Catatan:
  • No 1 adalah contoh dimana mouse diarahkan dan klik pada Edit. Hingga muncul pop up.
  • No 2 adalah ID/kode widget yang muncul di browser bagian atas.
* Jika semua kode script diatas sudah sobat taruh di bawah atau setelah kode  ]]></b:skin> Jangan lupa klik Simpan atau Save Template.

 Sekarang silahkan sobat cek dulu, apakah widget sudah tersembunyi atau belum. Jika langkah-langkah diatas sudah sobat lakukan dengan benar, Maka dapat di pastikan trik ini berhasil.

Cara Menampilkan widget hanya pada (Homepage) Halaman Utama Blog.
Berikut Kode-nya:


<b:if cond='data:blog.url == data:blog.homepageUrl'>
KODE WIDGET SOBAT 
</b:if>


Cara Menyembunyikan widget pada (Homepage) Halaman Utama Blog.

Berikut Kode-nya:


<b:if cond='data:blog.url != data:blog.homepageUrl'>
KODE WIDGET SOBAT 
</b:if>


Cara Menampilkan widget hanya pada Archive Page.
Archive page adalah halaman arsip blog.

Berikut Kode-nya:


<b:if cond='data:blog.pageType == &quot;archive&quot;'>
KODE WIDGET SOBAT 
</b:if>


Cara Menyembunyikan widget pada Archive Page.

Berikut Kode-nya:


<b:if cond='data:blog.pageType != &quot;archive&quot;'>
KODE WIDGET SOBAT 
</b:if>


Cara Menampilkan widget hanya pada Item Page.
Item page adalah halaman artikel yang sobat posting.

Berikut Kode-nya:


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


Cara Menyembunyikan widget pada Item Page.

Berikut Kode-nya:


<b:if cond='data:blog.pageType != &quot;item&quot;'>
KODE WIDGET SOBAT 
</b:if>


Cara Menampilkan widget hanya pada Static Page.
Static page adalah halaman yang tidak termasuk ke dalam postingan blog sobat, halaman ini biasanya digunakan untuk halaman About me, Privacy Policy, Contact Us atau yang lainnya.

Berikut Kode-nya:


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
KODE WIDGET SOBAT 
</b:if>


Cara Menyembunyikan widget pada Static Page.

Berikut Kode-nya:


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
KODE WIDGET SOBAT 
</b:if>


Cara Menampilkan widget hanya pada alamat URL tertentu.

Berikut Kode-nya:


<b:if cond='data:blog.url == &quot;Alamat URL&quot;'>
KODE WIDGET SOBAT 
</b:if>


Cara Menyembunyikan widget pada alamat URL tertentu.

Berikut Kode-nya:


<b:if cond='data:blog.url != &quot;Alamat URL&quot;'>
KODE WIDGET SOBAT 
</b:if>


Catatan:
Ganti Alamat URL dengan Alamat URL yang sobat inginkan.

Cara Menampilkan widget hanya pada Label Page.
Label page adalah halaman ketika sobat klik label pada posting

Berikut Kode-nya:


<b:if cond='data:blog.url == &quot;http://kuc0pas.blogspot.com/search/label/Nama Label&quot;'>
KODE WIDGET SOBAT 
</b:if>


Cara Menyembunyikan widget pada Label Page.

Berikut Kode-nya:


<b:if cond='data:blog.url != &quot;http://kuc0pas.blogspot.com/search/label/Nama Label&quot;'>
KODE WIDGET SOBAT 
</b:if>


Catatan:
* Ganti http://kuc0pas.blogspot.com dengan Alamat URL blog sobat.
* Ganti Nama Label dengan nama label pada blog sobat. Jika ada space (spasi) pada nama label, Silahkan sobat ganti spasi dengan %20.
* Sobat bisa mengisi dua atau lebih Conditional tag dengan syarat sobat harus menutup sebanyak Conditional tag itu dengan kode </b:if>.

NB:
 Karena ada pertanyaan dari sobat @Ahmad Maryuki >>> Sebelumnya saya ucapkan Terimakasih atas kunjungan, sanjungan, Kritik dan saran nya.
Sobat master Blogger zaw...
blog km banyak banget sob...
Cara menyembunyikan widget pada semua search Label, sobat bisa hilangkan kode Nama label warna biru pada Url label, jadinya kodenya seperti berikut ini:


<b:if cond='data:blog.url != &quot;http://kuc0pas.blogspot.com/search/label&quot;'>
KODE WIDGET SOBAT
</b:if>


Sobat bisa mempraktekkan nya, sudah saya uji dan berhasil. semoga membantu.

Contoh misalnya jika Sobat tidak ingin menampilkan widget pada Homepage dan URL tertentu.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.url != &quot; Alamat URL&quot;'>
KODE WIDGET SOBAT  
</b:if>
</b:if>

* Cara Penerapan Kode bisa sobat ikuti seperti cara Menyembunyikan Widget Pada Halaman Posting di atas.

Contoh Penerapan Kode yang lain dalam Edit Template (HTML).

<b:widget id='HTML' locked='false' title='JUDUL ID/KODE WIDGET SOBAT' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
KODE WIDGET SOBAT 
</b:if>
</b:includable> </b:widget>

Catatan:
* Tulisan warna BIRU adalah  JUDUL ID/KODE WIDGET SOBAT, Kode bisa berupa Followers1, HTML1, HTML2, Label1, Feed1 dan sebagainya. Silahkan sobat cari sesuai dengan Judul Id/Kode Widget sobat yang ingin di tampilkan atau di sembunyikan. Cara pencarian Kode Id widget sudah saya terangkan di atas.
* Kode yang berwarna PINK adalah kode yang berfungsi untuk menampilkan widget hanya pada halaman utama (Homepage) saja. Sobat bisa menggantinya dengan kode-kode yang sudah saya cantumkan di atas.

 Semoga trik yang saya share ini bisa sangat bermanfaat untuk sobat KUCOPAS semua. Jika ada pertanyaan silahkan berkomentar dalam form yang tersedia dan jangan malu-malu untuk bertanya. Jika ada waktu yang tepat pasti akan saya balas.


Rabu, 08 Agustus 2012

Cara Membuat dan Memasang Recent Comment Di Blog Tanpa Edit HTML

 Cara Membuat dan Memasang Recent Comment Di Blog Tanpa Edit HTML - Setelah kemarin saya telah memberikan tips tutorial blog tentang Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog, Kali ini saya akan berbagi tips dan trik lagi yang cukup ringan namun semoga saja dapat sangat bermanfaat untuk sobat KUCOPAS semua.

 Tips dan triknya adalah tentang Cara Membuat dan Memasang Recent Comment Di Blog Tanpa Edit HTML. Sedikit pencerahan maupun pengertian untuk sobat yang mengikuti dan membaca posting ini, Bahwa Recent Comment yang akan saya kasih triknya adalah Recent Comment yang bagus, Karena Recent Comment ini mempunyai fungsi akan menampilkan foto dari empunya yang comment di blog sobat, Recent Comment berarti Comment yang paling akhir pada semua posting yang di kirim pada blog sobat.

 Cara memasang recent comment di blog sobat terbilang sangat mudah, Karena sobat tidak perlu repot-repot meng-Edit template yang mungkin sangat rumit untuk menempatkan kode script tersebut. Tampilan recent comment ini sangat enak di pandang, dinamis, tidak amburadul dan tentunya sedap di pandang mata para pengunjung blog kita.

 Fungsi yang selanjutnya dari memasang recent comment ini di blog sobat adalah untuk memudahkan sobat lebih cepat untuk mengetahui comment terbaru yang masuk di blog sobat yang di kirim oleh pemirsa atau pengunjung blog dan tentunya sobat tanpa susah-susah mencarinya satu-persatu dalam semua postingan blog sobat. Sehingga sobat bisa lebih cepat untuk membalas comment dari para pengunjung blog. Karena menurut para Master blogger, Membalas comment dari pemirsa atau pengunjung blog adalah sifat yang Etis, Peduli, dan bersungguh-sungguh dalam mengurus blog. Because, "Visitor is Money".

 Tampilan dari Recent Comment yang akan kita buat dan pasang ini kurang lebih akan seperti gambar di bawah ini:

Cara Membuat dan Memasang Recent Comment Di Blog Tanpa Edit HTML

 Jika sobat tertarik untuk memasangnya di blog sobat, Seperti yang sudah pasang di Sidebar blog ini, Silahkan ikuti langkah-langkahnya sebagai berikut:

1. Silahkan Sobat >> Login/Masuk ke Blog dengan akun Sobat.
2. Kemudian di Dashboard blog, Pilih Menu >> Layout/Tata Letak.
3. Setelah itu sobat pilih atau tentukan dimana kira-kira "Recent Comment" akan sobat taruh atau letakkan. Pilih >> Add Gadget/Tambah Gadget. Lalu pilih >> HTML/Javascript.
4. Silahkan Sobat Masukkan semua Code Script di bawah ini pada kotak HMTL/Javascript.
<div style='padding: 5px; overflow: auto; width: auto; height: 200px;border:1px solid #000000'>
<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 50,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://masolis-javascript.googlecode.com/svn/trunk/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://kuc0pas.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>
</div>
Catatan:
  • height: 200px; adalah ukuran Tinggi kotak scroll, silahkan sobat ganti nilainya sesuai dengan keinginan sobat.
  • max-results=5 : adalah jumlah komentar yang akan ditampilkan pada blog sobat.
  • avatarSize  = 50 : adalah ukuran pixel foto atau gambar (avatar) yang akan di tampilkan.
  • characters  = 60 : adalah Jumlah karakter huruf komentar yang akan di tampilkan.
  • Warna Merah : Silahkan ganti dengan alamat URL blog Sobat.
5. Langkah yang terakhir jangan lupa sobat kasih Judul lalu klik SIMPAN dan lihat hasilnya.

 Cara membuat dan memasang recent comment di blog dengan di sertai foto atau gambar avatar telah selesai. Sekarang sobat sudah memiliki recent comment yang terpasang di blog, Semoga sobat tidak ada kesulitan lagi untuk mencari-cari comment terbaru yang di kirim pada blog sobat.
Salam Blogger...


Selasa, 07 Agustus 2012

Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog

 Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog - Setelah cukup lama saya tidak update posting blog, Kali ini saya akan kasih trik lagi seputar tutorial blog, Yaitu Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog.

 Sekedar wawasan untuk sobat, Kolom Elemen itu berbeda dengan Kolom biasa, Bedanya sobat bisa melihat di Elemen laman. Kalau kolom elemen pada elemen laman akan muncul elemen baru yang bisa sobat pasangi widget (Add Gadget atau Tambah Gadget) dan pastinya sobat bisa tanpa perlu edit HTML lagi, Namun kolom element tidak bisa di pasang dalam artikel atau postingan, Sedangkan kolom biasa adalah sebaliknya dan sobat bisa membaca artikel postingnya tentang Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Posting Blog disini.

Berikut di bawah ini adalah contoh gambar Dua Kolom Elemen yang berada pada Tata Letak (element Laman).
Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog

 Jika sobat tertarik ingin membuat dan memasangnya di blog sobat, Disini saya akan menerangkan secara detail Cara Membuat Dan Menambah Dua Kolom Elemen di Bawah Postingan Blog. Silahkan sobat ikuti langkah-langkahnya sebagai berikut:
  1. Silahkan sobat >> Login/Masuk >> ke akun blog sobat.
  2. Pada "Dashboard" tampilan blog baru, pilih dan klik menu >> Template >> Edit HTML >> Lanjutkan.
  3. Jangan lupa sobat "Centang" >> Expand Template Widget.
  4. Kemudian silahkan sobat cari kode #main-wrapper { (Gunakan CTRL+F untuk mempermudah pencarian).
Kurang lebih kodenya seperti dibawah ini:
#main-wrapper {
  width: 500px;
  float: $startSide;
margin:20px
  }
5. Letakkan atau taruh semua kode berikut, Setelah atau di bawah kode #main-wrapper {
#main {
width:500px;
float:center;
}
#main-left{
border:1px solid #000000;
padding:10px;
width: 225px;
float:left;
}
#main-right{
border:1px solid #000000;
padding:10px;
width: 225px;
float:right;
}
Sehingga kodenya jadi seperti di bawah ini:
#main-wrapper {
  width: 500px;
  float: $startSide;
margin:20px
  }
#main {
width:500px;
float:center;
}
#main-left{
border:1px solid #000000;
padding:10px;
width: 225px;
float:left;
}
#main-right{
border:1px solid #000000;
padding:10px;
width: 225px;
float:right;
}
6. Langkah yang selanjutanya masih dalam Edit HTML, Silahkan sobat cari lagi kode <div id='main-wrapper'> (Gunakan CTRL+F untuk mempercepat pencarian).

Kurang lebih kodenya seperti dibawah ini:
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
      </div>
7. Lalu silahkan sobat sisipkan atau letakkan kode berikut, di bawah atau setelah kode </b:section>
<b:section class='main-left' id='main-left' style='width: 225px; float: left;'>
</b:section>
<b:section class='main-right' id='main-right' style='width: 225px; float: right;'>
</b:section>
</div>
Sehingga kodenya jadi seperti di bawah ini:
<div id='main-wrapper'>
<div id='main'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<b:section class='main-left' id='main-left' style='width: 225px; float: left;'>
</b:section>
<b:section class='main-right' id='main-right' style='width: 225px; float: right;'>
</b:section>
</div>
</div>
Catatan:
  • width: 225px Adalah Lebar kolom yang sobat buat, Silahkan sobat atur Nilainya agar sesuai dengan Template atau keinginan sobat.
7. Sebelum sobat klik Simpan, Ada baiknya sobat klik >> Preview atau Pratinjau terlebih dahulu, Agar bisa antisipasi jika terjadi kesalahan eror saat Edit HTML dalam Template blog sobat.

8. Jika Preview atau Pratinjau tidak mengalami eror, Silahkan sobat klik >> Simpan dan lihat hasilnya pada elemen laman.

9. Jika sudah ada dua kolom Add Gadget atau Tambah Gadget di bawah postingan, Berarti trik yang sobat buat berhasil dengan sempurna. Lihat contoh gambar saya yang sudah berhasil Membuat Dan Menambah Dua Kolom Elemen di Bawah Postingan Blog.

Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog

 Setelah berhasil membuat dan menambah dua kolom di bawah posting blog, Sekarang sobat bisa bebas mengisinya dengan widget atau apapun dengan cara langsung klik Add Gadget atau Tambah gadget seperti yang sobat inginkan.

Update:


Sabtu, 04 Agustus 2012

Cara Membuat Link Bergoyang di Blog

Cara Membuat Link Bergoyang di Blog - Cara menciptakan link yang bisa bergoyang/nudging di blog atau cara membuat link yang dapat bergoyang jika terkena pointer mouse - Setelah sekian lama Blogaul tidak update artikel seputar blogging dan SEO dengan artikel terakhir how to use meta tags in blogspot, kali ini saya akan coba update lagi yaitu artikel mengenai cara membuat nudging link di blog. Cara ini menggunakan script jQuery yang saya dapatkan dari sini (http://smilenet4u.blogspot.com/2012/04/cara-membuat-link-bergoyang-nodging.html) dimana bila dipraktekkan akan membuat link yang terkena pointer mouse akan bergoyang-goyang gitu. Oke, langsung saja berikut cara menciptakan link yang bisa bergoyang di blog:

  • Login ke akun Blogger sobat
  • Pilih Rancangan -- Edit Html (download template anda untuk mengurangi resiko kesalahan peletakan script) -- centang Expand Widget Template
  • Search kode berikut </head>  ( untuk mempermudah pencarian tekan Ctrl + F )
  • Copy paste script jQuery di bawah ini sebelum kode tersebut
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });
</script>
  • Simpan Template anda dan lihat hasilnya.
Nah, itulah cara membuat link bergoyang di blog. Semoga bermanfaat..

Minggu, 22 Juli 2012

How To Use Meta Tags in Blogspot

How To Use Meta Tags in Blogspot - How to add meta tags in blogger or How to use meta tags in blogger - Meta Tags are HTML elements used to provide structured metadata about a web page. Such tags are placed in the head section of an HTML document and Search Engines might use this data to display the search snippet when they display a page from your blog. Most of the Social Sharing Tools like the Facebook Share or the Google Plus buttons will pick up this meta description to create the snippet which gets shared to the Social Networks.

How to add meta description tags

Blogger has rolled out an array of SEO features and now adding Meta Tags has become so easy. You can do it easily from the Blogger’s User Interface without doing much of Template Editing or pulling your hair. So here is how to do it
  1. Go to Settings > Search Settings and Enable Meta Tags. In the Text area give a 150 character description which will describe your Blog. This text might be used by Search engines when your Blog’s home page is displayed on Search Engines. Here is the snippet that I have given “Blogger Widgets provides you the best quality blogger tutorials.It also provides you with free blogger widgets and  gadgets to build a better blog." 

meta tags for blogger

meta description tags for blogger displayed on google  
2. Now when you make a Post, you can set the Meta Description from the Post Editor’s Post Settings 
Sidebar.
meta description tags for blogger
You can always edit the Search Description for existing posts as well
3. If you are having a custom template, make sure that the following line of code is present in your template. To do that go to Template and Proceed to Edit HTML . Find


  • <b:include data='blog' name='all-head-content'/>
    If it's not present, add it just before </head> 




  •  That's It you have done it.


  • Referensi: http://www.bloggerplugins.org/2012/03/add-meta-description-tags-to-blogger.html

    Cara Memasang Jam di Wordpress

    Cara Memasang Jam di Wordpress - Cara memberi/menambah widget jam/clock di blog wordpress - Sebenarnya beberapa waktu lalu saya pernah posting artikel berjudul cara memasang widget jam di blog, tapi tutorial tersebut untuk blog di blogspot. Dan kali ini saya akan posting tutorial khusus untuk wordpress. Oke lanjut.. Memasang widget jam merupakan salah satu cara mempercantik tampilan blog, karena dengan widget ini kita sebagai pemilik blog ataupun pengunjung bisa mengetahui waktu terkini sehingga bisa lebih mengontrol waktu. Langsung saja berikut cara memberi widget jam di wordpress:

    1. Kunjungi situs http://www.clocklink.com
    2. Setelah sobat sampai di situs tersebut, silahkan sobat lihat bagian sidebar sebelah kiri situs tersebut. Disitu ada beberapa pilihan aneka jenis jam yang bisa sobat pilih. Misal analog, digital, animal dan lain-lain. Silahkan sobat pilih sesuai keinginan sobat.
    3. Setelah sobat pilih, maka akan muncul aneka bentuk jam yang bisa dipilih.
    4. Setelah sobat memilih salah satu jam, maka selanjutnya klik View HTML Tag di bawah gambar jam yang sobat suka.
    5. Maka akan terbuka halaman baru persetujuan, klik Accept untuk mendapatkan kodenya.
    6. Atur kode area berdasarkan area di daerah sobat.
    7. Copy kode yang di "If the above does not work, please try the following code." Seperti contoh di bawah ini dan paste di notepad terlebih dahulu.
    <embed src="http://www.clocklink.com/clocks/0009-dkbrown.swf?TimeZone=Indonesia_Jakarta&"  width="250" height="250" wmode="transparent" type="application/x-shockwave-flash">
    8. Hapus bagian "<embed" dan penutup ">"dan ganti dengan "[gigya" dan "]". Agar widget berada di tengah tambahkan "center" sehingga kodenya akan menjadi seperti ini:
    <div style="text-align:center;">[gigya src="http://www.clocklink.com/clocks/0009-dkbrown.swf?TimeZone=Indonesia_Jakarta&"  width="250" height="250" wmode="transparent" type="application/x-shockwave-flash"]</div>
    9. Masuk ke halaman wp-admin (dasbor) blog WordPress.
    10. Klik Tampilan >> Widget.
    11. Pilih widget "Teks" kemudian seret ke bagian sidebar untuk mengaktifkannya.
    12. Beri judul sesuai keinginan sobat.
    13. Masukkan kode pada langkah nomor 7.
    14. Klik tombol Simpan.
    15. Selesai.
    Nah, selesai juga posting artikel berjudul cara memasang jam di wordpress. Semoga bermanfaat untuk semua..

    Cara Membuat Random Post di Blog

    Cara Membuat Random Post di Blog - Cara membuat/memberi postingan acak di blog di blog atau cara memasang random post di blog - Random Post di Blog sebenarnya hampir sama kegunaannya dengan recent post. Bedanya adalah Random Post di Blog itu menampilkan postingan kita secara acak (random) baik itu postingan baru maupun postingan lama. Sedangkan recent post hanya menampilkan postingan-postingan terbaru saja. Tapi bila sobat juga tertarik membuat recent post di blog, silahkan baca artikel berikut: cara membuat/memberi recent post di blog. Keuntungannya adalah postingan lama kita akan ditampilkan di halaman utama atau di halaman dimana kita memasang widget random post itu. Bagi pengunjung sendiri sangat terbantu sekali untuk melihat beberapa postingan lama sehingga pengunjung tidak capek-capek lagi untuk membuka arsip-arsip blog yang lama.

    Adapun cara memasang random post di blog adalah sebagai berikut :

    1. Seperti biasanya, anda harus membuka Akun Blog anda sendir
    2. Pilihlah Rancangan / Design pada Dasbor Blog Anda (seperti biasa juga nih)
    3. Lalu tambahkan Widget (klik add widget / tambah gadget)
    4. Pilih mode HTML/Javascript
    5. Copy-lah script di bawah ini dan paste-lah pada kotak widget yang tadi anda tambahkan.
    <script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=10;function randomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script>
    <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
    callback=randomposts" type="text/javascript"></script>
    6. Simpan Widget dan simpan template blog anda.
    7. Lihat Hasilnya.
    Nah, mudah-mudah postingan mengenai cara membuat random post di blog kali ini bermanfaat buat sobat semua.. 

    Referensi: http://kumpulan-adsen.blogspot.com/2012/04/cara-membuat-random-post-di-blog.html

    Cara Menghilangkan Angka Pada Label Blog

    Cara Menghilangkan Angka Pada Label Blog - Cara menghapus penghitung/angka pada label/kategori blog atau cara membuat label/kategori blog tampil tanpa angka - Beberapa waktu lalu saya pernah posting sebuah artikel yang berkaitan dengan modifikasi label/kategori blog, yaitu artikel berjudul cara memasang scroll pada kategori blog, so di kesempatan ini saya akan berbagi pula tutorial yang berkaitan dengan modfifikasi blog di bagian ini yaitu artikel berjudul cara menghilangkan angka pada label blog, dan langkah-langkah yang saya tulis dalam artikel kali ini saya dapatkan dari blog teman saya dengan link berikut (http://www.kucoba.com/2010/01/cara-menghilangkan-angka-pada-label-di.html). Oke lanjut.. Terdapat banyak sekali orang yang memilih untuk menghilangkan angka pada label, selain tidak enak dilihat dan megganggu sebagian orang berpendapat bahwa hal itu tidak terlihat profesional alias malu-maluin apalagi kalau jumlah post pada lebel tersebut masih sedikit. Namun bagi sebagian orang yang lain menampilkan angka pada label sangat penting dan berpengaruh terhadap rating blog mereka, karen jumlah angka yang besar akan menarik pengunjung untuk membuka label tersebut. Sekarang Anda bisa memilih apa akan menghilangkan angka pada labe atau tetap bertahan. kalau saya memilih untuk menghilangkan angka pada label, alasannya agar orang tidak tau berapa jumlah post pada lebe tersebut dan yang ke dua agar terlihat lebih menarik sehingga orang-orang menjadi penasaran di balik lebel tersebut.

    Baiklah langsung saja bagaimana cara menghapus angka pada label blog:
    1. Masuk ke dashboard Blogger
    2. Pilih Layout / tata letak
    3. Pilih Edit html
    4. Jangan lupa Beri tanda centang terlebih dahulu pada "expand widget template"
    5. Cari Kode dibawah ini :

           <span dir='ltr'>(<data:label.count/>)</span>

    6. Hapus Script di atas, lihat gambar di bawah ini:
    cara menghilangkan angka pada label blog
       Hapus lah script yang di tandai di atas!

    7. Save Tamplate.

    Yupz, sudah selesai posting mengenai cara menghilangkan angka pada label blog. Semoga bermanfaat buat semua..

    Sabtu, 21 Juli 2012

    Cara Membuat Judul Blog Bergerak

    Cara Membuat Judul Blog Bergerak - Cara membuat marquee pada judul blog atau cara memodifikasi judul blog agar bisa bergerak dan berjalan. Beberapa waktu lalu saya telah posting artikel mengenai cara membuat teks bergerak di blog, dan kali ini saya akan posting artikel yang sejenis tapi beda dan penerapannya kali ini ini pada judul blog dengan judul artikel cara membuat judul blog bergerak. Langkah-langkah dalam tutorial kali ini saya dapatkan dari salah satu teman blogger saya dengan link berikut (http://www.mfrifanto.com/2012/03/cara-membuat-judul-blog-bergerak.html). Lanjut.. Judul/Title blog secara default, berada dalam keadaan statik. Namun, kita bisa memberikan efek pada judul blog kita dengan kode JavaScript, sehingga bisa bergerak dari kanan ke kiri. Langsung saja berikut ini cara memodifikasi judul blog agar bisa bergerak dan berjalan:
    • Dari dashboard >> Rancangan >> Add a gadget >> Html/Javascript 
    • Copy dan paste code berikut di HTML/Javascript :
    <script language=javascript>
    msg = "Test Blog ...Test Blog ...";

    msg = "..." + msg;pos = 0;
    function scrollMSG() {
    document.title = msg.substring(pos, msg.length) + msg.substring(0,

    pos);
    pos++;
    if (pos > msg.length) pos = 0
    window.setTimeout("scrollMSG()",200);
    }
    scrollMSG();
    </script>

    Note: Ganti 'Test Blog ...Test Blog ...' dengan teks yang diinginkan.
    • Save/Simpan, dan lihat hasilnya.
    Saya kira cukup penjelasan mengenai cara membuat judul blog bergerak kali ini. Semoga bermanfaat..

    Cara Membuat Text Area di Blog

    Cara Membuat Text Area di Blog - Cara memasang text area/teks area di blog atau cara menampilkan kode html dalam postingan blog agar mudah dicopy. Setelah kemarin ane posting sebuah artikel yang cukup bagus dengan judul cara pasang lagu di blog, maka kali ini saya akan posting artikel yang cukup menarik dan berguna juga berjudul cara membuat text area di blog. Semua pasti sudah tau kan apa text area itu? Oke, jika ada yang belum tau ane jelasin sedikit. Text area adalah tempat untuk meletakkan atau menyimpan teks atau tulisan-tulisan yang kita anggap penting dalam area/tempat baru, misalnya kode-kode html atau teks artikel yang penting. Dengan membuat teks area di blog kita maka akan mempermudah para pengunjung yang ingin mengcopy dalam teks are tersebut. Nah, sudah faham kan? Oke, langsung saja berikut ini cara memasang teks area di blog kita:

    >> Dalam penulisan postingan baru, silahkan pindah ke mode Edit HTML lalu pastekan kode di bawah di bagian postingan yang sobat inginkan:
    <p align="center"><textarea name="code" rows="6" cols="20">Ini adalah sebuah contoh penggunaan teks area, silahkan sobat modifikasi sendiri</textarea></p>
    Maka jadinya nanti seperti ini:
    Selain model text area di atas, ada juga text area dengan model lain. Yaitu teks area yang memakai tombol Highlight dan dengan tombol ini maka akan lebih mempermudah pengunjung yang ingin mengcopy kode dalam text area tersebut karena hanya dengan sekali klik saja. Untuk membuatnya cukup mudah dan berikut cara membuat teks area dengan tombol highlight:

    >> Dalam penulisan postingan baru, silahkan pindah ke mode Edit HTML lalu pastekan kode di bawah di bagian postingan yang sobat inginkan:
    <div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Ini adalah sebuah contoh penggunaan teks area yang memakai tombol highlight, silahkan sobat modifikasi sendiri</textarea></p></div></form>
    So jadinya nanti seperti ini:
    Nah, bagaimana sobat? Mudah kan cara membuatnya..? Sekian posting kali ini mengenai cara membuat text area di blog. Semoga bermanfaat untuk semua..

    Cara Private Counter Histats

    Cara Private Counter Histats - Cara Memprivate Counter Histats atau cara membuat histat agar tidak bisa di lihat orang lain - Setelah beberapa waktu saya posting artikel mengenai cara memasang counter histats di blog dan cara memasang counter flag di blog. Oke lanjut.. Hampir semua blogger ataupun webmaster pasti sudah tau apa itu Histats yaitu situs penyedia counter/penghitung visitor untuk blog atau website. Dengan menggunakan counter Histats ini, maka pemilik blog/website akan bisa mengenai informasi statistik blog secara lengkap, mulai dari visitor, pageviews, user online dan lain sebagainya. Tapi keberadaan counter ini kadang disalahgunakan oleh beberapa orang untuk melihat kata kunci populer di blog lain sehingga orang-orang ini bisa melihatnya, dengan begitu mereka akan bisa mencurinya. Oleh karena itu banyak para pemilik blog atau web yang mencoba memprivate counter histats nya sehingga akan lebih aman dan mereka biasanya hanya menampilkan informasi-informasi yang penting-penting saja misalnya informasi visitor dan traffic stats. Oke langsung saja berikut ini cara membuat histat agar tidak bisa di lihat orang lain:

    1. Login ke akun histats sobat.
    2. Klik Control Panel yang berada di sebelah kanan atas setelah kita masuk.
    3. Next klik gambar gembog di sebelah url blog yang akan kita privasi.
    private counter histats1
    4. Lalu akan muncul halaman yang berisi banyak settingan yang bisa kita atur. Silahkan tentukan apakah diatur Public atau Private. Kalau Public stats berarti bisa dilihat banyak orang, sedangkan Private stats artinya tidak bisa dilihat orang lain.
    private counter histats2
    5. Setelah sobat tentukan pilihan sobat. Kemudian klik Continue dan Selesai.

    Saya kira cukup penjelasannya mengenai cara private counter histats. Semoga bermanfaat..

    Cara Memasang Tombol Follow Twitter di Blog

    Cara Memasang Tombol Follow Twitter di Blog - Cara membuat/menambah tombol follow twitter di blog atau cara membuat/menambah twitter follow button di blog.
    twitter follow button
    Twitter merupakan salah satu jejaring sosial yang cukup banyak peminatnya, oleh karena itu tak heran jika banyak orang telah menggunakan twitter untuk berbagai keperluan, misalnya memasarkan produk, mencari pelanggan, tukar pengalaman, dan lain sebagainya. Dan kita sebagai blogger pun harus mampu memanfaatkan jejaring sosial yang satu ini untuk mengoptimalkan traffic di blog kita. Bagaimana caranya? Oke langsung saja jelaskan sedikit. Bila kita sudah punya banyak follower, lalu setiap update posting artikel blog kita kita masukkan di twitter, maka tentu artikel kita tersebut akan bisa dilihat banyak orang dan pastinya akan banyak yang tertarik yang mengunjungi blog kita. Lantas bagaimana cara mendapatkan banyak follower tersebut? Sebenarnya ada banyak cara, diantaranya mencari follower secara mudah. Baca: cara cepat menambah follower twitter. Selain dengan cara tersebut, kita juga bisa menambah follower twitter kita dengan cara memasang tombol follow twitter di blog kita. Jadi setiap pengunjung yang tertarik untuk mengikuti kita di twitter bisa langsung mengklik tombol ini dan dia otomatis menjadi follower kita. Lantas bagaimana caranya? Mudah saja, silahkan ikuti cara membuat twitter follow button di blog berikut ini:

    1. Silahkan masuk ke akun blog kalian
    2. Copy kode di bawah di bagian blog mana saja, terserah sobat, misalnya di header, sidebar, footer atau yang lainnya.
    <a href="https://twitter.com/amronbadriza" class="twitter-follow-button" data-show-count="false">Follow @amronbadriza</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    3. Silahkan ganti kode yang berwarna biru dengan id twitter sobat
    4. Selesai

    Mudah kan tutorial cara memasang tombol follow twitter di blog ini? Pastinya donk.. Oke, semoga bermanfaat buat sobat.

    Jumat, 20 Juli 2012

    Cara Membuat Postingan Terbaru Blog Otomatis menjadi Status Facebook

    Cara Membuat Postingan Terbaru Blog Otomatis menjadi Status Facebook - Cara agar postingan terakhir blog masuk di akun facebook - Setelah posting mengenai cara membuat fanpage di facebook dan cara membuat like box facebook di blog, kali ini saya akan bahas bagaimana kita bisa memanfaat keduanya untuk mendapatkan traffic tambahan untuk blog kita.  Artikel ini rangkuman dari link berikut (http://andic39.blogspot.com/2012/04/cara-membuat-posting-terbaru-pada-blog.html) semoga bisa difahami. Oke.. Lanjut.. Bagi anda yang suka ngeblog (blogger) dan juga online terutama dengan facebook, tentunya ingin juga posting blog terbaru langsung ter-update di facebook. Sekarang ini situs jejaring sosial seperti facebook sungguh luar biasa penggemarnya, hampir setiap orang online atau terkoneksi internet, website yang pertama kali dibuka biasanya adalah facebook.com - login ke account masing-masing dan update status atau baca-baca status orang lain, member komment, sampai-sampai status gak pentingpun rasanya ingin sekali dibagikan di facebook. Bagi para blogger sebagian besar menginginkan blognya rame di kunjungi orang, atau mungkin para pebisnis online yang menginginkan usaha onlinenya (toko online - nya) di serbu orang, pasti sangat menginginkan hal ini, dengan cara menampilkan informasi terbaru (update) dari blog/ web kita di situs jejaring social terutama facebook, dan ini sangat memungkinkan penambahan kunjungan ke blog/ web kita. Pada kesempatan yang sangat baik ini saya akan berbagi tutorial singkat tentang bagaimana cara membuat Posting Blog Terbaru Otomatis Update di Status Facebook kita. Sulitkan membuat postingan terbaru pada blog otomatis update di status facebook? Jawabannya silakan simak panduan (tutorial) Posting Blog Terbaru Otomatis Update di Status Facebook kita di bawah ini. Berikut cara agar postingan terakhir blog masuk di akun facebook:

    1.Silahkan anda buka alamat https://twitterfeed.com/
    2.Klik Register Now maka akan tampil  gambar , silahkan anda isi email aktif anda, password untuk login ke twitterfeed, tulis kode yang tampak dan klik create account.
    3.Setelah anda klik create account, selanjutnya anda masukan Feed Name (boleh anda tulis dengan nama blog anda), kemudian pada kolom Blog URL/ RSS Feed anda isi http://nama-blog-anda.blogspot.com/atom.xml
    4.Tahap selanjutnya anda pilih situs jejaring sosial facebook.
    5.Selanjutnya anda disuruh menghubungkan ke account facebook anda, akan ada jendela aktifasi, setelah anda klik izinkan maka account facebook anda akan masuk didalam kotak Authenticated account facebook.
    6.Terakhir Anda klik Create Service, jika berhasil maka akan tampil “congrulation”.
    Dan hasil akhirnya, setiap anda posting tulisan terbaru di blog anda, secara otomatis akan terupdate di status facebook anda. Semoga postingan kali ini bermanfaat.

    Cara Mengganti Template Blogspot

    Cara Mengganti Template Blogspot - Cara mengubah/merubah template/thema blog di blogger/blogspot - Setelah kemarin update artikel untuk pemula berjudul cara mengganti favicon blog, di kesempatan ini saya akan update artikel untuk newbie juga berjudul cara mengganti template blogspot. Template memang bisa menjadi kebanggaan tersendiri bagi setiap blogger. Blogger yang suka fashion pasti akan suka menggonta-ganti templatenya dengan template-template terbaru dan pastinya penuh fashion juga. Blogger yang suka musik pasti akan memasang template dengan tema musik dan masih banyak lagi. Tapi kebanyakan blogger yang masih newbie banyak yang bingung jika mereka ingin mengganti template nya, padahal itu sangat mudah untuk dilakukan. Oke langsung saja, berikut ini cara mengubah template blog di blogspot, silahkan diikuti dengan cermat:

    1. Masuk ke dashbor blog sobat
    2. Klik menu Rancangan >> Perancang Template
    3. Pilih template yang sobat sukai
    4. Setelah itu biarkan previewnya selesai sehingga seolah-olah template sobat sudah berganti.
    5. Setelah sobat benar-benar yakin dengan template pilihan sobat, selanjutnya klik terapkan template ke blogger.
    6. Selesai.

    Tapi sobat, dengan langkah-langkah di atas, sobat hanya bisa mengganti template sobat dengan template default blogger. Lalu bagaimana jika ingin menggantinya dengan template selain dari blogger. Gampang! Silahkan ikuti langkah-langkah di bawah:

    1. Download aneka bentuk template yang sobat inginkan di berbagai situs penyedia template gratis, salah satunya di BTemplates. Silahkan klik disini untuk mengunjunginya.
    2. Setelah mendownload template nya (biasanya berupa zip file) silahkan extract file yang berkahiran extensi .xml terlebih dahulu di penyimpanan komputer sobat.
    3.  Setelah di extract, silahkan buka file nya dengan notepad kemudian blok kodenya dan copy.
    4. Masih di menu Rancangan. Silahkan klik tab Edit HTML
    5. Centang expand template widget lalu blok semua kode HTML nya.
    6. Klik Delete di keyboard komputer lalu pastekan kode template yang dicopy awal tadi di tempat tersebut.
    7. Klik Simpan Template.
    Catatan: Bila muncul peringatan ketidaksesuaian template lama dengan template baru sobat, silahkan klik saja Pertahankan Widget.
    8. Selesai

    Nah, bagaimana sobat? Mudah kan? Oke, saya kira cukup tutorial mengenai cara mengganti template blogspot kali ini. Semoga bermanfaat buat sobat semua.

    Cara Membuat Spoiler Di Blog

     Cara Membuat Spoiler Di Blog - Kali ini saya akan kasih trik lagi tentang tutorial blog, Yaitu cara membuat Spoiler di blog. Ada sedikit pencerahan untuk sobat, Jika mungkin sobat pernah berkunjung ke forum-forum online dunia cyber seperti kaskus atau yang lainya, pasti sobat sudah tidak asing lagi dengan yang namanya spoiler. Dan kali ini saya akan berbagi trik tentang bagaimana cara membuat spoiler di blog.


     Fungsi dari Spoiler itu sendiri adalah merupakan cara yang di gunakan untuk menyembunyikan suatu element sperti: link,  teks, gambar atau video. Prinsip dari Spoiler adalah sistimnya buka tutup atau show hide, karena jika spoiler dalam keadaan tertutup, lalu tombol spoiler di klik atau di tekan maka element yang di sembunyikan di dalam spoiler itu akan tampil atau terbuka, Begitu juga sebaliknya jika spoiler dalam keadaan terbuka lalu kemudian tombol spoiler di klik atau di tekan maka element yang ada di dalam Spoiler akan di sembunyikan atau tertutup.


    Cara Membuat Spoiler Di Blog


     Tujuan dari membuat Spoiler adalah untuk menghemat tempat, ruang atau space di dalam suatu postingan blog. Selain itu menggunaan spoiler juga bermanfaat untuk mengurangi beban loading halaman blog apabila spoiler di gunakan untuk menyembunyikan file foto, gambar atau video.

     Spoiler juga dapat di terapkan pada blog Blogger dan Wordpress. Caranya membuat atau memasangnya di blog sangatlah mudah, Karena Sobat hanya cukup dengan menambahkan Kode Script pada halaman atau page yang ingin di pasangi Spoiler.

    Cara membuat Spoiler untuk menyembunyikan teks atau tulisan di Blog

    Cara membuat spoiler di blog untuk menyembunyikan teks, Silahkan sobat Copy dan Paste atau tambahkan kode dibawah ini:

    <div style="margin: 5px;">
    <div class="smallfont" style="margin-bottom: 2px;">
    <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
    <div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 6px;">
    <div style="display: none;">Isi teks atau tulisan sobat di sini</div>
    </div>
    </div>

    Catatan:
    • Cara membuat Spoiler pada Homepage atau Halaman Blog, Silahkan sobat tambahkan kode diatas pada mode HTML/JavaScript.
    • Cara membuat Spoiler pada Posting Blog, Silahkan Sobat tambahkan kode diatas pada teks editor tampilan HTML post.
    • Ganti teks tulisan warna BIRU ( Isi teks atau tulisan sobat di sini ), dengan teks atau tulisan yang sobat inginkan.
    Contoh Spoiler untuk menyembunyikan teks atau tulisan. (Klik saja Sobat.!!!)
    Contoh Spoiler Untuk Menyembunyikan Teks atau Tulisan

    Cara membuat Spoiler untuk menyembunyikan Gambar atau Foto di Blog

    Cara membuat spoiler di blog untuk menyembunyikan Gambar atau Foto di Blog, Silahkan sobat Copy dan Paste atau tambahkan kode dibawah ini:

    <div style="margin: 5px;">
    <div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div>
    <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAFA;">
    <div style="display: none;"><img class="aligncenter" src="http://a5.sphotos.ak.fbcdn.net/hphotos-ak-ash4/378409_143736929067750_100002943326264_209514_2113713558_n.jp" alt="Hihihihi..." width="500" height="400" /></div>
    </div>
    </div>

    Contoh Spoiler untuk menyembunyikan Gambar atau Foto. (Klik saja Sobat.!!!) Jangan Kaget.
    Contoh: 
    hi.hi.hi.hi.hi...

    Catatan:
    • Cara membuat Spoiler pada Homepage atau Halaman Blog, Silahkan sobat tambahkan kode diatas pada mode HTML/JavaScript.
    • Cara membuat Spoiler pada Posting Blog, Silahkan Sobat tambahkan kode diatas pada teks editor tampilan HTML post.
    • Ganti teks tulisan warna PINK, dengan alamat URL Gambar atau Foto yang sobat inginkan.
      Cara membuat Spoiler untuk menyembunyikan Video di Blog

      Cara membuat spoiler untuk menyembunyikan Video di Blog, Silahkan sobat Copy dan Paste atau tambahkan kode dibawah ini:

      <div style="margin: 5px;">
      <div class="smallfont" style="margin-bottom: 2px;">
      <b>Contoh:</b>&nbsp;<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
      <div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 6px;">
      <div style="display: none;">

      <div class="separator" style="clear: both; text-align: center;">
      <object class="BLOG_video_class" contentid="209a1b1ea11d2563" height="226" id="BLOG_video-209a1b1ea11d2563" width="320"></object></div>

      </div>
      </div>

      Contoh: 


      Catatan:
      • Cara membuat Spoiler pada Homepage atau Halaman Blog, Silahkan sobat tambahkan kode diatas pada mode HTML/JavaScript.
      • Cara membuat Spoiler pada Posting Blog, Silahkan Sobat tambahkan kode diatas pada teks editor tampilan HTML post.
      • Ganti teks tulisan warna HIJAU, dengan Separator Object Video yang sobat inginkan.
       Demikian trik Tutorial Blog tentang Cara membuat Spoiler di Blog, Semoga bisa sangat bermanfaat untuk Sobat KUCOPAS semuanya.


      Share

      Twitter Delicious Facebook Digg Stumbleupon Favorites More