Ketika sobat mengisi Guestbook (di sini Cbox) coba tulis sesuatu secara terus menerus, pasti dibatasi. Kalau tidak salah batasnya 200 karakter. Nah, ada trik untuk mengatur batasannya, atau bahkan membuat tidak terbatas. Trik ini tidak dapat dilakukan di script CBOX pada blogger, hanya bisa saat menggunakannya. Berikut triknya,

1.  Kunjungi Guestbook dari Cbox (karena yang lain belum saya coba) di suatu blog

2.  Pada inputbox message, klik kanan > Inspect Element / Periksa Element






















3.  Cari kode berikut (Sebenarnya otomatis sudah terblok):

<input type="text" maxlength="200" name="pst" autocomplete="off" size="9" value="message" class="frmtb" onfocus="frmfocus(this, 'message')" onblur="frmblur(this, 'message')" style="width: 164px;"> 

Ganti angka berwarna merah, klik 2 kali pada Maxlength="200" terserah sobat mau berapa. Atau supaya tidak terbatas, hapus saja script "Maxlength="200"-nya...

4.  Klik tombol silang di pojok kanan atas dan lihat hasilnya!


Cukup sekian tutorial singkat ini, semoga bermanfaat.
*Doakan saya yang sedang UN yah sob :)

Sebelum-sebelumnya saya selalu post award, kali ini tidak. Artikel kali ini berupa tutorial Membuat Menu Navigasi DropDown bersama Guestbook di Menunya (DropDown). Cara ini sangat unik dan juga merupakan hasil Experimen saya. Untuk contoh lihat di Blog Downloader saya, masih sepi -_- >> [Maaf blognya hancur, menunya juga hilang]



Dengan Gustbook menu dropdown ini akan tambah mempercantik blog sobat dan berkesan canggih. Memang mirip dengan Guestbook melayang, tapi guestbook melayang terletak di pinggir blog. Karena Guestbook melayang sudah terlalu Mainstream haha... Cekidot aja sob caranya...

1. Pertama, Login ke akun Blogger Sobat, klik disini

2. Car kode semacam ini

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Fast and Simply Download (Header)' type='Header'/>
</b:section>

Atau

Buat widget HTML/Javascript baru, lalu letakkan kode berikut, tenang saja Engga bakal ngeberatin kok :)

<style>

    /*------ CSS3 Horizontal Drop Down Menu---------*/

    #CSS3-menu, #CSS3-menu ul {margin: 0;padding: 0;list-style: none;}

#menu-1 {
background:transparent;
width:970px;
margin:0 auto;
}
 #CSS3-menu { width: auto;margin: 0px auto;border: 1px solid #222;background-color: #111;background-image: -moz-linear-gradient(#444, #111);background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;}

    #CSS3-menu:before,

    #CSS3-menu:after {content: &quot;&quot;;display: table;}

    #CSS3-menu:after {clear: both;}

    #CSS3-menu {zoom:1;}

    #CSS3-menu li {
     float: left;
    border-right: 1px solid #222;
    -moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;}

    #CSS3-menu a {
float: left;
padding: 8px 20px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;}

    #CSS3-menu li:hover &gt; a {color: #fafafa;}

    *html #CSS3-menu li a:hover { /* IE6 only */
    color: #fafafa;}

    #CSS3-menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 9999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;}

    #CSS3-menu li:hover &gt; ul {
    opacity: 1;
    visibility: visible;
    margin: 0;}

    #CSS3-menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0; /*IE6 only*/
    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    box-shadow: -1px 0 0 rgba(255,255,255,.3);}

    #CSS3-menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;}

    #CSS3-menu ul li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

    #CSS3-menu ul a {
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }

    #CSS3-menu ul a:hover {
    background-color: #0186ba;
    background-image: -moz-linear-gradient(#04acec, #0186ba);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background-image: -webkit-linear-gradient(#04acec, #0186ba);
    background-image: -o-linear-gradient(#04acec, #0186ba);
    background-image: -ms-linear-gradient(#04acec, #0186ba);
    background-image: linear-gradient(#04acec, #0186ba);
    }

    #CSS3-menu ul li:first-child &gt; a {
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    }

    #CSS3-menu ul li:first-child &gt; a:after {
    content: &#39;&#39;;
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
    }
    #CSS3-menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
    }
    #CSS3-menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
    }
    #CSS3-menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent;
    }

    #CSS3-menu ul li:last-child &gt; a {
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    }
    </style>
    <ul id='CSS3-menu'><div id='menu-1'>
    <li><a href='#'>Home</a></li>
    <li>
    <a href='#'>Contact Me</a>
    <ul>
      <li><a href='#'>Facebook</a></li>
      <li><a href='#'>Twitter</a></li>
    </ul>
    </li>
   <li><a href="#">About Me</a></li>
