Parsing Scritpt HTML ke XML di blogspot
permasalahan yang sering terjadi ketika kita ingin menampilkan iklan atau adsense di dalam posting adalah terjadinya error...sintak not wellperformed,,sehingga script iklan tidak dieksekusi oleh blogspot.
nah, untuk menampilkan iklan pada postingan di dalam body blogspot maka script andsense terlebih dahulu harus diparsing menjadi kode xml, salah satu cara yang mudah untuk dilakukan adalah
1. buka browser kesayangan anda
2. ketikkan alamat web berikut ini http://www.blogcrowds.com/resources/parse_html.php
3. pada web tersebut terdapat kotak inputan
4. masukkan script adsense anda
5. klik tombol parse
6. tunggu beberapa saat sampai script html dari adsense anda berubah menjadi script xml
7. masukkan script yang sudah di parse tadi ke dalam body sesuai keinginan anda
8. selesai
semoga bermanfaat
Tab view adalah sebuah widget yang bisa digunakan untuk mengelompokkan informasi atau berita berdasarkan kategori yang di tentukan.
widget tab view ini sangat berguna, selain bisa menghemat space pada tampilan blog kita widget ini pun bermanfaat untuk mempermudah pengunjung blog untuk mencari informasi yang dibutuhkan.
untuk menambah widget tab view di blogspot seperti gambar diatas bisa menggunakan teknik-teknik berikut ini, cara menambah widget tab view ini sudah lama dipakai dan bila teman-teman blogger memiliki trik yang baru silahkan memberikan komentar pada posting ini.
langkah-langkahnya adalah sbb :
- masuk ke Edit HTML
- Copy script dibawah ini dan letakkan sebelum code ]]></b:skin>
- div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000080; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF; /* Warna background Kotak Utama */
border: 1px solid #000000; /* Warna border Kotak Utama */
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;
} - berikutnya copy script dibawah ini dan letakkan sebelum code </head>
- <script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script> - Simpan template anda
- masuk ke page element dan tambahkan gadget baru dengan tipe HTML/JAVASCRIPT
- letakkan code dibawah ini di gadget yang baru anda buat
- <form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script> - simpan hasil editing anda
- letakkan widget baru anda di posisi yang telah anda tentukan
- untuk memberi Judul tinggal ganti saja teks "Tab 1" menjadi "Berita IT"
- sedangkan untuk membuat isi dari masing-masing tab tinggal mengganti teks Tab 1.1 dengan link, seperti contoh dibawah ini
- <ul><li><a href="http://arbakid.blogspot.com/2010/02/menambah-scroll-box-di-sidebar-blogspot.html">Tutorial scrol box</a></li>
- link silahkan disesuaikan dengan posting artikel anda
- lihat hasilnya
Share
Baca Selengkapnya ...
Menambah Scroll Box
coba lihat pada sidebar sebelah kanan, pada kategori Berita Bisnis...disitu saya menambahkan sebuah scroll box untuk kotak iklan dari kumpul blogger sehingga iklan yang tampil seolah-olah bisa diatur sedemikian rupa sehingga terlihat rapi
secara default jika script dari kumpul blogger langsung dipasang maka tampilannya akan melebar dan panjang kebawah dan terlihat nggak rapi, maka dari itu agar terlihat rapi kode dari kumpul blogger harus dimasukkan ke sebuah element HTML yaitu scroll box.
berikut ini adalah cara untuk menambahkannya:
- login ke blogger
- masuk ke tataletak dan tambahkan sebuah widget untuk javascript/html
- widget bisa diletakkan di sidebar atau body
- copast kode berikut ini :
<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee"> --masukkan kode kumpulblogger disini--</div>
- masukkan kode tersebut diatas pada widget javascript/html yang baru saja anda tambah
- letakkan kode kumpulblogger sebelum tag penutup dari "div"
- simpan
Keterangan :
- overflow:auto --> kode ini akan membuat scroll box otomatis memanjang kebawah jika isinya melebihi ukuran standart
- width -->digunakan untuk mengatur lebar dari scroll box
- height --->digunakan untuk mengatur tinggi dari scrool box
- padding --->digunakan untuk mengatur spasi
- border -->mengatur garis tepi, jika bernilai 1 maka garis tepi (kotak) akan dimunculkan
- solid --> warna
