Widget Iklan Baris Di Blogger Berbasis PHP (Bagian Terakhir)

Beberapa waktu yang lalu kita telah belajar membuat forminputiklan.php dan halaman viewiklan.php untuk menginputkan data ke dalam database yang telah kita buat sebelumnya dan menampilkannya. Semoga tidak ada masalah ya. Bagi yang belum membaca postingan tersebut bisa klik di sini.

Sedikit informasi : Bagi sobat yang udah pernah praktekin tutorial pada postingan saya yang berjudul Widget Iklan Baris Di Blogger Berbasis PHP (Bagian 3) kemarin ada sedikit kesalahan penulisan kode untuk page forminputiklan.php sehingga data yang kita inputkan tidak dapat masuk ke dalam database, saya mohon maaf atas kesalahan tersebut, dan sekarang sudah saya perbaiki. Silahkan ganti kode sobat yang lama dengan yang baru, agar tidak terjadi masalah.

Pada tahapan ini kita akan belajar baqgaiman cara memasang widget tersebut ke dalam sidebar bolg kita masing-masing. kemudian kita coba kombinasikan dengan widget "TabView" agar tampilan terlihat rapi dan menarik.


Sekarang mari kita lakukan percobaan terlebih dahulu memasang widget terssebut ke dalam blog kita tanpa Tabview. Ikuti langkah-langkah berikut ini :

1. Login dengan username dan password sobat ke Blogger.
   
   
2. Klik Layout/Tata Letakpada Dashboard blogger sobat.
   
   
3. Kemudian klik Add a Gadget/Tambah Elemen
   untuk menambah widget baru, kemudian pilih/klik HTML/JavaScript pada window baru yang muncul.
   
   
4. Setelah itu akan muncul text area untuk menuliskan kode HTML ataupun JavaScript. Copy kode di bawah ini dan paste ke dalam text area tersebut.
   
   

   <iframe id="fr" scrolling="no" width="100%" frameborder="0" src="http://a9u5543.ueuo.com/viewiklan.php" name="fr" height="360"/></iframe>

   
   
   Jangan lupa ganti tulisan "a9u5543.ueuo.com" dengan alamat hosting anda sendiri.
   
   
   
5. Klik tombol Simpan untuk menyimpan widget baru tersebut. Silahkan lihat hasilnya.

Nah jika percobaan di atas berhasil, sekarang saatnya kita kombiansikan dengan TabView widget agar lebih terlihat menarik. Ikuti saja langkah-langkah berikut ini :

1. Login dengan username dan password sobat ke Blogger.
   
   
2. Klik Layout/Tata Letakpada Dashboard blogger sobat.
   
   
3. Kemudian klik Add a Gadget/Tambah Elemen
   untuk menambah widget baru, kemudian pilih/klik HTML/JavaScript pada window baru yang muncul.
   
   Atau bisa juga edit kode widget yang telah sobat buat sebagai percobaan tadi dengan cara klik Edit pada widget yang telah sobat buat sebelumnya, saya yakin sobat tidak kesulitan mengenai hal ini.
   
   
4. Masukkan kode di bawah ini ke dalam Text Area yang muncul :
   
   

   <style>
   div.comment-form-block{
   width: 490px; /*silahkan ubah sesuai dengan lebar yg anda inginkan*/
   margin: 0 auto;
   }
   
   div.comment-form-block p{
   color: #000;
   font-family: &#39;Trebuchet MS&#39;;
   font-size: 12px;
   text-align: left;
   }
   
   div.TabView div.Tabs
   {
   height:24px;
   overflow:hidden;
   }
   
   div.TabView div.Tabs a
   {
   float:left;
   display:block;
   
   width:115px;
   text-align:center;
   
   height:24px;
   padding-top:3px;
   vertical-align:middle;
   border: 1px solid black;
   border-bottom-width:0;
   
   text-decoration:none;
   font-family:&quot;Times New Roman&quot;,Serif;
   font-weight:900;
   color:#000080;
   }
   
   div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
   {
   background-color:lightyellow;
   }
   
   div.TabView div.Pages
   {
   clear:both;
   border:1px solid #404040;
   overflow: hidden;
   }
   
   div.TabView div.Pages div.Page
   {
   height:100%;
   padding:0px;
   overflow:hidden;
   }
   
   div.TabView div.Pages div.Page div.Pad
   {
   padding: 3px 5px;
   }
   </style>
   
   <div id="TabView" class="TabView">
   <div style="width: 100%;" class="Tabs">
   <a>Iklan Yang Masuk</a>
   <a>About Us!</a>
   </div>
   
   <div style="width: 100%; height: 369px;" class="Pages">
   <div class="Page">
   <div class="Pad">
   
   <iframe id="fr" scrolling="no" width="100%" frameborder="0" src="http://a9u5543.ueuo.com/viewiklan.php" name="fr" height="360"/></iframe>
   </div>
   </div>
   <div class="Page">
   <div class="Pad">
   <div style="overflow:auto;width:360px;height:285px;padding:5px;border:1px solid #eee">
   <p align="justify"><span style="font-weight:bold;">Widget Iklan Baris</span> ini adalah sarana promosi gratis untuk Anda, Silahkan memasang iklan Anda disini, GRATIS!! dengan cara mengisi form di tab <span style="font-weight:bold;">"Pasang Iklan"</span>. Isikan iklan anda tentang apapun. Blog, website, bisnis, produk atau apapun bisa anda promosikan gratis di sini (asal tidak melanggar aturan). Iklan akan tampil beberapa detik setelah anda pasang, jangan lupa klik "refresh" untuk melihat hasilnya.Iklan yang tampil tidak dipungut biaya, meskipun gratis untuk pasang iklan di blog saya tetap ada <blink><span style="font-weight:bold;">SYARATNYA </span></blink>yaitu : <span style="font-weight:bold;">Saya minta Anda untuk pasang link blog ini di salah satu (jika punya banyak) blog Anda</span>.</p>
   
   Anda berminat memasang widgeti ini di blog Anda? Ikuti Tutorial dibawah ini :
   <ol><li> <a target="new" href="http://maz-agus.blogspot.com/2009/03/widget-pasang-iklan-di-blogger-berbasis.html">Widget Iklan Baris Di Blogger Berbasis PHP (Bagian 1)</a>
   <li> <a target="new" href="http://maz-agus.blogspot.com/2009/03/widget-iklan-baris-di-blogger-berbasis.html">Widget Iklan Baris Di Blogger Berbasis PHP (Bagian 2)</a>
   <li> <a target="new" href="http://maz-agus.blogspot.com/2009/03/widget-iklan-baris-di-blogger-berbasis_18.html">Widget Iklan Baris Di Blogger Berbasis PHP (Bagian 3)</a>
   <li> <a target="new" href="http://maz-agus.blogspot.com/2009/03/widget-iklan-baris-di-blogger-berbasis_27.html">Widget Iklan Baris Di Blogger Berbasis PHP (Bagian Terakhir)
   </a>
   </li></li></li></li></ol>
   
   </div>
   <br/><hr/>
   <!-- Jangan mengubah tulisan dan link di Bawah ini! -->
   Terimakasih telah menggunakan widget ini. Sukses selalu untuk Anda. Salam sukses dari <a target="new" href="http://maz-agus.blogspot.com">Mas Agus</a>.
   <!-- Terimakasih -->
   </div>
   </div>
   </div>
   </div>
   <script type="text/javascript">
   tabview_initialize('TabView');
   </script>

   
   
   Jangan lupa ganti tulisan "a9u5543.ueuo.com" dengan alamat hosting anda sendiri.
   
   
