Tabbed Document Viewer

MEMANTAU BLOG KITA

Seberapa banyak blog yang anda punya ? Apakah anda sulit untuk memantaunya?
Saya yakin banyak diantara blogger mania mempunyai tidak hanya satu blog, mengingat layanan membuat blog gratis.
Agar kita dapat memantau blog kita dari salah satu blog kita, berikut sebuah script buatan Eric Meyer yang dapat kita fungsikan untuk memantau blog kita :

DEMO | bisa dilihat pada bagian sidebar atas.

Langkah pertama tambahkan kode CSS and DHTML script diatas kode ]]></b:skin>

/*Eric Meyer's based CSS tab*/

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a:hover{
color: #000000;
background: #C1C1FF;
border-color: #227;
}

#tablist li a.current{
background: lightyellow;
}

Langkah kedua. dibawah kode ]]></ b: skin> tambahkan kode berikut ini :


<script type="text/javascript">

/***********************************************
* Tabbed Document Viewer script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var selectedtablink=""
var tcischecked=false

function handlelink(aobject){
selectedtablink=aobject.href
tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false
if (document.getElementById && !tcischecked){
var tabobj=document.getElementById("tablist")
var tabobjlinks=tabobj.getElementsByTagName("A")
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
document.getElementById("tabiframe").src=selectedtablink
return false
}
else
return true
}

function handleview(){
tcischecked=document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked){
if (selectedtablink!="")
window.location=selectedtablink
}
}

</script>

3. Simpan template anda, kemudian pada Layout | Page elements "add gadgets" kemudian pilih "HTML / Javascript "
lalu tambahkan kode berikut ini :

<ul id="tablist">
<li><a class="current" href="Your URL blog" onClick="return handlelink(this)">Blog Title1</a></li>
<li><a href="Your URL blog" onClick="return handlelink(this)">Blog Title2</a></li>
<li><a href="Your URL blog" onClick="return handlelink(this)">Blog Title3</a></li>
<li><a href="Your URL blog" onClick="return handlelink(this)">Blog Title4</a></li>
<li><a href="Your URL blog" onClick="return handlelink(this)">Blog Title5</a></li>
</ul>
<iframe id="tabiframe" src="http://www.google.com" width="98%" height="350px"></iframe>

<form name="tabcontrol" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.
</form>

Jika kita mempunyai lebih dari lima blog, maka kita bisa menambahkan sela dengan menambahkan kode :
<div style="margin-bottom: 8px"></div>

sehingga posisi nama blog pada navbarnya tidak menumpuk.

contoh :

<ul id="tablist">
<li><a class="current" href="#">Blog Title1</a></li>
<li><a href="#">Blog Title2</a></li>
<li><a href="#">Blog Title3</a></li>
<div style="margin-bottom: 8px"></div>
<li><a href="#">Blog Title4</a></li>
<li><a href="#">Blog Title5</a></li>
</ul>

Semoga bisa membantu dan bermanfaat.

"Latest Headlines" Widget

Anda ingin menampilkan "post terbaru" dalam bentuk widget seperti pada tampilan widget yang ada di atas posting pada blog ini ? Widget ini saya dapat dari blognya Hoctro, beliau memberi nama " Latest Headlines".
Di sini saya mencoba menulis kembali dalam bahasa Indonesia, kurang lebihnya begini :

1. Kita harus mendapatkan "API Key " dari sini : Google AJAX Feed API

Setelah anda masuk pada situs sesuai URL diatas, centang kotak yang ada di samping "I have read and agree with the terms and conditions". Kemudian isikan URL blog anda yang akan dipasang Widget ini pada kotak disamping "My web site URL:.......". Kemudian klik button "GENERATE API KEY"
Setelah itu Copy Paste Kode API yang anda dapat pada Notepad.

2. Masuk ke Blogger | Layout | Edit HTML, tanpa mencentang kotak "Expand Widget Templates", tambahkan kode dibawah ini di atas kode </head>.

<script src='http://www.google.com/jsapi/?key=YOUR KEY'type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

<style type='text/css'>
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
}
.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;

}
</style>
<script type='text/javascript'>
function load() {
var homeUrl = "<data:blog.homepageUrl/>";
var feed = homeUrl + "feeds/posts/default";
new GFdynamicFeedControl(feed, "feedControl",
{numResults : 4});
<h6>Widget by <a href='http://hoctro.blogspot.com/2008/09/google-ajax-feed-widget.html'>Hoctro</a></h6>

}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>

3. Kemudian pada Page Elements, klik Add a Gadget dan pilih HTML/ Javascript dan masukkan kode dibawah ini ( Pada Sidebar atau di atas Postingan ).

<div id="feedControl"> Please Wait, Loading...</div>

4. Untuk modifikasi warna dan ukuran Width ( sesuai kelebaran ) silahkan anda atur pada : kode berwarna merah.

5. Untuk menampilkan jumlah posting yang akan ditampilkan silahkan modifikasi pada : {numResults : 4}); Nilai 4 bisa anda rubah sesuai dengan keinginan anda.

6. Paste Kode API Key yang anda dapat di YOUR KEY

Selamat mencoba