<li class='guestbook'><a>Guestbook</a>
<ul><div class='guestbook'>
<li><a>MASUKKAN KODE GUESTBOOK ANDA DI SINI, PARSE DULU KODENYA SEBELUM DIMASUKKAN!</a></li></div></ul></li>
    <li><a href='#' tittle='Login to your Account Blogger'>Login</a></li>
    </div></ul>

3. Ganti tulisan yang ditebalkan dengan Kode Guestbook sobat yang Yang Telah Diparse! Selanjutnya silahkan ganti-ganti tujuannya dan teksnya. Sobat mengerti kan? Kalau tidak, silahkan komentar di bawah :)

*PENTING: Bila Tutorial di atas gagal, atau tidak berhasil/cacat, silahkan laporkan dengan berkomentar di bawah! Sebab tutor diatas ini merupakan hasil experimen

Ini merupakan salah satu contoh
Hover Css Box Shadow. Cobalah
sobat sentuh teks ini dan lihat hasilnya!

Coba Sobat sentuh teks ini dengan pointer dan lihat hasilnya!

Pesan yang tertera bila sobat mengunjungi halaman yang tak ada di Blog sobat ternyata bisa di ubah sesuai yang kita mau. Coba deh, sobat ketikkan halaman yang tak ada di Blog ini, pasti pesannya lain. Contoh: http://www.BlogSeno.com/abcdefgh.html atau apa saja. Bila pesan biasanya adalah "Maaf, laman yang Anda cari di blog ini tidak ada." Menjadi "Laman yang Sobat cari tidak ditemukan. Bila memang sebelumnya ada, Teliti lebih detail alamat yang sobat Ketik. Atau laporkan pada Admin melalui Contact Us, Klik Disini" . Inti di tutorial ini adalah, mengubah pesan defaultnya menjadi sesuka sobat.



Mudah 'kan? Ya semoga bermanfaat :)

Ul Li atau Bullet Lists atau Symbol Lists atau Lists sebenarnya apa sih? Ya, Ul Li termauk kode HTML yang memberikan tampilan list dan (umumnya) terdapat gambar di samping teks list. Contoh:

• Contoh 1
• contoh 2
• contoh 3 

Sebelumnya BlogSeno.com telah memberikan Tutorial Cara Membuat Form Search Keren. Nah, kali ini saya akan membahas Tutorial yang sama dengan artikel tersebut, tetapi yang ini Versi 2. Sama seperti form search yang ada pada blog ini sekarang (28/11/12). Menurut saya yang ini lebih rapi dan bagus. Form search V.2 ini merupakan hasil editan dari yang V.1. Jika ingin mencoba yang form search V.1 bisa klik disini.

1. Langkahnya sama dengan Tutorial yang versi satu, hanya script saja yang  berbeda. Copy kode di bawah ini ke Widget HTML/pada Navbar melalui HTML edit (Disarankan)

<div id='search-nav'>
  <form action='http://bloganda.blogspot.com/search'>
  <input class='text' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Search...&apos;;}' onfocus='if (this.value == &apos;Search...&apos;) {this.value = &apos;&apos;;}' size='30' type='text' value='Search...'/>
  <input alt='Search' id='searchsubmit' src='http://cdn1.iconfinder.com/data/icons/KDE_Crystal_Diamond_2.5_Classical_Mod/22x22/actions/find.png' type='image' value=''/>
  </form>
</div>  

 2. Lalu taruh kode berikut di bawah kode ]]></b:skin> 

<style> #search-nav {
float: right;
background: white;
border: 1px solid black;float: left;
background: white;
border: 1px solid black;
margin-left: 24px;
}
#search-nav .text {
margin-bottom: 2px;
margin-left: 5px;
}
#search-nav input {
background: transparent;
border: none;
color: black;
width: 180px;
height: 15px;
margin-top: 2px;
margin-bottom: 2px;
}
#search-nav #searchsubmit {
width: auto;
height: 17px;
margin-bottom: -1px;
} </style>

