Wednesday, December 28, 2011
Cara Membuat Menu Navigasi Kwicks Dengan jQuery
Posted by
Sibuk Banget |
BLOGCUNAYZ - Hallo sobat cunayz semua akhirnya saya bisa posting lagi mohon maaf untuk sobat cunayz semua yang "terlalu lama menunggu" postingan baru saya,... wkwkwkOk lah langsung saja ke topik.Mungkin untuk sekian kalinya BLOGCUNAYZ membagi ilmu cara membuat Menu Navigasi,kali ini pun saya akan share Cara Membuat Menu Navigasi Kwicks Dengan jQuery,jika sobat belum tau yang namanya menu navigasi kwicks silahkan lihat demonya.
View Demo
Berikut Screenshotnya :
Bagaimana tertarik untuk memasangnya di blog sobat,,?? Jika jawabannya ya silahkan ikuti langkah-langkah membuatnya di bawah ini :
Seperti biasanya masbro masuk dulu Dasboard >> Template >> Centang Expands Widget Templates
Lalu taruh kode berikut di atas ]]></b:skin>
Kemudian cari kode <head> dan taruh kode jQuery berikut tepat di atasnya
Selanjutnya sobat tinggal pilih mau di taruh dimana menunya misalnya di widget caranya Tambah Widget >> HTML/JavaScript and masukin deh kodenya nih ado di bawah :
Selanjutnya tinggal simpan,gimana guampang kan bikinnya,,?? jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^
Berikut Screenshotnya :
Bagaimana tertarik untuk memasangnya di blog sobat,,?? Jika jawabannya ya silahkan ikuti langkah-langkah membuatnya di bawah ini :
Seperti biasanya masbro masuk dulu Dasboard >> Template >> Centang Expands Widget Templates
Lalu taruh kode berikut di atas ]]></b:skin>
.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}
Kemudian cari kode <head> dan taruh kode jQuery berikut tepat di atasnya
<script src='https://sites.google.com/site/cunayz182/files/jquery-1.2.3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/cunayz182/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/cunayz182/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>
Selanjutnya sobat tinggal pilih mau di taruh dimana menunya misalnya di widget caranya Tambah Widget >> HTML/JavaScript and masukin deh kodenya nih ado di bawah :
<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='#' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='#' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='#' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://pelajaran-blog.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
Selanjutnya tinggal simpan,gimana guampang kan bikinnya,,?? jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^
Labels:
Tuesday, December 20, 2011
Load Page Blog Lebih Keren Dengan Keyframes
BLOGCUNAYZ - Hallo sobat blogger kali ini saya akan share tutor Load Page Blog Lebih Keren Dengan Keyframes. Trik ini semacam kode untuk membuat efek animasi saat membuka blog, Menjadikan Tampilan Blog Kita Minjadi Tambah Keren,sebenarnya saya dapat ilmu ini dari agan
Zona Download Gratis tapi berhubung sobat ane "Farixsantips" request yaudah sekalian aja ane share wkwkwk.Untuk demonya silahkan perhatikan ketika sobat membuka page di blog ini,nah itulah yang saya maksud.
Cara membuatnya sangat simple tinggal meletakan kode CSS berikut di atas kode ]]></b:skin>
Catatan : Jika sobat ingin membuat efek pada instrumen lain misanya menu sobat tinggal menambah kode css berikut :
Mohon maaf jika penjelasannya agak membingungkan karena saya agak susah untuk menjelaskannya,jika ada pertanyaan silahkan tinggalkan jejak di kotak komentar,...
sumber ilmu : Musa Khairul Umam dan Zona Download Gratis
Zona Download Gratis tapi berhubung sobat ane "Farixsantips" request yaudah sekalian aja ane share wkwkwk.Untuk demonya silahkan perhatikan ketika sobat membuka page di blog ini,nah itulah yang saya maksud.
Cara membuatnya sangat simple tinggal meletakan kode CSS berikut di atas kode ]]></b:skin>
@keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@-moz-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@-webkit-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@keyframes
{
from{transform:translate(0px, 9000px)}
to{transform:translate(0px, 0px)}
}
@-moz-keyframes
{
from{-moz-transform:translate(0px, 9000px)}
to{-moz-transform:translate(0px, 0px)}
}
@-webkit-keyframes
{
from{-webkit-transform:translate(0px, 9000px)}
to{-webkit-transform:translate(0px, 0px)}
}
#header-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,#id css {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}
Catatan : Jika sobat ingin membuat efek pada instrumen lain misanya menu sobat tinggal menambah kode css berikut :
- #nama instrumen {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
- Misalnya #nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
Mohon maaf jika penjelasannya agak membingungkan karena saya agak susah untuk menjelaskannya,jika ada pertanyaan silahkan tinggalkan jejak di kotak komentar,...
sumber ilmu : Musa Khairul Umam dan Zona Download Gratis
Friday, December 16, 2011
Cara Memasang Script Iklan Melayang (Ads popout)
BOGCUNAYZ - Hallo masbro semua jumpa lagi dengan saya si cunayz,setelah hampir satu minggu saya libur blogging akhirnya bisa back lagi,Pada kesempatan ini i akan beri you tips Cara Memasang Script Iklan Melayang (Ads popout) trik ini cocok untuk blog yang mempunyai banyak widget atau gak mau menuhin sidebarnya kayak blog saya ini wkwkwk,... langsung saja ke TKP masbro
View Demo
Berikut Screenshotnya :
Cara bikinnya sangat simple or mudah berikut langkah-langkahnya :
1. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
2. Masukan Script Berikut Di dalamnya
5. Ubah Kata <!-- Kode Iklan Taruh Disini--> Dengan Script Iklan sobat.
6.Simpan Dan Lihat Hasilnya.
Beuh kayaknya postingnya kependekan ya,...?? yaudah kalo ada yang mau kasih tambahan tulis di kotak komentar ya ^_^
Berikut Screenshotnya :
Cara bikinnya sangat simple or mudah berikut langkah-langkahnya :
1. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
2. Masukan Script Berikut Di dalamnya
<style type="text/css">
#topbar {
position:absolute;
z-index: 100;
padding: 8px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 15px;
-moz-box-shadow: #600 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, serif;
text-shadow:0 1px 0 #FFFFFF;
}
#topbar img {
border:none;
}
#topbar .tombol {
margin:0;
padding-bottom:5px;
text-align:right;
}
#topbar .tombol button {
color:#FFFFFF;
border: solid 1px #494949;
margin:0;
padding:2px 15px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));
background: -moz-linear-gradient(top, red, #454545);
}
#topbar .isi_iklan {
background-color:#FFFFFF;
margin:0;
padding:4px;
width: 468px;
border: 1px solid #999;
}
</style>
<script src="http://blogcunayz.googlecode.com/files/js_pop_up.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>
<div class="isi_iklan">
<!-- Kode Iklan Taruh Disini-->
</div>
</div>
5. Ubah Kata <!-- Kode Iklan Taruh Disini--> Dengan Script Iklan sobat.
6.Simpan Dan Lihat Hasilnya.
Beuh kayaknya postingnya kependekan ya,...?? yaudah kalo ada yang mau kasih tambahan tulis di kotak komentar ya ^_^
Saturday, December 10, 2011
Dua Style Menu Navigasi Dropdown Ala Cunayz
BLOGCUNAYZ - Akhirnya bisa update lagi,mohon maaf karena sekarang saya agak lama update,karena sekarang saya sibuk mengerjakan tugas-tugas sekolah and hari senin besok saya akan melaksanakan UAS (Ujian Akhir Semester).di postingan ini sekalian saya ingin meminta ijin karena mungkin untuk 2 minggu kedepan saya tidak akan blogging. loh kok jadi curhat ya,...?? ok langsung saja cekedot
Inilah Screenshotnya :
Kali ini saya akan share cara membuat style menu navigasi dropdown ala cunayz.mungkin ada dua style yang sering menu navigation yang populer digunakan oleh para Blogger, yaitu efek Fading dan Sliding Di postingan ini saya akan share dua efek yang sederhana namun tetap satu jenis silahkan sobat tinggal pilih saja efek yang mana yang paling bagus menurut sobat.
View Demo
Langkah pertama : harus sobat lakukan adalah menentukan penempatan menu navigasi ini (misalnya di atas atau di bawah header), Salin kode berikut dan letakan ditempat sobat ingin meletakan menu navigasi ini :
Langkah Kedua : Letakan CSS dibawah ini,kemudian letakan di atas kode ]]</b:skin> atau </style>:
Langkah Terakhir : Nah sekarang sobat tinggal memilih efek mana yang paling cocok untuk sobat (pilih salah satu) :
Untuk efek SlideDown - SlideUp salin kode berikut dan letakan diatas kode </head> :
Untuk efek Fadeln - FadeOut salin kode berikut dan letakan diatas kode </head> :
Khusus untuk kode yang Saya beri warna merah, jika sudah ada tidak perlu ditambahkan.Sekarang klik Pratinjau. Jika sudah puas dengan hasilnya, simpan templatemu.
Inilah Screenshotnya :
Kali ini saya akan share cara membuat style menu navigasi dropdown ala cunayz.mungkin ada dua style yang sering menu navigation yang populer digunakan oleh para Blogger, yaitu efek Fading dan Sliding Di postingan ini saya akan share dua efek yang sederhana namun tetap satu jenis silahkan sobat tinggal pilih saja efek yang mana yang paling bagus menurut sobat.
Langkah pertama : harus sobat lakukan adalah menentukan penempatan menu navigasi ini (misalnya di atas atau di bawah header), Salin kode berikut dan letakan ditempat sobat ingin meletakan menu navigasi ini :
<div class='cunayzmenu'>
<ul>
<li><a href='#'>HOME</a></li>
<li><a href='#'>GUEST BOOK</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>
<li><a href='#'>TOOLS BLOG</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>
<li><a href='#'>KONTAK</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>
</ul>
</div>
Langkah Kedua : Letakan CSS dibawah ini,kemudian letakan di atas kode ]]</b:skin> atau </style>:
.cunayzmenu{font:normal 12px "Times New Roman", Times, serif;line-height:normal;text-transform:uppercase;margin:5px 0;padding:0 0;color:#fff;text-decoration:none;}
.cunayzmenu ul{float:left;height:34px;line-height:34px;background-color:#333;margin:0 0 10px;padding:0 0;border:2px solid #e6e6e6;box-shadow:0 1px 5px #000;-moz-box-shadow:0 1px 5px #000;-webkit-box-shadow:0 1px 5px #000;}
.cunayzmenu li{list-style-type:none;margin:0 0;padding:0 0;color:#fff;float:left;display:inline;}
.cunayzmenu li a{line-height:14px;background-color:#333;border-left:1px solid #444;border-right:1px solid #222;margin:0 0;padding:10px 15px;color:#fff;text-decoration:none;font-weight:bold;vertical-align:top;text-shadow:1px 1px 2px #000;outline:none;display:block;}
.cunayzmenu li ul{position:absolute;z-index:10;left:auto;height:auto;margin:0 0;padding:0 0;width:200px;box-shadow:0 1px 5px #000;-moz-box-shadow:0 1px 5px #000;-webkit-box-shadow:0 1px 5px #000;display:none;}
.cunayzmenu li ul li a{border-left-width:0;border-right-width:0;border-top:1px solid #444;border-bottom:1px solid #222;width:170px;display:block;}
.cunayzmenu li a:focus{background-color:#666;border-left-color:#777;border-right-color:#555;}
.cunayzmenu ul li a:focus{background-color:#666;border-top-color:#777;border-bottom-color:#555;}
.cunayzmenu li a:hover, .cunayzmenu ul li a:hover{color:#ccc;}
Langkah Terakhir : Nah sekarang sobat tinggal memilih efek mana yang paling cocok untuk sobat (pilih salah satu) :
Untuk efek SlideDown - SlideUp salin kode berikut dan letakan diatas kode </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function () {
$('.cunayzmenu ul li').hover(
function () {
$('ul', this).stop(true, true).slideDown(500);},
function () {
$('ul', this).stop(true, true).slideUp(250);});
});
</script>
Untuk efek Fadeln - FadeOut salin kode berikut dan letakan diatas kode </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function () {
$('.cunayzmenu ul li').hover(
function () {
$('ul', this).stop(true, true).fadeIn(600);},
function () {
$('ul', this).stop(true, true).fadeOut(200);});
});
</script>
Khusus untuk kode yang Saya beri warna merah, jika sudah ada tidak perlu ditambahkan.Sekarang klik Pratinjau. Jika sudah puas dengan hasilnya, simpan templatemu.
Thursday, December 1, 2011
Menu Rocking Rolling Rounded Dengan jQuery
BLOGCUNAYZ - Kali ini sesuai request dari para shabat cunayz saya akan share cara membuat menu seperti di halaman posting blog ini atau Menu Rocking Rolling Rounded Dengan jQuery, Mungkin menu navigasi ini memiliki efek paling aneh,hanya dengan menyorotnya, menu ini tampil genit dengan menari-nari wkwkwkw.Untuk deminya silahkan sobat lihat ke arah kanan atas blog ini.
Gimana udah connect,..?? ok deh kalo masih bingung nih saya kasih screenshotnya.
View Demo
Sebenarnya versi asli dari menu navigasi ini menggunakan framework jQuery 1.5.2 sebagai mesinnya. Namun setelah Saya coba dengan JQuery versi 1.3.2 ternyata masih bisa berjalan. Bahkan lebih baik.
Nah sekarang untuk membuay menu navigasi ini pastikan dulu template kamu sudah dilengkapi dengan JQuery versi 1.3.2 sepeti ini :
Jika template mu sudah dilengkapi dengan di atas, kamu bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum, salin dulu kode di atas kemudian letakkan tepat di atas kode <heead>
Letakan kode dibawah ini sesudah JQuery tadi:
Kemudian salin kode CSS di bawah ini dan letakan di atas kode ]]></b:skin> atau </style>:
Terakhir tinggal meletakan kerangka objek saya,
Salin kode ini,kemudian letakan di tempat dimana kamu inginkan menu navigasi ini tampil,misalnya di bawah header.
<div class='item'>
<a class='nama_class'></a>
<div class='item_content'>
<h2>JUDUL MENU</h2>
<p>
<a href='#'>Nama Menu</a>
<a href='#'>Nama Menu</a>
<a href='#'>Nama Menu</a>
</p>
</div>
</div>
3. Script yang Saya letakkan di bawah kerangka menu lebih baik jangan dipindahkan ke area <head> ... </head>. Sebagian besar script memang idealnya diletakkan di dalam wilayah kekuasaan <head> namun beberapa dari mereka juga ada yang harus diletakkan setelah objek seperti pada menu ini.
Selamat berkreasi,jika ada masalah jangan sungkan untuk bertanya "di kotak komentar",... ^_^
Gimana udah connect,..?? ok deh kalo masih bingung nih saya kasih screenshotnya.
Sebenarnya versi asli dari menu navigasi ini menggunakan framework jQuery 1.5.2 sebagai mesinnya. Namun setelah Saya coba dengan JQuery versi 1.3.2 ternyata masih bisa berjalan. Bahkan lebih baik.
Nah sekarang untuk membuay menu navigasi ini pastikan dulu template kamu sudah dilengkapi dengan JQuery versi 1.3.2 sepeti ini :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Jika template mu sudah dilengkapi dengan di atas, kamu bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum, salin dulu kode di atas kemudian letakkan tepat di atas kode <heead>
Letakan kode dibawah ini sesudah JQuery tadi:
<script src='https://sites.google.com/site/blogcunayz/jquery/jquery-animate-css-rotate-scale.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogcunayz/jquery/jquery-css-transform.js' type='text/javascript'/>
Kemudian salin kode CSS di bawah ini dan letakan di atas kode ]]></b:skin> atau </style>:
#rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}
#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}
#rocking-rolling .item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px; height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}
#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}
#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}
#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}
#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}
#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}
#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}
#rocking-rolling .item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow:1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}
#rocking-rolling .item_content a:hover{
color:#0b965b;
}
#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}
#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
Terakhir tinggal meletakan kerangka objek saya,
Salin kode ini,kemudian letakan di tempat dimana kamu inginkan menu navigasi ini tampil,misalnya di bawah header.
<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>eMail</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>
<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>
<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + "search/"' method='get'><input name='q' type='text'/></form>
</p>
</div>
</div>
<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>
<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>
<div style='clear:both;'></div>
</div>
<script type='text/javascript'> function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)}) </script>
Catatan :
1. Setiap unit menu navigasi R3MJ (Rocking Rolling Rounded Menu dengan JQuery) dapat didefinisikan sebagai berikut:<div class='item'>
<a class='nama_class'></a>
<div class='item_content'>
<h2>JUDUL MENU</h2>
<p>
<a href='#'>Nama Menu</a>
<a href='#'>Nama Menu</a>
<a href='#'>Nama Menu</a>
</p>
</div>
</div>
- Ganti JUDUL MENU dengan judul menu yang kamu kehendaki,
- Kode # dengan sebuah alamat URL.
- Sesuaikan Nama Menu dengan nama menu yang kamu inginkan.
3. Script yang Saya letakkan di bawah kerangka menu lebih baik jangan dipindahkan ke area <head> ... </head>. Sebagian besar script memang idealnya diletakkan di dalam wilayah kekuasaan <head> namun beberapa dari mereka juga ada yang harus diletakkan setelah objek seperti pada menu ini.
Selamat berkreasi,jika ada masalah jangan sungkan untuk bertanya "di kotak komentar",... ^_^
Tuesday, November 29, 2011
Trik Mempercepat Loading Home Page Blog
BLOGCUNAYZ - Selamat malam sobat blogger,kali ini saya akan share Trik Mempercepat Loading Homepage. Sesuai judul di atas postingan saya kali ini akan membahas trik atau cara supaya loading home page kita tidak berat, Triknya yaitu dengan cara Hanya Menampilkan Judul Posting Di Home Page dengan menggunakan trik ini maka loading Home page kita akan lebih cepat.
Berikut adalah screenshotnya :
Ok deh saya kira penjelasannya cuku sekian dan kita langsung saja ke pokok pembahasan, yaitu bagaimana cara agar di homepage blog hanya judul posting yang muncul.
1. Login ke blog >> Template >> Centang
2. Cari kode dibawah ini, gunakan CTRL+F, untuk memudahkan pencarian.
3. Selanjut simpan kode dibawah ini, tepat dibawah kode pada no.2
4. Lalu cari kode di bawah ini :
5. Jika sobat menggunakan Readmore hapus kode yang pertama
6. Preview dulu sebelum di save (Untuk Meminimalisir Kesalahan)
7. Jika sudah benar klik Save
Bagaimana gampangkan caranya,...??
Berikut adalah screenshotnya :
 |
