Tau Ugi

Cara buat Kotak Catatan Warna-warni Didalam Postingan - kali ini sahabat Tau Ugi akan membagikan Artikel Bagaimana Cara Buat Kotak Pesan cantik berwarna di dalam postingan blog seperti didalam postingan saya ini.

Saya rasa bagi sobat yang sudah mahir CSS tentunya tidak akan asing dengan postingan kali ini.

tapi walaupun anda sudah mahir,pastinya anda butuh ide untuk memoles entah itu postingan blog ataupun halaman home blog anda yang tentunya di inspirasi oleh orang lain.

Oke udah melihat screenshotnya yang berada diatas belum?? nah,untuk lebih jelasnya, supaya anda juga ngga penasaran maka,sebelum anda melihat CSS yang saya akan berikan ini,silahkan melihat demo yang berada dibawah :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.

Nah,bagaimana sobat?? tertarik?? jika iya,silahkan simak tutorial pemasangannya yang akan saya berikan ini..

CSS

.AHSalert,.AHSnotice,.AHSsuccess,.AHSinfo,.AHSseries{margin:5px 0;border:2px solid #ddd;padding:.8em .8em .8em 3.6em;text-align:left}.AHSalert{background:#fbe3e4 url(http://2.bp.blogspot.com/-m199bF-51Y8/UD-xoPclOMI/AAAAAAAAA2g/v0Ph5F33LTU/s1600/MBT+alert.png) no-repeat scroll .8em .4em;color:#8a1f11;font:bold 15px Trebuchet MS;border-color:#fbc2c4}.AHSnotice{background:#fff6bf url(http://1.bp.blogspot.com/-axW-b4k19rA/UD-xrlRIRCI/AAAAAAAAA20/WyWG5-lKfJw/s1600/MBT+notice.png) no-repeat scroll .8em .4em;color:#514721;font:bold 15px Trebuchet MS;border-color:#ffd324}.AHSsuccess{background:#CCFEBF url(http://3.bp.blogspot.com/-Ey_f4tLqWaw/UD-xsS60hmI/AAAAAAAAA28/q8aIYetyEwc/s1600/MBT+success.png) no-repeat scroll .8em .4em;color:#264409;font:bold 15px Trebuchet MS;border-color:#c6d880}.AHSinfo{background:#DFE7FE url(http://2.bp.blogspot.com/-jH9ysEu0PdI/UD-xqU42isI/AAAAAAAAA2s/vHFYlXqooEY/s1600/MBT+info.png) no-repeat scroll .8em .4em;color:#205791;font:bold 15px Trebuchet MS;border-color:#92cae4}.AHSseries{background:#9FCFFF url(http://1.bp.blogspot.com/-fB8_ur4gKYQ/UFLkgDuNEdI/AAAAAAAABAM/9Ig3cqe1f40/s1600/MBT+series.png) no-repeat scroll .8em .4em;color:#444;font:bold 15px Trebuchet MS;border-color:#099CEE}.AHSnotice a{color:#514721}.AHSsuccess a{color:#264409}.AHSinfo a{color:#205791}.AHSseries a:link{color:#19109F}.AHSseries a:hover{color:#1950CF}.AHSerror a,.AHSalert a{color:#8a1f11}

HTML

<div class='AHSalert'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='AHSnotice'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='AHSsuccess'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='AHSinfo'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='AHSseries'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>

untuk pengaktifannya silahkan simak langkah-langkah dibawah ini,..

jika sobat mau memakai kode alert maka memakai kode :

<div class='AHSalert'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>

jika sobat mau memakai kode notice maka memakai kode :

<div class='AHSnotice'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>

begitu seterusnya,..

Kode itu disimpan dimana???

bila sobat ingin memakai saat loading blog(saat di halaman utama) maka CSS dari widget ini sobat bisa taruh di kode <b:skin> atau memakai kode <style>
bila sobat ingin memakai saat hanya di halaman posting maka CSS dari widget ini sobat bisa taruh di tag kondisional,jadinya seperti apa?? seperti contoh dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<style>
.AHSalert,.AHSnotice,.AHSsuccess,.AHSinfo,.AHSseries{margin:5px 0;border:2px solid #ddd;padding:.8em .8em .8em 3.6em;text-align:left}.AHSalert{background:#fbe3e4 url(http://2.bp.blogspot.com/-m199bF-51Y8/UD-xoPclOMI/AAAAAAAAA2g/v0Ph5F33LTU/s1600/MBT+alert.png) no-repeat scroll .8em .4em;color:#8a1f11;font:bold 15px Trebuchet MS;border-color:#fbc2c4}.AHSnotice{background:#fff6bf url(http://1.bp.blogspot.com/-axW-b4k19rA/UD-xrlRIRCI/AAAAAAAAA20/WyWG5-lKfJw/s1600/MBT+notice.png) no-repeat scroll .8em .4em;color:#514721;font:bold 15px Trebuchet MS;border-color:#ffd324}.AHSsuccess{background:#CCFEBF url(http://3.bp.blogspot.com/-Ey_f4tLqWaw/UD-xsS60hmI/AAAAAAAAA28/q8aIYetyEwc/s1600/MBT+success.png) no-repeat scroll .8em .4em;color:#264409;font:bold 15px Trebuchet MS;border-color:#c6d880}.AHSinfo{background:#DFE7FE url(http://2.bp.blogspot.com/-jH9ysEu0PdI/UD-xqU42isI/AAAAAAAAA2s/vHFYlXqooEY/s1600/MBT+info.png) no-repeat scroll .8em .4em;color:#205791;font:bold 15px Trebuchet MS;border-color:#92cae4}.AHSseries{background:#9FCFFF url(http://1.bp.blogspot.com/-fB8_ur4gKYQ/UFLkgDuNEdI/AAAAAAAABAM/9Ig3cqe1f40/s1600/MBT+series.png) no-repeat scroll .8em .4em;color:#444;font:bold 15px Trebuchet MS;border-color:#099CEE}.AHSnotice a{color:#514721}.AHSsuccess a{color:#264409}.AHSinfo a{color:#205791}.AHSseries a:link{color:#19109F}.AHSseries a:hover{color:#1950CF}.AHSerror a,.AHSalert a{color:#8a1f11}
</style>
</b:if>

bagaimana sobat?? sudah mengerti?? bila masih ada yang perlu ditanyakan silahkan langsung tanya saja,oke??

Sumber:http://ah-shared.blogspot.com/2013/10/membuat-blok-catatan-tips-alert-note-diblog.html

Cara Buat Sticky Menu Melayang di Blog - Kali ini saya akan berbagi tutorial membuat menu sticky/melayang dengan Opacity Di Blogger. Hal yang menarik dari menu ini adalah efek opacity, yaitu efek background yang memudar pada menu sticky ketika halaman digulung ke bawah. bagaimana cara memasang ke blog Anda?

Back up template Anda dan kemudian baca petunjuk di bawah ini.
@screenshoT

Cara Aplikasikannya

1. Pada dashboard Blogger Anda, pilih 'Template' lalu klik 'Edit HTML

2. Dengan menekan 'Ctrl + F', cari tag <head> dalam kode html template anda lalu copy dan paste kode jQuery berikut dibawahnya:

<script type='text/javascript'>
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var topbarME = function() { $('#db-menu-sticky').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#db-menu-

sticky').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add events
topbarML();
$('#db-menu-sticky').bind('mouseenter',topbarME);
$('#db-menu-sticky').bind('mouseleave',topbarML);
inside = true;
}
else if (position < topDistance){
topbarME();
$('#db-menu-sticky').unbind('mouseenter',topbarME);
$('#db-menu-sticky').unbind('mouseleave',topbarML);
inside = false;
}
});
})();
});
</script>

