Blog Votre: Mei 2013

Kamis, 30 Mei 2013

Cara Membuat Pesan Formulir Komentar di Blog

Sore sobat Blog Krizeer, pada kesempatan kali ini saya mau membahas tentang Cara Menambahkan Teks Dibawah Poskan Komentar. Cara Membuat Pesan Formulir Komentar di Blog memang sangat berguna, dan tujuannya adalah untuk memberikan peraturan berkomentar pada web tersebut. Langsung saja kita simak bersama-sama dibawah ini :

Login ke blogger
Masuk ke setelan
Klik post dan komentar
Cari dibawah "pesan formulir komentar" => klik tambahkan.
Lalu isi peraturan tentang berkomentar atau apalah yang anda mau.

Untuk gambarnya saya minta maaf karena saya tidak bisa mengedit gambar.

Floating Social Bookmark dengan Efek Easing

DEMO

Sore sobat Blog Krizeer, pada kesempatan kali ini saya mau membahas tentang Floating Social Bookmark dengan Efek Easing. Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :

Login ke Blogger
Masuk ke Template >> Edit HTML (centang expand widget templates)
Letakkan kode CSS di bawah ini diatas ]]></b:skin> :

.social-buttons {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.button-left {
left: 0;
}
.button-right {
right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
background-color: #33353B;
background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
background-position: right 10px;
}
.button-left #twitter-btn span {
background-position: right -35px;
}
.button-left #google-btn span {
background-position: right -127px;
}
.button-left #rss-btn span {
background-position: right -80px;
}
.button-left #pinterest-btn span {
background-position: 11px -177px;
}
.button-left #youtube-btn span {
background-position: 11px -223px;
}
.button-right #facebook-btn span {
background-position: 12px 10px;
}
.button-right #twitter-btn span {
background-position: 11px -35px;
}
.button-right #google-btn span {
background-position: 10px -127px;
}
.button-right #rss-btn span {
background-position: 11px -80px;
}
.button-right #pinterest-btn span {
background-position: 11px -177px;
}
.button-right #youtube-btn span {
background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
background-color: #C4302B;
}
.social-buttons a:hover .social-text {
display: block;
}
.button-left .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-left .social-text {
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.button-right .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-right .social-text {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.social-buttons .social-text {
color: #FFFFFF;
}

4. Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut di atas tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/><script> $(window).load(function(){ $('.social-buttons .social-icon').mouseenter(function(){ $(this).stop(); $(this).animate({width:'160'}, 500, 'easeOutBounce',function(){}); }); $('.social-buttons .social-icon').mouseleave(function(){ $(this).stop(); $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){}); }); });</script>

5. Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :

<div class='social-buttons button-right hidden-phone hidden-tablet'><a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a><a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a><a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a><a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Pinterest</span></span></a><a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a><a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a></div>

6. Terakhir simpan template
referensi dari maskolis.com

Cara Membuat Back To Top dengan Effect Bounce

Sore sobat Blog Krizeer, pada kesempatan kali ini saya mau membahas tentang Cara Membuat Back To Top dengan Effect Bounce.
Mungkin sobat semua udah gk heran dengan Judul Blog Ini.

Ok langsung aja kita bahas satu per satu !!!

1. Cari kode ]]></b:skin> lalu letakan kode ini di atas kode tadi

#toTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none; color:#000; font-family:verdana; font-size:11px;}

2. Cari kode </head> dan letakkan script di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() > 100) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); $('#toTop > img').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script>

3. Simpan Template
4. dan pergi ke edit laman ambil tambah gadget dan ambil HTML/JAVASCRIPT lalu letakk kan kode di bawah ini

<div id='toTop'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIIQuiqp6nZ1cF6BfJ6_cgMj_f5sPrU30sWAFRkZX3LEXqytHVFSi7sxwoZL3wY5gR4FY6iykAcg9xVdK1CmWbl2yzF4vXxG0AFb7wwmAJpNQJxrgUH2oxyDGUiSsiHrWTSncXEQG2mHOC/s1600/Back+To+Top.png' style='margin-right:-9px'/></div>

