Rabu, 18 Januari 2012

10

Cara menampilkan widget hanya pada seluruh halaman post

Rabu, 18 Januari 2012 | 03.06 10 comments

Langkah ini saya update juga untuk anda yang ingin mengatur widget atau gadget yang hanya tampil pada seluruh halaman post saja. Berbeda dengan yang lalu, yang hanya tampil pada Home Page saja atau kita tentukan gadget tampil pada halaman post tertentu.

Jadi langkah ini dibuat agar gadget tidak tampil pada Home Page. Untuk penggunaannya tergantung kebutuhan anda, mungkin menampilkan gadget "artikel populer", "Iklan", "banner", atau yang lain... OK.

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Klik Tambah Gadget pada sidebar, pilih jenis gadget yang anda butuhkan lalu Simpan.

Sekarang anda dapat melihat gadget baru yang muncul pada bagian paling atas pada sidebar template anda.
Pada artikel ini misalnya saya menambahkan gadget HTML / Javascript untuk sidebar saya, silahkan anda lihat gambar dibawah :

4. Dan  sekarang KLik tab Edit HTML.

5. Tanpa " Expanding Widget Templates", Anda Cari kode - kode seperti gambar di bawah ini :
Catatan : Silahkan anda ingat ID widget yang paling atas. Pada gambar diatas, saya contohkan  ID Widget adalah "HTML 2"

6. Sekarang klik pada "Expand Template Widget" dan cari nama yang anda ingat pada langkah di atas. (Pada contoh saya ini adalah HTML2). Seperti anda lihat pada gambar berikut :

7.Copy kode berikut :
<b:if cond='data:blog.pageType == "item"'> dan </b:if>

Kemudian sisipkan ditempat yang sama seperti yang ditunjukkan pada gambar dibawah ini:
 

8. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free



Baca artikel lain :


 

Senin, 16 Januari 2012

9

Cara Tampilkan Widget Blogger Blog Post URL Tertentu Saja

Senin, 16 Januari 2012 | 02.41 9 comments

Penempatan dan dimana kita menampilkan widget atau gadget bisa kita atur sesuai selera. Berbeda dengan cara pada artikel "Cara Menampilkan Widget Hanya Pada Home Page saja", Cara ini buat anda yang ingin menampilkan widget atau gadget pada halaman post artikel yang anda inginkan saja.

Trik ini biasanya digunakan untuk menampilkan sebuah konten pada widget atau gadget yang masih behubungan dengan isi artikel. Sehingga perlu ditentukan pada halaman post artikel mana widget atau gadget ingin ditampilkan.

Silahkan anda lihat contoh gadget gambar disamping kiri, yang sama dengan gambar yang ada pada artikel ini.

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Klik Tambah Gadget pada sidebar, pilih jenis gadget yang anda butuhkan lalu Simpan.

Sekarang anda dapat melihat gadget baru yang muncul pada bagian paling atas pada sidebar template anda.
Pada artikel ini misalnya saya menambahkan gadget HTML / Javascript untuk sidebar saya, silahkan anda lihat gambar dibawah :

4. Dan  sekarang KLik tab Edit HTML.

5. Tanpa " Expanding Widget Templates", Anda Cari kode - kode seperti gambar di bawah ini :
Catatan : Silahkan anda ingat ID widget yang paling atas. Pada gambar diatas, saya contohkan  ID Widget adalah "HTML 2"

6. Sekarang klik pada "Expand Template Widget" dan cari nama yang anda ingat pada langkah di atas. (Pada contoh saya ini adalah HTML2). Seperti anda lihat pada gambar berikut :

7.Copy kode berikut :
<b:if cond='data:blog.url == "ULR ARTIKEL"'> dan </b:if>

Kemudian sisipkan ditempat yang sama seperti yang ditunjukkan pada gambar dibawah ini:

CATATAN: Jangan lupa untuk mengganti ULR ARTIKEL dengan url posting milik anda, dimana anda ingin menampilkan widget.

8. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free



Baca artikel lain :


 

Minggu, 15 Januari 2012

25

Cara Menampilkan Widget Hanya Pada Home Page saja

Minggu, 15 Januari 2012 | 03.48 25 comments

Bagaimana cara kita mengolah tampilan widget atau gadget pada blog?. Dari sekian banyak widget atau gadget yang kita tampilkan pada blog kita, tentu sebaiknya kita juga memikirkan soal kenyamanan pengunjung. Nah..., Salah satunya adalah menampilkan widget atau gadget hanya pada Home Page saja.

Mungkin cara ini bisa membuat para pengunjung lebih nyaman pada saat membaca artikel, misalnya gadget yang berisi iklan banner yang kadang tampilannya berkedip..., tentu itu sangat mengganggu konsentrasi pembaca artikel, ...iya kan?
(hehehe....kemarin blog ini juga ada banner berkedip-kedip....,)

OK..., sebagai konsekwensinya, silahkan anda lihat iklan banner hanya tampil pada "Home Page" blog ini saja, dan pada halaman post artikel iklan banner tersebut tidak tampak serta tidak akan mengganggu konsentrasi anda lagi....

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Klik Tambah Gadget pada sidebar, pilih jenis gadget yang anda butuhkan lalu Simpan.

