Cara Membuat Text Glider Content

Kemarin saya telah share simple slide show dan sliding feature post. Sekarang saya share bagaimana cara membuat text glider content yang kurang lebih fungsinya, namun hanya beda tampilan yang memuat text dan dilengkapi dengan glider button. Fungsinya anda dapat memuat tulisan penting, semacam sarana promosi dari produck atau lainnya. Ok sekarang ikuti langkah pembuatannya.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Centang Expand Template Widget
Masukkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-textglider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {
$('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});

//]]>
</script>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-featuretextglider.js' type='text/javascript'/>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>
<style type='text/css'>
#glidercontent{margin:5px 0 0px 12px}
.glidecontentwrapper{position:relative; width:629px; height:300px; overflow:hidden; margin:0px 0px 0px 0px; padding:0px 0px; background:#fff}
.glidecontent{position:absolute; padding:0px 5px 0px 5px; width:610px; color:#555; margin:0px 5px; height:100%; overflow:hidden; float:left; background:#fff}
.glidim{float:left}
.glidim img{margin:0px 5px 5px 0px; padding:7px 7px}
.glidecontent h2{margin:0px 0px 0px 0px; padding:5px 0px; font-size:24px; line-height:24px; font-weight:bold; overflow:hidden; font-family:Georgia,Century gothic,Arial,Tahoma,sans-serif}
.glidecontent h2 a:link, .glidecontent h2 a:visited{color:#303843}
.glidecontent p{margin:0px 0px 0px 0px; padding:5px 0px; font-size:14px; line-height:22px; overflow:hidden; font-family:Georgia,Century gothic,Arial,Tahoma,sans-serif; color:#696d70}
.glidebot{width:630px; height:18px; background:url(http://1.bp.blogspot.com/-pRIkyzhSXzg/ThfXYh5FSfI/AAAAAAAAAmw/uWPOow3TRUo/s320/background2.jpg) center no-repeat; margin:0px 0px 5px 12px; padding:0px 0px; float:left}
.gnav{width:100px; height:50px; z-index:150; float:right; padding-right:25px}
.glidecontenttoggler{height:35px; z-index:150; width:650px; background:url(http://3.bp.blogspot.com/-iVWr4c6kUhI/ThfXGNApBzI/AAAAAAAAAmo/7K5IUrfslp4/s320/background.png) no-repeat}
.glidecontenttoggler a{display:-moz-inline-box; display:inline-block; color:#2e6ab1; font-weight:bold; text-decoration:none}
.glidecontenttoggler a.selected{background:#E4EFFA; color:black}
.glidecontenttoggler a:hover{background:#E4EFFA; color:black}
.glidecontenttoggler a.toc{}
.glidecontenttoggler a.prev{top:9px; right:25px; position:absolute; display:block; background:url(http://2.bp.blogspot.com/-5eTYifjsLMM/ThfWrnhuStI/AAAAAAAAAmY/-AVcaed17Wc/s320/left%2Barrow.jpg) left no-repeat; width:50px; height:17px}
.glidecontenttoggler a.next{float:right; display:block; background:url(http://2.bp.blogspot.com/-uA4qC6q8su4/ThfW2761SEI/AAAAAAAAAmg/-6CuepLyIWM/s320/right%2Barrow.jpg) right no-repeat; width:20px; height:17px; position:absolute; top:9px; right:15px}
</style>

Selanjutnya masukkan kode berikut di bawah kode <div id='main-wrapper'>

<div id='content'>
<script type='text/javascript'>
featuredcontentglider.init({
gliderid: &quot;glidercontent&quot;,
contentclass: &quot;glidecontent&quot;,
togglerid: &quot;togglebox&quot;,
remotecontent: &quot;&quot;,
selected: 0,
persiststate: true,
speed: 500,
direction: &quot;leftright&quot;,
autorotate: true,
autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>

<!-- Glider Content -->
<div class='glidecontentwrapper' id='glidercontent'>
<div class='glidecontenttoggler' id='togglebox'>
<a class='prev' href='#'/>
<a class='next' href='#'/>
</div>
<div class='glidecontent1 section' id='glidecontent1'><div class='widget HTML' id='HTML98'>
<div class='widget-content'>

<div class='glidecontent'>
<h2><a href='your link' title='Apa itu Blog'>Apa itu Blog?</a></h2>
<p>Sebuah blog (campuran dari istilah web log) adalah jenis website atau bagian dari sebuah website. Blog biasanya dikelola oleh seorang individu dengan entri reguler komentar, deskripsi peristiwa, atau materi lainnya seperti grafis atau video. Entri yang umumnya ditampilkan dalam urutan kronologis terbalik. Blog juga dapat digunakan sebagai kata kerja, yang berarti untuk memelihara atau menambahkan konten ke blog.
<a href='LINK TULISAN ANDA DI SINI'>Read More </a></p></div>

<div class='glidecontent'>
<h2><a href='your link' title='Apa Itu Seo'>Apa Itu Seo?</a></h2>
<p>Optimisasi mesin pencari (SEO) adalah proses meningkatkan visibilitas sebuah website atau halaman web di mesin pencari melalui "alam" atau un-bayar ("organik" atau "algorithmic") hasil pencarian. Bentuk lain dari pencarian target pemasaran mesin pencari (SEM) dibayar listing. Secara umum, sebelumnya (atau lebih tinggi pada halaman), dan lebih sering situs muncul dalam daftar hasil pencarian, semakin banyak pengunjung itu akan menerima dari pengguna mesin pencari. SEO dapat menargetkan berbagai jenis pencarian, termasuk pencarian gambar, pencarian, video pencarian lokal, cari akademis, [1] berita pencarian dan industri-spesifik mesin pencari vertikal. Ini memberikan kehadiran web situs.
<a href='LINK TULISAN ANDA DI SINI'>Read More </a></p></div>

<div class='glidecontent'>
<h2><a href='LINK TULISAN ANDA DI SINI' title='Apa Itu Backlink '>Apa Itu Backlink?</a></h2>
<p>Backlink adalah link masuk ke halaman situs atau web. Inbound link awalnya penting (sebelum munculnya mesin pencari) sebagai sarana utama web navigasi, hari signifikansi mereka terletak pada optimasi mesin pencari (SEO). Jumlah backlink merupakan salah satu indikasi popularitas atau pentingnya bahwa situs atau halaman (misalnya, ini digunakan oleh Google untuk menentukan PageRank dari halaman web). Di luar SEO, backlink dari halaman web mungkin kepentingan pribadi, budaya atau semantik yang signifikan: mereka menunjukkan siapa yang membayar perhatian ke halaman tersebut.
<a href='LINK TULISAN ANDA DI SINI'>Read More </a></p></div>

<div class='glidecontent'>
<h2><a href='your link' title='Apa Itu Adsense'>Apa Itu Adsense?</a></h2>
<p>Google AdSense adalah sebuah aplikasi penayangan iklan yang dijalankan oleh pemilik Website Google Inc dapat mendaftarkan diri dalam program ini untuk mengaktifkan iklan teks, gambar, dan video di situs Web mereka. Iklan tersebut dikelola oleh Google dan menghasilkan pendapatan di kedua basis per-klik atau per tayang. Google versi beta diuji layanan biaya per tindakan, tetapi dihentikan pada Oktober 2008 di mendukung menawarkan DoubleClick (juga dimiliki oleh Google). Pada Q1 2011, Google memperoleh US $ 2340000000 ($ 9360000000 tahunan), atau 28% dari total pendapatan, melalui AdSense.
<a href='LINK TULISAN ANDA DI SINI'>Read More </a></p></div>

</div>
</div></div>
</div>

<!-- /Glider Content -->
<div class='glidebot'/>
<div class='clear'/></div> 

Anda dapat menempatkan kode kedua di atas pada Add Gadget.
Selanjutnya Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"