Kode merah ganti dengan URL gambar kamu.
Sekian Trima Kasih :v
referensi dari http://greenz-blogger.blogspot.com/

Rabu, 29 Mei 2013

Cara Membuat Animasi Loading Blog Lebih Menarik

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYiHTxj6klI_lCK51yk6-1Vyj6IlOZW2p4hmNebnoaH9hii2h90-ZaFkgcZedBEcugh2ilX7hOqmmnoqRpB-4Wyc80xmrEfnsZtV6ew8JDrKxZh_HK1AlYom0JcBImYQieLBwfhcCpIzU/s320/circle.jpg

Cara Membuat Animasi Loading Blog Lebih Menarik - Tips Blog Banyak hal menarik dan efek/plugin yang dapat dipakai atau diberikan oleh blogger.

Nah sore ini saya mau mencoba share bagaimana caranya membuat efek loading pada blog, agar terlihat lebih menarik, biasanya ini sangat disukai bagi yang suka ngoprek dan yang ingin blognya terlihat cantik dan keren, tutorial ini sudah terbuktu berhasil 100% jika anda baca dengan teliti. Ok tanpa basa-basi simak langkahnya berikut ini :

Note : Sebaiknya anda membaca dengan baik langkah yang telah diberikan dan jangan lupa backup template anda, supaya jika ada kesalahan HTML bisa di upload template yang dulu anda pakai.

Login ke akun blogger anda
Klik Template » edit HTML
Tambahkan kode CSS berikut di atas kode ]]></b:skin>

Animasi Loading Part, 1 Berwarna Merah

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

4. Kemudian tambahkan kode jquerty ini diatas kode </head>, jika dalam template kalian sudah terpasang jquerty maka tidak perlu lagi tambahab jquerty tersebut, agar proses efek loading lancar.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

5. Dan langkah terakhir pasang kode di bawah ini tepat di atas kode </body>

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>

referensi dari setyabloggerslalu.blogspot.com/
Anda boleh mencopy paste artikel ini dengan syarat mencantumkan link blog ini sebagai sumbernya !!! Jika anda menemukan masalah tentang Cara Membuat Animasi Loading Blog Lebih Menarik bisa anda tanyakan dengan berkomentar di bawah.

Minggu, 26 Mei 2013

Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog

Tutorial Belajar Blog | Tips Blog | Trik Blog - Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog - Bagi Anda yang ingin scroll bar Anda berubah seperti Punya saya!! Dengan menggunakan script CSS Anda bisa merubah scroll bar Anda di Blog Anda. Bisa mempebesarnya ataupun memperkecil scroll bar blog Anda!

Buka Blogger.com > Rancangan > Edit HTML
Cari kata ]]></b:skin> dengan menekan tombol CTRL + F
Paste code berikut di atas ]]></b:skin>

