Membuat Label Menjadi Flash Animasi

Cara membuatnya sebagai berikut :
1. Pilih Tata Letak > Edit HTML
2. Centang Expand Template Widget
3. Cari kode di bawah ini

    <b:section class='sidebar' id='sidebar' preferred='yes'>

 4. Kalau sudah ketemu taruh script berikut ini di bawahnya.
<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='http://sites.google.com/site/ruangsc/enes/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a></div> <script type='text/javascript'> var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "245", "180", "7", "#333333"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0xffffff"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Yang dapat disesuaikan dengan template anda:
"240", "300"
240 adalah lebar flash animasi 300 adalah tinggi flash animas.

Read More

07.37 | 0 komentar

Membuat Artikel Terkait Bergambar Berjalan

Jika yang biasanya hanya judul yang terkait dengan yang kita buka (baca) tapi kali ini kita akan membuat tulisan terkait dan thumbnail yang ada di postingan yang terkait dengan tulisan (artikel) yang kita baca.

Artikel terkait yang disertai thumbnail (gambar kecil) tidak hanya diam, tetapi berjalan kesamping, menampilkan thumbnail disertai dengan judul tulisan (artikel). Thumbnail Related Posts (artikel terkait bergambar) ini akan menghemat banyak temaptdi blog kita, ya memang karena artikel terkait bergambarnya dibuat berjalan sehingga kita juga bisa membuat lebih banyak artikel terkait bergambar yang ditampilkan.

Cara Membuat Artikel Terkait Bergambar Berjalan
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya

<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

7. Cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas
<!-- Marquee Serbablog Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop> <h3><b>Related Posts</b></h3> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=10; var relatedpoststitle=""; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> </div><div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html' style='display:none;'>Thumbnail Related Post</a> <a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a> </b:if> </b:if> <!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

9. Kita juga dapat menganti beberapa kode css, seperti berikut ini

var maxresults=10;

Berarti artikel terkait yang akan kita tampilkan adalah 10

var relatedpoststitle="Thumbnail Related Post";

Judulnya adalah Thumbnail Related Post

Read More

07.26 | 2 komentar

Membuat Artikel Terkait dan Thumbnails

Cara Membuatnya
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>

6. Taruh (copy paste) kode berikut ini di atasnya
<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

7. Cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas.
<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

9. Kita juga dapat menganti beberapa kode css, seperti berikut ini

var maxresults=5;

Berarti artikel terkait yang akan kita tampilkan adalah 5

var relatedpoststitle="Related Posts";

Judulnya adalah Related Posts

10. Simpan Template jika sudah selesai.

Read More

07.04 | 1 komentar

Membuat Scroll di Area Komentar

 

Ini untuk kita yang menginginkan blog kita tampil dengan lebih hemat tempat. Artinya tidak terlalu panjang blog kita memakan tempat. Saat tulisan kita menarik, dan banyak komentar yang masuk, maka yang terjadi adalah kita harus memutar gerigi mouse sampai ke bawah sekali.

Tentunya kita menginginkan blog kita tampil dengan simple, tidak terlalu panjang atau lebar. Salah satu cara yang dapat kita lakukan adalah dengan membuat scroll pada area komentar blog kita. Dengan demikian blog kita akan lebih hemat tempat. Seseorang yang ingin berkomentar di postingan kita yang sudah banyak komentarnya tidak harus mengeser sampai ke bawah.

Cara Membuat Scroll di Area Komentar
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini <dl id='comments-block'>
6.  Setelah ketemu, taruh kode berikut ini di atasnya.

<div style='overflow:auto; width:ancho; height:400px;'>

7. Cari kode berikut ini </dl> dan taruh kode </div> di bawahnya.
Untuk lebih lengkapnya seperti di bawah ini

<div style='overflow:auto; width:ancho; height:300px;'> <dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <a expr:name='data:comment.anchorName'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <b:if cond='data:comment.author == data:post.author'> <dd class='owner-Body'> <p><data:comment.body/></p> </dd> <b:else/> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> </b:if> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl> </div>

8. Kode ini <div style='overflow:auto; width:ancho; height:300px;'> dan </div> paling bawah adalah kode yang kita ubah. Simpan Template jika sudah selesai

Read More

05.40 | 4 komentar

Cara Membuat loading Gambar

Membuat loading gambar seperti yang ada di sudut kiri atas blog ini,saya yakin banyak yang sudah bisa membuatnya, karena tidak sulit untuk membuatnya, tapi saya tetap mencoba membuat postingan ini, barang kali ada blogger pemula yang belum tau, boleh ikuti langkah pembuatannya dibawah ini :

  1. Login akun Blogger anda terlebih dahulu.
  2. Pilih Layout untuk memulai pengeditan pada Blog yang diinginkan
  3. Pilih Rancangan, Edit HTML, cek/centang Expand Widget Template
  4. Cari kode <body>, jika sudah ketemu hapus, ganti dengan script dibawah ini

<body onLoad='waitPreloadPage();'> <!-- Loading with Image --> <div id='prepage' style='display:scroll;position:fixed;top:50px;left:10px'><img border='0' src='https://www.mobyko.com/skin/images/loading.gif'/></div> <!-- Ends Loading with Image -->

  5. Cari kode </body>, jika sudah ketemu hapus, ganti dengan script dibawah ini

<script language='javascript' src='http://pageprotection.googlecode.com/files/loading.js' type='text/javascript'/></body>

  6. Selesai sudah, Simpan Template, mudahkan ?,,

Keterangan :
URL gambar https://www.mobyko.com/skin/images/loading.gif ,yang ini.
dapat diganti sesuai dengan selera anda.

Read More

04.00 | 3 komentar