Membuat Recent Post Thumbnail Bergerak

Tampilan blog yang atraktif dan terlihat profesional menjadi daya tarik tersendiri bagi visitor. Salah satu upaya untuk itu dengan menampilkan Recent Post, fungsinya agar visitor lebih mudah melihat-lihat postingan melalui cuplikannya.

Setelah memposting Cara membuat Related Post yaitu widget yang berguna untuk mengarahkan pengunjung pada postingan yang sejenis, berikut ini cara membuat recent post thumbnail bergerak di blog :

1. Login ke akun blogger.com.
2. Pilih "Rancangan" atau "Design".
3. Pilih "Add gadget" pada bagian "Page elements" dan lalu pilih "html javascript".
4. Isikan judul widgetnya dan copas kode recent post di bawah ini ke kotak tersebut dan ganti tulisan merah dengan alamat blog sobat.

<center><style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 0;
</script> <script src="http://techno-herry.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center>

Kemudian "Save" dan lihat hasilnya.

Selamat mencoba...

Membuat Menu Navigasi Horizontal Drop down

Memenuhi janji saya atas permintaan seorang teman, berikut ini saya coba sajikan cara membuat menu navigasi horizontal dengan tampilan drop down menu.


Langkah-langkahnya sebagai berikut :

1.Login Blogger >> Rancangan >> Edit HTML >> Copy kode dibawah ini dan taruh di atas kode mirip ]]></b:skin>

/* Menu Horizontal Dropdown */
#menuwrapperpic {background:#000 ;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper {width:970px;margin:0 auto;height:34px;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:'Arial', serif;}
#menubar a {display: block;text-decoration: none;padding: 9px 10px 8px 10px;font:bold 13px/15px Arial,serif; text-decoration:none;color: #fff;border-right:1px solid #444}
#menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAeUr4njkEOy1q6zo75U2Q9TAKHv2g4JM2Kb7cCIBWi908sKfaZCZUhUub8nNakmU8wfYmAZJ4lLWmF5lY6ek1drdB85lxuQ3SmJ8qyXk-R0aj_t_ARpGrSDbyAApLDOi1VJZjXFIy5SR0/ s1600/arrow_black_bottom.gif);background-repeat: no-repeat;background-position: right center; padding: 9px 20px 8px 10px;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:170px;}
#menubar ul li a {text-align:left;color: #fff;padding: 8px 13px;font-size: 13px;font-weight:normal;text-transform:none;font-family:Arial;border:1px solid #444;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#000;}
#menubar li ul {-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 rgba(0, 0, 0, 0.6);}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#fff;color: #004276;text-decoration:underline;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color: #edfdfd;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr { display:block; font-size: 1px; height: 0px; line-height: 0px; margin:0px 0; }
#menubar ul a:hover {background-color: #fff!important;color: #004276 !important;text-decoration:none;}
#menubar li.selected a, #menubar li.selected a:visited {border-right:1px solid #444}
#menubar li.selected a:hover {background:none;color:#F7D528;}

2. Berikutnya silakan cari kode , lalu taruh kode di bwah ini tepat di atas </head>

<!--Menu Horizontal -->
<script type='text/javascript'>
//<![CDATA[ function Menubar(){ //v1.1.0.2 by PVII-www.projectseven.com if(navigator.appVersion.indexOf("MSIE")==-1){return;} var i,k,g,lg,r=/\s*hvr/,nn='',c,cs='hvr',bv='menubar'; for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){ lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){ lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs; this.className=cl;};lg[k].onmouseout=function(){c=this.className; this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}} //]]> </script>
<!--[if lte IE 7]>
<style>
#menuwrapper, #menubar ul a {height: 1%;} a:active {width: auto;}
</style> <![endif]-->

