Januari 2013 Blog Kaleng

Senin, 07 Januari 2013

Membuat Background menarik dengan CSS

Kali ini saya post tentang background menaik dengan CSS setelah terinspirasi dari kakak johanes , mau tau caranya ? yo ikutin turtorialnya sekaligus lihat stylenya :

Style 1

{
stripes : [
    {
        color: '#092537',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 79,
        gap: 281,
        offset: 284
    },
    {
        color: '#092637',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 9,
        gap: 351,
        offset: 149
    },
    {
        color: '#1b5d84',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 135,
        gap: 225,
        offset: 95
    },
    {
        color: '#1b5d84',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 56,
        gap: 331,
        offset: 327
    },
    {
        color: '#E1F4FD',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 45,
        gap: 315,
        offset: 140
    },
    {
        color: '#E1F4FD',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 36,
        gap: 324,
        offset: 320
    }
],
bg : '#ffffff'
}

Style 2

{
stripes : [
    {
        color: '#bfbac2',
        rotation: 335,
        opacity: 50,
        mode: 'normal',
        width: 3,
        gap: 98,
        offset: 123
    },
    {
        color: '#bfbac2',
        rotation: 25,
        opacity: 50,
        mode: 'normal',
        width: 3,
        gap: 98,
        offset: 123
    },
    {
        color: '#3e122c',
        rotation: 25,
        opacity: 60,
        mode: 'normal',
        width: 100,
        gap: 100,
        offset: 156
    },
    {
        color: '#3e122c',
        rotation: 335,
        opacity: 60,
        mode: 'normal',
        width: 100,
        gap: 100,
        offset: 156
    }
],
bg : '#d1d1b6'
}

Style 3

{
stripes : [
    {
        color: '#ff0800',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 45,
        gap: 45,
        offset: 0
    }
],
bg : '#ffffff'
}

Style 4

{
stripes : [
    {
        color: '#055067',
        rotation: 291,
        opacity: 75,
        mode: 'normal',
        width: 50,
        gap: 40,
        offset: 0
    },
    {
        color: '#3ab1d6',
        rotation: 228,
        opacity: 47,
        mode: 'normal',
        width: 76,
        gap: 60,
        offset: 26
    },
    {
        color: '#ffb4e2',
        rotation: 143,
        opacity: 80,
        mode: 'normal',
        width: 30,
        gap: 10,
        offset: 0
    }
],
bg : '#ffffff'
}

Style 5

background: #36c;
background:
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
#36c;
background-size: 15px 30px

Style 6

background:
linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px;

Kalau sudah copy ke bagian yang kamu inginkan

#Untuk Newbie yang belum mengerti,berikut cara'a.

Contoh pada background

Misal kan

body{
---;
---;
Isi CSS;
---;
---;
}

Kamu masukan salah satu style menjadi seperti ini

body{

background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

}

atau yang menggunakan div style,contoh:

html

<div class='style1'></div>

CSS

.style1 {

isi css..

}

Intinya kamu css diantara { isi css }

#untuk mengatur besar background gradient,tambahkan css dibawah ini

-webkit-background-size: 100px;
-moz-background-size: 100px;

Terinspirasi dari membuat template yang masih saya kerjakan lalu saya coba cari tools untuk mempermudah membuat template dan sampailah pada link-link berikut, disini kita bisa membuat kerangka template ataupun membuat tombol (button) dengan CSS3 Generator tersebut dan lain-lain lah.

Semua link dibawah ini adalah hasil yang udah saya cari mulai dari google :

http://csslayoutgenerator.com/
http://www.webtutorialplus.com/css3-generator.aspx
http://css3generator.com/
http://cssload.net/
http://www.joelambert.co.uk/morf/
http://westciv.com/tools/boxshadows/index.html
http://www.3dcsstext.com/
http://www.csstextwrap.com/
http://www.wordpressthemeshock.com/css-drop-shadow/
http://csswarp.eleqtriq.com/
http://border-radius.com/
http://codefuture.co.uk/css/css3-Transform.php
http://www.imgtocss.com/
http://css3button.net/
http://www.css3shapes.com/
http://www.text-image.com/
http://cssarrowplease.com/
http://cssround.com/
http://www.css3d.net/ribbon-generator/
http://css3please.com/
http://csscorners.com/
http://css3.mikeplate.com/
http://www.css3.me/
http://css3clickchart.com/
http://layerstyles.org/builder.html

JQuery Efek Nivo Slider Tanpa Plugin

Nivo Slider Like Effect Slideshow Without Plugin

