Rabu, 06 Juni 2012

42

Slide down random post

Rabu, 06 Juni 2012 | 22.19 42 comments

Satu lagi pengembangan fitur slide show terbaru dari saya. Fitur ini saya beri nama "Slide down random post", sebab fitur ini saya adopsi dan saya kembangkan dari aplikasi recent post yang tampil secara random.

Secara tampilan memang sederhana, tapi Slide down random post ini menurut saya tetap tampil menarik. Dan yang terpenting Slide down random post ini sangat praktis dan efisien.
Jadi sekali pasang, fitur ini tetap menampilkan gambar-gambar dari setiap posting terbaru anda. Dengan catatan, setiap posting anda harus memberi gambar yang nantinya muncul di Slide down random post ini.

Secara ideal untuk Slide down random post ini, dianjurkan gambar yang anda gunakan pada setiap posting berukuran " 600px X 300px " atau  skala " 6 : 3 ". Hal ini dimaksudkan agar gambar tampil sesuai dengan aslinya.

Trik ini termotifasi oleh sobat-sobat saya masih merasa kesulitan ketika edit HTML dan masalah itu juga pernah saya alami dulu. Ketika kita sangat menginginkan slide show dipasang di blog yang kita memiliki, kitapun harus lama-lama bergelut dengn kode-kode yang terkadang hasilnya tidak sesuai dengan yang kita inginkan atau bahkan terkadang malah rusak dan tidak bekerja.

Nah..., akhirnya sekarang andapun bisa memanfaatkan  Slide down random post ini. Dan anda tidak harus ribet lagi dengan edit ini dan itu.... Anda hanya tinggal memasukkan ULR blog anda, maka sudah siap langsung dipasang pada gadget blog anda.


OK..., bila anda berminat, Langsung saja silahkan anda copy kode dibawah ini, dan anda masukkan pada gadget anda.

Catatan:
  • Ganti teks "DISINI URL BLOG ANDA", dengan URL blog anda.
  • Fitur ini menggunakan jquery 1.3.2, yang bentuknya seperti berikut:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Biasanya bila template anda sudah ada atau sudah menggunakan script tersebut, maka kemungkinan besar Slide down random post ini tidak bekerja.
Bila terjadi masalah tersebut, ada solusi lain yang mungkin bisa anda gunakan, yaitu gunakan satu saja jquery 1.3.2 tersebut dan letakkan didalam atau diantara tag head.

OK... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

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 :


 

Selasa, 10 April 2012

36

Slice Random Recent Post

Selasa, 10 April 2012 | 05.58 36 comments

Dilihat sekilas memang recent post ini tampak seperti biasa, dan hanya tampil judul artikel saja. Tapi sebenarnya recent post ini memiliki tampilan yang lebih, yaitu effek slice atau sebuah lapisan yang berisi gambar dan snippet artikel yang muncul kebawah ketika pointer mouse kita arahkan diatas salah satu judul.
Modifikasi recent post ini saya beri nama Slice Random Recent Post.... Ya.. mudah - mudahan sobat blogger berkenan dengan nama yang saya berikan...hehehe..

LIHAT DEMONYA DISINI

OK langsung saja.... bila anda berminat, anda bisa 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 CSS di bawah ini dan taruh tepat sebelum kode </head> :

6. SIMPAN TEMPLATE.


Langkah Selanjutnya :
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 :
Catatan : Pada kode diatas terdapat teks "ULR BLOG ANDA", Silahkan anda ganti dengan ULR blog anda.

5. SIMPAN.

OK... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

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, 05 Maret 2012

30

Cara buat tab menu atau multi tab

Senin, 05 Maret 2012 | 05.26 30 comments

Tab Menu atau Multi Tab ini memiliki bentuk dan warna tampilan yang sama persis dengan Tab Menu atau multi tab yang ada di blog ini. Walau demikian saya akan coba jelaskan lebih detail, dari menambah jumlah menu tab, mengganti warna menu tab baik pada saat aktif ataupun ketika hover, sehingga anda dapat menyesuaikan sendiri dengan tampilan blog anda.

Tutorial ini saya update atas permintaan salah satu sobat blogger yang menginginkan Tab Menu atau  multi tab yang sama dengan yang ada di blog ini. Dan untuk anda yang juga menginginkan Tab Menu atau multi tab ini, anda bisa ikuti langkah - langkah dibawah ini :

Seperti biasa ....
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 javascript di bawah ini dan taruh tepat sebelum kode </head> :

6. Kemudian Copy juga kode CSS di bawah ini dan taruh tepat setelah kode javascript diatas, atau sebelum kode </head> :

