Memasang Menu Drop Down Horizontal Massive Blue

Apakah anda tau apa itu menu drop down horizontal ? Menu Drop Down ini memang sangat memudahkan pengunjung blog anda ketika ingin memilih label yang cocok,dll.Cara kerjanya,ketika cursor mouse menyorot ke salah satu menu,maka dia akan menampilkan beberapa submenu lagi.Sebagai contohnya,silakan perhatikan gambar di bawah.

Untuk cara memasangnya,silakan perhatikan langkah-langkah di bawah ini :
1. Login ke Blogger - Rancangan - Edit HTML
2. Cari kode  ]]></b:skin>
3. Letakkan kode berikut tepat di atas kode  ]]></b:skin>

menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

4. Simpan Tempate.Ke Elemen Laman - Add a Gadget - HTML/JavaScript

5. Paste kode berikut :

<div class="menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 2.1</a></li>
<li><a href="#">Sub Menu 2.2</a></li>
<li><a href="#">Sub Menu 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.2</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a> </li> 
<li><a href="#">Menu 5</a> </li> 
</ul>
</div>

Keterangan :

Ganti tulisan berwarna biru # dengan URL yang anda inginkan

Ganti tulisan berwarna merah sesuai keinginan anda

Selesai

Semoga Bermanfaat

LIVE DEMO

Sumber Artikel : http://jogoyitnan-free.blogspot.com

»»  Baca Selengkapnya...

Cara Memasang Auto Read More di Blog

Nah,pada posting kali ini,saya akan berbagi kepada anda tentang cara membuat auto read more di blog.Apa Auto Read More itu ? Auto Read More adalah suatu kode script yang dapat memotong semua artikel anda secara otomatis pada halaman depan (homepage).Misalnya,posting anda yang semula 5 paragraf,akan terpotong menjadi 1 paragraf.Auto Read More ini sangat berguna bagi blog anda sehingga loading blog anda menjadi ringan.Untuk memasangnya,silakan perhatikan langkah-langkah berikut :

1. Login ke Blogger - Rancangan - Edit HTML - Centang Expand Template Widget
2. Cari kode </head>,kemudian copy-paste kode script berikut ini dan letakkan di atas kode </head>
   

   <script type='text/javascript'>var thumbnail_mode = &quot;float&quot; ;summary_noimg = 250;summary_img = 250;img_thumb_height = 120;img_thumb_width = 120;</script>
   <script type='text/javascript'>//<![CDATA[/******************************************Auto-readmore link script, Versi 2.2 (khusus blogspot)
   (C)2011 oleh Billy
   kunjungi http://billyhalimblog.blogspot.com untuk mendapat tips & trik********************************************/function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}
   function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(img.length>=1) {imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ = summary_img;}
   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]></script>

3. Lanjutkan dengan mencari kode <data:post.body/>. Jika sudah kemudian hapus dan ganti dengan kode berikut.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read Full Post - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan :

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Read Full Post : bisa diganti dengan kata kata lain, seperti Baca Selengkapnya, Read This Post, dsb.


Selesai


Semoga Bermanfaat


http://jogoyitnan-free.blogspot.com

»»  Baca Selengkapnya...

Cara memasang widget Barclays Premier League Score

Apakah anda suka nonton pertandingan Premier League yang diselenggarakan oleh 20 tim ? Jika suka,pasti dari anda ingin melihat skornya dimana saja terutama di blog anda.Nah,untuk memasang tabel skornya,silakan copykan kode script di bawah ini di gadget HTML / JavaScript :

<center><script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('ea05e5b1-0380-4c88-9011-4c793e7aebe0');</script>
<noscript>Get the <a href="http://www.widgetbox.com/widget/PremierLeagueTable">Premier League Table</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://support.widgetbox.com/">More info</a>)</noscript></center>

Selesai

Maka tampilannya akan seperti ini : (perlu loading sebentar,bukan tidak muncul)




Semoga Bermanfaat

»»  Baca Selengkapnya...

Cara Memasang Kotak Admin di Bawah Artikel

