Search JavaScript Kit:

This free script provided by
JavaScript Kit

Cara Termudah Memasang Newsticker Tanpa Edit HTML di Blog

Sering menonton Televisi ( TV ) ? sudah tentu akan menemukan berita yang merupakan informasi terkini yang disampaikan melalui Running Text atau Text Berjalan yang letaknya bisa diatas ataupun dibawah layar terutama pada TV berita swasta nasional yang sudah kesohor seperti TV One, Metro TV bahkan sekarang hampir semua station TV menggunakan fitur ini. Nah tampilan tersebut ternyata menginspirasi para Blogger untuk menyajikan Intisari beritanya ataupun Post terkini ataupun Popular Post dll dengan cara mengadopsi fitur tersebut karena selain cukup effektif fungsinya,  juga untuk mempercantik tampilan Blog itu sendiri.



Adapun untuk penempatanyapun sangat fleksibel, bisa ditempatkan di atas Blog, disamping bahkan di bawah Blog sesuai selera. Dan yang menjadi kelebihan Widget ini adalah bisa langsung dipasang tanpa harus EDIT HTML ditanam dalam blog dan cukup tambah Gadget tersebut dan kemudian atur posisi penempatanya.

Baik, kita langsung saja ke langkah-langkahnya sebagi berikut :

Langkah - 1

Kode HTML :