::-webkit-scrollbar {height:12px;width: 12px;background: #474747;}
::-webkit-scrollbar-thumb {background-color: #ff0000;-moz-border-radius: 10px;border-radius: 10px;}

Paste diatas tinggal Anda ganti saja beberapa code yang saya kasih warna merah, ini berguna untuk mengganti warnanya. Kalau Anda bisa ganti semua kenapa tidak di ganti tuh kode?

Beberapa browser mungkin tidak support dengan kode ini tapi saya memakai Google Chrome code ini berfungsi kok!
Note :

kode warna yang berwarna merah ganti dengan kode warna yang anda inginkan, kode warna bisa dicari di google.~Semoga Bermanfaat !!~
Referensi dari tutorialbelajarblogger.blogspot.com/

Sabtu, 25 Mei 2013

X10 Masonry Template - Smart Education

Demo - Download

Demo - Download

Feature :

Responsive
Menyesuaikan ukuran di semua jenis layar termasuk IE (Internet Explorer), mungkin karna menggunakan jquery masonry maka nya template nya jadi fluid

Description :

Author : Andre Pandet Rank Khoerai
Url : http://urang-kurai.blogspot.com

Thanks to Andre Pandet Rank Khoerai
Sumber : http://art-preview.blogspot.com/2012/06/x10-masonry-template.html

Simple Faster White V1 - Smart Education

Selamat pagi sobat blogger ada kabar gembira buat kalian semua nih saya akan share template lagi nih nama templatenya adalah "Simple Faster White V2" pokonya templatenya keren dehh, liat di bawah keunggulan-keunggulan template Simple Faster White V1 :

Read More
Sidebar 2 kolom
Menu di header keren
Bisa + HTML di Header kaya contact gitu
Label 3 kolom kesamping

Demo - Download

Password : salading

Jangan pernah mengganti credit by Smart Education, mohon hargailah template hasil saya, jika ada kekurangan mohon maaf karena saya manusia. Yang namanya manusia pasti ada kekurangan dan kelebihannya masing-masing.

Cara Menghilangkan Tulisan Diberdayakan Oleh Blogger

Selamat sore sobat blogger kali ini saya akan share "Cara Menghilangkan Tulisan Diberdayakan Oleh Blogger", caranya sangat mudah sekali, dari pada kebanyakan bacot langsung saja ke intinya yokk.

Login blogger sobat
Terus ke Template-> edit HTML
Cari kode ]]></b:skin, gunakan tombol tekan Ctrl+f atau F3 untuk memudahkan pencarian
Copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin :

#Attribution1 {height:0px;visibility:hidden;display:none}

Yang terakhir jangan lupa SIMPAN, kalau lupa klik SIMPAN nantinya kembali lagi ke awal, wkwkwk

Minggu, 19 Mei 2013

Cara Membuat Daftar Isi Blog Secara Otomatis

Cara Membuat Daftar Isi Blog Secara Otomatis - Selamat malam sahabat blogger. Pada kesempatan ini saya akan menjelaskan bagaimana cara membuat daftar isi di blog secara otomatis. Daftar isi sangat berguna untuk mempermudah para pengunjung blog dalam mencari artikel atau konten yang mereka cari / inginkan. Sedangkan manfaat untuk admin blog yaitu daftar isi blog juga dapat meningkatkan jumlah page view blog.

Untuk melihat tampilannya seperti apa, anda bisa melihat demonya terlebih dahulu :
DEMO

Nah bagaimana, apakah anda berminat untuk memasang daftar isi di blog anda? Untuk memasang widget daftar isi di blog, anda dapat melakukan beberapa langkah mudah membuat daftar isi berikut ini :
Langkah-langkah memasang widget Daftar Isi di blog :
1. Login ke akun blogger
2. Klik "Laman Baru" kemudian klik "Laman Kosong", untuk lebih jelasnya, silahkan perhatikan gambar dibawah ini :

Gambar 1.1

3. Kemudian pilih Mode HTML

http://zicblogger.blogspot.com/p/daftar-isi.html

4. Lalu copy kode script dibawah ini :

<div style="border: 1px solid #eee; height: 700px; overflow: auto; padding: 10px; width: 530px;">
<script src="http://widgetsitemap.googlecode.com/files/daftarisi.js"></script><script src="http://yoga-tc.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> </div>

Keterangan :
Ganti kode yang berwarna merah ( yoga-tc ) : dengan alamat blog anda!

6. Kemudian anda letakan pada halaman kosong tadi,

Gambar 1.2

Keterangan gambar 1.2 :
1. Pilih mode HTML
2. Letakan kode pada halaman kosong
3. Berikan judul (terserah anda)
4. Klik "Publikasikan"

7. Selesai
Referensi : http://zicblogger.blogspot.com/2013/01/cara-membuat-daftar-isi-blog-secara.html

Daftar Isi Lengkap

Sabtu, 18 Mei 2013

Cara Membuat Kotak Banner 88x31 Melayang disamping Sidebar

Hai sobat blogger kali ini Blog Krizeer akan mengeposkan "Cara Membuat Kotak Banner 88x31 diSidebar - Smart Education", cara tidak terlalu sulit kok, daripada penasaran ayo kita simak secara bersama-sama.

