KREASI BB.2

Navbar Auto-Hidden disisi kanan

Screen shot

Sebelumnya saya membahas tentang Cara Membuat Navbar Menu Bertingkat, sekarang kembali saya akan membahas Menu Navigasi yang pada umumnya Navbar berada diatas atau dibawah Header Blog, tapi yang ini letaknya di sisi kanan Blog dengan variasi Auto Hidden :y; [akan keluar kalau mouse komputer kawan dekatkan, dan akan kembali sembunyi bila mouse kawan pindahkan] yang saya beri Nama Menu Navigasi Auto Hiden :z;

Setelah kawan melihat dan mencoba Demonya, mari kita lanjutkan ke Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML/JavaScript atau bisa digabung dengan Gadget yang ada :w;
Copas Script berikut kedalamnya

<style> ul#navigation1 { position: fixed; margin: 0px; padding: 0px; top: 150px; right: 0px; list-style: none; z-index:9999; } ul#navigation1 li { width: 42px; border:0px; display: block; padding:1px; } ul#navigation1 li a { display: block; width: 150px; height: 42px; padding: 20px 5px 0 20px; margin-top: -20px; color: #FFF; text-align: center; font-family:"Tahoma", Verdana; font-size:16px; font-weight:bold; background-color:transparent; background-repeat:no-repeat; background-position:left center; border:0px solid #F00;-moz-border-radius:100px;-khtml-border-radius: 100px;-webkit-border-radius: 100px; opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation1 .Home a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDpLqLBB2vZvgTlztslVbXNQ_YLX1gSm1PQ0TGsSM7HXDtU976KvyhNDQTsmilmpL5C_jORWPMmHDj5yUWPeiBUT4NkcnLcN67ROyp_tNBd-jiJ66_i7t91ErlenaGm3p2LomTQaOKK6A/s1600/Home.png); } ul#navigation1 .Kreasi a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrglO5SPJycp1eMlad_ClR3aJUf1WLm4S8mBAgAGb9rYx9VP1jER2P-eatkRGs76cdskcRAXMLlyddEeMH_is0B8hp_rOOf1MS7mApYgAuFDnDoPD3MAkv_QI53yESwtXXFIJguN2qR0/s1600/Kreasi.png); } ul#navigation1 .TipsTrik a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipc6LrULCySu064XlHWcD0N87JmyuELI7vAbxaKrGxJtnDG4N8XmnfYgwAuOEZjmxdxmoI8uGyoCYalScQdcCGrO4uV_f-xYO-PBqAbf93myYPupug2fBe-n0s8hvce2JhhCf9cuRbdws/s1600/Tips+Trik.png); } ul#navigation1 .Tutorial a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9CltV9Ol_GLOJjH22WQvq5gVhKTa1KT62S-9Y-0kI59r6CMHAoAQuGDR9-SnNCKV68nDkN59H1EBkcaggQ5iV2Rf8Yp83RWFIWJtpY1ZY-dO57ydn2FygoSH5S74HBUT5u3W8OQyJxHE/s1600/Tutorial.png); } ul#navigation1 .Widget a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyloyMZ9Y1KV7R33L7RfbZjmt-mOr7bMcGWPGz1u0F_9qh5tt65jyLv-ScbyjArCOLAspY5tQS76mU28sV-xmJDOIEaEGoRS1cC818DRGRkxhzfWaZ2AR-uEg4LsZjVmfa1lAmEdpjZdw/s1600/Widget.png); } ul#navigation1 .Animasi a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCC0-7mEKKAwH3pC4VBemFTERTlec2blxRZYFZWrb9EBjeDqoXs7MbFpM7NzrZ4Zhke-i5GMJ_6rcP_qLniQpIujm_XC60ud1qvVhdoxufyN1XgbD_xZ_b1397SkArsbyUfFj7SIhgRr8/s1600/Navbar.png); } </style> <script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { $('#navigation1 a').stop().animate({'marginLeft':'5px'},1000); $('#navigation1 > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-112px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'5px'},200); } ); }); </script> <ul id="navigation1"> <li class="Home"><a href="http://blogbego-creation.blogspot.com/" target="_blank" title="Kembali ke Halaman Depan">BERANDA</a></li> <li class="Kreasi"><a href="http://blogbego-creation.blogspot.com/search/label/kreasi" target="_blank" title="Artikel dengan Katagori Kreasi">KREASI</a></li> <li class="TipsTrik"><a href="http://blogbego-creation.blogspot.com/search/label/tips%20trik" target="_blank" title="Artikel dengan Katagori Tips Trik ">TIPS TRIK</a></li> <li class="Tutorial"><a href="http://blogbego-creation.blogspot.com/search/label/tutorial" target="_blank" title="Artikel dengan Katagori Tutorial">TUTORIAL</a></li> <li class="Widget"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Widget">WIDGET</a></li> <li class="Animasi"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Animasi">ANIMASI</a></li> </ul>