5. Jangan lupa Klik tombol "Simpan".

Sekarang tinggal langkah terkhir yaitu menambahkan kode JavaScript pada template blog kita, agar widget Tabview dapat digunakan, ikuti langkah-langkah di bawah ini :

1. Masukklah ke menu Layout/Tata leta kemudian ke sub menu edit HTML.
   
   
2. Cari kode ]]></b:skin> kemudian copy kode di bawah ini tepat di bawah kode ]]></b:skin>.
   
   

   
   <script>
   function tabview_aux(TabViewId, id)
   {
   var TabView = document.getElementById(TabViewId);
   
   // ----- Tabs -----
   
   var Tabs = TabView.firstChild;
   while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
   
   var Tab = Tabs.firstChild;
   var i = 0;
   
   do
   {
   if (Tab.tagName == &quot;A&quot;)
   {
   i++;
   Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
   Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
   Tab.blur();
   }
   }
   while (Tab = Tab.nextSibling);
   
   // ----- Pages -----
   
   var Pages = TabView.firstChild;
   while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
   
   var Page = Pages.firstChild;
   var i = 0;
   
   do
   {
   if (Page.className == &#39;Page&#39;)
   {
   i++;
   if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
   Page.style.overflow = &quot;auto&quot;;
   Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
   }
   }
   while (Page = Page.nextSibling);
   }
   
   // ----- Functions ---------------------------
   
   function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
   
   function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
   </script>
   
   <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYSGxcK9PqpVpvjY8TxtcoDMQIegzIjPdtU9LSVL3YA44P4lfCN-g3OBlb9lNMP6-EWkbG8mSnWZNlp888pA71j2C7X450oc9up2HggN-kDsFMF1K-MIHAzxnBmowsUDhyfmcQU_9_ggU/s1600-r/cm20080604093105-20291872-359003.jpg?imgmax=800' rel='shortcut icon'/>
   
   <script type='text/javascript'>
   //<![CDATA[
   /*
   Merlinox and Napolux MyBlogLog Avatar Creator
   created by Merlinox (blog.merlinox.com)
   helped by Napolux (www.napolux.com)
   
   version 0.1 (20061214)
   version 0.2 (20061215)
   compatible with all blogger blog
   */
   
   if(typeof(myLayer)!='function'){
   function myLayer (x){
   //individuo l'oggetto
   if(document.layers){ // browser="NN4";
   lay=document.layers[x];
   }
   if(document.all){ // browser="IE";
   lay=eval("document.all." + x);
   }
   if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
   lay=document.getElementById(x);
   }
   return lay;
   }
   }
   
   //lo prendo da blogger
   function myBlogAvatar(codiceCommento,autore,stile){
   //scrivo lo span
   //var myBlogSpan = "myBlog-" + codiceCommento;
   //document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");
   
   //metto tutto minuscolo perchè indexOf è case sensitive
   
   if (autore != ""){
   alt="MyBlogLog: " + autore;
   
   myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>";
   //myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
   //myLayer(myBlogSpan).innerHTML = myBlog;
   document.write(myBlog);
   }
   }
   //]]>
   </script>
   

   
   
   
3. Simpan template sobat dan lihat hasilnya. Semoga berhasil.
   
   

Jika berhasil maka hasil dari kode-kode di atas adalah seperti pada widget yang terdapat pada blog ini di sidebar kanan atas.