| Hanya Menampilkan Judul Posting Di Home Page |
1. Login ke blog >> Template >> Centang
2. Cari kode dibawah ini, gunakan CTRL+F, untuk memudahkan pencarian.
]]></b:skin>
3. Selanjut simpan kode dibawah ini, tepat dibawah kode pada no.2
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.post-body,
.post-footer,
.jump-link,
.post-timestamp,
.reaction-buttons,
.star-ratings,
.post-backlinks,
.post-icons,
.date-header,
.comment-link,
.post-labels{display:none;}
</b:if>
</b:if>
</style>
4. Lalu cari kode di bawah ini :
<data:post.body/>
5. Jika sobat menggunakan Readmore hapus kode yang pertama
6. Preview dulu sebelum di save (Untuk Meminimalisir Kesalahan)
7. Jika sudah benar klik Save
Bagaimana gampangkan caranya,...??
Saturday, November 26, 2011
Themes Seven VGRB Dan VGBN Untuk Windows Xp
BLOGCUNAYZ - Hallo sobat Bogger apa kabar,...??Karena saya orangnya tidak sabaran jadi gak usah bertele-tele lagi langsung saja ke topikKali ini saya akan share Themes Seven VGRB & VGBN Untuk Windows Xp. Bagi sobat blogger yang sudah bosan dengan tampilan windows Xp dan ingin beralih ke windows 7,ets jangan dulu saya punya solusinya yaitu dengan memodif tampilan windows Xp kita menjadi seperti windows 7.
Keterangan : Screenshot yang pertama adalah tema versi besar dan yang kedua adalah versi kecilnya,untuk memperjelas silahkan klik screenshotnya.
Bagaimana tertarik?? jika jawabannya ya silahkan ikuti cara memasangnya berikut ini :
Jika ada masalah dalam penginstalan silahkan tinggalkan komentar,...
Berikut adalah screenshotnya :
 |