7. Pada langkah ini saya contohkan tab menu diletakkan pada bagian sidebar. Silahkan anda cari pada bagian sidebar, pada blog ini kodenya seperti berikut :
<div id='rsidebar-wrapper'>
Catatan :
  • Setiap template memiliki kode yang berbeda (biasanya mirip-mirip)
  • Anda juga bisa meletakkan pada bagian tengah atau bagian "main-wrapper"
8. Letakkan kode HTML dibawah ini setelah kode diatas (dibagian Sidebar) :
<div class='tabber'>

<div class='tabbertab' id='tab1'>
<h2>TAB MENU 1</h2>
<b:section class='sidebar101' id='sidebar101' preferred='yes'>
<b:widget id='HTML101' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div class='clear'/>

<div class='tabbertab' id='tab2'>
<h2>TAB MENU 2</h2>
<b:section class='sidebar102' id='sidebar102' preferred='yes'>
<b:widget id='HTML102' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div class='clear'/>

<div class='tabbertab' id='tab3'>
<h2>TAB MENU 3</h2>
<b:section class='sidebar103' id='sidebar103' preferred='yes'>
<b:widget id='HTML103' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div class='clear'/>

</div>
<div style='clear:both;'/>
Catatan :
  • Teks warna biru adalah Judul tab menu.
  • Untuk membuat judul tab menu, saran saya gunakan kata yg singkat, disesuaikan dgn lebar sidebar blog anda.
  • Warna Hijau, Coklat, dan ping pada kode diatas adalah bagian setiap tab menu.
9. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal mengisi tab menu dengan gadget yang anda suka. Langsung saja anda menuju "ELEMEN LAMAN", dan berikut tampilan gambar tab menu atau multi tab pada elemen laman yang baru saja anda buat  :
 

Bila anda ingin mengganti warna tampilan agar sesuai dengan blog anda, berikut bagian - bagian tab menu pada kode CSS (kode pada langkah ke 6) yang perlu di ganti :
<style type='text/css'>


.tabberlive{
margin-left:0px;
margin-right:0px;
padding-left:5px;
padding-right:5px;
padding-top:6px;
padding-bottom:5px;
clear:both;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC1Dq7Eh03lMWHJ9_9QakLZalDJ8NGYq4nswX1CKRdwmyMjC3oYVMHd0Gga3Cz22rHZTMROCq0B43oOOElCL1UBmrP-E6LpEvVSJ8hpt0mocvh1JOkzyG9G0nDYV-Yp314x4l_OQlyPbE/h1600/bg_post.jpg) top left repeat-x;
border:1px solid #DDD;
} 
<---------------------------------------------------------->
Warna biru adalah background tab menu menggunakan background gambar, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #eee;
<---------------------------------------------------------->

.tabbernav {
list-style:none;
list-style-type:none;
margin-left:0;
padding-left:0px;
padding-top:7px;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}




.tabbernav li {
list-style:none;
list-style-type:none;
width:20%;
margin-right:1px;
margin-bottom:0px;
display:inline;
}




.tabbernav li a {
padding-top:7px;
padding-bottom:7px;
padding-left:6px;
padding-right:6px;
list-style:none;
list-style-type:none;
margin-right:1px;
background:#3e5fa2;
text-decoration:none;
color:#ffffff;
outline:none;
} 
<----------------------------------------------------------> 
Warna biru adalah background Judul tab menu (#3e5fa2 / biru tua), dan warna hijau adalah warna teks Judul tab menu (#ffffff/ putih). Silahkan anda lihat tab menu yang ada di blog ini.
<---------------------------------------------------------->



.tabbernav li a:hover {
list-style:none;
list-style-type:none;
color:#000;
background:#7290ce url() center left no-repeat;
text-decoration:none;
outline:none;
} 
<---------------------------------------------------------->  
Warna biru adalah warna background Judul tab menu (#7290ce / biru muda) ketika hover, dan warna hijau adalah warna teks Judul tab menu (#000/hitam)ketika hover. Silahkan anda lihat dan coba arahkan mouse anda pada tiap-tiap judul tab menu yang ada di blog ini.
<---------------------------------------------------------->



.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
list-style:none;
list-style-type:none;
background:#fff;
color:#3e5fa2;
outline:none;
padding-bottom:22px;
padding-left:6px;
padding-right:6px;
border-right:2px solid #ddd;
border-left:2px solid #ddd;
border-top:1px solid #ddd;
} 
<---------------------------------------------------------->  
Warna biru adalah warna background Judul tab menu (#fff/putih) ketika aktif, dan warna hijau adalah warna teks Judul tab menu (#3e5fa2/biru tua)ketika aktif. Silahkan anda lihat dan coba Klik pada tiap-tiap judul tab menu yang ada di blog ini.
<---------------------------------------------------------->



.tabberlive .tabbertab {
margin-top:0px;
margin-left:0px;
margin-right:0px;
padding-top:5px;
padding-left:6px;
padding-right:6px;
padding-bottom:5px;
background:#fff;
border:2px solid #ddd;
}
 <---------------------------------------------------------->  
Warna biru adalah warna background konten tab menu (#fff/putih) ketika aktif, dan warna hijau adalah warna border konten tab menu (#ddd/abu-abu).
<---------------------------------------------------------->



.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}




.tabbertab .widget-content ul{
margin-top:5px;
margin-left:5px;
padding:0px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC1Dq7Eh03lMWHJ9_9QakLZalDJ8NGYq4nswX1CKRdwmyMjC3oYVMHd0Gga3Cz22rHZTMROCq0B43oOOElCL1UBmrP-E6LpEvVSJ8hpt0mocvh1JOkzyG9G0nDYV-Yp314x4l_OQlyPbE/h1600/bg_post.jpg) top left repeat-x;
} 
<----------------------------------------------------------> 
Warna biru adalah background pada widget yang menggunakan tag "ul", contohnya bisa anda lihat pada tab menu "Arsip" yg ada di blog ini. Background "ul" tab ini menggunakan gambar gradasi abu-abu putih, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #eee;
<---------------------------------------------------------->



.tabbertab .widget-content ul a:hover{
text-decoration:none;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvV7ROL_tE3LkxeAsaiKuaP5NIgHGyyUAMr-2lBmLkG4pqZHf5Bdy3ZMISG_LycBBW3njoZctp0CF6xSRGcBol7mWoSPR9gcgRRUjMCFexGTOdzakdncuN_kUfop_plyOFAvv4oN_sUWQ/h1600/bg_menu.jpg)top repeat-x;
}
 <---------------------------------------------------------->  