Apakah anda pernah melihat blog orang lain yang di bawah artikelnya terdapat sebuah kotak yang berisi biodata tentang penulis blog / artikel ? Kalau pernah,pasti anda ingin juga memasang di blog / site anda.Jangan khawatir,saya akan membantu anda untuk memasangnya.Nah,jadi untuk memasangnya,silakan perhatikan langkah-langkah berikut ini :

1. Blogger - Rancangan - Edit HTML - Centang Expand Template Widget
2. Cari kode <div class='post-footer'>
3. Copy-Paste kode script di bawah ini dan letakkan di atas kode  <div class='post-footer'>

<!-- Kotak Admin -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='admin-tulisan'>

<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4>

<div class='kontainer'>

<img src=' http://www.metalmusicarchives.com/images/covers/avariel-no-end-in-sight(demo)-20110719103608.jpg'/>

Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://rayhanzhampiet.blogspot.com/2011/11/cara-membuat-kotak-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>

<div style='clear:both;'/>

</div>

</div>

</b:if>

<!-- Kotak Admin -->

4. Kemudian cari lagi kode ]]></b:skin> ,dan copy-paste kode script di bawah ini di atasnya,Jika gagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode<data:post.body/>.

.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

Keterangan : 
Pada langkah ke tiga,yang berwarna merah,silakan anda ganti dengan deskripsi blog anda.Yang berwarna biru,silakan anda ganti foto yang akan ditampilkan pada kotak admin tersebut.Yang berwarna orange,silakan anda dengan kata-kata yang anda inginkan.

 Untuk jenis font, warna background dan border juga dapat sobat ganti/edit sesuai keinginan. 


Selesai


Semoga Bermanfaat


Sumber: Hompimpa Alaihum Gambreng

»»  Baca Selengkapnya...

Tips Memasang ChatBox Tersembunyi di Blog

Dalam posting kali ini,saya akan berbagi kepada anda cara memasang chatbox Tersembunyi di sidebar blog.ChatBox ini sangat berguna bagi blog anda ketika pengunjung ingin meninggalkan pesan kepada anda.Cara kerja dari ChatBox Tersembunyi ini sangat mudah,hanya buka dan tutup saja.Contohnya,ChatBox blog saya.Anda bisa melihatnya sebagai demo.Untuk cara memasangnya,silakan perhatikan langkah-langkah di bawah ini :

1. Login ke Blogger - Rancangan 
2. Klik Add a Gadget
3. Pilih HTML / JavaScript
4. Kemudian Copy-Paste kode di bawah ini di HTML / JavaScript anda.Yang berwarna merah,silakan anda ganti dengan kode script chatbox anda,kode scriptnya dapat diperoleh dari ShoutMix atau CBox.Yang berwarna biru,silakan anda ganti URL gambar tab ChatBox-nya.

<!-- right hidden chatbox by http://billyhalimblog.blogspot.com/ START -->

<style>

#hcl {

position:fixed;

top:60px;

left:3px;

z-index:+1000;

}

* html #hcl {position:relative;}

.hcltab {

height:120px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj6NNi9hZHxgqDl_JruZ1rnwBUGjR_lPbeYSOhaiRZCWYDEgg_RSPhY4T9OE7uFVM9wKaFE5XI-zrG8WgQDlnRVE4DmDrppiLJvZVpZJOBsBf-1bDBEmEMGfh9R4Cf9UwjYI_BW0rZxoe_/s1600/cbred.png') no-repeat;

}

.hclcontent {

float:left;

border:6px solid #008232;

background:#ff9900;

padding:10px;

}

.hc-credit {font-size:9px}

.hc-credit a {text-decoration:none}

</style>

<script type="text/javascript">

function showHidehcl(){

var hcl = document.getElementById("hcl");

var w = hcl.offsetWidth;

hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);

hcl.opened = !hcl.opened;

}

function movehcl(x0, xf){

var hcl = document.getElementById("hcl");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

hcl.style.left = x.toString() + "px";

if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}

}

</script>

<div id="hcl">

<div class="hclcontent">

<!-- Letakkan Script ChatBox anda disini -->