<!-- Awal Simple Newsticker -->
<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="1">');
var i;
for (i = 1; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title + "</a> | ";
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
var pList = "</a>" + "<a href="+ href + '">' + pTitle;
document.write(pList);
document.write(pComment);
document.write('</a></li>');
}
document.write('</marquee>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://BLOG SOBAT
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json"
type="text/javascript"></script>
<!-- Akhir Simple Newsticker -->


Keterangan Kode :
  • BLOG SOBAT : Di ganti dengan URL Blog sobat

Langkah - 2
  1. Login ke akun Blogger sobat
  2. Pilih Elemen Rancangan
  3. Pilih Tata Letak
  4. Pilih Add Gadget
  5. Copy kode HTML di atas 
  6. Atur Posisi dari Gadget tersebut ( diatas atau dibawah )
  7. Save/ Simpan Gadget
  8. Lihat hasilnya
  9. Selesai


Demikianlah Cara termudah memasang newsticker tanpa edit HTML di Blog saya sajikan, semoga menjadi manfaat.



.: h72 :.

Cara Praktis Memasang Hadits Shahih Online di Blog

Begitu banyak fasilitas online yang bisa dinikmati dan diakses oleh semua kalangan yang disesuaikan dengan kebutuhan masing-masing baik individu maupun komunitas seperti desain, tekno, elektro, lingua dan lain-lainyang diyuangkan dalam suatu media online dalam bentuk Widget yang bisa dipasang di Website/ Blog atau sejenisnya. Dan tidak sedikit  juga widget Islami yang bisa dipasang di Blog dan bisa dinikmati oleh semua orang wabil Khusus buat Muslim seperti yang sudah saya sajikan tutorial singkat tentang memasang Al-Qur'an online di Blog. Nah kali ini saya akan menyajikan Cara Praktis Memasang Hadits Shahih Online di Blog. Adapun fitur-fitur yang terdpat pada hadits online adalah : Hadits Shahih Bukhari, Hadits Shahih Muslim, Hadits Sunan Nasai, Hadits Sunan Abu Daud dll.
Sumber dari Hadits Online ini adalah http://id.lidwa.com .

Adapun cara memasangnyapun tidak jauh berbeda dengan cara memasang Al-Qur'an online yang sudah saya sajikan beberapa waktu yang lalu, yakni :

Kode HTML :


<iframe style="overflow: auto; background-attachment: scroll; background-repeat: no-repeat; background-position: left top; text-align: left; border: 1px solid #cccccc; border-radius: 8px 8px 8px 8px; padding: 10px; width: 850px; height: 900px;" src="http://id.lidwa.com/app/" frameborder="0" > </iframe>

Keterangan kode :

  • Nilai width dan height bisa diganti disesuaikan dengan nilai yang dikehendaki


1. Login ke blogger
2. Masuk ke Elemen Rancangan
3. Pilih Entry Baru >> Beri judul
4. Ganti ke Mode HTML
5. Copy kode HTML di atas
6. Kembali ke Mode Compose ( Pada mode ini pun sudah bisa dilihat hasilnya )
7. Publikasikan
8. Lihat hasilnya, dan akan seperti dibawah ini :





Demikianlah semoga tutorial di atas bermanfaat bagi kita semua untuk menambah wawasan keislaman kita.

.: h72 :.

Cara mencari Script di Edit HTML Terbaru Blogspot

Setiap saat Blogspot selalu melakukan perubahan fitur-fitur pada tampilan Blogspot nya, terlebih untuk tampilan Frame ( Bingkai ) EDIT HTML yang sebelumnya ada fitur " EXPAND TEMPLATE WIDGET" sementara yang baru tidak ada dan langsung tampil semua widgetnya. Tapi semua itu semata-mata untuk mempermudah Blogger untuk melakukan proses pengeditan. Adapun tampilan terbaru untuk proses EDIT HTML  seperti :















Untuk pencarian scriptnyapun berbeda dengan fitur lama, pada fitur lama form pencariannya  letaknya terdapat diatas kanan dari layar seperti dan untuk shortcutnya tetap menggunakan Ctrl-F:


caranyapun ada sedikit perbedaan, pada saat ditemukan script yang dicari, untuk fitur lama jika diketemukan maka akan ditampilkan berapa banyak kata yang ditemukan, dan kita tinggal sorot tanda panah kebawah dan keatas untuk mencari yang sesuai, sementara untuk fitur baru letaknya terdapat di dalam kanan atas dari bingkai Edit HTML tersebut


pertama-tama harus tempatkan dulu kursor di dalam area edit HTML kemudian tekan Ctrl-F lalu tekan Enter. Jika menekan Ctrl-F tersebut di luar area edit html tersebut maka pencarian hanya berlaku untuk kata-kata yang nampak pada layar saja.

Adapun fungsi-fungsi dari tombol fitur baru tersebut yaitu :
  1. Kembali : Untuk kembali ke Elemen Rancangan
  2. Simpan Template : Untuk menyimpan hasil perubahan template
  3. Lompat ke Widget : Untuk memilih script yang terdapat pada tubuh Blog
  4. Edit Template : Untuk memulai proses pengeditan
  5. Pratinjau : Melihat hasilnya sebelum di simpan untuk memastikan hasil editan kita berjalan atau tidak atau dalam arti lain Galat atau Tidak
  6. Kembalikan Perubahan : Mengembalikan hasil editan kita jika ditemukan ada masalah atau tidak berjalan sesuai yang diharapkan
  7. Kembalikan ke Template Default : Mengembalikan template kembali ke semula sebelum di ganti template
  8. Format Template : Melihat tata letak penyusunan script
Sementara untuk Menu Lompat ke Widget memiliki beberapa sub menu diantaranya seperti gambar dibawah ini :

Demikianlah Tips Cara mencari script di edit HTML Blogspot terbaru yang bisa saya sajikan, semoga bermanfaat.

.: h72 :.




Cara Paling Gampang Membuat Text Area 3 Dimensi

Bermacam-macam bentuk dan jenis textarea untuk keperluan menampilkan Script, Text, Image dan lain-lain sangat digemari oleh kalangan Blogger baik yang newbie maupun yang sudah master, karena selain dengan tujuan untuk membedakan, menandai, menyingkat bahkan untuk mempercantik tampilan Blog itu sendiri.Bisa sobat lihat Cara mudah membuat Textarea yang lebih umum digunakan pada postingan yang lalu DI SINI
Tampilan textarea yang bervarias tidak lepas dari minat dari Blogger itu sendiri seperti ada yang polos tanpa scrollbar, ada yang pakai scrollbar dan pakai background, ada yang pakai "select all" dan ada juga yang terbuka tapi terkesan 3 Dimensi ( 3D ) seperti :
Nah kali ini saya akan memberikan tutor cara membuat textarea terkesan 3D, baik langsung saja ke langkah-langkahnya :

Langkah pertama :

1. Login ke Akun Blogger sobat
2. Pilih EDIT HTML dan jangan lupa centang Expand Template Widget "
3. Cari kode <head> kemudian copy kode dibawah ini dan pastekan tepat dibawah kode <head>
    Untuk mempercepat pencarian gunakan shortcut Ctrl - F

<style type='text/css'>
#tigadimensi{
background: #E8E8E8;
margin: 15px;
font-family:arial;
font-size:13px;
text-align:justify;
padding: 10px 15px 10px 15px;
border-top: 1px solid #DDDDDD;
border-right: 1px solid #666666;
border-left: 1px solid #DDDDDD;
border-bottom: 1px solid #666666;
}
#post 
tigadimensi{
margin:.75em 0;
}
</style>

4.Simpan Template ( Rekomendasi : pilih Pratinjau dulu untuk melihat galat tidaknya )

Langkah kedua :

5. Menuju Dashboard >> Pilih Entri Baru ( Atau Add Gadget untuk Elemen Baru )
6. Pilih Mode HTML
7. Copy kode berikut ini :

<div id='tigadimensi'>Text Anda Disini
</div>


8. Kembali ke Mode Compose untuk Lihat hasilnya
9. Save/ Simpan dan lihat hasilnya.

Demikian, tutorial cara membuat texarea 3D ini yang amat singkat ini semoga bermanfaat.


.: h72 :.