Deafile Bedah Blog: Widget Blog

Tampilkan postingan dengan label Widget Blog. Tampilkan semua postingan

Di era Kecerdasan buatan/AI ini, kita hanya perlu niat belajar dan kesungguhan untuk bisa melakukan sesuatu. Karena AI mampu membimbing kita untuk mewujudkan apa yang kita mau walaupun awalnya kita tidak tahu apa yang harus diperbuat. Cukup tanyakan hal tersebut pada AI, maka AI akan memberikan tutorial langkah-langkah yang harus diperbuat untuk mencapai apa yang kita inginkan. Dalam hal ini saya membuat Widget Daftar Artikel Blog Dengan Bantuan AI ChatGPT. Walaupun saya tidak terlalu paham bahasa coding, dengan bantuan AI saya bisa membuat widget Daftar Artikel Blog yang keren dengan navigasi yang intuitif, ringan, dan elegan.

Perintah pertama yang saya berikan kepada Neng AI ChatGPT kurang lebih seperti ini.

Kemudian Neng AI ChatGPT memberikan kode widgetnya lengkap dengan langkah cara penerapan kode nya seperti apa. Jadi buat kamu yang pemula, tidak ada alasan untuk tidak bisa melakukannya.

Dan inilah tampilan awal widget Daftar Artikel Blog, hasil dari perintah yang saya berikan kepada Neng AI ChatGPT.

Sederhana sekali dan masih jauh dari apa yang saya harapkan. Lalu saya menjelaskan apa yang saya inginkan secara bertahap, mulai dari struktur widget, warna, hingga interaksi tombol. Setiap kali saya kurang puas, saya memberi tahu perubahan yang diinginkan dan AI pun langsung menyesuaikan kodenya. Hasilnya? Widget yang tampil profesional dan dinamis, seperti yang saya bayangkan!

Widget ini menggunakan data dari RSS Feed Blogger (format JSON) untuk menampilkan 5 artikel terbaru. Pengunjung bisa melihat artikel lainnya dengan tombol navigasi, dan kembali ke artikel terbaru dengan satu klik. Setiap judul artikel ditampilkan dalam kotak bergaris tipis dengan warna khas blog saya, serta menampilkan jumlah komentar secara real-time. Kamu tertarik mencobanya? Berikut adalah hasil akhir kode widget yang saya buat dengan bantuan AI ChatGPT.

<!-- Widget Daftar Artikel Deafile Bedah Blog -->
<div class="widget-title-artikel">
  <h3>Daftar Artikel</h3>
  <ul id="judul-artikel-terbaru"></ul>
  <div class="artikel-nav">
    <button id="btn-prev">Sebelumnya</button>
    <button id="btn-beranda">Beranda</button>    
    <button id="btn-next">Selanjutnya</button>
  </div>
</div>

<script>
  let page = 0;
  const maxResults = 5;
  const container = document.getElementById("judul-artikel-terbaru");
  const nextBtn = document.getElementById("btn-next");
  const prevBtn = document.getElementById("btn-prev");
  const homeBtn = document.getElementById("btn-beranda");

  function updateButtons(totalEntries) {
    const isFirstPage = page === 0;
    const isLastPage = (page + 1) * maxResults >= totalEntries;

    prevBtn.style.display = isFirstPage ? "none" : "inline-block";
    homeBtn.style.display = isFirstPage ? "none" : "inline-block";
    nextBtn.style.display = isLastPage ? "none" : "inline-block";
  }

  function loadArticles() {
    const startIndex = page * maxResults + 1;
    const url = `https://deafile.blogspot.com/feeds/posts/default?alt=json&start-index=${startIndex}&max-results=${maxResults}&orderby=published`;

    fetch(url)
      .then(res => res.json())
      .then(data => {
        const entries = data.feed.entry;
        const totalEntries = parseInt(data.feed.openSearch$totalResults.$t);

        if (!entries || entries.length === 0) {
          container.innerHTML = "<li>Tidak ada artikel.</li>";
          return;
        }

        container.innerHTML = "";
        entries.forEach(entry => {
          const title = entry.title.$t;
          const link = entry.link.find(l => l.rel === "alternate").href;
          const commentCount = entry.thr$total ? parseInt(entry.thr$total.$t) : 0;

          const li = document.createElement("li");
          li.innerHTML = `
            <a href="${link}" target="_blank">${title}</a>
            <span class="komentar-count">${commentCount} Komentar</span>
          `;
          container.appendChild(li);
        });

        updateButtons(totalEntries);
      })
      .catch(err => {
        console.error("Gagal memuat artikel:", err);
        container.innerHTML = "<li>Gagal memuat artikel.</li>";
      });
  }

  nextBtn.addEventListener("click", () => {
    page++;
    loadArticles();
  });

  prevBtn.addEventListener("click", () => {
    if (page > 0) {
      page--;
      loadArticles();
    }
  });

  homeBtn.addEventListener("click", () => {
    page = 0;
    loadArticles();
  });

  loadArticles();