Teks yang berwarna merah adalah Image Navbar, silahkan ganti yang sesuai dengan tampilan,
Teks yang berwarna Violet adalah URL saya silahkan ganti dengan URL Blog kawan begitu juga dengan Judulnya
sedangkan untuk Target="_blank" title=".................." silahkan diganti juga dan bisa dihilangkan

Contoh Image Navbar

Selamat Mencoba, sukses selalu :

Selengkapnya.....

Cara membuat Tulisan Berjalan di Blog

Salam Blogger Indonesia, sekarang saya akan berbagi dengan kawan cara membuat Tulisan Berjalan yang mirip merquee yang penempatannya di Tab / tempat Judul Blog kita dan yang bisa ditaruh di sidebar Blog.

Baiklah mari kita bahas satu persatu :

Caranya :

Cara membuat Tulisan Berjalan di Tab.
Cara membuat Tulisan Berjalan di Sidebar

Masuk ke Account Blogger dengan ID kawan
Pada Dasbor / Rancangan pilih tambah gadget
Klik tanda (+) pada HTML / JavaScript
Copas (copy paste) script berikut kedalamnya

Script No. 1

<script type="text/javascript">

//Created by Title bar Maker (http://www.bosiljak.hr/titlemaker)

function tb8_makeArray(n){

this.length = n;

return this.length;

}

tb8_messages = new tb8_makeArray(6);

tb8_messages[0] = "SELAMAT DATANG !!!";

tb8_messages[1] = "DI TIPS-BLOGBEGO";

tb8_messages[2] = "TERIMA KASIH";

tb8_messages[3] = "KUNJUNGAN DAN";

tb8_messages[4] = "KOMENTAR ANDA";

tb8_messages[5] = "DITUNGGU....!!!";

tb8_rptType = 'infinite';

tb8_rptNbr = 5;

tb8_speed = 100;

tb8_delay = 2000;

var tb8_counter=1;

var tb8_currMsg=0;

var tb8_tekst ="";

var tb8_i=0;

var tb8_TID = null;

function tb8_pisi(){

tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);

document.title = tb8_tekst;

tb8_sp=tb8_speed;

tb8_i++;

if (tb8_i==tb8_messages[tb8_currMsg].length){

tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;

}

if (tb8_currMsg == tb8_messages.length){

if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){

clearTimeout(tb8_TID);

return;

}

tb8_counter++;

tb8_currMsg = 0;

}

tb8_TID = setTimeout("tb8_pisi()", tb8_sp);

}

tb8_pisi()

</script></div>

Usahakan kalimatnya jangan panjang-panjang
Angka 6 menyesuaikan dengan banyaknya baris kalimat
Ganti Tulisan yang berwarna merah sesuai dengan selera kawan
Banyaknya / panjangnya tulisan tanpa batas
Demonya bisa kawan lihat disini
Penempatan scriptnya bisa digabung dengan script yang lainnya.
Kalimat / tulisan tsb akan berjalan dari kiri ke kanan.