3. Simpan dan lihat hasilnya! Semoga berhasil :)

Dikesempatan ini BlogSeno memposting Cara jitu menghilangkan Readmore di Laman. Perhatikan baik-baik jika Sobat menambahkan sistem Readmore di Blog sobat, di Lamannya juga ada Teks Readmorenya 'kan? Seharusnya tidak ada. Nah, mungkin juga ada yang sudah tak ada. Untuk yang ada Teksnya, ada cara jitu menghilangkannya lho!

</b:if>

7. Simpan dan lihat hasilnya. Sangat mudah 'kan sob, semoga info ini bermanfaat :) 

Pop Up like facebook/subscribe masih jarang digunakan oleh berbagai blog. Biasanya para Noob Blogger akan menggunakan Pesan Alert saat pertamakali masuk blog. Sebenarnya, pesan seperti ini tidaklah bagus. Karena setiap ke halaman manapun akan muncul, dan hanya berupa pesan yang tampilannya tidak bisa dimodif. Setelah saya "Survey" di Mbah Google akhirnya saya menemukan tutorial "Membuat Pop up widget Like facebook di blog". Lalu saya praktekan dan ada hasilnya. Nah, karena itu saya tulis tutorial yang mirip seperti tutorial yang saya temukan yang tentunya hanya Intinya saya yang sama. Pop up di sini tidak hanya bisa untuk like facebook saja, bisa yang lainnya. Seperti Subscribe, pesan, login, daftar, apa saja. Selebihnya lagi Widget ini dapat dimodif, tidak seperti Pesan Alert. 

1. Masuk ke akun blogger sobat.

2. Masuk ke halaman "Template"

3. Klik "Edit HTML" > klik "Lanjutkan"

4. Copy dan Taruh kode berikut tepat diatas script "</head>"

<style media='all' type='text/css'>
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:0px solid #cecece;
z-index:1;
}
#popupContact{
margin-top: 10%;
margin-left: 35%;
display: none;
position: fixed;
_position: absolute;
height: 369px;
width: 390px;
background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSo-anzeac_VZn-9-EEQfpgskaZ7h4d-EycSUp6YffIONP4CzBGhAuVHw);
border: 4px solid black;
z-index: 2;
padding: 12px;
background-size: 100%;
font-size: 13px;
}
#popupContact button {
background:black;
color:white;
border:2px solid #ccc;
#popupContact h1{
text-align: left;
color: black;
font-size: 15px;
font-weight: 700;
border-bottom: 0px dotted lightGrey;
padding-bottom: 2px;
margin-bottom: 20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
Right:12px;
Top:4px;
position:absolute;
color:#FF0000;
font-weight:700;
float:right;
}
<script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://yensdesign.com/tutorials/popupjquery/popup.js' type='text/javascript'/>
  

5. Taruh kembali script berikut di bawah "<body>"

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='popupContact'>
<a id='popupContactClose'><img src='http://www.teknojurnal.com/wp-content/uploads/2011/07/1254211922505px-OS_X-Logo.svg_.png' width='15px'/></a>
<h1>Selamat datang di BlogSeno!</h1>
<center>
Pesan Sobat di sini!
Script (Subscribe, Like Facebok box, dll)</center>
</div>
<div id='backgroundPopup'/>
</b:if> 

NB: Ganti teks Merah dengan pesan sobat, apa saja. Lalu ganti teks hijau dengan dengan script apa saja. Selamat Mencoba!
NB Sangat Penting!!: Jika ingin Pop up muncul terus menerus saat dibukannya Homepage, ganti script <body> menjadi <body onLoad='loadPopup()'>
     

Hasil:

Apa itu border radius? Kalau border, pasti sobat tahu kan? Nah, hampir mirip dengan border itu. Border radius merupakan salah satu script CSS. Sedangkam fungsinya yaitu membuat lengkungan pada suatu item Html. Contohnnya, widget blog. Bentuknya kotak, tetapi apabila ditambahi border radius maka pada ujung-ujung kotak widget tersebut akan berubah. Berikut script Border-radius.

#nama id widget/yang lainnya {
border-radius:10px;}

Coba perhatikan pada script berwarna merah. Ya, itulah script border radius. Dari script tersebut, maka hasilnya seperti ini.