HTML

<figure id="slider">
    <div class="container">
        <img src="image/slide-1.jpg" alt="Deskripsi slide 1">
        <img src="image/slide-2.jpg" alt="Deskripsi slide 2">
        <img src="image/slide-3.jpg" alt="Deskripsi slide 3">
        <img src="image/slide-4.jpg" alt="Deskripsi slide 4">
    </div>
    <figcaption></figcaption>
    <nav id="slider-nav"></nav>
</figure>

CSS

/* Slider */
#slider {
  display:block;
  border:4px solid #000;
  width:400px; /* slider width */
  height:250px;; /* slider height */
  margin:0 auto;
  background:white url('img/loading.gif') no-repeat 50% 50%;
  overflow:hidden;
  position:relative;
}

/* For caption */
#slider figcaption {
  display:block;
  background-color:black;
  font:normal normal 11px Arial,Sans-Serif;
  color:white;
  opacity:.8;
  padding:10px 15px;
  position:absolute;
  right:0;
  bottom:-100px; /* hide the caption with this way :) */
  left:0;
  z-index:99;
}

#slider img {
  display:block;
  margin:0 0;
  width:400px; /* slide width */
  height:250px; /* slide height */
  position:absolute;
  top:0;
  left:0;
}

/* Navigation */
#slider-nav {
  display:block;
  position:absolute;
  top:10px;
  right:10px;
  margin:0 0;
  padding:0 0;
  z-index:99;
}

#slider-nav a {
  display:block;
  float:left;
  width:10px;
  height:10px;
  background-color:#111;
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:-99px;
  margin:0 2px 0 0;
  border:2px solid white;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

#slider-nav .active {
  background-color:#2589B4;
}

/* Hide all element inside the '#slider' until the page has been loaded! */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}

JQuery

/**
 * NIVO SLIDER LIKE EFFECT SLIDESHOW BY TAUFIK NURROHMAN
 * URL: https://plus.google.com/108949996304093815163/about
 * Based on this slideshow framework: http://hompimpaalaihumgambreng.blogspot.com/2012/09/simple-useful-jquery-slideshow.html
 */

(function($) {

// ==================================================================================
// Configuration here:
// ----------------------------------------------------------------------------------
    var config = {
        slices: 10, // number of slices
        speed: 600, // slideshow speed
        easing: null, // easing type
        interval: 3000 // slideshow interval
    };
// ==================================================================================

    // Some variables...
    var $slider = $('#slider'),
        $caption = $slider.find('figcaption'),
        $container = $slider.find('.container'),
        $nav = $('#slider-nav'),
        $slide = $container.children(),
        autoSlide = null,
        $first = $slide.first();

    // Auto append navigation item based on the slides length
    $slide.each(function(index) {
        var i = index + 1;
        $nav.append('<a href="#slide-'+i+'">'+i+'</a>');
        $(this).attr('id', 'slide-'+i);
    });

    // Set the slices size
    var slice_w = $slider.width() / config.slices,
        slice_h = $slider.height();

    // Build the slices
    for (var i = 0; i < config.slices; i++) {
        $('<div class="slice" />').css({
            'position':'absolute',
            'width':slice_w,
            'height':slice_h,
            'left':slice_w*i,
            'z-index':4,
            'background-color':'transparent',
            'background-repeat':'no-repeat',
            'background-position':'-' + slice_w*i + 'px 0'
        }).appendTo($slider);
    }

    // Catch the slices, and also set the different position between odd and even slices
    var $sliceOdd = $slider.find('.slice:odd').css('bottom',0),
        $sliceEven = $slider.find('.slice:even').css('top',0);

    // Click to switch!
    $nav.find('a').on("click", function() {

        $nav.find('.active').removeClass('active');
        $(this).addClass('active');

        var pos = $(this).index(),
            text = $slide.eq(pos).attr('alt'),
            bg = $slide.eq(pos).attr('src');

        $slide.hide().eq(pos).trigger("load").show();

        // Do the caption and slices animation here!
        $caption.stop().animate({bottom:'-100px'}, config.speed/2);

        $sliceOdd.each(function(i) {
            $(this).stop().delay(i*100).animate({bottom:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
                $(this).css({
                    'background-image':'url('+bg+')',
                    'bottom':0,
                    'opacity':1
                });
            });
        });
        $sliceEven.each(function(i) {
            $(this).stop().delay(i*100).animate({top:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
                $(this).css({
                    'background-image':'url('+bg+')',
                    'top':0,
                    'opacity':1
                });
            });
        }).promise().done(function() {
            $caption.html(text).stop().animate({bottom:'0'}, config.speed/2);
        });

        clearInterval(autoSlide);
        autoSlide = setInterval(slideShow, config.interval);

        return false;

    }).first().addClass('active');

    // Init slideshow
    $caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, config.speed);

    // Navigation clicker
    function slideShow() {
        if ($nav.find('.active').next().length) {
            $nav.find('.active').next().trigger("click");
        } else {
            $nav.find('a').first().trigger("click");
        }
    }

    // Run the slideshow on page load...
    $(window).on("load", function() {

        // remove the 'loading background-image' of '#slider'
        $slider.css('background-image','none');

        // Show the '.container', 'figcaption' and '#slide-nav' when the page has been loaded!
        $container.show();
        $caption.show();
        $nav.css('opacity',1);

        // Another init slideshow
        $slider.find('.slice').css('background-image', 'url('+$first.attr("src")+')');

        // Then, start the interval...
        autoSlide = setInterval(slideShow, config.interval);

    });

})(jQuery);