VGRB |
 |
VGBN |
Bagaimana tertarik?? jika jawabannya ya silahkan ikuti cara memasangnya berikut ini :
- Sobat harus download dulu Uxstyle silahkan download disini
- Silahkan instal terlebih dahulu Uxstylenya
- Silahkan Extract dan Instal tema yang sudah saya berikan
- Klik kana di Desktop >> Properties >> Appearance >> Lalu pilih tema VGRB dan apply
- And done
Jika ada masalah dalam penginstalan silahkan tinggalkan komentar,...
Friday, November 25, 2011
Super Start (Add On Firefox Speed Dial)
BLOGCUNAYZ - Kira-kira cocok gak ya judulnya dengan isi postingan ini?
Berhubung untuk saat ini FoxTab belum tersedia untuk firefox 9, jadi saya mencoba alternatif add on yang memiliki fitur serupa, namun sudah tersedia untuk firefox 9. Setelah mencari, akhirnya saya temukan juga yang seperti foxtab, yakni Super Start.
Berikut Screenshotnya :
Add On Super Start ini berfungsi untuk mempercantik atau membuat halaman seperti speed dial dan disertai dengan kotak semacam daftar kegiatan yang harus di lakukan ketika anda online.SuperStart has two majoy features at this time:
Mungkin pengertiannya cukup sekian,jika sobat Blogger berminat mencobanya silahkan download di link yang sudah saya sediakan di bawah
Download Super Start - Add On Firefox Speed Dial
Jika ada keluh kesah "Saran" silahkan berkomentar dengan bijak,... ^_^
Berhubung untuk saat ini FoxTab belum tersedia untuk firefox 9, jadi saya mencoba alternatif add on yang memiliki fitur serupa, namun sudah tersedia untuk firefox 9. Setelah mencari, akhirnya saya temukan juga yang seperti foxtab, yakni Super Start.
Berikut Screenshotnya :
 |