Masuk ke template
edit HTML
Cari kode ]]><b:skin jika sudah ketemu
letakan script di bawah ini tepat di atas kode ]]><b:skin

#sidebarLank{
box-shadow: 0 0 15px white;
background: #0E090D;
border: 4px solid #9F1111;
border-left: 4px solid #9F1111;
float: left;
margin-top: 175px;
margin-left: -135px;
width: 88px;
height: auto;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
z-index: 10px;
line-height: 10px;
box-shadow: 0 0 15px blackred;
background: #222;
background-image: -webkit-linear-gradient(top, #393939, #222);
background-image: -moz-linear-gradient(top, #393939, #222);
background-image: -o-linear-gradient(top, #393939, #222);
background-image: -ms-linear-gradient(top, #393939, #222);
background-image: linear-gradient(to bottom, #393939, #222);
position:absolute;
}
#sidebarLank img{opacity:0.5;-webkit-filter:saturate(0.0);-moz-filter:saturate(0.0);-ms-filter:saturate(0.0);-o-filter:saturate(0.0);filter:saturate(0.0);-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;padding:0}
#sidebarLank img:hover{opacity:1;-webkit-filter:saturate(1.1);-moz-filter:saturate(1.1);-ms-filter:saturate(1.1);-o-filter:saturate(1.1);filter:saturate(1.1);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}

Cari kode <div id='header'>, tidak semua template sama jadi jika tidak ketemu kode tersebut cari saja kode yang intinya "header", jika sudah ketemu dengan kode tersebut. Lalu kalian letakan kode di bawah ini tepat di atas kode <div id='header'>

<b:section id='sidebarLank' maxwidgets='5' showaddelement='yes'>
</b:section>

Keterangan :
Kode yang berwarna pink itu tinggi dari banner tersebut
Kode yang berwarna hijau itu adalah lebarnya
tidak semua template sama, jadi disesuaikanlah dengan ukuran template anda.
Yang terakhir simpan, dan lihat hasilnya.
referensi dari lank-cyber4rt.blogspot.com

Kamis, 09 Mei 2013

Cara Membuat Menu Vertikal di Blog - Smart Education

Sobat blogger pasti sudah tahu apa yang saya maksud. Pada tutorial kali ini Smart Eeducation mau berbagi tentang cara membuat menu navigasi dropdown vertikal. Caranya cukup mudah hanya tinggal memasukkan kode ke dalam gadget. Menu vertikal ini cukup unik karena akan bergeser turun saat cursor mouse diarahkan ke menu.

Berikut kodenya ;

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
nav {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
margin: 50px auto; /*for display only*/
width: 300px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
background: #fff;
width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #9DB6D7;
}
.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #0A0A0A;
display: block;
width: 250px;
}
/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}
.menu-item li:hover {
background: #eee;
}
/*ul Styles*/
.menu-item ul {
background: #B2D8E0;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
.menu-item:hover ul {
height: 115px;
}
</style>
<nav>
    <div class="menu-item">
      <h4><a href="http://namablog.com" target="_blank"">Membuat Blog</a></h4>
      <ul>
        <li><a href="http://namablog.com" target="_blank">Membuat Email </a></li>
        <li><a href="http://namablog.com" target="_blank">Membuat tabel </a></li>
        <li><a href="http://namablog.com" target="_blank">Promosi Blog</a></li>
       <li><a href="http://namablog.com" target="_blank">Setelan Blogger</a></li>
       <li><a href="http://namablog.com" target="_blank"> Membuat Gmail</a></li>
    </ul>
    </div>

    <div class="menu-item">
      <h4><a href="masukkan URL/Link postingan">Widget</a></h4>
      <ul>
    <li><a href="masukkan URL " target="_blank">Cara Pasang widget</a></li>
    <li><a href="masukkan URL " target="_blank">Cara Buat Laman Statis</a></li>
    <li><a href="masukkan URL " target="_blank">Cara Ganti Favicon</a></li>
    <li><a href="masukkan URL " target="_blank">Ganti Template Blog</a></li>
    <li><a href="masukkan URL " target="_blank">Cara Ubah Background Blog</a></li>
    </ul>
    </div>

    <div class="menu-item">
      <h4><a href="masukkan URL/Link postingan disini" target="_blank"">Widget</a></h4>
      <ul>
    <li><a href="masukkan URL disini" target="_blank">Cara Pasang Gadget</a></li>
    <li><a href="masukkan URL disini" target="_blank">Menu Vertikal</a></li>
    <li><a href="masukkan URL disini" target="_blank">Cara Ganti Favicon</a></li>
    <li><a href="masukkan URL disini" target="_blank">Ganti Template Blog</a></li>
    <li><a href="masukkan URL disini" target="_blank">Ubah Background Blog</a></li>
      </ul>
    </div>

    </nav>

Cara memasang
1. Masuk ke Dasbor Blog >> Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript
2. Masukkan kode di atas.
Yang perlu sobat perhatikan antara lain;

1. Ukuran lebar menu disini adalah 300px, jangan lupa disesuaikan dengan ukuran sidebar blog sobat dgn mengurangi atau menambahnya.

2. Jumlah URL/Post maksimal 5 (saya gak tahu juga, kok cuma bisa segitu, hehe maklum super gaptek). Jika sobat mengisi dengan 6 Link, gak bakalan tampil semua.

3. Untuk menambah navigasi, silahkan copy saja kode yang sudah saya beri warna merah tebal sebagai contoh, kemudian ganti URL dan Judul Post

4. Kode berwarna hijau, sebagai judul/anchor text, sesuaikan dengan artikel sobat.

5. Untuk pewarnaan menunya silakan utak atik sendiri yee, hehehe. contoh pewarnaan nya ada pada kode color: #0A0A0A; masuk aja ke Color Generator untuk mengetahui kode warna

6. Selamat Mencoba.
Sumber : http://www.super-gaptek.com/2012/12/cara-membuat-menu-vertikal-di-blog.html

Cara Membuat / Mengganti Favicon / Site Icon Blog - Smart Education

Favorit Icon atau yang disingkat Favicon adalah sebuah gambar kecil di address bar. Terletak disebelah kiri nama blog ataupun judul posting blog yang sedang kita buka. favicon bawaan blogspot biasanya dilambangkan dengan huruf B dalam kotak berwarna orange. Seorang blogger mengganti faviconnya mungkin bisa jadi agar terlihat lebih indah, keren dan profesional, hehehe. Lihat Gambar di Bawah.

Ada 2 cara untuk mengganti favicon, cara pertama ialah secara default dan ini cukup mudah dilakukan, sedangkan cara kedua ialah dengan membuat favicon mengunakan Pain, atau Photoshop, dll. Kemudian mengupload gambar favicon itu di hosting/tempat penyimpanan image online (misal di

photobucket.com, ataw mediafire.com). Yuk kita simak sama-sama caranya.

Cara Pertama;
1. Buatlah dan Siapkan gambar yang akan dijadikan favicon, persegi bujur sangkar misalnya ukuran 32x32 pixel atau berapapun yang penting harus persegi.
2. Masuk ke Rancangan > Tata Letak > Lihat ada kata "Favicon" di atas header, Klik link Edit.

3. Cari gambar dengan klik Telusuri lalu klik simpan.
4. Favicon blog sobat sudah berubah.

Cara Kedua

1. Upload dulu gambar yang akan anda gunakan sebagai icon blogger
2. Buka Dasbor > Menu Template > edit HTML > cari kode <b:skin><![CDATA[. Lalu masukkan alamat url favicon blog yang telah di upload, tepat di atas kode <b:skin><![CDATA[. diantara kode biru dibawah.

<link href=' masukkan alamat tempat hosting favicon ' rel='shotcut icon'/>

Sebagai contoh lihat kode di bawah ini.

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjdDbvztFETYpmDHSwvyF8lpi1LJn5zVIYqet6g0YGwltOdAXzQPum4AW_W6y1wijcQiv_TeWIX7voQESa-t3E3VuRTGSm3lIL8tWXnB9F71LDCVktBRD4OOCPNyb9Vy1b9M3dSgp7CgY/s1600/Icon+Blogger.jpg' rel='shotcut icon'/>
<b:skin><![CDATA[

Pada kode berwarna merah diatas, adalah alamat saya menyimpan/hosting gambar favicon blog ini.
Jika sudah klik "pratinjau", lalu save template. Lihat perubahannya.

Anda sedang membaca Cara Membuat / Mengganti Favicon / Site Icon Blog, jika menurut anda artikel ini menarik, dan bermanfaat bagi anda, anda bisa menyebar luaskan artikel ini dengan memberi sumbernya blog ini ; http://yoga-tc.blogspot.com/2013/05/cara-membuat-mengganti-favicon-site.html

Rabu, 08 Mei 2013

Cara Membuat Gambar Postingan Berputar Saat Disorot Mouse - Smart Education

Ok tanpa panjang lebar yuk langsung saja ke intinya
Kali ini Admin akan berbagi sedikit tutorial blog, yaitu Cara Membuat Gambar Postingan Berputar Saat Disorot Mouse.

Berikut langkah-langkah nya :

1 login akun blogg
2. masuk ke rancangan
3. masuk ek EDIT HTML
4. Cari Kode </head> Letakkan script ini di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'><style>.post img{margin:10px;padding-left5px;width:100px;height:100px;text-align:center;-webkit-transition:All 2.346s ease;-moz-transition:All 2.346s ease;-o-transition:All 2.346s ease;-webkit-background-clip:padding-box;-webkit-box-shadow:0 0 0 3px #000cff;-moz-box-shadow:0 0 0 3px #000;box-shadow:0 0 0 3px #000cff;-webkit-border-top-left-radius:60px;-webkit-border-bottom-left-radius:60px;-moz-border-radius-topleft:60px;-moz-border-radius-bottomright:60px;border-top-left-radius:60px;border-bottom-right-radius:60px;-o-border-top-left-radius:60px;-o-border-bottom-right-radius:60px}.post img:hover{box-shadow:1px 1px 10px 3px rgba(0,0,220,0.6);border-radius:0;-webkit-transition:All 2.346s ease;-moz-transition:All 2.346s ease;-o-transition:All 2.346s ease;-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg)}
</style></b:if>

Script bisa kamu Edit Sendiri ya :D

Bila ada yang di tanyakan Harap berkomentar Thanks !!
Sumber

Membuat Gambar Header Berputar - Smart Education

Membuat Gambar Header Berputar - Membuat Gambar Header Berputar
Halo Sobat, Kali Ini Saya Mau Posting Tentang Membuat Gambar Header Berputar
Mungkin Sobat Sudah Pernah Melihat Blog Yang Seperti Itu, Dan Kali Ini Saya Akan Membahas Tentang Cara Membuat Gambar Header Berputar.

CSS Ini Akan Bekerja Jika Sobat Menggunakan Header Gambar, Jika Sobat Masih Memakai Header Text Maka Sobat Rubah Dulu Jika Mau Membuat Gambar Header Berputar

Baiklah Tutorialnya :

Login Blogger
Klik Template
Edit HTML
Centang Expand Template Widget
Cari Kode ]]></b:skin>
Copy Kode Dibawah Lalau Paste Diatas Kode ]]></b:skin>

#header a img:hover {
-moz-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transition: all 600ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-ms-transition: all 600ms ease-in-out;-o-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

Klik Simpan Template

Keterangan :

Kode Yang Berwarna Merah Adalah Besar Rotasi, Sobat Bisa Mengeditnya Sendiri
Kode - (Minus) Menunjukkan Rotasi Berlawanan Terhadap Arah Jarum Jam, Sobat Bisa Menghilangkan Kode Itu (Minus) Kalau Mau Gambarnya Berputar Searah Jarum Jam , Contoh (180deg)

Semoga Bermanfaat.

Sumber : http://art-preview.blogspot.com/2012/10/membuat-gambar-header-berputar.html

Membuat Menu Horizontal Navigasi - Smart Education

Membuat Menu Horizontal Navigasi - Membuat Menu Horizontal Navigasi
Baik Sobat Kali Ini Saya Mau Posting Cara Membuat Menu Horizontal Navigasi, Baiklah, Membuat Menu Horizontal Navigasi Ini Sangat Penting Untuk Blog Kenapa ? Karena Dengan Adanya Menu Horizontal Navigasi Akan Memudahkan Pengunjung Blog Untuk Mencari Sesuatu Di Blog Kita Serta Blog Kita Akan Terasa Lebih Indah Dimata Pengunjung

Demo

Berikut Tutorialnya :

Login Blogger
Klik Template
Edit HTML
Centang Expand Template Widget
Cari Kode ]]></b:skin>
Copy Kode Dibawah, Lalu Paste Diatas Kode ]]></b:skin>

/* Menu Navigasi By Art Preview */

#menus {

border-bottom:1px solid #ddd;

border-top:1px solid #ddd;

border-right:1px solid #ddd;

border-left:1px solid #ddd;

height:31px;

}