HTML letakan didalam kode/dibawah <body> atau diatas kode </body> (terserah tergantung tempat anda meletakanya )
CSS letakan dikode ]]><b:skin>
Jquery diletakan diatas kode </script>

Konfigurasi

Opsi	Keterangan
slices	Jumlah potingan slide.
speed	Kecepatan slideshow.
easing	Tipe easing animasi.
interval	Interval slideshow.

Pure CSS3 Animated Monster

Hi rakasa kecil, apakah kamu lapar? Ini semua hanya CSS3 Animasi bereksperimen dengan nilai acak untuk membuat makhluk hidup seperti sebuah rakasa : )

Download

Sumber : DTE

Minggu, 06 Januari 2013

Emoticon Blogger Otomatis dengan JQuery

JQuery Auto Emoticons for Blogger — Emoticon otomatis untuk komentar Blogger

Saya baru memutuskan bahwa eksperimen ini telah berhasil sekitar satu hari yang lalu (sepertinya begitu). Ini adalah fasilitas emoticon otomatis yang akan mengubah simbol-simbol seperti :), :(, dan yang lainnya menjadi gambar tertentu yang telah ditentukan. Saya menggunakan JQuery karena mungkin konsep emoticon dengan JQuery belum ada. Dan juga, lagipula Saya belum begitu berbakat untuk menuliskan kode dengan JavaScript metah. Meskipun di luar sana sudah ada beberapa tutorial sejenis misalnya Add Yahoo Smiley Emoticons on Blogger Comment, tapi Saya hanya ingin memberikan sesuatu yang sedikit berbeda dan dengan proses instalasi yang sangat mudah.
Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:
</body>
Salin kode di bawah ini dan letakkan di atasnya:

<style type='text/css'>
.emoWrap {
  background-color:#EEDE86;
  border:2px solid #D3BA59;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}

img.emo, input.emoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}

input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//CDATA[
var emoRange    = "#comments p, div.emoWrap",
    putEmoAbove = "#comment-editor",
    emoMessage  = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/jquery.autoemoticons.js' type='text/javascript'></script>

Klik Simpan Template dan lihat hasilnya.

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll

Ini adalah teknik sederhana untuk menyembunyikan scrollbar tanpa membuat area menjadi tidak bisa digulung. Dengan mendeklarasikan margin negatif pada sisi kanan area, maka scrollbar secara otomatis akan tersembunyi jauh di sebelah kanan sana. Dan kita masih bisa menggulung area dengan mouse wheel atau... layar sentuh mungkin?

HTML

<div class='hidden-scrollbar'>
    <div class='inner'>
      Teks atau sesuatu yang panjang di sini...
    </div>
</div>

CSS

.hidden-scrollbar {
  background-color:black;
  border:2px solid #666;
  color:white;  
  overflow:hidden;
  text-align:justify;    
}

.hidden-scrollbar .inner {
  height:200px;
  overflow:auto;
  margin:15px -300px 15px 15px;
  padding-right:300px; /* Samakan dengan besar margin negatif */
}

DEMO :

Sumber : DTE

Tip Melindungi Konten Blog dari para Plagiator

Proyek ini bertujuan untuk melindungi postingan-postingan di blogmu agar tidak mudah disalin oleh para pengunjung. Sekarang coba masuk ke tab Rancangan kemudian pilih Edit HTML. Untuk menonaktifkan fungsi blok dan klik-kanan mouse sebenarnya sangatlah sederhana. Kamu hanya perlu mengganti tag <body> dengan kode ini:

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

Klik Simpan Template kemudian lihat halaman blogmu.

Sekarang coba klik-kanan mousemu, maka tidak akan ada menu apapun yang akan tampil. Coba juga untuk mengeblok tulisan-tulisan di halamanmu. Tidak bisa kan? Begitulah salah satu cara jitu untuk melindungi hasil karyamu di blog. Namun sayangnya, cara ini juga mempunyai sebuah efek samping, yaitu akan membuat kotak penelusuran posting bawaan dari template blogmu menjadi tidak berfungsi. Satu-satunya jalan keluar untuk mengatasi masalah ini mungkin hanya dengan menampilkan kembali navbar blog jika kamu merasa bahwa kotak penelusuran itu sangat penting.

SUMBER :DTE

Menonaktifkan Klik-Kanan Dengan Jquery

Keistimewaan sistem keamanan ini dibandingkan dengan sistem keamanan pencegahan klik-kanan dengan alert adalah sasarannya yang dapat ditentukan sesuka hati. Sistem keamanan ini juga lebih mengandung unsur seni karena saat aksi klik-kanan dilakukan, sebuah tabir/overlay akan muncul untuk menutupi semua halaman:

Dasar Ide

Ide dasar dari pembuatan sistem keamanan ini adalah dari plugin JQuery klik-kanan yang sempat Saya dapatkan dari A Beautiful Site. Caranya sangat sederhana: Cukup dengan menyisipkan plugin tersebut ke dalam proyek, kemudian kita jalankan fungsi .rightClick() untuk menampilkan overlay saat aksi klik-kanan dilakukan:

/*
jQuery Right-Click Plugin
Version 1.01
Cory S.N. LaViska
A Beautiful Site (http://abeautifulsite.net/)
*/
if(jQuery)(function(){$.extend($.fn,{rightClick:function(a){$(this).each(function(){$(this).mousedown(function(b){var c=b;$(this).mouseup(function(){$(this).unbind("mouseup");if(c.button==2){a.call($(this),c);return false}else{return true}})});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseDown:function(a){$(this).each(function(){$(this).mousedown(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseUp:function(a){$(this).each(function(){$(this).mouseup(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},noContext:function(){$(this).each(function(){$(this)[0].oncontextmenu=function(){return false}});return $(this)}})})(jQuery);

// Jalankan fungsi...
$(function() {
    $(document).rightClick(function(e) {
         $('#no-right-click-overlay').show(); //menampilkan overlay saat aksi klik-kanan dilakukan
    });

    $('#no-right-click-overlay').click(function() {
         $(this).fadeOut("fast"); //menghilangkan overlay saat overlay diklik
    });
});

Langkah Selengkapnya

Berikut ini adalah langkah-langkah selengkapnya untuk menciptakan sistem keamanan seperti pada halaman demo:

Pertama-tama pastikan dulu bahwa templatemu sudah dilengkapi dengan JQuery. Jika belum ada, kunjungi halaman ini terlebih dahulu kemudian salin script JQuery-nya saja. Plugin easing tidak diperlukan dalam proyek ini.

Setelah itu salin kode ini kemudian letakkan tepat di bawah JQuery tadi:

<script type='text/javascript'>
/*
jQuery Right-Click Plugin
Version 1.01
Cory S.N. LaViska
A Beautiful Site (http://abeautifulsite.net/)
*/
if(jQuery)(function(){$.extend($.fn,{rightClick:function(a){$(this).each(function(){$(this).mousedown(function(b){var c=b;$(this).mouseup(function(){$(this).unbind("mouseup");if(c.button==2){a.call($(this),c);return false}else{return true}})});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseDown:function(a){$(this).each(function(){$(this).mousedown(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseUp:function(a){$(this).each(function(){$(this).mouseup(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},noContext:function(){$(this).each(function(){$(this)[0].oncontextmenu=function(){return false}});return $(this)}})})(jQuery);

// Jalankan fungsi...
$(function() {
    $(document).rightClick(function(e) {
         $('#no-right-click-overlay').show(); //menampilkan overlay saat aksi klik-kanan dilakukan
    });
    $('#no-right-click-overlay').click(function() {
         $(this).fadeOut("fast"); //menghilangkan overlay saat overlay diklik
    });
});
</script>

Berikutnya letakkan elemen ini tepat di atas tag </body>:

<div id='no-right-click-overlay'>
Teks peringatan di sini...
</div>

Terakhir, Salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

#no-right-click-overlay {
  background:#000;
  font:bold 30px 'Comic Sans MS',Calibri,Arial,Sans-Serif;
  color:#f10c0c;
  position:fixed !important;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  width:90%;
  height:100%;
  text-align:center;
  padding:5%;
  display:none;
}

Klik Simpan Template.

Lebih Lanjut

Dalam script di atas Saya menerapkan fungsi .rightClick() pada $(document). Itu artinya bahwa Saya akan melarang orang lain melakukan aksi klik-kanan pada semua area dalam dokumen. Namun, jika Anda ingin menonaktifkan klik-kanan pada area/elemen tertentu saja, selektor $(document) bisa Anda ganti dengan selektor lain. Misalnya seperti ini:

$('#terlarang').rightClick(function(e) {

$('#no-right-click-overlay').show();

});

Kode di atas akan melarang orang lain untuk melakukan aksi klik-kanan pada area #terlarang saja, sedangkan untuk area lainnya dapat dikenai aksi klik-kanan

No Live Links - Mencegah Tautan Aktif Masuk ke dalam Komentar

function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for(var i = 0; i < content.length; i++) {
        // Saya menggunakan pengukur berupa tag penutup, karena tag pembuka tidak tegas
        // Tag <a> tidak selalu diawali dengan atribut 'href',
        // sehingga mengecek indeks dengan menuliskan content[i].indexOf('<a href=\"') menjadi kurang akurat
        // Lebih baik gunakan tag penutup sebagai penanda adanya tautan di dalam konten
        if(content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
            content[i].className = "spammer-detected";
        }
    }
}

// Jalankan fungsi!
// Seleksi elemen induk dengan id='comment-holder' ...
// dan periksa semua konten paragraf di dalamnya!
blockLinks('comment-holder', 'p');

Fungsi sederhana untuk mencegah hadirnya tautan aktif dalam daftar komentar. Cara kerjanya sederhana: JavaScript akan menyeleksi sebuah elemen induk dengan ID tertentu (dalam hal ini: #comment-holder), kemudian akan melihat semua item di dalamnya (dalam hal ini <p>). Jika setidaknya sebuah tautan ditemukan, dengan sekejap ganti semua konten item tersebut dengan suatu pesan pelarangan.

DEMO :

Modifikasi Tampilan dan Teks pada Status Message

Custom Status Message for Blogger — Contoh tampilan *‘status message’* yang sudah dimodifikasi.

Status Message adalah sebuah pesan yang akan muncul di atas posting ketika kita sedang berada di halaman hasil pencarian atau halaman label. Memodifikasi tampilannya mungkin mudah, yaitu dengan cara menimpa CSS bawaan Blogger dengan kode CSS baru yang mengandung pengaturan tampilan yang berbeda seperti ini:

.status-msg-wrap {
  font-size:110%;
  width:90%;
  margin:10px auto;
  position:relative;
}

.status-msg-border {
  border:1px solid #000;
  filter:alpha(opacity=40);
  -moz-opacity:.4;
  opacity:.4;
  width:100%;
  position:relative;
}

.status-msg-bg {
  background-color:#ccc;
  opacity:.8;
  filter:alpha(opacity=30);
  -moz-opacity:.8;
  width:100%;
  position:relative;
  z-index:1;
}

.status-msg-body {
  text-align:center;
  padding:.3em 0;
  width:100%;
  position:absolute;
  z-index:4;
}

.status-msg-hidden {
  visibility:hidden;
  padding:.3em 0;
}

.status-msg-wrap a {
  padding-left:.4em;
  text-decoration:underline;
}

Tapi bagaimana jika kita ingin memodifikasi tulisan di dalamnya?
Untuk melakukan itu, kita mau tidak mau harus menghapus elemen tersebut dan menggantinya dengan markup yang baru seperti ini:

<!-- b:include data='top' name='status-message'/ -->
<b:if cond='data:blog.searchQuery'>
  <b:if cond='data:numPosts != 0'>
    <p class='custom-status-message'>Menampilkan semua entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong></p>
  <b:else/>
    <p class='custom-status-message-error'>Pencarian entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong> tidak ditemukan.</p>
  </b:if>
</b:if>
<b:if cond='data:blog.searchLabel'>
  <p class='custom-status-message'>Menampilkan semua entri dengan kategori <strong>&amp;#8220;<data:blog.searchLabel/>&amp;#8221;</strong></p>
</b:if>

Salin kode di atas, kemudian gunakan untuk menggantikan kode yang tampak seperti ini di dalam template (biasanya ada dua):
<b:include data='top' name='status-message'/>
Kemudian tambahkan kode CSS ini di atas ]]></b:skin> atau </style>:

.custom-status-message,
.custom-status-message-error {
  font:normal normal 13px Segoe,"Segoe UI",Calibri,"Helvatica Neue",Arial,Sans-Serif;
  color:white;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  padding:7px 14px;
  margin:5px 5px 1.7em;
  background-color:#5A6777;
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  border:2px solid #404B55;
  border-bottom-color:#212729;
  border-top-color:#8E97A2;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

.custom-status-message-error {
  background-color:#600;
  border-color:#700 #500 #300;
}

.custom-status-message strong {color:#AADD99}
.custom-status-message-error strong {color:#ff0}

CSS Komentar Blogspot - Tema Facebook

/* Masuk ke halaman editor HTML Template Anda:

Temukan kode ini:

]]></b:skin>

Salin kode CSS di bawah ini dan letakkan di atasnya:

/* CSS Komentar Blogspot - Tema Facebook
 * Selengkapnya: https://plus.google.com/108949996304093815163/posts
 */

.comments {
  font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  color:rgb(51,51,51);
}

.comments .comments-content a {
  color:#3B5998 !important;
}

.comments h2,
.comments h3,
.comments h4 {
  font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  font-size:16px;
}

.comments .comments-content .comment {
  margin:0 0 0;
  padding:10px 10px;
  border-top:1px solid #e9e9e9;
  border-left:1px solid #ccc;
}

.comments .comment .comment-header,
.comments .comment .comment-actions,
.comments .comment .comment-actions a,
.comments .comment .comment-thread.inline-thread,
.comments .comment .continue {
  margin:0 0 0;
  padding:0 0 0;
  border:none;
  background:transparent;
}

.comments .comment .comment-header {
  margin-bottom:4px;
}

.comments .comment .comment-header .datetime a {
  color:#808080 !important;
}

.comments .comment .comment-actions a {
  padding-right:5px;
}

.comments .thread-toggle .thread-arrow {
  width:7px;
  height:7px;
  padding-right:4px;
}

.comments .comment .avatar-image-container,
.comments .comment .avatar-image-container img {
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
  border:none;
  padding:0;
  margin:0;
  outline:none;
}

.comments .comment .comment-block {
  margin:0 0 0 60px !important;
}

.comments .comment .comment-thread.inline-thread {
  margin:7px 0 0 22px;
}

.comments .comment .comment-thread.inline-thread ol {
  margin:7px 0 10px !important;
}

.comments .comment .comment-thread.inline-thread .comment {
  background-color:#EDEFF4;
  padding:5px 5px 0;
  margin:1px 0 0;
  border:none;
  border-bottom:1px solid #D2D9E7;
}

.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {
  width:32px;
  height:32px;
}

.comments .comment .comment-thread.inline-thread .comment .comment-block {
  margin:0 0 0 40px !important;
}

.comments .comment .comment-content {
  text-align:left;
}

.comments .comments-content .icon.blog-author {
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:top;
  background:transparent url('/favicon.ico') no-repeat 50% 50%;
}

.comments .comment .comment-thread.inline-thread .comment:last-child {
  border-left:2px solid #A8B2CE !important;
}

Blog Kaleng

Senin, 07 Januari 2013

Membuat Background menarik dengan CSS

Kumpulan CSS3 Generator

Terinspirasi dari membuat template yang masih saya kerjakan lalu saya coba cari tools untuk mempermudah membuat template dan sampailah pada link-link berikut, disini kita bisa membuat kerangka template ataupun membuat tombol (button) dengan CSS3 Generator tersebut dan lain-lain lah.

JQuery Efek Nivo Slider Tanpa Plugin

HTML

CSS

JQuery

Konfigurasi

Pure CSS3 Animated Monster

Minggu, 06 Januari 2013

Emoticon Blogger Otomatis dengan JQuery

Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll

HTML

CSS

Tip Melindungi Konten Blog dari para Plagiator

Menonaktifkan Klik-Kanan Dengan Jquery

Dasar Ide

Langkah Selengkapnya

Lebih Lanjut

No Live Links - Mencegah Tautan Aktif Masuk ke dalam Komentar

Modifikasi Tampilan dan Teks pada Status Message

CSS Komentar Blogspot - Tema Facebook

Follow this

Translate This Page

Followers

Visitor

About Me

Backlink

Blog list

Blog Archive

Popular Posts