Alihkan perhatian ke setiap sudut kotak diatas. Sudut-sudut tersebut tidak lancip, benar kan? Sedikit tumpul. Jumlah ketumpulan tersbut adalah 10px. Jika sobat menambahi nilai 10px menjadi lebih tinggi maka setiap sudut akan semakin tumpul.

Ketumpulan pada SATU (1) sudut saja

Pada gambar diatas, semua sudutnya tumpul. Tetapi, bagaimana caranya agar hanya 1, 2, / 3 sudut saja yang tumpul? Lihat caranya di bawah ini!

Perhatikan.

1. border-top-right-radius: 0px;
2. border-top-left-radius: 10px;
3. border-bottom-left-radius: 0px;
4. border-bottom-right-radius: 10px;

border-radius: 0px 10px 0px 10px 

Contoh:

1. border-radius: 10px 0px 10px 0px;

Maka hasilnya:



Selanjutnya coba-coba saja dari keempat angka tersebut dan lihat hasilnya. Ok cukup sampai di sini, semoga bermanfaat.

Seperti yang sobat lihat setelah artikel ini, yaitu Widget Related post berwarna biru. Keren 'kan? Sebenernya, itu widget bawaan template yang lama (Sebelum template Trick-collection menjadi BlogSeno template Yellow =D ) Saya sebut itu widgetnya lumayan bagus. Cara membuatnya mudah setelah saya lihat dan teliti scriptnya.



1. Pertama, login dan masuk pada template rancangan di Blogger sobat > Klik Lanjutkan



2. Klik Expand Template Widget dan cari script dengan menekan tombol CTRL + F. Ketikkan <div class="post-footer"> . Bila telah ketemu, Copy dan paste script berikut tepat di bawahnya atau pada script categories bila ada.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Related Post:</h4>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 10;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 2;

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>

3. Lalu cari kode ]]></b:skin> dan Copas kode berikut Tepat di bawahnya.

/* Related Post */
#content .related_posts {
margin-top:5px;
padding:0 10px;
border:1px solid #B7E8FF;
background:#E0F5FF;
}
#content .related_posts h4{
color:#111;
font:normal 19px/19px Arial, sans-serif;
letter-spacing:-0.5px;
padding:7px 0;
border-bottom:solid 1px #fafafa;
}
#content .related_posts a {
color:#000;
}
#content .related_posts ul{
padding:0;
}
#content .related_posts ul li {
list-style:none;
padding:4px 5px 4px 17px;
border-bottom:1px solid #f9f9f9;
line-height:18px;
background:url(http://i1121.photobucket.com/albums/l513/iqbalkanci/p-con-li.png) no-repeat 0 7px;
}

4. Simpan dan lihat hasilnya! Semoga sukses dan berhasil :)

(Bila ada kesalahan pada script Mohon dilaporkan :)

  1. Sperti kata diatas, kunjungi web  http://www.linkwithin.com 

  2. lalu masukan data kedalam form yang ada di bawah kanan.

  3. masukan datanya sebagai berikut: Email: email sob, Blog link: Alamat blog sobat, Platform: Pilih    Blogger,      
      Width: (jumlah related post yang ditampilkan) terserah sobat, Max: 5.

  4. centang "My blog has light text on a dark background" jika latar blog anda berwarna gelap/

  5. selanjutnya klik "Get Widget"

  6. Anda akan dibawa ke halaman berikutnya yang akan dibimbing untuk melakukan langkah-langkah sesuai  
      dengan platform Blogger.

  7. Ikuti-langkah-langkah yang diberikan web LinkWithin,

  8. Drag widget ke bawah widget post, save dan check hasilnya.

Sobat suka jarang OL (Online)? Jarang update blog sobat? Ada solusinya, lho! Ajak saja teman/kerabat sobat yang suka nulis artikel untuk menjadi Admin ke 2 di blog sobat. Bagaimana caranya? Ikuti langjah berikut di bawah ini.

1. Pertama, Ajak teman sobat, bila sudah setuju, minta alamat emailnya. Kemudian lihat langkah berikutnya.
2. Setelah mendapatkan email teman yang mau, Buka blogger.com dan login ke Akun blogger sobat.
3. Pada Opsi lainnya, pilih Setelan > Dasar.
4. Pada bagian Izin, klik +Tambahkan Penulis.
5. Isikan alamat email teman sobat yang mau. Kemudian klik Undang Penulis.
6. Selanjutnya, suruh teman sobat membuka inbox emailnya, buka email permintannya dan klik link yang tersedia.
7. Sobat akan menuju halaman berikutnya. Suruh teman kamu buka blogger, dan login menggunakan akun blogger miliknya. Pada daftar blog, pasti ada blog sobat tertera. Selesai sudah. Semoga bermanfaat sob..