#menus li {

display:inline;

list-style-image:none;

list-style-position:outside;

list-style-type:none;

}

#menus li a {

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqQcsFYLnCHINEPlyiN83ZPA1emIciX0LZWuWXjqfbNprLtPiZCWqNf3h6wlWBaWwXnwlGb2BQShSXi0Cu6L4-JL1tnAqGctAcDhFb5PirTxGPsY0ToTXDzEbSMYG1lKj2_MdoVopwBkZx/s1600/menu.gif) no-repeat scroll 0 0;

color:#382E1F;

display:block;

float:left;

font-size:12px;font-weight:normal;font-family:comic sans ms;

height:31px;

line-height:31px;

margin-left:-10px;

padding:0 20px;

text-decoration:none;

z-index:1;

}

#menus li a:hover, #menus li a.current {

background-position:0 -31px;color:#cccccc;font-weight:normal;

}

#menus li.current_page_item a, #menus li.current-cat a {

background-position:0 -62px;

}

#menus li a.home {

background-position:0 -93px;

margin-left:0;

padding:0;

text-indent:-999em;

width:45px;

}

#menus li a.home:hover {

background-position:0 -124px;

}

#menus li.current_page_item a.home {

background-position:0 -155px;

margin-left:-40px;

}

#menus li a.lastmenu:hover {