Sekarang anda dapat melihat gadget baru yang muncul pada bagian paling atas pada sidebar template anda.
Pada artikel ini misalnya saya menambahkan gadget HTML / Javascript untuk sidebar saya, silahkan anda lihat gambar dibawah :

4. Dan  sekarang KLik tab Edit HTML.

5. Tanpa " Expanding Widget Templates", Anda Cari kode - kode seperti gambar di bawah ini :
Catatan : Silahkan anda ingat ID widget yang paling atas. Pada gambar diatas, saya contohkan  ID Widget adalah "HTML 2"

6. Sekarang klik pada "Expand Template Widget" dan cari nama yang anda ingat pada langkah di atas. (Pada contoh saya ini adalah HTML2). Seperti anda lihat pada gambar berikut :

7.Copy kode berikut :
<b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if>

Kemudian sisipkan ditempat yang sama seperti yang ditunjukkan pada gambar dibawah ini:

8. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free



Baca artikel lain :


 

Sabtu, 14 Januari 2012

0

Warna dan Kode Warna

Sabtu, 14 Januari 2012 | 05.14 No comments

Tampilan tabel kode warna ini sangat sederhana, akan tetapi pada tabel ini saya lengkapi dengan nama - nama dari masing warna tersebut. Berbeda dengan tabel kode warna yang sudah saya tampilkan di Blog ini. Bila anda belum lihat, silahkan anda lihat pada artikel berikut : "Cara buat tabel kode warna" dan "Cara membuat code color picker interaktif".

Nah..., Mengingat warna memang sangat berperan sekali pada web ataupun blog, terutama warna kita butuhkan pada saat kita membuat atau pengeditan web juga blog.
Maka tabel ini tetap saya update pada posting kali ini, disamping itu karena ada permintaan sobat blogger yang menginginkan tabel kode warna yang ada atau lengkap dengan nama - nama warnanya.

LIHAT DEMO

Bila anda berminat untuk memiliki, silahkan anda copy kodenya pada Text area dibawah ini :

Ok...., Selamat mencoba dan Semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan
anda gunakan tombol berlangganan artikel yang ada disebelah
kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free



Baca artikel lain :


 

Senin, 09 Januari 2012

10

Cara membuat Bar mengambang atau Floating Bar on Top pada blog

Senin, 09 Januari 2012 | 04.35 10 comments

Floating Bar sering kali kita jumpai ketika kita membuka blog atau merefressnya kembali. Floating Bar tersebut seperti pop up, biasanya berisi iklan teks, banner, ataupun rekomendasi tertentu. Hal ini pemilik blog berharap, pengunjung langsung melihat Floating Bar tersebut dan tertarik untuk melihat.
Fitur ini sangat menarik dan memang diperlukan bila blog anda memang fokus atau sekedar tambahan untuk cari uang. Selain itu Floating Bar berguna juga bila anda ingin merekomendasikan atau mengabarkan suatu acara yang anda adakan.

 Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :
</head>

5. Copy kode di bawah ini dan taruh tepat sebelum kode </head> :

6. Cari kode di bawah ini atau yang mirip dengan kode ini :
</body>

7. Copy kode di bawah ini dan taruh tepat sebelum kode </body> :
<div id="topbar">
<a href="#" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0-rmQue6f48QQ_T2YCa2r8M22Jq6ksC4eTrlAyGfNyBMZqTy9AbXs32pRboMsHd94Kn36Uf2h6NjzN43FMVxmt_iZi9NsgiIl2gCi5N7yf38odWM67JqFvlUcaT2iEL7GkMmoodGj89Q9/h80/close.png" align="right" border="0" />
<a href="YOUR LINK" onclick="closebar(); return true">DISINI TEKS ATAU SCRIPT IKLAN MILIK ANDA
</div>
Catatan :
Silahkan anda ganti teks berwarna merah dengan Teks, Script iklan atau banner milik anda.


8. Simpan Template.

Selamat mencoba dan Semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free



Baca artikel lain :


 

Minggu, 08 Januari 2012

6

Cara menambahkan pengatur ukuran teks pada blog

Minggu, 08 Januari 2012 | 03.20 6 comments

Menambahkan pengatur ukuran teks atau Resizer Text, memiliki kegunaan tersendiri bagi pengunjung yang merasa ukuran teks pada blog kita kurang jelas atau terlalu kecil. Dengan cara ini kita memberi kebebasan pada pengunjung untuk merubah ukuran teks sesuai dengan selera pembaca. Sehingga pengunjung betul - betul merasa nyaman membaca artikel atau posting yang kita suguhkan.

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :
]]></b:skin>

5. Copy kode di bawah ini dan taruh tepat sebelum kode ]]></b:skin> :
.textresize {
padding-left:20px;
padding-top:5px;
}


