Blog Votre: Juni 2013

Rabu, 26 Juni 2013

Template Portal Naruto Theme Full Jquery

Template Portal Naruto Theme Full Jquery. kali ini saya akan bagi bagi template yang sudah Mas yusa edit, entah siapa pembuat utama template itu. Semua background sudahsama Yusa Syihab di re-design menjadi Naruto Theme (Ber Background Naruto). Template bukan buatan Mas Yusa, Makasih yang udah buat template ini. Because sangat keren euy... :)

Demo Download

NB : Waktu download, pastikan sobat sudah log out dari akun google apapun.

Untuk mengganti link yang ada di My Archive :

Cari Link ini : http://dlerist.blogspot.com/search/label/max-result=5

Lalu ganti yang warna merah dengan URL blog sobat. Semoga berhasil bro.. :)

sumber

Cara Memasang Widget Jam Digital di Blog

Hai sobat Blog Krizeer, kali ini saya akan berbagi ilmu lagi nih, tentang Cara Memasang Widget Jam Digital di Blog, totorial ini memang sangatlah mudah untuk dicoba. Pada postingan ini yaitu usulan dari teman saya yang meminta widget jam digital saya, dan sekarang saya berbagi tutorialnya. Untuk demonya anda bisa lihat disamping menu atas saya, atau melihat gambar dibawah ini :

Langsung saja ke tutorialnya yukk :
1. Login ke Blogger
2. Masuk ke Template ==> edit HTML
3. Lalu cari kode ]]></b:skin>, jika sudah ketemu letakan kode dibawah ini tepat di atas kode ]]></b:skin>

/* Clock yoga-tc.blogspot.com */
#clock {
cursor: default;
float: left;
font-weight: bold;
margin: 5px;
padding: 5px;
color: #fff;
}

4. HTML bisa anda letakan dibawah header atau dibawah menu, kalau saya meletakannya dibawah header.

<div id='clock'>
<script type='text/javascript'>
window.setTimeout("hour()",1000);
function hour() {
var date = new Date();
setTimeout("hour()",1000);
document.getElementById("clock").innerHTML = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
}
</script>
</div>

Keterangan :
kode yang berwarna hijau itu jenis teksnya tebal, dan kode yang berwarna biru itu warna teksnya, bisa anda ubah sesuai selera anda.
5. Lalu simpan template, dan lihat hasilnya, semoga bermanfaat :D

Cara Membuat Scrollbar Dengan Persentase di Blog

Hallo Sobat Blog Krizeer pada kesempatan kali ini saya akan membagikan tutorial mengenai Cara Membuat Scrollbar Dengan Persentase.
apa sih itu ?, menjelaskannya susah liat saja scrollbar di blog ini sebagai demonya. dan tutorial ini hanya untuk memperindah tampilan blog saja.
ini dia screenshootnya :

Langsung saja ke tutorialnya yukk :
Tutorial Cara Membuat Scrollbar Dengan Persentase

saya anggap kalian sudah memasang custom scrollbar, bila belum memasang scrollbar bisa dibaca di artikel
Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog,

1. login ke Blogger

2. masuk ke template

3. klik edit HTML

4. lalu cari kode ]]></b:skin>, gunakan ctrl+f untuk mempercepat proses pencarian, jika sudah ketemu letakan kode dibawah ini tepat di atas kode ]]></b:skin>

#scroll {
display: none;
position: fixed;
top: 0;
right: 15px;
z-index: 500;
padding: 3px 8px;
background-color: #2493C4;
font-size:13px;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
font-size:13px;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2493C4;
}

setelah itu, cari kode <body> atau <body
setelah ketemu,tambahkan kode ini di bawahnya <body>

<div id='scroll'></div>

selanjutnya cari lagi kode </body>, lalu letakan kode dibawah ini tepat di atas kode </body> (gunakan tombol Ctrl+F untuk mempercepat pencarian)

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
//]]>
</script>

5. yang terakhir simpan template, dan lihat hasilnya :D

Untuk Setting
untuk mengganti warna background, cari background-color: #2493C4,lalu ganti warnanya, untuk mengatur jarak Scroolba Persentase dengan Scrollbar cari kode right: 15px; lalu ganti, untuk menggantinya kode 15px ganti menjadi 10px, 20px, dan selanjutnya, dan yang terakhir untuk mengubah warna teks cari kode color: #fff; dan ganti kode warna biru muda tersebut dengan kode warna yang kalian inginkan.

Sekian totorial kali ini dan semoga bermanfaat :D
sumber source : AH-SHARED

Jumat, 21 Juni 2013

Cara Membuat Menu Navbar di Blog

Selamat malam sobat Blog Krizeer, apa kabarnya ?, baik kan ?, yaudah kalo baik-baik aja alhamdullilah. Kali ini saya akan menjelaskan tentang bagaimana "Cara Membuat Menu Nav di Blog", meskipun sudah banyak yang mengeposkan artikel tentang Cara Membuat Menu Horizontal di Blog, namun demikian anda sempat bingung memilih style yang mana yang cocok dengan template kalian. Daripada banyak ngomong langsung saya ke intinya yuk kita simak bersama, ini dia tutorialnya baca baik-baik ya :