background-position:0 0;

cursor:default;

}

Lalu Cari Kode <div id='header-inner'>
Kalau Tidak Ketemu Cari Kode Yang Sejenis, Karena Setiap Template Berbeda-Beda
Copy Kode Dibawah Lalu Paste Dibawah Kode <div id='header-inner'>

</ul>

Keterangan : Kode Diatas Juga Bisa Diletakkan Di HTML/JavaScript
Klik Pratinjau, Jika Berhasil Maka Klik Simpan Template

Sobat Bisa Mengeditnya Sendiri
Semoga Bermanfaat, Jika Dirasa Tulisan Saya Menarik Silahkan Sobat Sebar Luaskan Artikel Ini , Dan Jangan Lupa Beri Link Ini Sebagai Sumbernya.
Sumber : http://art-preview.blogspot.com/2012/09/membuat-menu-horizontal-navigasi.html

Selasa, 07 Mei 2013

X Blogger Template by Urang Kurai

X6 - YELLOW
Demo - Download

X7 - BLUE BLACK
Demo - Download

X8 - WHITE
Demo - Download

Don't Change this Credit
Description :
Author : Andre Pandet Rank KhoeraiURL : http://urang-kurai.blogspot.com/
Thank's to Andre Pandet RAnk KhoeraiSumber : http://art-preview.blogspot.com/2012/06/x-blogger-template-by-urang-kurai.html