| Super Start |
- A visual bookmarks on your homepage
- A simple todo-list as well, just reminder you don't forget to do something (the todo-list can be closed)
- The bookmarks can be folded, so there could display many links in your homepage
Mungkin pengertiannya cukup sekian,jika sobat Blogger berminat mencobanya silahkan download di link yang sudah saya sediakan di bawah
Download Super Start - Add On Firefox Speed Dial
Jika ada keluh kesah "Saran" silahkan berkomentar dengan bijak,... ^_^
Saturday, November 12, 2011
Cara Membuat Gambar Berjatuhan (Falling Snow Effect)
di minggu pagi yang cerah ini saya akan share Cara Membuat Gambar Berjatuhan (Falling Snow Effect) ini memiliki kelebihan dimana kita dapat mengubah gambar untuk falling effect-nya sesuai yang kita inginkan. Kita juga dapat mengatur tingkat kecepatan dan banyaknya gambar yang jatuh (falling snow) sesuai yang kita mau,
Berikut screenshotnya :
1. Login ke akun blogger.
2. Dari halaman Dashboard, pilih Tata Letak lalu pilih Edit HTML.
3. Kopikan script di bawah ini dan letakkan (paste) di bawah kode <head> (yang letaknya di awal-awal script template blog).
<script language='JavaScript'>
var no = 7;
var speed = 5;
var snowflake = "http://onepieceindo.files.wordpress.com/2009/10/1_121.gif";
</script>
<script language='JavaScript' src='http://sites.google.com/site/ruangsc/enes/fallinsnow.js'/>
Catatan :
- Sobat bisa mengganti (http://onepieceindo.files.wordpress.com/2009/10/1_121.gif) dengan gambar yang jatuh (var snowflake) dengan gambar yang sobat inginkan.
- Sobat juga bisa mengatur banyaknya gambar (var no) dan tingkat kecepatan (var speed) sesuai keinginan sobat.
5. Lalu save
Saturday, November 5, 2011
Cara Membuat Title Otomatis Pada Semua Posting
Di malam minggu yang indah ini saya akan share tips SEO yang ringan yaitu Cara Membuat Title Otomatis Pada Semua Posting. Menurut para Seoexpert salah satu faktor kecil penunjang terhadap SEO adalah dengan membubuhkan title terhadap link. Title link yang di maksud disini adalah ketika sebuah link disorot oleh mouse komputer,akan keluar sebuah tulisan kecil.
Dari yang saya perhatikan, theme-theme untuk wordpress sejak dahulu telah menerapkan fungsi hover title link pada judul post atau judul artikel sehingga apabila sebuah judul post disorot maka akan keluar title dari Dari yang saya perhatikan, theme-theme untuk wordpress sejak dahulu telah menerapkan fungsi hover title link pada judul post atau judul artikel sehingga apabila sebuah judul post disorot maka akan keluar title dari judul post tersebut. Sayangnya, template blogger jarang sekali menerapkan teknik tersebut, kenapa yah?
Walaupun ini bukanlah teknik SEO yang penting, tidak ada salahnya untuk menerapkan trik tersebut, dan mudah-mudahan ada sedikit pengaruhnya terhadap SEO.
Bagi anda yang ingin menerapkan teknik ini pada template blogger anda, silahkan untuk mengikuti langkah-langkah berikut :
1. Login ke akun Blogger anda
2. Template
3. Klik Backup/Restore untuk berjaga-jaga apabila ada kesalahan dalam mengedit template
4. Lalu klik Edit HTML
5. Proceed
6. Centang Expand Widget Templates
Cari kode di bawah ini :
<a expr:href='data:post.link'><data:post.title/></a>
Hapus kode tadi lalu ganti dengan kode berikut :
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
Lalu cari kembali kode seperti ini :
<a expr:href='data:post.url'><data:post.title/></a>
Hapus kode tadi lalu ganti dengan kode berikut :
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
7. Save
Catatan :
Teknik diatas hanyalah memasukkan keyword judul post ke dalam link judul post. Pada dasarnya, kode yang ditambahkan adalah seperti ini :
expr:title='data:post.title'
Gimana tertarik untuk mencobanya? silahkan di praktekin,...!!
Friday, November 4, 2011
Jadwal Sepak Bola SEA Games 2011
Dalam jadwal yang dirilis oleh Indonesia SEA Games Organizing Committee (Inasoc) setelah pengambilan undian, pertandingan cabang sepak bola Grup A SEA Games XXVI dimulai pada 9 November 2011. Laga pembuka antara Singapura dan Malaysia pada pukul 16.00 dan dilanjutkan laga antara tuan rumah Indonesia dan Kamboja pada pukul 19.00. Namun, jadwal ini direvisi pekan lalu.
Jadwal delapan laga awal pertama di Grup A dimajukan. Laga pembuka yang dijadwalkan pada tanggal 9 November dimajukan ke awal pekan depan, Senin (7/11/2011). Menurut informasi yang diterima, jadwal Grup A disesuaikan agar tidak tabrakan dengan jadwal laga babak kualifikasi Pra-Piala Dunia 2014 Grup E Zona Asia antara timnas senior Indonesia dan Iran pada 15 November yang akan digelar di Stadion Utama Gelora Bung Karno.
Penyesuaian dilakukan karena semua laga di Grup A digelar di Stadion Utama Gelora Bung Karno. Sementara itu, laga Grup B yang digelar antara 13 dan 15 November tidak berubah karena akan dilakukan di Stadion Lebak Bulus.
Sementara itu, kepastian informasi penjualan tiket masih belum diperoleh dari Inasocsebagai panitia penyelenggara SEA Games XXVI.
Jadwal sepak bola SEA Games XXVI: Babak Penyisihan Grup A digelar di Stadion Utama Gelora Bung Karno :
Senin, 7 November 2011, Singapura vs Malaysia (16.00), Indonesia vs Kamboja (19.00)
Rabu, 9 November 2011, Malaysia vs Thailand (16.00), Kamboja vs Singapura (19.00)
Jumat, 11 November 2011, Thailand vs Kamboja (16.00), Singapura vs Indonesia (19.00)
Minggu, 13 November 2011, Malaysia vs Kamboja (16.00), Indonesia vs Thailand (19.00)
Kamis, 17 November 2011, Thailand vs Singapura (16.00), Indonesia vs Malaysia (19.00)
Babak penyisihan Grup B bertempat di Stadion Lebak Bulus dan Stadion Utama Gelora Bung Karno :
Kamis, 3 November 2011, Vietnam vs Filipina (16.00), Laos vs Myanmar (19.00) di Gelora Bung Karno.
Sabtu, 5 November 2011, Brunei vs Timor Leste (16.00), Myanmar vs Vietnam (19.00) di Gelora Bung Karno.
Senin, 7 November 2011, Timor Leste vs Filipina (16.00), Laos vs Brunei (19.00) di Stadion Lebak Bulus.
Rabu, 9 November 2011, Myanmar vs Brunei (16.00), Vietnam vs Timor Leste (19.00) di Stadion Lebak Bulus.
Jumat, 11 November 2011, Filipina vs Laos (16.00), Brunei vs Vietnam (19.00) di Stadion Lebak Bulus.
Minggu, 13 November 2011, Filipina vs Myanmar (16.00), Timor Leste vs Laos (19.00) di Stadion Lebak Bulus.
Selasa, 15 November 2011, Myanmar vs Timor Leste (16.00), Filipina vs Brunei (19.00) di Stadion Lebak Bulus.
Kamis, 17 November 2011, Laos vs Vietnam (16.00) di Stadion Lebak Bulus.
Sementara itu, babak lanjutan diselenggarakan di Stadion Utama Gelora Bung Karno :
Sabtu, 19 November 2011, pemenang Grup A vs runner-up Grup B (16.00) pemenang Grup B vs runner-up Grup A (19.00).
Senin, 21 November 2011, Kalah vs kalah (16.00) Pemenang vs pemenang (19.00).
Marilah kita support timnas kebanggaan kita semua supaya bisa menjadi juara di SEA Games kali ini
Saturday, October 15, 2011
Uniblue DriverScanner 2011 ver 4.0.2.1 + Serial Number
Masalah driver lama biasanya pasti akan ada kesalahan teknis. contohnya System menjadi Crash,Bluescreen dan lain-lain.Untuk solusinya anda bisa memakai DriverScanner ini.DriverScanner akan memeriksa apakah dalam komputer anda ada Driver yang harus diupdate (Anda harus terhubung ke internet).Selain itu DriverScanner memudahkan anda dalam penggunaannya yaitu hanya sekali klik,DS ini akan mencari sampai ujung akar Driver di komputer anda,DS juga memiliki tampilan yang elegan,juga tersedia Restore point,dan lain-lain.
Berikut Screenshotnya :
 |
| UDS 2011 Scan Results |
 |
| UDS 2011 Driver Download |
 |
| UDS 2011 Register |
Jika sobat tertarik silahkan download di link yang sudah saya sediakan di bawah :
Thursday, October 13, 2011
Follow Twitter Bird dengan Excellent Flash
Bingung nih posting apa lagi ya?? daripada pusing mending saya share Follow Twitter Bird dengan Excellent Flash barang kali masih ada yang belum tau cara membuat widget ini,ok langsung saja di coba :
1. Login ke akun Blog sobat.
2. Pilih Layout, add gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget sobat.
Catatan : Perhatikan teks yang berwarna biru, anda ganti semua sesuai dengan ID anda.
4. Terakhir Simpan.
1. Login ke akun Blog sobat.
2. Pilih Layout, add gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget sobat.
Catatan : Perhatikan teks yang berwarna biru, anda ganti semua sesuai dengan ID anda.
4. Terakhir Simpan.
Hasilnya seperti ini :
1. Login ke akun Blog sobat.
2. Pilih Layout, add gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget sobat.
Catatan : Perhatikan teks yang berwarna biru, anda ganti semua sesuai dengan ID anda.
4. Terakhir Simpan.
Hasilnya seperti ini :
1. Login ke akun Blog sobat.
2. Pilih Layout, add gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget sobat.
Catatan : Perhatikan teks yang berwarna biru, anda ganti semua sesuai dengan ID anda.
4. Terakhir Simpan.
Hasilnya seperti ini :
Semoga postingan saya kali ini bisa bermanfaat untuk sobat semua ^_^
Follow Twitter Bird dengan Excellent Flash Ver. 1
1. Login ke akun Blog sobat.
2. Pilih Layout, add gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget sobat.
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4dZCLmfqMD4xuPkSjBXZKoDgc-sUQOl-X_eQdQtv-HwOYN9wi9ndhS_YaqWav9WlZLQOHV5VOmjuZ6NmZZasboMiDkacjiz_bKSq7_EQDY5ybjmSuwUsvDEyT9liKvAf0Rzt8Mgs_Dk/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/blogcunayz";var tweetThisText = "Twitter - UserID http://www.blogcunayz.blogspot.com/";tripleflapInit();
</script>
Catatan : Perhatikan teks yang berwarna biru, anda ganti semua sesuai dengan ID anda.
4. Terakhir Simpan.
Hasilnya seperti ini :
Follow Twitter Bird dengan Excellent Flash Ver. 2
1. Login ke akun Blog sobat.
2. Pilih Layout, add gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget sobat.
<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" width="180" height="80"><param name="movie" value="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=blogcunyz"></param><a href="http://www.gamblinginsider.ca" title="gambling">gambling</a><embed src="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="80" menu="false" wmode="transparent" flashvars="username=blogcunayz"></embed></object>
Catatan : Perhatikan teks yang berwarna biru, anda ganti semua sesuai dengan ID anda.
4. Terakhir Simpan.
Hasilnya seperti ini :
Follow Twitter Bird dengan Excellent Flash Ver. 3
1. Login ke akun Blog sobat.
2. Pilih Layout, add gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget sobat.
<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" width="200" height="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=blogcunayz"></param><a href="http://www.dreambingo.co.uk/" title="http://www.dreambingo.co.uk/">http://www.dreambingo.co.uk/</a><embed src="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=blogcunayz"></embed></object>
Catatan : Perhatikan teks yang berwarna biru, anda ganti semua sesuai dengan ID anda.
4. Terakhir Simpan.
Hasilnya seperti ini :
Follow Twitter Bird dengan Excellent Flash Ver. 4
1. Login ke akun Blog sobat.
2. Pilih Layout, add gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget sobat.
<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf" width="100" height="100"><param name="movie" value="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=blogcunayz"></param><a href="http://www.gamblinginsider.ca" title="online gambling insider.ca">online gambling insider.ca</a><embed src="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="100" height="100" menu="false" wmode="transparent" flashvars="username=blogcunayz"></embed></object>
Catatan : Perhatikan teks yang berwarna biru, anda ganti semua sesuai dengan ID anda.
4. Terakhir Simpan.
Hasilnya seperti ini :
Semoga postingan saya kali ini bisa bermanfaat untuk sobat semua ^_^
Sunday, October 9, 2011
Cara Membuat Efek Rotate Miring Dengan CSS3
Caranya cukuplah mudah dan kode yang perlu di rehab juga cuman kode CSS-nya saja, yaitu dengan menggunakan kode CSS3, Tetapi ada kekurangannya juga, karena hanya browser terbaru yang support CSS3.
Sebelum kita melihat kode CSS nya, disini saya akan memberikan 2 (dua) efek miring yang pertama :
1. Efek miring ke kanan :
transform:rotate(2deg); -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg)
2. Efek miring ke kiri :
transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg)
Catatan : Sobat Perhatikan angka yang berwarna merah, itu adalah besar Rotate, jika makin besar angkanya maka akan semakin miring.. intinya itu saja..
Jadi caranya begini, misalkan sobat pengen memberikan efek rotate miring pada bagian Judul Posting, maka kita cari dulu Kode pada bagian Postinganya dengan kode seperti berikut :
.post h3 a {
color:#222;
margin:0;
text-shadow:0px 1px 1px #fff;
}
.post h3 a:hover {
color:#ddd;
text-shadow:0px 1px 1px #000;
}
Setelah ketemu, sobat tinggal memasukkan kode CSS diatas didalamnya sebelum tag penutup }
Maka hasilnya seperti ini :
.post h3 a {
color:#222;
margin:0;
text-shadow:0px 1px 1px #fff;
transform:rotate(2deg); -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg)
}
.post h3 a:hover {
color:#ddd;
text-shadow:0px 1px 1px #000;
transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg)
}
Setelah cara diatas kita lalukan, coba sobat Priview dulu, setelah ada perubahan, baru sobat bisa SAVE TEMPLATE.
Berikut Screenshotnya :
 |