Sedangkan yang lainnya :

Copas script berikut pada gadget / elemen atau bisa juga digabung,

Script No. 2

<script language="JavaScript">

var txt="SELAMAT DATANG DI BLOG ILUSTRASI.BLOGSPOT.COM - SEMOGA ANDA NYAMAN DAN PUAS - TERIMA KASIH";

var tipsblogbegotutorial=170;

var fress=null;function judulbloggerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

fress=setTimeout("judulbloggerak()",tipsblogbegotutorial);}judulbloggerak();

</script>

Ganti Tulisan yang berwarna merah sesuai dengan selera kawan.
Kalimat / Tulisan akan berjalan dari kanan ke kiri
Script ini bisa juga ditaruh pada Edit HTML template kawan, yaitu tepat diatas kode </body> letaknya paling bawah.
Demonya ; lihat pada Tab Blog ini

sedangkan tulisan yang bisa tampil di sidebar :

Copas (copy-paste) script berikut kedalam gadget / elemen atau bisa digabung dengan script yang lainnya

Script No. 3

<script language="JavaScript">
var max=0;
function textlist()
{
max=textlist.arguments.length; for (i=0; i<max; i++) this[i]=textlist.arguments[i];
}
tl=new textlist
(
" SUATU KEBANGGAAN APABILA DENGAN BERBAGI KAMI DAPAT MEMBANTU KAWAN....!!! " // Geben Sie hier den zu scrollenden Text ein
);
var x=0; pos=0;
var l=tl[0].length;
function textticker()
{
document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
if(pos++==l)
{
pos=0;
setTimeout("textticker()",1000);
x++;
if(x==max)
x=0;
l=tl[x].length;
} else
setTimeout("textticker()",100);
}
// end -->
</script>
<script language="JavaScript">
</script></div></div>

Ganti tulisan warna merah sesuai dengan selera kawan
Angka 90 warna biru disesuaikan dengan panjangnya kalimat / tulisan yang kawan buat
Tulisan akan tampil dari kiri ke kanan seperti kita sedang menulis
Penempatannya bebas asal panjang tulisan disesuaikan dengan lebar tempat menaruhnya
Demonya : silahkan lihat di atas tempat postingan

Dari ketiga Script tersebut diatas (script No.1 dan Script No. 2) tidak bisa digabung, karena tampilannya sama-sama di Tab Blog (pilih salah satu).

Oh ya simpan Blog kawan dan lihat hasilnya.

Selengkapnya.....

Cara Membuat Pojok Blog Menggulung

Sudah banyak para Blogger membahas cara membuat Pojok Halaman Blog seperti Menggulung yang dalam bahasanya mbah Google dikatakan Pagepeel, disini saya akan berbagi dengan kawan yang saya beri judul Cara Buat Pojok Blog Menggulung :z

Cara Membuatnya :

Masuk ke Account Blogger dengan ID kawan
Pada Dasbor pilih Template
Cari Tag ]]></b:skin>
Copas Script berikut dibawah ]]></b:skin>

<script type='text/javascript'>var untuk ='http://Nama Blog kawan.blogspot.com/'</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/PagePeel.js' type='text/javascript'/>

Ganti text yang berwarna merah [Nama Blog kawan] dengan URL blog kawan
Simpan Template kawan

screenshot

Sekarang buka Blog kawan untuk melihat hasilnya :y
Kalau tak ada masalah hasilnya seperti pada Blog Demo saya itu

Karena sekarang saya sedikit ada kesibukan untuk peng-Editan lebih lanjut tunggu postingan saya berikutnya, tapi jangan lupa berikan Pendapat / Komentar / Saran kawan :r

Selengkapnya.....

My Blog

Template

Navbar Auto-Hidden disisi kanan

Cara membuat Tulisan Berjalan di Blog

Cara Membuat Pojok Blog Menggulung

About Me

Komentar Blogger

Daftar Isi

Kawan FB