3. Setelah selesai kita akan menambahkan dan memunculkan navigasinya. Caranya dengan menaruh kode ini di bawah <body>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'> <li class='selected'>
<a href='/'>Home</a></li>
<li><a href='#'>Peristiwa</a></li>
<li'><a href='#'>Hiburan</a></li>
<li><a href='#'>Sport</a> <ul>
<li><a href='#'>Bola</a></li>
<li><a href='#'>Moto GP</a></li>
<li><a href='#'>F1</a></li>
</ul>
</li>
<li><a href='#'>Politik</a></li>
<li><a href='#'>Hukum</a></li>
<li><a href='#'>Kesehatan</a></li>
<li><a href='#'>Tekno</a></li>
<li><a href='#'>Tutorial</a> <ul>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
</ul>
</li>
<li><a href='#'>Lowongan Kerja</a></li>
<li><a href='#'>Pendidikan</a></li>
<li><a href='#'>More</a>
<ul>
<li><a href='#'>Editorial</a></li>
<li class='hr'></li>
<li><a href='#'>Off Topic</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'></div>
</div>


Catatan: Silakan ganti "#" link-link di atas dengan link artikel milik anda dan nama menu di blog.

Cara membuat Float Image

Sharing saya kali ini tentang Cara membuat Float Image (gambar melayang) yang akan selalu tampil meskipun scrollbar bergulir di blog Anda. lihat contoh. Anda dapat menempatkan gambar, widget, jam dll.

Langkah demi langkah untuk membuat float image.

1. Login ke blogger kemudian klik "Layout ->> Edit HTML
2. Cari kode ini ]]></ b: skin> kemudian letakkan kode di bawah ini di atasnya.

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

3. Teks tebal adalah posisi Float Image. Anda dapat mengubahnya dengan "top" "bottom",, "left", "right"
4. Langkah selanjutnya adalah menempatkan kode di bawah ini sebelum tag </ body>

<div id="float_corner">
<a href="http://techno-herry.blogspot.com"> <img src = "
http://blogoholic.info/files/soniclari.gif "border =" 0 "/> </ a>
</ div>

5. Jika Anda ingin mengisinya dengan widget, ubah kode URL gambar dengan kode widget Anda.
6. Simpan dan preview blog Anda.

Demikian Cara membuat float image di blogger...

Cara membuat Related Post pada Blogger

Kali ini saya ingin berbagi Cara membuat Related Post atau Related Article pada blog yang letaknya di bawah postingan atau artikel yang kita buat. Widget ini akan sangat membantu pembaca yang telah selesai menyimak artikel untuk menemukan artikel terkait. Dengan demikian blog kita makin sering mendapatkan hits. Link related post ini berdasarkan pada label atau kategori artikel.

Berikut ini Cara membuat Related Post pada Blog :
Login ke Blogger dengan account anda.
Setelah berada di Halaman Dasboard Blogger, lalu :

1. Klik Rancangan (Layout), lalu klik tab Edit HTML
2. Klik (centang) chekckbox Expand Widget Template
3. Cari Tag </head> (gunakan ctrl+F untuk pencarian cepat)
4. Lalu Copy code script berikut ini diatas Tag </head>:

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjfZ-An0UI4Ejj-q0Fh5iUJby2xf1nKAM_E8DID5XiiJba-qnxF-TIQWBKkNKuEehHHVq2gmp9F4D_efrePOb4gQiW25RCic6NBd7v9lWT5l_IIpSPkokygGyZL-AkpAtUxC0Yt9RHYnE/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://techno-herry.blogspot.com/' type='text/javascript'/>

5. Sekarang cari <data:post.body/>
6. Lalu sisipkan code script berikut ini tepat dibawahnya

<b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>

7. Simpan Template

Lihat hasilnya...

Demikian tips Cara membuat Related Post pada Blog.
Selanjutnya simak pula Cara membuat Recent Post

Memfrase Kode HTML

Jika anda ingin memberikan tips untuk menampilkan banner atau menampilkan Kode HTML di postingan, anda harus merubah kode-kode tersebut agar menjadi text yang bisa dibaca. Karena jika anda langsung meng-copy kode tersebut lalu menaruhnya di postingan hasilnya tidak akan ditampilkan.

Dibawah ini saya sediakan box untuk mempaste code yang akan di convert ke bentuk text :




Silahkan dicoba..