Menu start windows 7 di blog?? Pasti keren! Ya, tentu saja! Kali ini, author mau kasih tutor yang masih jarang di google! Membuat menu start windows 7 di blog. Bayangin deh sob, menu start win 7 di blog. Blognya pasti seperti di dekstop windows 7. Blognya tentunya jadi keren. Menu ini juga lengkap dengan startnya lho! Ok nih, codenya sangatt panjang. Silahkan di edit sepuasnya!!! Code by: Taufik.

>Download code<

 Fan page facebook itu apa sih? Fan page facebook itu adalah sebuah halaman website di facebook untuk para penggemar web tersebut (gak juga sih..). Seperti punya Author, kalau sempet like ya. Pada Fan page ini kita bisa nulis status seperti halnya di beranda facebook. Nah, kalau sobat mau membuatnya, yang penting sobat harus punya halaman Fan page di facebook.

    1.  Siapkan 1 halaman Fan page web/blog sobat, copy linknya.

    2.  Masuk ke halaman ini: http://developers.facebook.com/docs/reference/plugins/like-box/

    3.  Nah, muncul halaman pembuatnya. Pada Facebook page Url pastekan link Fan Page sobat. Di bawahnya ada seting-setingan lainnya. uncheck "Show stream" untuk menghemat tempat (Dicentang juga nggak apa").

    4.  Selanjtunya, klik "Get code" > Iframe > copas kode yang tersedia ke widget di blogger.

    5.  Selesai.

Gampangkan? Semoga bermanfaat!
Oh ya jangan lupa di like ya :) http://www.facebook.com/pages/BlogSeno/386134944741519?ref=hl 

Sebelumnya saya sudah mempost cara membuat widget berita berjalan. Nah, kali ini penulis akan mempost cara membuat widget tersebut melayang di bawah halaman di blog. Kalau seperti itu 'kan jadi seperti di Tv beneran kan sob~? Contohnya bisa langsung lihat di blog penulis. Ada kan di bawah halaman blog ini? Langsung aja yukk!

    1. Masuk ke Akun blogger sobat seperti biasa.

    2. Masuk ke Rancangan > Tambah Gadget 

    3. Pilih HTML/Java Script dan Copas kode di bawah ini.

<style>
#topmenu {
border:0px solid #fff;
position: fixed;
z-index: +1000;
bottom: 0px;
margin: 0 auto;
width: 100%;
height: 25px;
left: 0px;
background: black;
}
.news {
width:100%;
float:left;
margin:2px;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
</style>
<div id="topmenu">
<div class="news">
<iframe allowtransparency="true" frameborder="0" height="20" id="NewsWindow" marginheight="0" marginwidth="0" scrolling="no" src="http://www.elshinta.com/v2003a/scrolling.htm" style="background-color: transparent;" width="100%"></iframe></div></div>

    4. Simpan dan lihat hasilnya! Semoga bermanfaat :)

Mivo.tv merupakan website yang menyediakan tv online gratiss. Mivo.tv menyediakan chanel" dari indonesia ( Tv Nasional) yaitu Trans 7, Trans Tv Spacetoon, Indosiar, Antv, Sctv, Lunar Tv, TvOne, dan Daai Tv. Nah, apabila sobat tertarik untuk memasang tv Mivo tersebut di blog sobat ( embed ), Ada caranya yang amat mudah, dan simple. Lihat di bawah ini.

    1. Masuk ke Akun blogger sobat

    2. Masuk ke Tab posting dan klik Edit Halaman ( bila ingin di taruh di page )

    3. Selanjutnya, pada setting HTML, masukan kode berikut.

<embed align="top" allowfullscreen="true" allowscriptaccess="always" bgcolor="#ffffff" devicefont="false" height="908" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" src="http://id.imediabiz.com/MivoTV.swf?r=26539" type="application/x-shockwave-flash" width="610" wmode="transparent"></embed>

    4. Simpan dan lihat hasilnya!

Semoga bermanfaat sob~! Keep Support, ok? 

