Bikin Teks atau Konten Bergerak

Ternyata bikin teks dan konten bergerak itu sangat mudah loh..
yaa, mungkin diantara kita sudah mengetahui tips berikut. Tapi, ya gak apa lah saya akan mengingatkan kembali siapa tahu diantara kita ada yang lupa.
Pergerakan teks atau konten bisa kita atur nantinya sesuai kehendak kita. Bisa bergerak ke kiri, kanan, atas, bawah.

Nah, cukup menyisipkan tag dan atribut html berikut ini :

<marquee direction="ARAH GERAK TEKS">Letakkan teks atau konten kamu di sini</marquee>

Keterangan :

Arah Gerak :
Kiri=left
Kanan=right
Atas=up
Bawah=down

contoh :

Arah Gerak Ke Kiri...

Read more...

Bukin Menu Bar Di BLogspot

Bisa gk ya... template yang gk ada Menu Bar nya kita pasang Menu bar....??

Nah, terkadang kita dapat menemukan template yang sudah memiliki Tab Menu di bawah Headermya dan jika demikian ini lebih memudahkan kita untuk menanam Url di dalam tab Menu tersebut. Namun, ada juga template yang tidak memilikinya. Tapi jangan kwatir kita juga bisa menambahkannya kok.. coba lihat contoh gambar Tab Menu di bawah ini :

atau anda bisa langsung lihat contohnya di blog saya : elitzeroone.blogspot.com

hmm, tentunya kita harus memiliki pengetahuan dasar HTML loh... Tapi jangan khawatir saya akan ajarkan ajiannya di sini..hihi..

Begini, hal pertama yang harus kita perhatikan sebelum memasang menu bar adalah apakah template yang kita pakai sudah memiliki add Gadget di bawah kolom Navbar. Sebenarnya kita tidak harus berpatokan mesti di bawah kolom navbar saja karena kita juga dapat meletakkan Tab Menu Bar di mana saja. Misalnya di bawah Header seperti yang tampak di blog saya. ya.. tergantung cara pandang yang Elok menurut kita.
Oh..iya kalau kebetulan di template blog kita tidak menyediakan page elemen di bawah Header atau Navbar kita juga bisa sedikit memodifkasi pada html template untuk bisa menampilkan link add page element. Nah, jika sudah ada maka lanjut ke langkah berikut...

langkahnya:

1. Pastikan kita berada di dasbor pada blogger
2. Lalu Pilih Layout(Tata letak) >> Edit Html
3. Cari ( Ctrl + F) kode berikut ]]></b:skin>
4. Letakkan kode berikut tepat di atas kode ]]></b:skin>

#under_header{
margin:10px 0;
padding:1%;
width:98%;
}

5. Lau cari kode yang mirip kode di bawah ini :

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

6. Setelah ketemu Copy+paste kode berikut di bawah kode tadi :

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

7. Simpan template

**Setelah kita berhasil memodifikasi Html nya, langkah selanjutnya adalah menambahkan script Html pada page Elemen. ikuti langkah di bawah ini.

1. Pastiin kita berada di Dasbor blogger
2. Klik layout
3. Trus add a new Gadget >> Pilih Html atau JavaScript
4. Dan Masukkan Kode berikut :

<a href=http://alamataboutpageURL>HOME</a><a> | </a>
<a href=http://alamataboutpageURL>ABOUT</a><a> | </a>
<a href=http://alamathalamanURL>HALAMAN</a><a> | </a>
<a href=http://alamattipsURL>TIPS</a>

Ingat ..!!
Huruf yang saya beri tanda hijau di atas adalah url yang di tuju dari Menu yang kita buat. Sedangkan yang saya beri warna biru merupakan Judul dari Menu yang kita buat. .Nah kita bisa menyesuaikan url tersebut dengan judul menu yang kita buat.

***** Selamat Mencoba ******

Read more...

Membuat Related Post ( Postingan terkait)

Related Post atau postingan terkait sangat membantu kita atau para pembaca blog kita untuk melihat artikel lama yang berkaitan dengan artiket yang kita buat saat ini. jadi related post ini akan di tampilkan berdasarkan kategoti dari artikel atau postingan yang kita buat. Nah, untuk yang satu ini bloger tidak menyediakan fasilitas nya, maka kita bisa saja menambahkan nya pada blog kita dengan sedikit menanam kode html ke dalam template kita. Related Post akan di tampilkan di bawah postingan kita, berikut contoh screan shoot nya :

Nah, begini cara bikinnya :

1. Pastikan anda berada di dasbor blogger
2. Pilih Tata letak » Edit HTML
3. Centeng Expand Template Widget
4. Cari kode berikut : <data:post.body/>
5. Nah, kalau sudah ketemu letakkan kode berikut di bawah kode tadi

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

6. Lalu simpan.

Sedikit tambahan :
oh iya perhatikan pada langkah ke-4 , setelah kamu menemukan kode nya letakkan script pada yang tertera pada langkah ke-5 di bawah kode pertama dari kode " <data:post.body/> " atau " <p><data:post.body/></p> " terkadang kode tersebut agak berbeda sedikit dikarnakan perbedaan template. Biasanya kode tersebut ada dua jika kita telah memasang fasilitas "read more" pada template blog. kalau ternyata kita jumpai hanya 1 kode , kita bisa langsung memasang script tadi tepat di bawah kode tadi.

NB : " Ingat !! "

Kita juga dapat mengganti kata Related Post dengan kata Artikel terkait dengan mengubah tanda berwarna merah pada script di atas.

" Selamat Mencoba"

Read more...

Cara Menampilkan Komentar Terbaru ( recent comment)

Dengan adanya fasilitas recent comment ini maka akan memudahkan kita untuk melihat comentar terbaru dari pembaca artikel kita. Sebenarnya blogspot juga sudah menyediakan fasilitas ini dan saya pun sudah mencobanya tapi saya pikir-pikir tampilannya kurang kurang menarik. jadi, saya coba mencari cara bagaimana tampilannya bisa sedikit menarik. Kita dapat menampilkan recent comment dengan cara menambahkan script berikut ke elemen halaman baru ( new gadget ) :

Langkahnya :

1. Pastikan kita Berada di Dasbor.
2. Masuk Tata letak >> Elemen halaman.
3. New gadget, lalu masukkan script berikut

<script style="text/javascript" src="http://www.geocities.com/leo_host/komentar-terbaru.js"></script><script style="text/javascript">var a_rc=8;var m_rc=false;var n_rc=true;var o_rc=50;</script><script src="http://NAMABLOGKAMU.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script><br />


5. Sebelum di simpan kita harus mengEdit beberapa hal berikut :

rc=8 >> Adalah banyakknya komentar yang ingin kita tampilkan
rc=40 >> Berarti banyaknya suku kata yang ingin kita tampilkan pada tiap komentar
NAMABLOGKAMU >> ganti dengan nama blog kita

Read more...

Cara Mempostingkan Kode Html di blog

Untuk mempostingkan Kode html di blog caranya berbeda dengan mempostingkan artikel di blog. Adapun langkah-langkahnya sebagai berkut :

1. Login ke blogger kita.
2. Pilih new entri
3. Masukkan kode html yang akan di postingkan di blog anda di situs http://centricle.com/tools/html-entities/.
   
4. lalu klick Encode dan kemudian copy isi html setelah di Encode tadi ke dalam postingan blog anda.

• setelah itu kembali lagi menuju ke membuat posting dan paste hasil kode setelah di encode kan tadi di potingan.

• Kemudian coba terbitkan entri.

Read more...