Cara Membuat Menu Drop Down di Bawah Header Blog

Menu drop down adalah adalah menu pada blog yang yang jika di sentuh memunculkan menu-menu yang lain. Menu ini banyak macamnya, ada yang dipasang pada header blog, sidebar blog ataupun pada tempat-tempat yang lain.

Kali ini kita akan membahas cara membuat menu drop down secara otomatis yang terletak pada header blog, tepatnya dibawah header blog. Seperti menu header yang ada pada “PSYCHOLOGYMANIA” ini.

Langsung saja kita coba sobat:

Masuk pada Design --- edit HTML
Jangan lupa kopi kode HTML sobat terlebih dahulu, jangan sampai ada kesalahan
Beri tanda centang pada “Expand Widget Templates ”
Kopi paste kode dibawah ini tepat diatas ]]></b:skin>

#catmenucontainer{

height:33px;

width:1000px;

margin:0 auto;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXr71gnt3k5p9I5il_5U2gb5BuVGnKcl3XAh2K3nWhHl7k63O5VryEMuk3EXbWr3_iGoPGHD_cg6S3mJ6vNtfXmLUkIdpwBmTsep90eH7FMy6ubN8JUo03-OHV9LX-IU7sCptvZ8xccKVX/s1600/2.gif) repeat-x;