Hmm... banyak sekarang ya, yang namanya widget Headline News atau Breaking News di blog orang-orang. Widget-widget tersebut berguna untuk menampilkan posting-posting terbaru berjalan. Widget seperti itu sudah banyak sekarang yang menggunakannya. Tetapi, ada satu nih widget berita yang masih jarang digunakan orang. Tutorialnya pun belum banyak. Karena itu, penulis ingin memberikan tutornya kepada sobat. Namanya Running News. Widget ini akan memberikan berita-berita diluar. Maksudnya mirip dengan yang di tv. Menampilkan berita seputar indonesia. Contohnya ada diblog ini. Coba deh turunkan halaman sampai paling bawah. Lihat ada teks-teks berjalan berupa berita. Itu contohnya! Penasaran kan? Bikin yuk!

    1. Pertama, masuk ke Akun blogger sobat

    2. Masuk ke Rancangan >  Tambah Gadget.

    3. Copas kode di bawah ini.

<style>
#running news {border:0 solid #fff;
position:fixed;bottom:1px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }</style>
<div id='running news'>
<iframe allowtransparency='true' frameborder='0' height='20' id='NewsWindow' marginheight='0' marginwidth='0' scrolling='no' src='http://www.elshinta.com/v2003a/scrolling.htm' style='background-color: transparent;' width='100%' position:fixed;bottom:1px;'/>
</iframe></div>

     4. Terakhir simpan dan lihat hasilnya!

Bagaimana? Berhasil? Semoaga sukses!

       

Widget translate digunakan untuk menerjemah blog kita. Google translate contohnya. Google translate disediakan oleh google untuk website/blog. Namun bentuknya cuma menu dropdown, terlalu simple, bener kan? :) . Kalau di blog saya ini bentuknya berbentuk berbagai bendera. Jadi unik. Nah, kalau sobat juga pengen pasang, ikuti langkah di bawah ini ^_^ .

    1.  Login ke akun blogger sobat.

    2.  Masuk ke menu Rancangan

    3.  Klik Tambah Gadget dan pilih HTML/JavaScript 

    4.  Tambahkan kode dibawah ini

<center>
<style></style>
<div>
<a class="google_translate" href="" target="blank" rel="nofollow" title="English"><img align="absbottom" alt="English" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKGtATxkSaP4iAlgcg-EPgU4Zi_mtd1y_7LVCJb7-pK2FZRpDJ-qvYIxKfvOowlFILQmGyM6RrRZURUNUhzJtCNTPPAxwzsegPiq1mLQDLMKQUBOQ54pyunUoLIyZwLAGcqqx4RQ-zTUY/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="English" width="24" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cen&amp;hl=en'); return false;" /></a>
<a class="google_translate" href="" target="blank" rel="nofollow" title="French"><img align="absbottom" alt="French" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfObWqQuWZuEc96a_boflLt5kcsvCNRL_sv_eGogLv-NbJHIcWb1MGBEu7nlVJa3Ocax0pQLHunIXv3J6NPcJR53e9GGiC6yWSW_0rUgDUY35Bve6-kwfsS0Q6KOL_tZTzfWDBx12xs4/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="French" width="24" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cfr&amp;hl=en'); return false;" /></a>
<a class="google_translate" href="" target="blank" rel="nofollow" title="German"><img align="absbottom" alt="German" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtGnfo7AwaYJzhQxwqZ8uWIWYEDtb1wrPqV6t9oJgUAdifjMW4jtPACPHuSDqXcuHegRQCd_vHYRdfNp0tJfKjva7JunQpbuNukXIcjq23vSYOzOmn6Zxu_vEbh9hRr0i5PfZ8YfTpegeP/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="German" width="24" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cde&amp;hl=en'); return false;" /></a>
<a class="google_translate" href="" target="blank" rel="nofollow" title="Spain"><img align="absbottom" alt="Spain" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGwEs3ZanV8DKWuuVuKoklK2m5NJHC6C0LGb-wF0SIjQFPWYxDSd7CBp-ydtLDoq39mdMLkoUp1xmXTY_5cvc0tH-1ACVJ44RcxdGDP1P8-Rn9zAu1jbhar1oOkA0-j2Wj-1uSsLNWhUI/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Spain" width="24" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7ces&amp;hl=en'); return false;" /></a>
<a class="google_translate" href="" target="blank" rel="nofollow" title="Russian"><img align="absbottom" alt="Russian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJugYKcsZk_WUXgUt29owP9Tnq7Txj37Xw1gxcq96J15tJPPerzklG0LVaGcsdp3YKflCgzguEMLwPdVAT1568n7xA-mlJD0tUHUTHhuSgjIv2nKXfWLap_5RflrSRnCPEzhLoXdfeXrw/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Russian" width="24" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cru&amp;hl=en'); return false;" /></a>
<a class="google_translate" href="" target="blank" rel="nofollow" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGXR7TQ40YmbncYf8roiqBPNe1pP_f9wgJTKyibH8rLUPI063pLb6NTEZFGh5H2rd_2ZiqqBnJv22Zm-dx-ZVREyJ2gUewXG_v_BTHxO30Kvkc3pqsTC-szyBOmHgil5BnlNzjLLpPQNe_/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Japanese" width="24" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cja&amp;hl=en'); return false;" /></a>
<a class="google_translate" href="" target="blank" rel="nofollow" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr4rbtH9txX-AMFJQp_lt4lU-VZxmiJLg3n1MkKrFr6OgJzK8Qh3OqJMaK8Hr-HfSB1Mz4HI_4KYUNSTF0WWm-ZRyL_LSdIKFERuYf14R_QYA8cBBBJf_QvTXr8bYTV4WkKJKBNDQ5YzE/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Arabic" width="24" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7car&amp;hl=en'); return false;" /></a>
<a class="google_translate" href="" target="blank" rel="nofollow" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihQObCrjtov-LzeYqF5BQldfkg5C61wtFFBumc-SdbFdzKDMnSZzWuwR_EIVk1xGthA7rUq80dnWyqcj1qhVD0EB7dhdC5g9WyCgwe2XY5VY-GCrM8OYd2BkDgpK9Vm9n_RZT4DI17_g8/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="24" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7czh-cn&amp;hl=en'); return false;" /></a></div></center>

    5.  Selanjutnya klik Simpan, dan lihat hasilnya.