</script>

<style>
  .widget-title-artikel {
    padding: 6px;
    border: 1px solid #ccc;
    background: #fff;
    border-left: 4px solid #008C5F;
    border-radius: 6px;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 12px;
  }

  .widget-title-artikel h3 {
    font-size: 14px;
    color: #008C5F;
    margin-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 3px;
  }

  .widget-title-artikel ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .widget-title-artikel li {
    margin-bottom: 4px;
  }

  .widget-title-artikel li a {
    display: block;
    padding: 4px 6px;
    border: 1px solid #008C5F;
    border-radius: 4px 4px 0 0;
    text-decoration: none;
    color: #008C5F;
    font-weight: 500;
    font-size: 13px;
  }

  .widget-title-artikel .komentar-count {
    display: block;
    border: 1px solid #008C5F;
    border-top: none;
    padding: 3px 6px;
    border-radius: 0 0 4px 4px;
    color: #333;
    font-size: 11px;
    background-color: #f9f9f9;
  }

  .artikel-nav {
    display: flex;
    justify-content;
    gap: 3px;
    margin-top: 6px;
    flex-wrap: wrap;
  }

  .artikel-nav button {
    padding: 2px 3px;
    background-color: #008C5F;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    flex: 1;
    font-size: 11px;
  }

  .artikel-nav button:hover {
    background-color: #006f4a;
  }

  .artikel-nav button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
</style>

Silahkan Copy Paste kode diatas dan pasang di blog yang kamu miliki, jangan lupa untuk mengganti link blog deafile.blogspot.com dengan link blog yang kamu miliki. Jika masih belum paham dengan apa yang saya sampaikan, silahkan bertanya di kolom komentar, atau kamu bisa mulai bertanya kepada Neng AI :D

- Deafile Bedah Blog, ngabuburit sambil nunggu adzan maghrib mendingan blogwalking sajalah. Ehh, lagi blogwalking nemu widget yang keren nihh. Widget ini bernama LinkMan, singkatan dari Link Manager. Gunanya yaitu untuk membuat sebuah Form Link Exchange Secara Otomatis. Lumayan kan, sekarang kan zamannya serba otomatis, praktis, dan higienis(*Lahh ko jadi ke higienis).
Yaa sudah, daripada tambah ngawur kesana kemari lebih baik simak nihh tutorialnya kalau mau pasang LinkMan Form Link Exchange Otomatis.
- Pertama kamu harus punya webhosting(*contohnya 000webhost), kalau belum punya silahkan cari di google tentang cara mendaftar di 000webhost.
- Kemudian silahkan download file PHP untuk Form Link Exchange Otomatisnya(*Klik disini untuk download file)

Setelah anda mendownload file-nya, jangan lupa di-extract

2. Setelah di-extract, silahkan di-host file2 tersebut...

Cara Hosting File Linkman:

1. Sesuai tutorial cara mendapatkan web hosting di 000webhost yang telah saya tulis, maka sobat harus meng-host semua file linkman di public_HTML. Caranya klik public_HTML => Klik tombol "New Dir" untuk membuat direktori baru...dan buatlah direktori baru di public_HTML sebanyak folder yang baru anda extract, yaitu dua folder..."apptmp" sama "img", maka buat lah dua direktori dengan nama "apptmp" dan "img"
Penampakan file2 dan folder2 linkman:

Lalu berikut penampakan direktori linkman di public_HTML:

2. Setelah memberi nama direktori baru sesuai dengan nama-nama folder yang ada di file linkman17 rar yang telah anda extract, maka selanjutnya host lah semua file yang ada di masing-masing folder ke direktori yang sesuai dengan nama folder...

berikut penampilan untuk file2 serta direktori2 yang ada dalam direktori "linkman"

Dan berikut penampilan untuk direktori "apptmp"

Lalu berikut penampilan untuk "img" / file2 gambar untuk page-rank, edit, dan delete...

SELESAI!!! 1

NB: "Jangan lupa untuk menghapus file "Update.php" karena ini menjadi syarat agar fungsi link bisa berjalan dengan lancar sesuai dengan yang dianjurkan oleh http://www.phpjunkyard.com/php-link-manager.php

Jika sobat sudah meng-host semua file yang diperlukan, maka sekarang saatnya untuk menanam/embed fungsi PHP di blog blogger sobat dengan fungsi iframe. Lho, kenapa iframe?...iya, secara Blogger thu belum dukung sama yang namanya PHP, so kita bisa mengakalinya dengan HTML iframe.

Langkah2 penanaman linkman di blog:

1. ambillah link pada file "links.php", caranya...perhatikan gambar berikut:

2. Setelah anda melihat ke bagian "links.php" sekarang cobalah untuk menengok ke arah kanan. dan temukan gambar seperti berikut:

Nah, sekarang kembali ke "links.php" lalu pada bagian "Open" anda klik kanan dan pilihlah "Copy link location", dan itu lah link "linkman" anda yang selanjutnya bisa anda embed ke dalam blog anda.

Untuk memudahkan meng-embed halaman PHP tersebut, sobat harus menggunakan kode html iframe berikut:

Link di atas adalah milik saya. Silahkan ganti link yang telah saya tandai dengan warna biru dengan link milik sobat (link linkman yang telah sobat ambil tadi, formatnya biasanya seperti http://blablabla.blablabla.com/linkman/links.php).

Selanjutnya untuk halaman submit, maka sobat juga bisa menggunakan html iframe. Silahkan untuk mengambil link "form.html" anda, untuk mempermudah...silakan untuk memperhatikan gambar berikut:

Langkah pengambilan link "form.html" sama dengan pengambilan link "links.php". Jika linknya telah berhasil anda ambil, silahkan untuk menggunakan iframe berikut untuk membuat halaman form submit link:

Ganti link yang telah saya tandai dengan warna hijau di atas dengan link "form.html" milik anda.

Sampai di sini sobat telah berhasil membuat form link exchange otomatis dengan linkman. Selanjutnya untuk mengatur/setting semua fitur yang ada di dalam akun linkman sobat, maka sobat harus login ke linkman sobat. Caranya:

1. login ke 000webost sobat
2. klik "Go to CPanel"
3. pilih "File Manager"
4. Lalu pilih public_HTML
5. Lalu pilih direktori "linkman"
6. Lalu pilih "admin.php" => Klik "open"

7. Login dengan password "admin" atau kalau tidak bisa maka gunakan password "demo"

8. Selanjutnya sobat bisa men-setting sesuka sobat: Seperti mengganti password admin, mengatur penampilan, menghapus URL, dll. Berikut contoh tampilannya:

di screenshot di atas kelihatan ada beberapa menu utama, di antaranya: Add a new link, Refresh page, Update PageRank, Banned websites, Settings, LOGOUT

9. Untuk mengubah password serta pengaturan lainnya, maka sobat bisa melakukannya di menu "Settings".
Selesai dehh, selamat mencoba. Jangan malu untuk bertanya jika ada yang tidak dimengerti. Saya akan membantu sebisa mungkin.

Sumber Artikel : http://cerita-foto-video-terbaru.blogspot.com/2012/02/cara-membuat-link-exchange-otomatis-php.html

Menghitung Jumlah Kata Dalam Artikel Atau Postingan sering dilakukan oleh para blogger yang sering mengikuti kontes blog. Kebanyakan kontes blog yang diadakan sangat memperhatikan jumlah kata dalam artikel atau postingan yang dilombakan(*Seperti kontes blog AdRewa yang sedang saya ikut). Menghitung Jumlah Kata Dalam Artikel Atau Postingan secara manual sungguh sangat merepotkan(*Lama kali mass/mbaa, puyeng juga nihh mata kalo harus melototin banyaknya kata dalam artikel). Nah, pada postingan kali ini saya akan membagikan tutorial(*Bukan hanya caranya, tetapi juga alat/widgetnya) Menghitung Jumlah Kata Dalam Artikel Atau Postingan. Untuk menghitung jumlah kata dalam postingan silahkan menuju halaman awal blog ini atau klik disini untuk praktisnya. Dan jika ada yang ingin pasang di blognya seperti punya saya ini.

Silahkan klik disini untuk melihat kode widgetnya, kemudian letakan di blog yang kamu punya. Gampangkan?? Jika ada yang belum mengerti silahkan berkomentar di kotak komentar yang ada dibawah postingan ini. Sekian dari saya, kurang lebihnya mohon maaf. Permios..

Teman - teman blogger pasti sudah tau dengan yang namanya Disqus. Kalau belum tau, coba cari di google. Apa itu Disqus.? Di blog saya yang Deafile Bedah Blog, saya telah menjelaskan bagaimana caranya menggunakan kotak komentar dengan Disqus. Nahh disini saya akan mencoba memaparkan kelebihan dan kekurangan disqus sebagai kotak komentar.

Untuk kelebihannya, " ratusan ribu situs mulai dari situs kecil situs populer seperti blog Wordpress, Tumblr, Blogspot, hingga situs besar seperti Mashable.com dan CNN.com dapat diintegrasikan dengan Disqus untuk mendukung layanan diskusi bagi para pengguna di dunia maya. Untuk pengaturan secara manual, Disqus bisa diintegrasikan dengan jenis CMS seperti Drupal, Joomla, Squares pace, Yola/SythaSite, DokuWiki, Storytlr, Sweetcron, Sandvox dan Chimp." Begitulah seperti yang saya kutip dari wikipedia. Kemudian Disqus pun memiliki fasilitas untuk menanggapi komentar dan suka atau tidak suka pada komentar yang sudah diberikan.

Namun, dibalik semua itu Disqus, masih memiliki kekurangan. Memang benar kata pepatah " ~~tak~~ ada gading yang tak retak ". Disqus masih belum bisa menghubungkan komentar lama pada blogger. Sebagai contoh, saya mempunyai postingan yang sudah memiliki ~~banyak~~ komentar, setelah itu saya memasang kotak komentar dari Disqus, maka komentar yang lama akan ditiadakan (bukan berarti dihapus lohh) komentar akan dimulai dari NOL lagi. Artinya, walaupun ~~banyak~~ pengunjung yang memberikan komentar pada postingan jika saya menggunakan Disqus maka postingan sama sekali tidak memiliki komentar di mata sang blogger, karena komentar tersebut akan disimpan di Disqus, Bukan di Blogger.

Bagaimana saya mengetahui akan hal ini.? Kalau penasaran mari kita buktikan. Coba kamu pasang dulu widgetnya, untuk cara pemasangan silahkan baca disini. Setelah itu coba berikan komentar pada salah satu postingan yang kamu punya. Kemudian kamu masuk ke Edit Entri pada blog, karena disana akan terlihat berapa banyak komentar yang dimiliki postingan tersebut. Terbukti, walaupun kita sudah memberikan komentar pada postingan tersebut tetapi jumlah komentar tidak tertera disana karena komentar disimpan di Disqus.

(Ngerti Ora Son?) Kalau nggak ngerti yaa sudah, karena ~~pemahaman~~ setiap orang berbeda - beda Hehehe. Kalau setau saya sih begitu, gimana dengan pendapat teman - teman bloger yang lain (yang sudah ahli di bidang perkomentaran :p ).? Demikian yang dapat saya sampaikan, kurang lebihnya mohon maaf. Wassalamu'alaikum warahmatullahi wabarakatuh. ^_^

Apakah yang dimaksud dengan Social Bar Google Friend Connect. Social Bar Google Friend Connect adalah widget semacam toolbar yang menampilkan pengikut dari blog kita dan juga pengguna Google Friend Connect yang terakhir kali menjadi pengikut blog kita. Di toolbar ini juga kita bisa menuliskan komentar dan membalas komentar. Penasaran mau mencobanya.? Silahkan ikuti langkah - langkah dibawah ini.
- Pertama, masuk atau Log in di http://www.google.com/friendconnect

- Setelah itu lihat sidebar sebelah kiri, apakah ada nama dari judul blog yang kamu punya. Jika ada klik disitu, jika nama blog kamu belum ada di sidebar sebelah kiri, maka isi formulir yang ada.

- Kemudian, klik gadget yang ada di sebelah kiri, dan pilih social bar.

- Untuk Opsi, silahkan atur sesuai dengan keinginan kamu sendiri. Jika sudah, klik buat kode.

- Nahh kode yang muncul kemudian copy dan taruh diantara kode <body> atau dibawah kode </head> saja.
- Jika tidak bisa, coba tambah gadget, kemudian pilih HTML/Javascript
- Lalu taruh disana, dan klik simpan.

Oke, saatnya bilang SEMPOA. hehehehe

Apa itu UvumiTools Dropdown Menu.? UvumiTools Dropdown Menu adalah menu navigasi horizontal yang memiliki efek halus dalam menampilkan sub menu atau cabang dari menu utama (Seperti yang digunakan blog saya ini). Ketika saya sedang blogwalking ke tempat teman blogger yang lain, saya melihat menu ini terpasang di salah satu blog dari teman saya itu. Langsung terpikir dalam otak saya untuk bisa memasangnya di blog saya. Sangat mudah untuk bisa mendapatkan deretan kode dari menu tersebut, hanya tekan CTRL+U dan cari kata kunci yang di pakainya, dan Taraaaaa kita bisa melihat kode-kode tersebut. Namun cara memasang dan menyesuaikannya yang sedikit memakan waktu (Maklum, saya masih pemula hehe). Bagi yang ingin memasang menu tersebut silahkan ikuti langkah-langkah berikut.

- Pertama log in dulu ke blogger
- Kemudian klik Rancangan atau Design dan klik Edit HTML (Biasakan untuk memback up template sebelum melakukan pengeditan, klik Download Template Lengkap).
- Lalu Coppas kode script dibawah ini ke dalam tag head atau dibawah kode <head>

- Kemudian coppas kode dibawah ini diatas kode ]]></b:skin>