display:block;

padding:0px 0 0px 0px;

font-size:12px;

font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;

font-weight:normal;

border-top:1px solid #252424;

}

#catmenu{

margin: 0px;

padding: 0px;

width:1000px;

background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwlDpHmgo_ZH3JT7Dgn8FgoE_uIaAO2tlHpzS2uplYFJQyYLl7ys1QNJ95yrCChTJ6ZEwKd2LoFZvr019DRQ_A2Xcy1wL_zjQYiKXQ_njY8ulhyVY_7GuHfP4GZZKRWOOLh-HqkqrJeCSe//) repeat-x;

height:33px;

}

#catmenu ul {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#catmenu li {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {

color: #fae7df;

display: block;

margin: 0px;

padding: 9px 10px 10px 10px;

}

#catmenu li a:hover, #catmenu li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPC1ogrj14Cys70OuyacDyruC7ZwUb4uocPQ6of6EQM7hQtsGu3mCXoRb0b1y5CWaVStuyKiYaubTvELJwTAN0NFYvh0KqpDQUf-Ei6PQoApywBO78uwyOPwcz4QaoSfnzW3nmENU1jnBc//) repeat-x;

color: #fff;

margin: 0px;

padding: 9px 10px 10px 10px;

text-decoration: none;

}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {

background:#ED4A05;

width: 150px;

color: #fae7df;

font-family:Tahoma,century gothic,Georgia, sans-serif;

font-weight: normal;

float: none;

margin: 0px;

padding: 9px 10px 10px 10px;

border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {

color: #fff;

padding: 9px 10px 10px 10px;

}

#catmenu li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0px;

padding: 0px;

}

#catmenu li li {

}

#catmenu li ul a {

width: 140px;

}

#catmenu li ul a:hover, #catmenu li ul a:active {

}

#catmenu li ul ul {

margin: -34px 0 0 170px;

}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,

#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {

left: -999em;

}

#catmenu li:hover ul, #catmenu li li:hover ul,

#catmenu li li li:hover ul, #catmenu li.sfhover ul,

#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {

left: auto;

}

#catmenu li:hover, #catmenu li.sfhover {

position: static;

}

5. Cari Kode <div id='content-wrapper'>

6. Kopi paste kode dibawah ini tepat dibawah kode <div id='content-wrapper'>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

7. Ganti kode-kode “'Your-Link-Here” dengan link yang ingin sobat masukkan dan “Link-Name” dengan nama link yang sobat inginkan.
8. Simpan template, dan lihat hasilnya….

Selamat mencoba semoga sukses…~~~

Sumber : http://www.psychologymania.com/2011/09/cara-membuat-menu-drop-down-di-bawah.html