Semoga bermanfaat :)

Scroll bar ternyata bisa diganti tampilannya lho! Coba sobat lihat scroll bar di blog saya, tampilannya beda khan dengan yang default. Warnanya menjadi hitam putih. Jadi lebih bagus kan? Ikuti caranya dibawah ini (Tutor singkat)

    1.  Buka akun blogger sobat

    2. Masuk ke Rancangan >> edit HTML

    3. Cari kode berikut. ]]></b:skin> (Supaya lebih mudah tekan CTRL + F dan ketik kode tadi)


    4. Masukan kode di bawah ini tepat di atas kode ]]></b:skin>

::-webkit-scrollbar {height:12px;width: 12px;background: #fff;}
::-webkit-scrollbar-thumb {background-color:#626262;-moz-border-radius: 10px;border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background-color: #000;-moz-border-radius: 10px;border-radius: 10px;}

    5. Simpan dan lihat hasilnya!



Selamat mencoba dan semoga bermanfaat :D

Sebelumnya, maaf karena lama sekali tidak update. Hal ini dikarenakan saya mulai malas ngeblog dan kebanyakan main game online. Yeaah, ngeliat blogku sepi~ Kasihan sekali~ Jadi InsyaAllah mulai hari ini akan terus update, min seminggu. Jadi, tetap setia pada blog ini ya :) !.

Sebelumnya sudah dijelaskan cara membuat menu navigasi dropdown. Ya, menu yang bila disentuh kursor akan ada menu yang turun dibawahnya. Untuk memperbagus menu navigasi dropdown, sobat bisa nambahin gambar tepat di samping menu. Seperti yang ada di blog ini. Lihat di menu home, ada gambar rumah kan disamping kanannya? Lalu, bila sobat menyentuh menu kategori maka menu yang turun seperti menu home. Cara menambahkan image mudah kok. Sebenarnya, asal bisa bahasa HTML, mudah sekali membuatnya tanpa lihat tutor.



Caranya seperti ini: pada code "<a href="Target"> Title</a>" perhatikan teks merah. Nah, di samping kanan teks tersebut kita beri code HTML image. Yaitu <img></img>. Jadi, tambahkan script img di samping teks merah. Contoh: "<a href="Target"><img src="Link gambar"/> Title</a>". Pada teks link gambar ganti dengan link gambar sesukamu. Untuk menari icon buat gambar tsb yang bagus, bisa dicari di web ini: http://findicons.com. Mudah kan?

Bagi yang masih belum mengerti, bisa copasdit (Copy-Paste-Edit) code berikut.

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://blogseno.blogspot.com'><img src='http://png-3.findicons.com/files//icons/88/mac/128/home.png' width='13px'/> Home</a></li>
<li><a href='#'>Kategori</a>
<ul>
 <li><a href='http://blogseno.blogspot.com/search/label/tutorial'><img src='http://png-3.findicons.com/files//icons/577/refresh_cl/48/tutorial.png' width='15px'/> Tutorial</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/tutorial%20blog'><img src='http://png-4.findicons.com/files//icons/1594/social_media_icons_2_0/128/blogger.png' width='15px'/> Tutorial Blog</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/informasi'><img src='http://png-5.findicons.com/files//icons/1197/agua/128/get_info.png' width='15px'/> Informasi</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/download'><img src='http://png-5.findicons.com/files//icons/1014/ivista/128/download_file.png' width='15px'/> Downloads</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/Game'><img src='http://png-3.findicons.com/files//icons/1786/oxygen_refit/128/input_gaming.png' width='15px'/> Game</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/resep'><img src='http://png-2.findicons.com/files//icons/72/harmonia_pastelis/128/hp_folder_recipe.png' width='15px'/> Resep</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/cheat%2Fhack'><img src='http://png-5.findicons.com/files//icons/2284/sista/59/hacks.png' width='15px'/> Cheat</a></li>
</ul>
</li>
<li><a href='#'>Tool</a>
<ul>
<li><a href='http://blogseno.blogspot.com/p/color-generator-digunakan-untuk-mencari.html'><img src='http://png-2.findicons.com/files//icons/1786/oxygen_refit/128/gtk_color_picker.png' width='15px'/> Color Generator</a></li>
<li><a href='http://blogseno.blogspot.com/p/parse-html.html'><img src='http://png-1.findicons.com/files//icons/1657/lha_objects/128/filetype_html.png' width='15px'/> Parse HTML</a></li>
<li><a href='http://blogseno.blogspot.com/p/cek-status-internet.html'><img src='http://png-4.findicons.com/files//icons/753/gnome_desktop/64/hyperlink_internet_search.png' width='15px'/> Cek Status Internet</a></li>
</ul>
</li>
<li><a href='#'>Profile</a>
<ul>
<li><a href='http://blogseno.blogspot.com/p/contact-me.html'><img src='http://png-1.findicons.com/files//icons/756/ginux/64/e_mail.png' width='15px'/> Contact Me</a></li>
<li><a href='http://blogseno.blogspot.com/2010/04/about-me.html'><img src='http://png-5.findicons.com/files//icons/944/blogging/128/about_me.png' width='15px'/> About Me</a></li>
</ul>
</li>
<li><a href='#'>Friends</a>
<ul>
<li><a href='http://blogseno.blogspot.com/p/banner-sahabat.html'><img src='http://png-5.findicons.com/files//icons/1696/once/48/friends.png' width='15px'/> Banner friends</a></li>
<li><a href='http://blogseno.blogspot.com/p/link-friends.html'><img src='http://png-5.findicons.com/files//icons/1696/once/48/friends.png' width='15px'/> Link Friends</a></li>
</ul>
</li>
<li><a href='http://blogseno.blogspot.com/p/search.html'>Search</a></li>
</ul>
</div></div>

Stylenya (taruh di bawah code ]]></b:skin>:

/* Menu Horizontal Dropdown */
#menuwrapperpic {background:#000 ;width:100%;margin:0 auto;padding:0 auto;}
#menuwrapper {width:100%;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:&#39;Arial&#39;, 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/AVvXsEhk3n7217yOcTzADcpN4Ts1V79j2sFaMsKEOau22I4PTVXEOMo_oYZQG7k7qGenPT6KFj6tDa-3k3xJJ_10NiOHD0TkC-N-QFHEzJoOCrjcc5ZPL_3qEXYXxNHGtBMkfugGpB_RinMigTZd/ s1600/arrow_black_bottom.gif);background-repeat: no-repeat;background-position: right center; padding: 9px 20px 8px 20px;}
#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:#f4f4f4;color: #000;text-decoration:none;border-top:1px solid #ccc;}
#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: #000 !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;}

Kalau nggak ngerti, comment aja. Oh ya, disini ada yang main DarkOrbit?
Selamat mencoba...