Sekarang untuk menambahkan beberapa gaya dan memberikan menu opacity, kita buat tampilannya menggunakan beberapa CSS

3. Sekali lagi, dengan menekan 'Ctrl + F', cari kode tag ]]><b/:skin> dan di atasnya, copy lalu paste kode css ini:

#db-menu-sticky {
border-bottom:1px solid #ECF1EF;
background:#151715;
font-color:#000000;
padding:10px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}

( Silahkan untuk mengubah warna bar/menu dengan mengubah nilai latar belakang sesuai yang anda inginkan)

Pada bagian berikutnya, kita akan menambahkan link navigasi pada menu sticky bar.

4. Dengan menggunakan 'Ctrl + F' lagi, cari <div id='header-wrapper'> atau id header sesuai element template anda dan

kemudian copy lalu paste kode berikut ini sebelum kode elemen tersebut:

<div id='db-menu-sticky'>
<a href='#'>Home</a> |
<a href='#'>Saya</a> |
<a href='#'>Pacarku</a> |
<a href='#'>Love</a> |
<a href='#'>Manis</a> |
<a href='#'>Kangen</a> |
</div>

( Pilih link yang ingin anda pilih untuk di tampilkan pada menu, jika ingin silahkan tambahkan lebih banyak. tidak harus sama dengan contoh di atas)

5. Preview dan Simpan template Anda dan selesai!

Pesan Admin
Catatan: pastikan pada template sobat sudah dipasang jQuery

Semoga berguna...

Sumber: http://defandaky.blogspot.com/2013/08/cara-membuat-sebuah-menu-sticky-dengan.html

Cara Buat Kotak Catatan Warna-warni Didalam Postingan

CSS

HTML

Kode itu disimpan dimana???

Cara Buat Sticky Menu Melayang di Blog

Mengenai Saya

Jadwal Sholat

Popular Post

Arsip Blog

Tags