Warna biru adalah background pada widget yang menggunakan tag "ul" ketika hover.  Background "ul" hover tab ini menggunakan gambar gradasi abu-abu putih terang, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #fff;
<---------------------------------------------------------->



.tabbertab .widget-content li {
color:#488040;
border-bottom:1px solid #ddd;
margin:0 5px;
padding:5px;
}



</style>

Nah.... selesai, mudah - mudahan penjelasan diatas membantu.

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 :


 

Kamis, 02 Februari 2012

26

Cara membagi gadget menjadi dua kolom

Kamis, 02 Februari 2012 | 09.16 26 comments

Ada kalanya ketika kita sudah merasa pas dengan template yang kita pilih, ternyata kita masih saja merasa ada yang masih kurang dengan tampilan blog kita.
Tapi memang betul...., setiap template memiliki kelebihan dan kekurangannya masing - masing. Mungkin dari segi konten sudah bagus tapi tampilan warna  kurang pas, dari segi tampilan dan konten sudah serasi tapi karena sudah padat, mungkin kita masih butuh ruang lagi. Lalu bagai mana....?

OK..., seperti yang dirasakan  oleh salah satu sobat blogger dan atas permintaannya mungkin trik membagi gadget sidebar menjadi dua kolom akan membantu mengurangi masalah diatas. Untuk itu kali ini akan saya jelaskan lagi cara membagi gadget sidebar menjadi dua kolom, seperti pada gambar berikut :

Tapi yang jelas trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian Sidebar (bagian samping), header (atas), maupun footer (bawah).

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> :
#kolom-kiri {
width: 49%;
float: left;
}
#kolom-kanan {
width: 49%;
float: right;
}

6. Cari kode pada bagian sidebar, misalnya seperti kode berikut :
<div id='sidebar-wrapper'>

  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
  </b:section>

  </div>
Catatan:
Pada bagian sidebar, setiap template belum tentu memiliki "id" yang sama. Dan pada langkah ini, saya berikan contoh dengan id='sidebar-wrapper'.

Tapi yang jelas... seperti yang saya katakan diatas, trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian Sidebar (bagian samping), header (atas), maupun footer (bawah).

Dan yang perlu diperhatikan adalah bentuk kode dari konten yang berisi gadget, yaitu seperti berikut :
<div id=' .......... '>

  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML' locked='false' title='' type='HTML'/>
  </b:section>

  </div>

7. Sisipkan kode dibawah ini diantara </b:section> dan </div>  :
<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
<b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
</b:section>

<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
</b:section>

<div style="clear: both;"></div>

Sehingga tampak seperti berikut :
<div id='sidebar-wrapper'>

  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
  </b:section>


<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
<b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
</b:section>

<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
</b:section>

<div style="clear: both;"></div>

  </div>

8. SIMPAN TEMPLATE

Selesai...., silahkan anda lihat hasilnya....
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 :


 

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 :


 

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI

Artikel Terbaru

POST POPULER

Entri Populer


HEADLINE

KATEGORI

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