6. Kemudian Copy kode di bawah ini dan taruh diantara ]]></b:skin> dan tag </head> :
<script language='JavaScript' type='text/javascript'>
function changeFontSize(inc)
{
var p = document.getElementsByTagName(&#39;p&#39;);
for(n=0; n&lt;p.length; n++) {
if(p[n].style.fontSize) {
var size = parseInt(p[n].style.fontSize.replace(&quot;px&quot;, &quot;&quot;));
} else {
var size = 12;
}
p[n].style.fontSize = size+inc + &#39;px&#39;;
}
}
</script>

7. Bila anda ingin fitur ini diletakkan diarea posting, Cari kode di bawah ini atau yang mirip dengan kode ini :
<div class='post-header-line-1'/>

8. Tambahkan kode dibawah ini setelah baris di atas.:
<span class='textresize'>
Text Size :<a href='javascript:changeFontSize(1)'> [+]</a> | <a href='javascript:changeFontSize(-1)'> [-]</a>
</span>

9. Simpan Template.

Tapi bila anda ingin meletakkannya pada sidebar, Silahkan anda ikuti langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman


2. Tambah Gadget

 3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







4. Copy dan paste kode dibawah ini pada gadget tersebut :
<span class='textresize'>
Text Size :<a href='javascript:changeFontSize(1)'> [+]</a> | <a href='javascript:changeFontSize(-1)'> [-]</a>
</span>
5. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini. 

Ping your blog, website, or RSS feed for Free



Baca artikel lain :


 

Senin, 02 Januari 2012

25

Cara membuat background random image pada header

Senin, 02 Januari 2012 | 10.17 25 comments

Pada tutorial ini saya akan memberikan langkah-langkah cara membuat background gambar pada header yang tampil secara acak bergantian. Dan cara kerjanya yaitu background header mengalami perubahan background ketika halaman setiap kali kita refresh.

Dengan menambahkan fitur random image pada background header ini, seakan mengganti suasana tampilan blog kita..., Hebat kan?
Munculnya perubahan background tergantung jumlah gambar background header yang kita buat. Dan dibawah ini saya contohkan dengan 5 tampilan background gambar yang berbeda.

Silahkan anda lihat bentuk dan tampilan background random image pada header ini : LIHAT DEMO

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.


4. Cari kode di bawah ini atau yang mirip dengan kode ini :
<body>

5. Copy kode di bawah ini dan taruh tepat setelah kode <body> :
<script type='text/javascript'>

var HeaderImage= new Array()

HeaderImage[0]=&quot;URL GAMBAR UKURAN HEADER-1&quot;
HeaderImage[1]=&quot;URL GAMBAR UKURAN HEADER-2&quot;
HeaderImage[2]=&quot;URL GAMBAR UKURAN HEADER-3&quot;
HeaderImage[3]=&quot;URL GAMBAR UKURAN HEADER-4&quot;
HeaderImage[4]=&quot;URL GAMBAR UKURAN HEADER-5&quot;
var random=Math.round(4*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>
CATATAN:
Ganti "URL GAMBAR UKURAN HEADER" dengan URL gambar MILIK Anda.

Jika kode di atas tidak bekerja pada blog Anda, silahkan ganti "# header-wrapper" dengan "# header". (ID atau CSS pada bagian header).

Anda dapat menambahkan gambar yang berbeda untuk latar belakang header pada blog anda. Tapi ingat untuk memberi 5 gambar background,   pada bagian "var random" tertulis
"var random=Math.round(4*Math.random());"

Jadi bila anda ingin menambahkan menjadi 8 tampilan background yang berbeda, maka kode harus berubah menjadi seperti berikut :
"var random=Math.round(7*Math.random());".

Silahkan perhatikan cara penulisan di bawah ini.:
 <script type='text/javascript'>
var HeaderImage = new Array ()

HeaderImage [0] = "URL-OF-HEADER-CITRA-1"
HeaderImage [1] = "URL-OF-HEADER-CITRA-2"
HeaderImage [2] = "URL-OF-HEADER-CITRA-3"
HeaderImage [3] = "URL-OF-HEADER-CITRA-4"
HeaderImage [4] = "URL-OF-HEADER-CITRA-5"
HeaderImage [4] =" URL-OF-HEADER-CITRA-6"
HeaderImage [4] =" URL-OF-HEADER-CITRA-7"
HeaderImage [4] =" URL-OF-HEADER-CITRA-8"

var random = Math.round (7 * Math.random ());
document.write (" <style> ");
document.write (" # header-wrapper {");
document.write ('background: url ("' + HeaderImage [acak] + '") tidak mengulangi-kiri TOP;');
document.write ("}") ;
document.write ("</ style>");
</ script>

5. Simpan Template.

Nah untuk mencoba silahkan anda refresh halaman blog anda. maka tampilan background akan berganti.

Atau akan LIHAT DEMO lagi.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free



Baca artikel lain :


 

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI

Artikel Terbaru

POST POPULER

Entri Populer


HEADLINE

DAFTAR ISI

DAFTAR ISI


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.

CEO BLOG MAS NOER

Noer cholis

Plosokuning V, Minomartani, Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK




Baca artikel "Manfaat Tukar Link"











Baca artikel "Manfaat Tukar Link"

LINK SAHABAT

LINK SAHABAT


CHAT

CHAT




TESTIMONI

Follow Us

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Recent Comments


top down