| Sebelum di Sorot |
 |
| Setelah di Sorot |
Selamat berkreasi ^_^
Friday, October 7, 2011
Pengertian SEO On Page Dan Off Page
Kali ini saya akan share sedikit tentang SEO On Page Dan Off Page. Dalam dunia SEO ada istilah yang bernama SEO on page dan juga off page istilah-istilah tersebut adalah cara optimasi Search EngineSEO On Page
SEO On Page adalah semua teknik optimasi Search Engine untuk blog atau website Anda
Berikut contoh SEO on Page :
- Nama Domain
- Judul Blog atau Website
- Judul Posting
- Deskripsi
- Penggunaan Heading misalnya (h1,h2,h3 dll)
- Penggunaan kata tebal, miring, garis bawah, dan lain sebagainya.
- Internal link ( tautan ke halaman posting lain yang masih dalam bagian blog Anda)
- Memepercepat waktu akses blog (Loading Blog)
- Penggunakan tag alt pada setiap gambar
- Dan masih banyak lagi yang lainnya untuk informasi selengkapnya silahkan search di embag Google
SEO Off Page
SEO Off Page adalah semua teknik optimasi search engine yang di lakukan di luar blog atau website Anda.
Beberapa contoh SEO Off Page :
- Backlink dari website atau blog lain
- Submit site map ke webmaster tools
- Ping
Saya ambil ilustrasi, apabila dalam sebuah pemilihan, katakanlah pemilihan kepala desa. Untuk memilih seorang kepala desa, yang pertama kita lihat adalah track record kepada calon kepala desa tersebut, bagaimana dia bertingkah laku dalam masyarakat, bagaimana dia berbicara, dan lain sebagainya.
Selain dari faktor calon kepala desa nya sendiri, seringkali kita juga melihat siapa yang mendukung calon kepala desa tersebut. Semakin banyak dukungan ( kadang kita melihat jumlah dukungan pada saat kampanye berlangsung) maka terkadang kita terbawa arus untuk ikut mendukung juga. Selain dari jumlah dukungan, seringkali kita juga melihat siapa yang mendukung, Tokoh masyarakat misalnya. Semakin banyak tokoh masyarakat yang mendukung, maka kita juga akan lebih mempercayai calon kepala desa tersebut.
Dalam konteks ini, search engine pun melihat backlink bukan hanya dari segi jumlah, namun dari segi kualitas link tersebut. Semakin banyak anda mendapatkan link dari website yang berkualitas (trusted site) maka niscaya anda akan semakin di prioritaskan oleh Search Engine.
Semoga posting saya dapat bermanfaat untuk Sobat Blogger semua, bila ada kritik dan saran silahkan tinggalkan pesan di kotak komentar (komentar yang menurut saya tidak sopan atau kasar mohon maaf akan saya hapus)
Sunday, October 2, 2011
Cara Membuat Valid XHTML Blogger
 |