1. Login ke Blogger
2. Masuk ke Template
3. edit HTML
4. Cari kode ]]></b:skin>, jika sudah ketemu copy kode dibawah ini tepat di atas kode
]]></b:skin>

/* Navigation */
#navigation {
float:left; width:980px; list-style: none; height: 39px; margin:0; padding:0;
}
#navigation li {
list-style:none; position:relative; float: left; height: 39px;background: #77c2a7; /* Warna background menu */
}
#navigation li a, #navigation li a:hover {
border-left:medium none !important;
}
#navigation li a, #navigation li a:link, #navigation li a:visited {
display:block; float:left; height:39px; color:#f6f6f6; /* Warna teks */
line-height:39px; padding: 0 10px 0 10px; border-right: 1px dashed #dddddd; /* Garis samping antar menu */
font-weight: bold; /* Style Teks Tebal */
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
background:#87d1b6; /* Warna bakground ketika disorot mouse */
color:#222222; /* Warna teks ketika disorot mouse */
text-decoration:line-through;
}
.navigation {
height:39px; width:100%; background:#fff; margin:0; padding:0px; border-top:1px solid #ddd; border-bottom: 3px solid #000; /* Garis bawah */
}
.navigation a:hover {
border-bottom: 3px solid #333;
}

HTML bisa disimpan dimana saja yang penting tidak error, kalau saya ditaruh dibawah header.

<div id='navigation'>
<div class='navigation'>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
<li><a href='#'>Menu 7</a></li>
<li><a href='#'>Menu 8</a></li>
</ul>
</div>
</div>

Baca penting untuk kode yang berwarna merah itu ukuran tinggi menu, tinggi menu bisa anda sesuaikan sesuka hati :D
kode yang berwarna hijau itu warna backgound menu
kode yang berwarna oren itu nama menunya
kode yang berwarna ungu ganti denga url menu kalian.
Dan yang terakhir kode yang berwarna pink itu ukuran lebarnya disesuaikan saja.

Untuk demonya kalian bisa lihat sendiri di blog ini.
Untuk perubahan warna, ukuran menu, dan url, kalian atur sendiri yahh :D
Selamat mencoba, dan semoga artikel ini bermanfaat :v
Baca juga Cara Membuat Auto Tooltip Di Blog

Kamis, 20 Juni 2013

Cara Membuat Author Box di Blog

Cara Membuat Author Box di Blog, cara membuat widget profil di blog

Halo sobat Blog Krizeer, apa kabarnya baik kan ?, yaudah kalo baik. Kali ini saya akan membagikan tutorial tentang Cara membuat Author Box di Blog.

penasaran kan seperti apa?, yuk kita lihat dulu screenshotnya :

Nah udah tau kan?, yuk langsung aja kita mulai tutorialnya
Tutorial Membuat Author Box di Blog :
1. Loggin ke Blogger
2. klik ke template
3. Edit HTML
4. Lalu,tambahkan kode di bawah ini di atasnya ]]></b:skin>