.NavbarMenu { background:#191B1D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXNMVcx0bUDqBTDuyjn8B7DdoWG6E1hOza_SmHvdhNsQxzDvg-eRjjLjOgCnzU9vG6twngNS3A8vtNu3lWEMYfFSSzqvKegJA5BwEX_OEv01O4xMvA1-GARXpabWVqbwqN8eQdmyQqJl4/s400/button1.gif) repeat-x top left; width: 100%; height: 37px; color: #FFFFFF; margin: 0 auto; padding: 0; font: bold 8px Arial, Tahoma, Verdana; clear:both; border-left:1px solid #333; border-right:1px solid #333 } .NavbarMenuleft { width: 75%; float:left; margin:0; padding:0; } .nav { margin:0; padding:0; } .nav ul { float: left; list-style:none; margin:0; padding:0; } .nav li { list-style:none; margin:0; padding:0; } .nav li a, .nav li a:link, .nav li a:visited { color:#fff; display:block; text-transform:capitalize; margin:0; padding:11px 10px 8px; font:normal 12px Georgia, Times New Roman; text-decoration: none; } .nav li a:hover, .nav li a:active { background:#102427 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9brf2yu_j0T8XAqTeYPD_t7gJ67kh8yH1OrUoMOfjN4bsFtktdF68s2MAVfAkKx_0qrSZkaqjsM15PDO5v4QgyRKXFXGonckE1k-QZmoV-Quj70N1h1yRytSypiaF6yBk7pf7a592O6o/) repeat-x top left; ; color:#FFF; margin: 0; text-decoration: none; } .nav li li a, .nav li li a:link, .nav li li a:visited { background:#2C5F24 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXNMVcx0bUDqBTDuyjn8B7DdoWG6E1hOza_SmHvdhNsQxzDvg-eRjjLjOgCnzU9vG6twngNS3A8vtNu3lWEMYfFSSzqvKegJA5BwEX_OEv01O4xMvA1-GARXpabWVqbwqN8eQdmyQqJl4/s400/button1.gif) repeat-x top left; width:200px; color:#fff; text-transform:capitalize; float:none; margin:0; padding:7px 10px; border-bottom:1px solid #0d2601; border-left:1px solid #0d2601; border-right:1px solid #0d2601; font: normal 14px Georgia, Times New Roman; } .nav li li a:hover, .nav li li a:active { background:#102427 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9brf2yu_j0T8XAqTeYPD_t7gJ67kh8yH1OrUoMOfjN4bsFtktdF68s2MAVfAkKx_0qrSZkaqjsM15PDO5v4QgyRKXFXGonckE1k-QZmoV-Quj70N1h1yRytSypiaF6yBk7pf7a592O6o/) repeat-x top left; color:#fff; } .nav li { float:left; padding:0; } .nav li a.enclose, .nav li a.enclose:visited { border-top:1px solid #000; } .nav li ul { z-index: 9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0; } .nav li ul a { width: 140px; } .nav li ul ul { margin: -1px 0 0 220px; } .nav li:hover ul ul, .nav li:hover ul ul ul, .nav li.sfhover ul ul, .nav li.sfhover ul ul ul { left:-999em; } .nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li.sfhover ul, .nav li li.sfhover ul, .nav li li li.sfhover ul { left:auto; } .nav li:hover, .nav li.sfhover { position:static; } #search { width: 25%; font-size: 11px; float: right; margin: 0; padding:0; } #searchform { margin:0; padding:0; overflow:hidden; display:inline; } #searchbox { background:#ddd; padding:0; margin:0; } #search input { background:transparent; color:#fff; float:left; font-size:12px; margin: 7px 0 0 10px; width: 110px; padding:3px 7px; border: 1px solid #fff; font: normal 10px arial, verdana, Times New Roman; } #search .btn { margin:7px 0 0; padding:0; width:auto; border:0; }

- Kemudian cari kode yang mirip seperti ini (Saya katakan mirip, karena sedikit berbeda kodenya untuk setiap blog).

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

- Lalu coppas kode dibawah ini, tepat dibawah kode tadi

<div class='NavbarMenu'> <div class='NavbarMenuleft'> <ul class='nav' id='dropdown-menu'> <li><a href='http://deafile.blogspot.com/'>Home</a></li> <li><a href='#'>Page &#160;&#160;&#8595;</a> <ul> <li><a href='#'>Sub Page 1&#160;&#160;&#187;</a> <ul> <li><a href='http://deafile.blogspot.com/'>Dea Punya | Blogger Ciamis</a></li> <li><a href='http://deafile.blogspot.com/'>Dea Punya | Blogger Ciamis</a></li> <li><a href='http://deafile.blogspot.com/'>Dea Punya | Blogger Ciamis</a></li> <li><a href='http://deafile.blogspot.com/'>Dea Punya | Blogger Ciamis</a></li> <li><a href='http://deafile.blogspot.com/'>Dea Punya | Blogger Ciamis</a></li> </ul></li> <li><a href='#'>Sub Page 2&#160;&#160;&#187;</a> <ul><li> <a href='#'>Sub sub Page 1</a></li> <li><a href='http://deafile.blogspot.com/'>Sub sub Page 2</a></li> <li><a href='http://deafile.blogspot.com/'>Sub sub Page 3</a></li> <li><a href='http://deafile.blogspot.com/'>Sub sub Page 4</a></li> <li><a href='http://deafile.blogspot.com/'>Sub sub Page 5</a></li> </ul></li> <li><a href='#'>Sub Page 3</a></li> </ul> </li> <li><a href='#'>Edit Me</a></li> </ul></div> <div id='search'> <form action='/search/' id='searchform' method='get' style='display:inline;'> <input id='searchbox' maxlength='160' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/> <input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhliIyQuFZ7bZyfePvin0SD0IRiD4xXM-5o5YKAMk8F7diUWtCHN1DBwz6xJFRuacMRhOjvtSXMeUW8zr_BrXQQGhKCsZJumXR0f55Ul2nVcEggsS-1w4bCq4GSo_PPGjZjQiqz5SNYHoA/?imgmax=800' type='image' value='Go'/> </form> </div></div>

- Dan klik save..

Jika ingin lebih enak dilihat, sesuaikan dengan template blog yang kamu punya. Jangan lupa untuk mengganti setiap link yang ada sesuai dengan yang kamu inginkan. Dan jika kamu menghargai artikel ini, sertakan link blog saya kemudian beri komentar pada artikel ini, maka saya akan memasang kembali link blog kamu (Sekalian tukeran link gituu, hehe). Semoga artikel ini bermanfaat bagi yang membutuhkannya.

Website sangat berbeda dengan blog, tapi website juga bisa di tambahkan widget. Pertama kali saya menambahkan shoutmix pada website, dan saya menemukan kesulitan, ketika saya sudah memasukan kode shoutmix dan saya simpan, tetapi yang tampil pada website adalah kode tersebut.
. Nah jangan bingung, ternyata di webs.com ini apabila kita sudah memasukan kode tersebut dan menyimpannya kita perlu mengeditnya lagi sehingga kode tersebut menjadi widget yang sebenarnya.
Untuk menambahkan widget pada sidebar, langkah pertama yaitu,

- Log in terlebih dahulu ke webs.com
- Setelah masuk halaman awal klik edit pada home
- Setelah itu klik sidebar
- Lalu klik Costume Module
- Masukan Judul yang Kamu inginkan di kotak panjang kecil
- Dan masukan kode widget di kotak dibawah kotak judul yang tadi, kemudian klik save.
- Nah setelah itu kamu klik edit pada widget yang sudah tersimpan tadi, agar kode tersebut tampil pada website kamu.

Widget sangat diperlukan untuk mempercantik blog kamu,,khususnya bagi yang pemula agar dapat menarik pengunjung ke blog kamu. Ada sebuah situs yang menyediakan Link-Link untuk memudahkan kamu untuk mencari dan memilih widget tersebut. Alamat Situs itu adalah
http://mashable.com/2007/09/06/widgets-2/.
Kamu Hanya perku memilih lalu kemudian meng-klik Judul atau nama dari widget tersebut, setelah itu kamu akan dibawa ke situs yang bersangkutan.
Oke semoga informasi ini bermanfaat bagi kamu.

ini langkah untuk memasang widget permainan billiard.....

-->masuk ke blog
-->klik menu tata letak
-->pilih add a gadget
-->klik HTML/ JAVA SCRIPT
--> Copy Paste deh kode di bawah ini.........:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script>if (WIDGETBOX) WIDGETBOX.renderWidget('f2ca7495-453c-400f-898e-a545029c0831');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/9-ball-pool-billiards-game">9 Ball Pool Billiards Game</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>!</noscript>

--> Save
Gampang kan........

Bagi yang sudah bisa,,,membuat daftar isi pada Blog mungkin mudah,,
Tapi bagai mana yang belum bisa …???

Nah saya akan memberikan sedikit cara untuk membuatnya,,,,

-Langkah pertama Klik menu Dashboard
-Lalu pilih menu Layout atau Tata Letak
-Klik Add a Gadget
-Pilih Html/JavaScript
-Kemudian copy paste kode dibawah ini :

<h2 class="title">Daftar Artikel</h2>
<div class="widget-content">
<div style="border: 0px solid rgb; overflow: auto; width: 300px; height: 100px; text-align: left;">

<ol><li><a href="http://deafile.blogspot.com/2009/08/membuat-link-exchange.html">Membuat Link Exchange</a></li></ol>
</div>
</div>

Untuk kode yang berwarna biru ,,,ganti dengan URL artikelnya
Untuk kode yang berwarna hijau,,,,ganti dengan Judul artikelnya..

And save………….
Selamat mencoba………….

Ikuti Blog ini

Harga Crypto Terkini (IDR)

Statistik Deafile

&data;

&data;

&data;

Tutorial

Bekerja Sama

Kirim Artikel

Berlangganan Artikel

Membuat Widget Daftar Artikel Blog Dengan Bantuan AI

LinkMan Form Link Exchange Otomatis

Widget Penghitung Kata Pada Blog

Kelebihan + Kekurangan Disqus Sebagai Kotak Komentar

Memasang Social Bar Google Friend Connect

Cara Pasang UvumiTools Dropdown Menu

Menambahkan Widget di webs.com

Kumpulan Widget Untuk Blog Kamu

Widget Permainan

Membuat Daftar Isi

Daftar Artikel

Postingan Populer

Instagram Saya

Ikuti Blog ini

Profil Admin

Kotak Diskusi