| XHTML |
Ilmu yang akan saya share sekarang adalah Cara Membuat Valid XHTML Blogger sebenarnya bukan cuma HTML aja yang harus Valid tapi CSS juga,berhubung saya baru belajar jadi saya cuma bisa share Valid XHTML aja mungkin di postingan selanjutnya saya akan share.
Mengapa blog/web kita harus Valid XHTML dan CSS?? jawabannya sangat simple "supaya website atau blog kita lebih ramah dengan search engine" memang sulit untuk membuat website atau blog kita Valid 100% blog ini pun belum 100% Vaid alias masih ada beberapa error. untuk mengecek berapa error yang blog sobat miliki silahkan cek disini validator.w3.org
Berikut langkah-langkah untuk mengurangi error blog/website kita :
Bagian Pertama
- Edit HTML Pada Posting
<a href="URL Anda"><img alt="http://i1179.photobucket.com/albums/x388/blogcunayz/cooltext539714264.png?t=1310583040"/></a>
2. Jika Sobat masih menggunakan Read More bawaan Blogger Sobatharus membentuk kalimat "di bagian Edit HTML" seperti berikut
<!-- more -->
Bagian Kedua
- Edit HTML Template Blogger
2. Centang Edit HTML Pada Posting
3. Memperbaiki "doctype"
awalnya seperti ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ubah menjadi seperti ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
("untuk mempermudah pencarian Sobat bisa tekan Ctrl+F")
4. Menghapus Navbar dengan menambahkan kode berikut sesudah kode </head>
<!-- <body>
<div></div> -->
5. Cari kode berikut :
<b:include data='blog' name='all-head-content'/>
ubah menjadi :
<!-- Blogger Default Meta --> <meta content='true' name='MSSmartTagsPreventParsing'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <link expr:href='data:blog.url' rel='canonical'/> <link href='http://www.blogger.com/profile/IDBLOGGERANDA' rel='me'/> <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/> <link href='http://www.blogger.com/rsd.g?blogID=IDBLOGANDA' rel='EditURI' title='RSD' type='application/rsd xml'/> <link href='http://www.blogger.com/feeds/IDBLOGANDA/posts/default' rel='service.post' title='NAMABLOGANDA - Atom' type='application/atom xml'/> <link href='http://www.URLANDA.blogspot.com/feeds/posts/default' rel='alternate' title='NAMABLOGANDA - Atom' type='application/atom xml'/> <!-- End Blogger Default Meta -->
Bagian Ketiga
- Edit CSS Template Blogger
/*----------- Header ------------*/
ubah menjadi :
/* Header */
Hapus semua tanda Dash yang berada di dalam CSS template Sobat
2. Cari kode berikut :
<b:include name='quickedit'/>
Hapus kode di atas tanpa ampun/sampai tidak tersisa,lakukan cara ini ketika Sobat menambah widget baru
3. Trik berikut ini untuk menghilang Navigasi Newer dan Older Post pada halaman index yang masih mengandung error dengan cara mencari kode ini :
<b:include name='nextprev'/>
ubah menjadi :
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
Dengan melakukan trik di atas dengan teliti dijamin error dalam template blog/web Sobat akan jauh berkurang contohnya dulu error dalam blog Saya ini mencapai 280 Errors, 300 warning(s) buah sekarang sekitar 35 Errors, 40 warning(s) untuk demonya silahkan Sobat praktekin aja sendiri
Friday, September 30, 2011
Script Untuk Menghindari Para Tukang Copas
Saya sering melihat artikel yang di copas oleh banyak orang dan tidak memberikan sumber atau asal muasal artikalnya.
Jika artikel yang susah-susah kita bikin di copy begitu saja rugi kan? makanya saya share script ini untuk menghindari para Tukang Copas yang main copas tanpa membacanya terlebih dahulu.
Dengan trik ini ketika artikel blog kita di copy maka akan muncul url blog sobat di bagian bawah artikel yang di copy mungkin trik ini hanya untuk mengantisipasi Copasser, karena tukang Copas jaman sekarang sudah pada pinter.
jika sobat tertarik untuk mencpba trik ini silahkan ikuti langkah-langkah di bawah ini :
1. Login ke blogger
2. Klik Rancangan >> Edit HTML
3. Cari kode <head> untuk mempermudah pencarian tekan Ctrl+F
4. Masukan script berikut diatas kode <head>
<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var pagelink = "<br/><br/> Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright Fachrulakberr.blogspot.com Under Common Share Alike Atribution"; // change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}document.oncopy = addLink;
</script>
Catatan ganti kode yang berwarna merah dengan url blog sobat
5. Simpan template and done
Semoga trik kali ini dapat bermanfaat
Sunday, September 25, 2011
Cara Meningkatkan Traffic Blog Dengan (Manual)
Pada kesempatan ini saya akan share cara meningkatkan traffic blog/web kita dengan cara manual setelah kemarin saya share dengan otomatis jika sobat belum membacanya silahkan baca Cara Mudah Meningkatkan Traffic Blog dengan AutoSurf.Trik yang akan saya share sekarang ada beberapa kelebihan di banding dengan trik sebelumnya trik kali ini dapat memperikan penghasilan tambahan bagi kita selain kita mendapatkan traffic plus dapet money/uang juga,tapi kelemahannya trik kali ini menggunakan tenaga sendiri atau manual (santai) kita bisa baca-baca dulu,chat,comment dll sambil mencari traffic,...
cekedot lah langsung saja,...
1. Daftar di ngeCLICK.com
2. Aktivasi dengan email
3. Login >> Edit Profil >> Klik Situs Rotasi >> Masukan blog/web anda,masukan alokasi minimal (75%) >> Save.
4. Pilih menu mulai ngklik : lihat kiri atas (angka mundur) setelah muncul kata GO lalu lihat kotak hijau dan klik gambar yang sama di sebelah kanan.
Catatan : Pembayaran dikirim melalui PayPal
Semoga trik saya kali ini dapat memecahkan masalah sobat blogger semua, apabila ada kritik dan saran silahkan tinggalkan pesan di kotak komentar. kritik dan saran sobat semua sangat saya hargai,...
Sumber ilmu : vikrymadz.blogspot.com
Wednesday, September 21, 2011
Cara Mudah Meningkatkan Traffic Blog dengan AutoSurf
AutoSurf adalah situs" traffic exchange, tapi yang ini secara otomatis jadi kita gak susah ngeclick" gambar" pada situs traffic exchange. Jadi kita tinggal klik Surf langsung deh kita secara otomatis akan mengunjungi blog/web orang lain dan pastinya orang lain akan mengunjungi blog/web kita...
langsunga aja ke TKP
Yang pertama sobat masuk ke www.surfingforvisitors.com
Isi data sobat > Konfirmasi e-mail > Langsung Surfing
Kita akan mendapatkan 0.5 credit/12 detik dan 1 credit = 1 visitor/pengunjung jadi kesimpulannya apabila kita surfing 24 detik maka blog/web kita akan di kunjungi 1 pengunjung.
Sekarang saya anggap sobat selesai registrasi selanjutnya masuk home > member home > add new site
Site name : Isi dengan nama blog / web sobat
Site URL : Isi dengan alamat blog / web sobat
Site language : Pilih English
Terakhir klik add site
Jika sobat ingin mengalokasikan trafficnya
klik pada menu Assign Credits > Assign Site Credits lalu masukkan berapa credit (traffic) yang ingin sobat peroleh, dan jangan lupa klik tombol Assign Credits.
Dan untuk mendapatkan Credit sobat klik Star Surfing
Sumber ilmu : vikrymadz.blogspot.com
Monday, September 19, 2011
IDM 6.07 Build 11 Final Full Patch + Keygen
Hallo sobat blogger,...na pada kesempatan ini saya akan share Internet Download Manager 6.07 Build 11 Final Full Patch + Keygen. loh?? kok cepet banget ya IDM updatenya ya?? kemaren saya baru share Internet Download Manager 6.07 Build 5 Full Patch sekarang sudah Build 11.
lang sung ke TKP aja silahkan di download
Berikut adalah sedikit kilas balik tentang Internet Download ManagerInternet Download Manager untuk sobar blogger yang belum tau.
Internet Download Manager adalah software untuk mempercepat file yang kita download 5 kali lebih cepat.Support resume dan schedule downloads. Internet Download Manager mendukung proxy server, ftp dan http protocols, firewall,pengalihan, cookies, authorization MP3 audio dan MPEG video content processing. IDM dapat diintegrasikan ke dalam Microsoft Internet Explorer, Netscape, MSN Explorer, AOL, Opera, Mozilla, Mozilla Firefox, Mozilla Firebird, Avant Browser, MyIE2, dan semua browser populer lainnya untuk secara otomatis menangani file yang kita download.
What's new in version 6.07 Build 11?
- Added video stream recognition for several new web players
- Fixed a critical bug in 64bit versions of Windows
- Instal Internet Download Manager v6.07 Build 11 Final hingga selesai
- Exit program IDM dan Tray icon IDM yang berada di Task Manager
- Copy dan paste Patch.exe ke (C:\Program Files\Internet Download Manager)
- Jalankan Patch.exe dan klik Patch, tunggu hingga sampai pesan sukses muncul
- Buka Keygen.exe dan klik Generate, Copy Serial tersebut dan pastekan ke dalam program IDM
- Selesai
Sunday, September 11, 2011
Menampilkan Hanya Judul Postingan Jika Label Diklik
Hallo sobat blogger,... Pada kesempatan ini saya akan share tips agak ketika sobat atau pengunjung blog sobat mengklik label,maka yang muncul hanyalah judul postingnya saja sudah mengerti maksud saya??
Biasanya ketika ada pengujung atau sobat mungkin menge-klik salah satu label di Blog pastinya postingan yang muncul sangat panjang dan membuat capek jika Anda mengerakan scrolnya, nah agar lebih singkat maka ditampilkan judul postingannya saja. Contohnya lihat gambar dibawah ini :
Untuk demonya silahkan sobat klik label d blog ini
1. Login ke blogger dengan ID anda
2. Klik Tata Letak / Layout
3. Klik Tab Menu Edit HTML
4. Backup dulu sebelum melakukan editting template dengan klik Download Template Lengkap. Mengantisipasi jika penambahan kode salah.
5. Klik kotak keciil diasmping tulisan Expand Widget
6. Cari kode
atau kode
Untuk memudahkan mencari tekan ctrl F / F3. Kemudian hapus dan diganti dengan kode beriku ini :
7. Untuk memberikan background sobat ganti kode yang berwarna merah dengan kode berikut :
Catatan : silahkan sobat edit sendiri kode yang berwarna merah sesuka sobat
9. Jika sobat mau menambahkan icon tinggal tambahkan kode berikut sebelum kode <data:post.title/></div></a>
11. Save template
Selamat mencoba,...
Biasanya ketika ada pengujung atau sobat mungkin menge-klik salah satu label di Blog pastinya postingan yang muncul sangat panjang dan membuat capek jika Anda mengerakan scrolnya, nah agar lebih singkat maka ditampilkan judul postingannya saja. Contohnya lihat gambar dibawah ini :
Untuk demonya silahkan sobat klik label d blog ini
1. Login ke blogger dengan ID anda
2. Klik Tata Letak / Layout
3. Klik Tab Menu Edit HTML
4. Backup dulu sebelum melakukan editting template dengan klik Download Template Lengkap. Mengantisipasi jika penambahan kode salah.
5. Klik kotak keciil diasmping tulisan Expand Widget
6. Cari kode
<div class='blog-posts feed'>
atau kode
<b:include data='post' name='post'>
Untuk memudahkan mencari tekan ctrl F / F3. Kemudian hapus dan diganti dengan kode beriku ini :
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
7. Untuk memberikan background sobat ganti kode yang berwarna merah dengan kode berikut :
<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'> <data:post.title/></div></a>
Catatan : silahkan sobat edit sendiri kode yang berwarna merah sesuka sobat
9. Jika sobat mau menambahkan icon tinggal tambahkan kode berikut sebelum kode <data:post.title/></div></a>
<img alt='>>>' border='0' src='URL icon Sobat'/>10. Kode warna biru ganti dengan alamat URL icon Anda, Sehingga akan nampak seperti ini :
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'><img alt='>>>' border='0' src='URL icon Sobat'/><data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
11. Save template
Selamat mencoba,...
Thursday, September 8, 2011
Cara Vertifikasi Ulang Blog Ke Google Webmaster Tools
Hallo sobat blogger pada kesempatan ini saya akan share Cara Untuk Vertifikasi Ulang Blog Ke Google wenmaster Tools.Cara vertifikasi ulang blog ke webmaster tool dengan menggunakan meta tag, biasanya cara ini dilakukan karena mata tag terhapus dikarenakan ganti template atau hal lainnya.saya pun sering mengalaminya karena saya sering gunta-ganti template wkwkwkw dan tentunya solusinya adalah dengan tips yang akan share sekarang.
ok cekedot langsung ke TKP
Cara Untuk Vertifikasi Ulang Blog Ke Google Webmaster Tools
- Login ke google webmaster tools
- Setelah login maka akan muncul nama blog sobat. Klik manage yang ada disebelah kanan pinggir nama blog sobat yang ingin di reverify/verifikasi ulang
- Selanjutnya klik add remove. Vertification details sobat maka akan muncul keterangan seperti ini :
Verification details
You're currently a verified owner of http://blogname.blogspot.com/. Verified using these methods:
Pada saat verification detail muncul, maka akan menunjukan metode verifikasi yangsobat gunakan. Jika sebelumnya sobat belum pernah melakukan verifikasi menggunakan META tag, biasanya sudah terverifikasi dengan HTML file. Untuk dapat memverifikasi ulang silakan pilih "Verify using a different method.". Setelah itu akan muncul pilihan verification methods (metode verifikasi). Untuk pengguna blogspot hanya mempunyai dua pilihan dari 4 pilihan yang ada.
Pertama: Link to your Google Analytics account
Untuk yang ini sobat harus mengaktifkan akun google analytics sobat dan memasang Google Analytics tracking code yang diberikan pada saat mengaktifkan. Jika sobat pernah memasang Google Analytics tracking code dan masih tersimpan di template blog sobat, maka sobat dapat memilih metode verifikasi "Link to your Google Analytics account" kemudian klik "Verify", selesai.
Kedua: Add a meta tag to your site's home page
Yaitu verifikasi menggunakan meta tag yang harus disimpan selamanya dihalaman homepage melalui template, letaknya dibawah kode <head>. Silakan pilih "Add a meta tag to your site's home page" kemudian copy meta tag yang diberikan, buka browser pada tab baru dan masuk ke blogger.com > klik design/rancangan > Edit HTML, centang Expand Widget Template > letakan kode meta tag dibawah kode <head> > save template. Kembali lagi ke tab verifikasi tadi, klik "Verify", selesai.
Ketiga: Lupa kode Meta Tag Verifikasi atau Hilang
Jika sobat telah memverifikasi menggunakan meta tag sebelumnya, maka keterangan Verification detailsnya akan mengatakan "You're currently a verified owner of http://blogname.blogspot.com/. Verified using these methods: META Tag. +Details".
Klik "+Details" maka akan muncul kode meta tag verifikasi sobat, untuk memverifikasi ulangnya cukup copy kode meta tag yang ada pada +Details tersebut dan simpan di template sobat. Selanjutnya google akan menemukan kembali meta tag sobat pada saat googlebot meng crawl blog sobat dan saat itu artinya, selamat! blog sobat sudah terverifikasi ulang.
sekian tips dari saya semoba dapat bermanfaat bagi sobat blogger semua jika sobat punya ktirik,saran dan tambahan silahkan tinggalkan pesan di kotak komentar
Subscribe to:
Posts (Atom)