/* Author Blog */
.AHSadmin {width:auto; height:83px;padding:5px}
.AHSadmin-gambar {float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:2px solid #cf2031;border-right:2px solid #0f7dc8;border-bottom:2px solid #2eb31a;border-left:2px solid #eab823;}
.AHSdeskripsi{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px; font-size:11px; color:#fff;}
.AHSfb, .AHSgp, .AHStw {color:#fff!important; display:block;font-weight: bold; line-height: 14px; height: 14px; width: 14px; border: 3px solid #444;text-align: center;padding:3px;border-radius:15px;font-size: 13px;text-decoration:none!important;margin: 1px;position:relative;margin-right:0px}
.AHSfb {background: #3B5998;margin-left:73px}
.AHSfb:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}
.AHSgp {background: #D34836;font-size:11px;margin-left:85px}
.AHSgp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}
.AHStw {background: #4099FF;margin-left:73px}
.AHStw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}

nah, setelah itu menuju ke tata letak
lalu, add gadget > HTML/Javascript
tambahkan kode di bawah ini di kotak yang besar itu :v

<div class='AHSadmin'><img alt='Yoga Pratama' src='httphttp://lh3.googleusercontent.com/-MRkIW9aCKqk/AAAAAAAAAAI/AAAAAAAAAAA/EdZwfzUCDB4/s96-c/photo.jpg' title="Yoga Pratama" class='AHSadmin-gambar' /><a class='AHSfb' href='http://www.facebook.com/Twish4' rel='nofollow' target="_blank">F</a><a class='AHSgp' href='https://plus.google.com/7049530791492749265' rel='nofollow' target="_blank">G</a><a class='AHStw' href='http://twitter.com/Yoga_TC' rel='nofollow' target="_blank">t</a> <div class='AHSdeskripsi'>Hai, saya <a href=https://plus.google.com/7049530791492749265 title="Yoga Pratama" rel='nofollow' target="_blank">Yoga Pratama</a><br/> saya seorang lelaki yang pendiam, agak malas, tetapi bertanggung jawab. Dan saya ingin belajar tentang CSS.<br/><a style="color:#888;" href="#" target="_blank"> Read More »</a></div></div>

Nah,sekarang anda sudah selesai,tetapi itu belum anda setting !

Perhatikan tulisan yang saya warna itu
Ganti tulisan warna merah itu dengan kepunyaan anda sendiri
Untuk Foto,bebas ukuran berapapun,karena udah di atur secara otomatis di cssnya, Untuk yang warna biru juga sama,ganti itu dengan kepunyaan anda sendiri
Nah ini yang agak susah,untuk yang warna orange,juga anda ganti itu,tetapi anda harus menyesuaikan dengan width/lebar footer anda. Untuk demonya anda bisa lihat sendiri di sidebar blog saya.Semoga bermanfaat -_-

Sumber kode : http://ah-shared.blogspot.com/

Rabu, 19 Juni 2013

Cara Membuat Auto Tooltip Di Blog

Hai sobat blogger pada kesempatan kali ini saya akan menjelaskan tentang "Cara Membuat Auto Tooltip Di Blog" , posingan ini memang sudah dipostkan oleh blogger sebelah dan saya ingin menyebar luaskan lagi artikel ini karena menurut saya artikel ini lumayan bermanfaat bagi kalian semua. Untuk screen shootnya anda bisa lihat sendiri gambar dibawah. Untuk demonya anda bisa juga melihat blog ini sebagai contohnya. Daripada kebanyakan ngomong mending langsung saja kita simak bersama yukk

1. Taruh kode dibawah ini dibawah kode <body>

<script src='http://javascript-share.googlecode.com/files/wb.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'/><script type='text/javascript'>//<![CDATA[wb.tooltip_setting ={func : "Tooltip",top : 5,left : 5,maxw : 300,speed : 20,timer : 40,endalpha : 95,alpha : 0, style_plus : "#tt{background:#B2C40A;border-radius:20px 20px 20px 0;-moz-box-shadow: inset 0 0 10px #000000;-webkit-box-shadow:inset 0 0 10px #000000;box-shadow:inset 0 0 10px #000000;}#ttcont{background:transparent;color:#fff;font-size:30px;}"};//]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/><script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'/><div id='warungbebasautotooltip'>

Pemberitahuan kode yang berwarna merah Bisa Kalian Ubah Sesuka Kalian

Lalu taruh kode dibawah ini diatas dode </body>

</div><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>

Lalu simpan template anda

Sekian postingan saya kali ini mengenai "Cara Membuat Auto Tooltip DI Blog"
Kalo ada kesulitan anda bisa menanyakannya kepada saya dengan berkomentar dibawah :v
Semoga Bermanfaat -_-

sumber kode : WarungBebas dan reza31.blogspot.com

Minggu, 16 Juni 2013

Cara Membuat Efek Shadow pada Outer/Tepi Blog

Cara Membuat Efek Shadow pada Outer/Tepi Blog - Mungkin outer atau yang disebut dengan tepi blog sudah seringkali kita lihat pada blog-blog rekan seperjuangan yang memakai garis tepi blog.

Efek shadow adalah efek yang akan meberi bayangan pada outer atau tepi blog tanpa diberi border maupun garis tepi blog. Sebenarnya penggunaan feature ini tak lain dan tak bukan hanyalah untuk membatasi antara luar dan dalam outer blog dan mungkin juga dapat mempercantik blog kita dalam faktor berpenampilan, dan juga dapat menjadikan blog kita terlihat rapi.

Selain itu, ternyata pemasangan feature ini juga sangat mudah dan praktis sekali, anda hanya perlu menambahkan beberapa kode script pada Edit HTML, tanpa menggunakan JavaScript. Well, bagi anda yang berminat untuk memasang efek shadow di blog anda, silahkan disimak yang berikut ini.

1. Login ke Blogger.

2. Cari salah satu kode di bawah ini (gunakan CTRL+F), karena pada umumnya kode setiap template sedikit berbeda.

"outer-wrapper" atau "wrapper"

Keterangan: jika kedua kode diatas tidak ada, carilah kode yang menunjukan outer wrapper atau tepi pada blog anda.

3. Lalu, letakkan kode di bawah ini tepat dibawah salah satu kode pada langkah ke-2 tadi.

border:2px solid #d50303;
border-color:#9ecaed;
box-shadow:0 0 10px #666}

Contoh :

#wrapper{
background:#ebebeb; font-size:13px; margin:0px auto 30px; width:950px; overflow:hidden;
border:2px solid #d50303;
border-color:#9ecaed;
box-shadow:0 0 10px #666;}

Keterangan:

2px = ketebalan border outer (jika tidak perlu, berikan saja 0px)
#d50303= warna border outer
10px = ketebalan efek shadow outer blog
#666 = warna shadow outer blog

Demikian informasi tentang cara membuat efek shadow pada outer/tepi blog, semoga bermanfaat, dan selamat mencoba.

sumber kode:tuliskan.com