<br />
Mau seperti ini?<br />
Click disini--->
<a href="http://jogoyitnan-free.blogspot.com/2011/07/cara-mudah-membuatmemasang-chatbox.html">
Tutorial Blog

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<span style="float:right">

<a href="javascript:showHidehcl()">

[Hide]

</a>

</span>

</div>

</div>

<div class="hcltab" onclick="showHidehcl()"> </div>

</div>

<script type="text/javascript">

var hcl = document.getElementById("hcl");

hcl.style.left = (30-hcl.offsetWidth).toString() + "px";

</script>

<!-- right hidden chatbox by http://billyhalimblog.blogspot.com/ END -->

Keterangan : 
Tulisan yang berwarna merah,silakan anda ganti dengan kode script chatbox anda,kode scriptnya dapat diperoleh dari ShoutMix atau CBox.Yang berwarna biru,silakan anda ganti URL gambar tab ChatBox-nya.Tulisan berwarna orange adalah ukuran-ukuran pada chatbox tersebut seperti top : jarak chatbox dengan paling atas blog. height : tinggi chatbox, width : lebar chatbox, border : ukuran border (garis tepi) chatbox,border solid : warna border, background : warna background chatbox.


Berikut adalah URL untuk gambar tab ChatBox-nya : 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV7F5kxJ-_Y4qITpEFHVSFfxFO-DZj7-rS1ErQxwj60m5Gbr8f41oV1en9FuFbvMsO2YObPWzieyfiv9kvgMbxTPGTyQ5VBy65h4ojHJT1SnQFkSbH437bCgLyW7MvPjRprK251aKV0Naz/s1600/cbblue-2.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvKQidWRrCBcAHug6ZtLdFSvmLg_WM_FlaAO4X9Oi6ETEgZgdzvvvWUJhSgyGZwf8UF423si-h4oExVPS5mN8PegNGetELj7vf7IwBWTCPDlOHtgNz4ioMQIKq11aW5T23ABH0sXgfq6w/



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLcG6sH1CwxK588KLDj592BhQ9iSpH_oDFyqknHybuL-KpI3I2iBb3V18bjw1s4Pe1MECIrOJ4GXq_f1fuky515S6QrtEp5b2sZSTiEXHTSn0MBJWi957auG3CdAcBfqH29NNbMmod8Jaq/s1600/cbgreen.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-57J4jiRbhFB3lhh3gAcQ49v0DULGSvG3DmlmXorKkG5qMSTs9-2IzV2AZBN_oFkRFVU4PJ9ebNxgFTNRIzpBuHScZyGxWWXDqA54NwEnAX0GJ3mEdL6tyzIpytrIUwunQVg_Vxsuii6E/



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj6NNi9hZHxgqDl_JruZ1rnwBUGjR_lPbeYSOhaiRZCWYDEgg_RSPhY4T9OE7uFVM9wKaFE5XI-zrG8WgQDlnRVE4DmDrppiLJvZVpZJOBsBf-1bDBEmEMGfh9R4Cf9UwjYI_BW0rZxoe_/

Selesai

Semoga Bermanfaat

Sumber : http://jogoyitnan-free.blogspot.com

»»  Baca Selengkapnya...

Tips Memasang Artikel Terkait / Related Post di Blog

Apakah anda pernah melihat Artikel Terkait / Related Post di blog orang saat anda blogwalking ? Kalau pernah,pasti anda ingin juga memasangnya di blog anda.Nah,untuk memasangnya,silakan perhatikan langkah-langkah di bawah ini :

1. Login ke Blogger - Rancangan - Edit HTML - Centang Expand Template Widget
2. Cari kode  <data:post.body/></b:if>
3. Copy-Paste kode di bawah ini di bawah kode  <data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
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;albri&#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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

4. Yang berwarna merah,silakan anda gantikan dengan kata-kata yang diinginkan anda.
5. Kemudian cari kode ]]></b:skin>,dan copy-paste kode di bawah ini di atas kode ]]></b:skin>

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

Selesai

Semoga Bermanfaat

Sumber Artikel : http://bangkewok.blogspot.com 

»»  Baca Selengkapnya...