Mitra Bewara Sunda: Diajar blogger

Tampilkan postingan dengan label Diajar blogger. Tampilkan semua postingan

Senin, 17 Februari 2014

JQuery Gambar Slider with Description

Deskripsi gambar ti slider ieu aya di palebah katuhu gambar. Deskripsi boga fungsi kanggo nepikeun informasi sakaligus memuat link anu patali jeung gambar/image anu dipidangkeun. Teks deskripsi gambar kedah didamel seminimal manawi (seperlunya wae) margi tanagi tande rohang anu saleresna alit pisan. Anjeun tiasa ngasupkeun link kanggo deskripsi/penjelasan anu langkung rinci .

KETERANGAN/CATETAN:

Gancangna slider tiasa diatur kalawan ngalakukeun parobahan dina javascript (intervalObject --> countDown, 400: beuki ageung beuki lils/laun).
Anjeun tiasa ngaturna oge di var totalSec.
Kanggo midamel na pigawe pengamanan template leuwih tiheula.
Sanggeus rengse ngamankeun template teruskeun kalawan nunda KODE CSS di luhur KODE ]]></b:skin>
Simpen JQuery.1.3.2.min.js jeung javascript di handapeun KODE <head> cing ngaruntuy.
xHTML digunakeun dibagian body atawa di jero posting.

Supados proses pembuatan mapan lancar,kanggo anu dina keneh babak diajar mangga buka Special Tutorials di menu sebelah kiri.

Lamun DEMO-1 gagal dibuka mangga cobian DEMO-2:

D E M O - 1 D E M O - 2

KODE CSS - JQUERY IMAGE SLIDER WITH DESCRIPTION :

#featurelistarea{ /*box utamana/palingluar */
        padding: 10px 10px 14px 10px;
        margin:5px; 
        height:285px; 
        width:690px;  /*bisa oge diganti ku with:auto; */ 
}
#featuremainpic{  /* box gambar */
        position:relative; 
        float: left; 
        width:348px; 
        height:288px; 
        border: 1px solid black; 
        overflow: hidden;
}
.featurepic{  /*image*/
        display:none;
        background:#996600;
        width:320px;
        height:260px;
        border:4px solid #660000;
        border-radius:15px;  /* border corners */
        padding:8px;
        margin:2px;
}
#featurepic0{  /*opening image*/
        display:block;
        height: 260px;  /*penting: sesuai lebar iamge */
} 
#featurelistheader{
        width:339px;  /*box judul katuhu luhur: h1 */ 
        height:38px;
}
#featurelistheader h1{
        margin: 0px; 
        background: url(https://sites.google.com/site/mitrabewara/bg/mbbeureumHideungV32H7.gif);
        font-family:Verdana  /*Comic Sans MS*/; 
        font-size:16px;
        font-weight:700;
        height:34px; 
        padding:5px 10px 0 10px;
}
#featurelistheader a{  /* header link */ 
        text-decoration:none;
        border-bottom:1px dotted #999;
        color:#999900;
}
#featurelistheader a:hover{  /*header link hover */
        color:white;
        background:black;
        padding:2px 6px;
} 
#featurelistbox{
        position:relative; 
        float:left;  
} 
#featurelist{  /* boks teks */
        position:relative; 
        border:1px solid #666; 
        border-top:none; 
        border-left:none;
        height: 251px;
        line-height:16px;
        z-index:4000;
}
#feature4{
        position:relative; 
        width :333px;  
        border-top:1px dotted yellow; 
        padding: 10px 0px 0px 6px;
}
.feature{  /* boks teks kecil (teks/gambar) */
        position:relative; 
        width: 333px; 
        border-top:1px dotted yellow; 
        padding: 4px 0px 4px 6px; 
        cursor:pointer;
}
.feature a{
        font-size:11px;
        font-family:Arial;
        font-weight:bold;
        color:red;
        text-decoration:none;
} 
.featureon{
        background-color:#000; 
        opacity:0.8;
        filter:alpha(opacity=80); 
}
.featureon:hover{
        background-color:#000; 
        opacity:1.0;
        filter:alpha(opacity=100);
} 
#featurelist{ margin:0px; font-size:10px; font-family:Arial; background: #003366; line-height:14px;}
#featurelist a{padding-left:13px; font-weight:bold; color:green;text-decoration:none;}
#featurelist a:link{color:orange; }
#featurelist a:active{color:#00CCFF;}
#featurelist a:visited{color:#fff;}
#featurelist a:hover{color:#66FFFF;}
#featurelist .Title{padding-left:7px;text-transform:uppercase;text-decoration:none;}
#featurelist .Title:link{color:#999;}
#featurelist .Title:active{color:yellow;}
#featurelist .Title:visited{color:#fff;}
#featurelist .Title:hover{color: #fff;}
#featurelist .SubTitle{font-size:11px;padding-left:7px;font-weight:normal;text-transform:none; text-decoration:none;}
#featurelist .SubTitle:link{ color:#999;}
#featurelist .SubTitle:active{ color:yellow;}
#featurelist .SubTitle:visited{ color:#666;}
#featurelist .SubTitle:hover{ color:#fff;}
#featurelist .RedBullet img{padding:0 10px 0 40px;}
#featurelist .RedBullet{text-decoration:none; padding-left:8px;}
#featurelist .RedLink:link{color:#cc0000;font-weight: bold; font-size: 12px;}
#featurelist .RedLink:active{color:#fff;}
#featurelist .RedLink:visited{color:#666;}
#featurelist .RedLink:hover{color:yellow; text-decoration:underline;}

JQUERY.1.3.2.MIN.JS :

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

JAVASCRIPT - JQUERY IMAGE SLIDER WITH DESCRIPTION :

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function () {
    intervalObject = setInterval(countDown, 400);
    jQuery("#featurelist .feature").each(
    function (IntIndex) {
        jQuery(this).hover(featureOn, featureOff);
        function featureOn() {
            jQuery('.feature').removeClass("featureon");
            jQuery(this).addClass("featureon");
            jQuery('.featurepic').hide();
            jQuery('#featurepic' + IntIndex).fadeIn("fast");
            pause();
        }
        function featureOff() {
            play();
        }
    });
});
var totalSec = 10;
var intervalObject;
var isPlaying = true;
function featurePlay() {}
function play() {
    if (isPlaying == false) {
        isPlaying = true;
        intervalObject = setInterval(countDown, 400);
    }
}
/* Control of the play/pause */
function pause() {
    if (isPlaying == true) {
        isPlaying = false;
        clearInterval(intervalObject);
        totalSec = 10;
    }
}
function countDown() {
    if (totalSec < 0) {
        totalSec = 10;
        var currentDiv = jQuery('#featurelist .featureon').attr('id');
        var count = currentDiv.charAt(7);
        count++;
        if (count > 3) {
            count = 0;
        } else {}
        jQuery('.feature').removeClass("featureon");
        jQuery('#feature' + count).addClass("featureon");
        jQuery('.featurepic').hide();
  jQuery('#featurepic' + count).fadeIn("fast");
    }
 else {
        totalSec--;
    }
}
//]]>
</script>

XHTML - JQUERY IMAGE SLIDER WITH DESCRIPTION :

<div id="featurelistarea" style="background: #3366CC;">
<div id="featuremainpic">
<a href="Link-Image1"><img src="Image1.jpg" id="featurepic0" class="featurepic"/></a>
<a href="Link-Image2"><img src="Image2.jpg" id="featurepic1" class="featurepic"/></a>
<a href="Link-Image3"><img src="Image3.jpg" id="featurepic2" class="featurepic"/></a>
<a href="Link-Image4"><img src="Image4.jpg" id="featurepic3" class="featurepic"/></a>
</div>
<div id="featurelistbox">
<div id="featurelistheader">
<h1><a href="Link-Judul/Nama Boks">Nama/Judul boks</a></h1>
</div>
<div id="featurelist">
<div id="feature0" class="feature featureon" ><a href='URL-1' class='Title' target="_blank" title='Teks Title-1'>Judul Deskripsi-1<br><span class="SubTitle">Tulis teks deskripsi-1 di sini !</span></a><span><a href="Link Ekstra-1">Teks Ekstra-1</a></span>
</div>
<div id="feature1" class="feature"><a href='URL-2' class='Title' target="_blank" title='Teks Title-2'>Judul Deskripsi-2<br><span class="SubTitle">Tulis teks deskripsi-2 di sini !</span></a><span><a href="Link Ekstra-2">Teks Ekstra-2</a></span>
</div>
<div id="feature2" class="feature"><a href='URL-3' class='Title' target="_blank" title='Teks Title-3'>Judul Deskripsi-3<br><span class="SubTitle">Tulis teks deskripsi-3 di sini !</span></a><span><a href="Link Ekstra-3">Teks Ekstra-3</a></span>
</div>
<div id="feature3" class="feature"><a href='URL-4' class='Title' target="_blank" title='Teks Title-4'>Judul Deskripsi-4<br><span class="SubTitle">Tulis teks deskripsi-4 di sini !</span></a><span><a href="Link Ekstra-4">Teks Ekstra-4</a></span>
</div>
<div id="feature4"><img src="https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/jquery/image-slider-w-description/images/CalendarAnima.gif" border="0"/><a class="RedLink" href="Link Bawah-1" target="_blank" >Nama Link Bawah-1</a><img src="http://www.mforum.ru/i/fm_user_5.png" border="0"/><a class="RedLink" href="Link Bawah-2" target="_self" >Nama Link Bawah-2</a>
</div>
</div>
</div>
<div class="clear"></div>
</div>

Mangga oge dibuka Tutorial sanesna anu metot pikabitaeun sarta patut di turutan ku anjeun sadayana. Akses ngaliwatan link handap ini:

Minggu, 16 Februari 2014

Image effect

Image effect anu bade urang kanggo mangrupa efek zoom kalawan ngamangpaatkeun kadudukan jquery.1.3.2.min.js anu di jerona saleresna ditanam sagala rupa kadudukan anu tiasa dikembangkeun ku pamake na. Kanggo nyiptakeun efek zoom ieu urang peryogi nambahan sakedik javascript sarta kode CSS minangka pembangun sarta pengendali. Anjeun tiasa mengatur sabaraha ageung effek zoom didamel kalawan ngalakukeun parobahan di javascript.

KODE CSS IMAGE EFFECT-1

.epekbadag{
      float:left;
      list-style:none;
      margin:0;
      padding:0;
}
.epekbadag li{
      margin:0 3px 3px 0; 
      padding:0;
      float:left;
      position:relative;
      width:118px; 
      height:158px;
}
.epekbadag li img.zoom{
      width:100px; 
      height:140px;
      border:4px solid #ddd;
      padding:5px;
      background:#666;
      position:absolute;
      -ms-interpolation-mode:bicubic; 
}
.epekbadag li img.zoom:hover{
      background:#999;
      border:4px double #333; 
}

JAVASCRIPT - IMAGE EFFECT-1 :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[ 
$(document).ready(function () {
    $(".epek li").hover(function () {
        $(this).css({
            'z-index': '10'
        });
        $(this).find('img').addClass("hover").stop().animate({
            marginTop: '-110px',
            marginLeft: '-110px',
            top: '10%', /* pangatur tempat scr vertical keur migawe efek badag  */
            left: '50%', /* pangatur tempat scr horizontal keur migawe efek badag  */
            width: '250px', /* ukuran width dina gambar keur migawe efek badag */
            height: '350px', /*  ukuran height dina gambar keur migawe efek badag */
            padding: '10px'
        },
        1500);
    },
    function () {
        $(this).css({
            'z-index': '0'
        });
        $(this).find('img').removeClass("hover").stop().animate({
            marginTop: '0',
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '100px', /* kudu sarua jeung width dina kode css */
            height: '140px', /* kudu sarua jeung height dina kode css */
            padding: '5px'
        },
        1000);
    });
    $(".epek li a").click(function () {
        var mainImage = $(this).attr("href");
        $("#main_view img").attr({
            src: mainImage
        });
        return false;
    });
});
//]]>
</script>

XHTML :

<ul class="epek">
    <li><a id="main_view" href="image-01.jpg"><img class="zoom" src="image-zoom-01.jpg" /></a></li>
    <li><a id="main_view" href="image-02.jpg"><img class="zoom" src="image-zoom-02.jpg" /></a></li>
    <li><a id="main_view" href="image-03.jpg"><img class="zoom" src="image-zoom-03.jpg" /></a></li>
    <li><a id="main_view" href="image-04.jpg"><img class="zoom" src="image-zoom-04.jpg" /></a></li>
</ul>

Teangan kode <head>
Copy jeung paste-kan jQuery sareng javascriptna di handap <head>
Teangan kode ]]></b:skin>.
Copy kode CSS sarta letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Anggo xhtml wanci posting atawa manfaatkan ngaliwatan penambahan gadget.

CATETAN/KATERANGAN :

Panduan backup template,cara pilari kode sarta sababaraha cara nunda kode css,javascript sarta xhtml tiasa dibuka di Special Tutorials pada vertical menu sebelah kiri halaman.
Beberapa pengaturan/setting sudah tertulis di javascript. Silahkan dicermati.
image-zoom-01.jpg s/d image-zoom-04.jpg adalah image yang akan bekerja dengan zoom effect.
image-01.jpg s/d image-04.jpg akan ditampilkan ketika "klik" dilakukan pada image-zoom-01.jpg s/d image-zoom-04.jpg.
Untuk merubah kecepatan efek zoom-nya silahkan rubah variable kecepatan pada javascript berhuruf tebal warna kuning. Semakin besar maka akan semakin lambat.
Untuk merubah ukuran image harus dilakukan perubahan secara bersama-sama antara variable width dan height pada javascript dan yang terdapat pada kode CSS. Perubahan dilakukan dengan memperhatikan selisih nilai ukuran yang sudah disediakan sebagai perbandingan.
Variable width:'250px' dan height:'320px' (pada javascript) merupaka ukuran image dengan efek zoom. Bila diperlukan lakukanlah perubahan !

Selasa, 11 Februari 2014

Carana ngajieun Tombol tex

Senin, 10 Februari 2014

Cara Ngajieun Auto Scroll di Widget SMS Haratis ngagunakeun CSS3

Auto Scroller Widget SMS Gratis nganggo Lebar/width 240px

KODE WIDGET SMS GRATIS

KODE CSS AUTO SCROLLER (LEBAR WIDGET=210PX)

.wadahsms{
       height:184px;
       width:244px;
       padding:5px;
       overflow:hidden;
       border:3px solid #999;        
       border-radius:8px;
       -o-transition:all 1.1s ease-out;
       -moz-transition:all 1.1s ease-out;
       -webkit-transition:all 1.1s ease-out;
       background:#555 url(https://sites.google.com/site/mitrabewara/bg/logosms-1.jpg) top center no-repeat;
       background-position:5px 92px;
       background-size:244px auto;        
}
.wadahsms:hover{
       height:395px;
       background:#CC9966 url(https://sites.google.com/site/mitrabewara/bg/mitrabewara-bgcarang.png);
       border-color:#663300;
}
.wadahsms iframe{
       background: url(https://sites.google.com/site/mitrabewara/bg/mitrabewara-bgsms02.jpg);
       border:2px solid #666; 
       border-radius:8px;
}
.wadahsms .boxsmsdalam{
       overflow:hidden;
       opacity:0.5;
       filter:alpha(opacity=50);
       height:76px;
       border-radius:8px;
       box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;
       -o-transition:all 1.8s ease-out;
       -moz-transition:all 1.8s ease-out;
       -webkit-transition:all 1.8s ease-out;
}
.wadahsms:hover .boxsmsdalam{ 
       height:390px;
       opacity:1.0;
       filter:alpha(opacity=100);
       -o-transition:all 1.5s ease-in;
       -moz-transition:all 1.5s ease-in;
       -webkit-transition:all 1.5s ease-in;
}
.wadahsms a{
       padding:2px 8px;
       margin:0 auto;
       display:block;
       text-align:center;
       font-family:Verdana;
       color:red;
       font-size:16px;
       text-shadow:1px 1px 1px #000;
       font-weight:bold;
       border-radius:4px;
       -o-transition:all 1.5s ease-in;
       -moz-transition:all 1.5s ease-in;
       -webkit-transition:all 1.5s ease-in;
}
.wadahsms a:hover{
       color:blue;background:#999;
       width:150px;
       text-decoration:none;
}

Auto Scroller Widget SMS Gratis nganggo Lebar/width 200px

KODE WIDGET SMS GRATIS (WIDTH=200PX)

KODE CSS AUTO SCROLLER (LEBAR WIDGET=200PX)

.wadahsms2{
       height:190px;
       width:204px;
       padding:5px;
       overflow:hidden;
       border:3px solid #999;
       border-radius:8px;
       -o-transition:all 1.1s ease-out;
       -moz-transition:all 1.1s ease-out;
       -webkit-transition:all 1.1s ease-out;
       background:#555 url(https://sites.google.com/site/mitrabewara/bg/mitrabewara-pinkSMSlogo-H200V94.jpg) top center no-repeat;
       background-position:7px 92px; 
}
.wadahsms2:hover {
       height:380px;
       background:#CC9966 url(https://sites.google.com/site/mitrabewara/bg/mitrabewara-bgRasterBlackTransV8H8.png);
       border-color:#663300;
}
.wadahsms2 iframe {
       background:url(https://sites.google.com/site/mitrabewara/bg/mitrabewara-bgsms02.jpg);
       border:2px solid #666; 
       border-radius:8px;
}
.wadahsms2 .boxsmsdalam2{
       overflow:hidden;
       opacity:0.5;
       fikter:alpha(opacity=50);       
       height:76px;
       margin:0; /* original code by:mitrabewarasunda.blogspot.com */
       padding:0;
       border-radius:8px;
       box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;     
       -o-transition:all 1.8s ease-out;
       -moz-transition:all 1.8s ease-out;
       -webkit-transition:all 1.8s ease-out;
}
.wadahsms2:hover .boxsmsdalam2 {
       height:380px;
       opacity:1.0;
       filter:alpha(opacity=100);       
       -o-transition:all 1.5s ease-in;
       -moz-transition:all 1.5s ease-in;
       -webkit-transition:all 1.5s ease-in;    
}
.wadahsms2 a{
       padding:2px 8px;
       margin:0 auto;
       display:block;
       text-align:center;
       font-family:Verdana;
       color:red;
       font-size:16px;
       text-shadow:1px 1px 1px #000;
       font-weight:bold;
       border-radius:4px;
       -o-transition:all 1.5s ease-in;
       -moz-transition:all 1.5s ease-in;
       -webkit-transition:all 1.5s ease-in;
}
.wadahsms2 a:hover{
       color:blue;
       background:#999;
       width:150px;
       text-decoration:none;
}

Cara Menggunakan Kode

Kanggo anu atos ngagunakeun Widget SMS Haratis,mangga sesuaikan tiheula kode widgetnya kalawan kode Widget anu diajak di luhur! Lihat pada width dan height yang digunakan.
Kanggo anu tacan ngamangpaatkeun widget SMS Haratis,mangga pilih hoyong bantun Widget SMS Haratis nu manten. Aya 3,broer! Mangga comot salah sahiji atawa katilu na. Anu peryogi pilih anu servisnya nu mawi sae!
Login ke Blogger.
Masuk ke Dasbor.
KLIK "Design/Rancangan".
KLIK "Edit HTML".
Cari kode ]]></b:skin>.
Letakkan kode CSS (sesuai dengan lebar widget yang digunakan) tepat di atasnya.
Lanjutkan dengan KLIK "Page Elements/Elemen Laman".
KLIK "Edit" pada Widget SMS Gratis bagi yang sebelumnya sudah menggunakan.
Kanggo anu tacan ngagunakeun Widget SMS Haratis sarta hoyong masangkeun di blog,mangga simpen oge widgetnya .
Simpan kode Widget di antara xHTMl auto scroller.
KLIK SAVE Templates/Simpan Template!
Buka blog untuk melihat hasilnya!

xHTML Auto Scroller Widget SMS Gratis

XHTML AUTO SCROLLER (LEBAR WIDGET=240PX)

<div class="wadahsms">
<div class="boxsmsdalam">
Letakkan widget di sini!
<a href="http://mitrabewarasunda.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">mitra bewara</a>
</div>
</div>

CONTOH PELETAKAN WIDGET!

<div class="wadahsms">
<div class="boxsmsdalam">
<iframe name="wg1" src="http://sms600.com/wg1" frameborder="0" width="240" height="290"></iframe>
<a href="http://mitrabewarasunda.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">mitra bewara</a>
</div>
</div>

xHTML Auto Scroller (lebar widget=200px)

<div class="wadahsms2">
<div class="boxsmsdalam2">
Letakkan widget di sini!
<a href="http://mitrabewarasunda.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">mitra bewara</a>
</div>
</div>

CONTOH PELETAKAN WIDGET!

<div class="wadahsms2">
<div class="boxsmsdalam2">
<iframe name="I2" src="http://sms-online.web.id/widget" width="200" height="215" scrolling="no"> not support </iframe>
<a href="http://mitrabewarasunda.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">mitra bewara</a>
</div>
</div>

CATATAN/KETERANGAN:

Sateuacan ngalakukeun sadaya proses parobahan di template,sae nambahan kode anyar atawa ngaleungitkeun kode di halaman edit HTML,sasaena pigawe back-up template leuwih tiheula! Kanggo terang kumaha carana mangga buka Special Tutorials si menu sebelah kenca.
Tempo oge Cara Cepat Cari Kode HTML menggunakan Ctrl+F.
Tentang bagaimana cara menyimpan widget bisa juga dilihat di sana.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onLoad='goforit()'>

Mangga oge buka Tutorial sanes anu metot pisan sarta patut di turutan kumaneh sadaya. Akses ngaliwatan link handap ieu :

Update

Sabtu, 08 Februari 2014

Tabel Wasta sarta KODE Warna: Tutorial Blogger Font

Posting dina Tutorial Blogger ayeuna abdi ngahaja midamel hiji tabel wasta sarta kode kelir kalawan tujuan supados sobat blogger henteu kahese sabot kedah ngagantikeun hiji kode kelir kalawan wasta kelir. Pamakean wasta kelir sering kali dipake dijavascript,ku kituna perbendaharaan wasta kelir anu nyekapkeun bade nulungan pisan urang kanggo ngagunakeun kelir langkung pepek sarta variatif. Nya ...,sanaos henteu selengkap anu dipambrih,nanging setidak-henteu na atos cekap seueur wasta kelir anu junun abdi diakeun. jujur wae midamel na njelimet kalintang,ku kituna ngan sepertos ieu pisan anu tiasa abdi diakeun. Mugi-mugi cekap nulungan sarta masihan seueur mangpaat.

Daftar Ngaran Warna jeung Kode Warna :

Nama Warna	Hexadecimal	Desimal
01. aliceblue	#f0f8ff	240,248,255
02. antiquewhite	#faebd7	250,235,215
03 aqua	#00ffff	0,255,255
04. aquamarine	#7fffd4	127,255,212
05. azure	#f0ffff	240,255,255
06. beige	#f5f5dc	245,245,220
07. bisque	#ffe4c4	255,228,196
08. black	#000000	0,0,0
09. blanchedalmond	#ffebcd	255,235,205
10. blue	#0000ff	0,0,255
11. blueviolet	#8a2be2	138,43,226
12. brown	#a52a2a	165,42,42
13. burlywood	#deb887	222,184,135
14. cadetblue	#5f9ea0	95,158,160
15. chartreuse	#7fff00	127,255,0
16. chocolate	#d2691e	210,105,30
17. coral	#ff7f50	255,127,80
18. cornflowerblue	#6495ed	100,149,237
19. cornsilk	#fff8dc	255,248,220
20. crimson	#dc143c	220,20,60
21. cyan	#00ffff	0,255,255
22. darkblue	#00008b	0,0,139
23. darkcyan	#008b8b	0,139,139
24. darkgoldenrod	#b8860b	184,134,11
25. darkgray	#a9a9a9	169,169,169
26. darkgreen	#006400	0,100,0
27. darkgrey	#a9a9a9	169,169,169
28. darkkhaki	#bdb76b	189,183,107
29. darkmagenta	#8b008b	139,0,139
30. darkolivegreen	#556b2f	85,107,47
31. darkorange	#ff8c00	255,140,0
32. darkorchid	#9932cc	153,50,204
33. darkred	#8b0000	139,0,0
34. darksalmon	#e9967a	233,150,122
35. darkseagreen	#8fbc8f	143,188,143
36. darkslateblue	#483d8b	72,61,139
37. darkslategray	#2f4f4f	47,79,79
38. darkslategrey	#2f4f4f	47,79,79
39. darkturquoise	#00ced1	0,206,209
40. darkviolet	#9400d3	148,0,211
41. deeppink	#ff1493	255,20,147
42. deepskyblue	#00bfff	0,191,255
43. dimgray	#696969	105,105,105
44. dimgrey	#696969	105,105,105
45. dodgerblue	#1e90ff	30,144,255
46. firebrick	#b22222	178,34,34
47. floralwhite	#fffaf0	255,250,240
48. forestgreen	#228b22	34,139,34
49. fuchsia	#ff00ff	255,0,255
50. gainsboro	#dcdcdc	220,220,220
51. ghostwhite	#f8f8ff	248,248,255
52. gold	#ffd700	255,215,0
53. goldenrod	#daa520	218,165,32
54. gray	#808080	128,128,128
55. green	#008000	0,128,0
56. greenyellow	#adff2f	173,255,47
57. grey	#808080	128,128,128
58. honeydew	#f0fff0	240,255,240
59. hotpink	#ff69b4	255,105,180
60. indianred	#cd5c5c	205,92,92
61. indigo	#4b0082	75,0,130
62. ivory	#fffff0	255,255,240
63. khaki	#f0e68c	240,230,140
64. lavender	#e6e6fa	230,230,250
65. lavenderblush	#fff0f5	255,240,245
66. lawngreen	#7cfc00	124,252,0
67. lemonchiffon	#fffacd	255,250,205
68. lightblue	#add8e6	173,216,230
69. lightcoral	#f08080	240,128,128
70. lightcyan	#e0ffff	224,255,255
71. lightgoldenrodyellow	#fafad2	250,250,210
72. lightgray	#d3d3d3	211,211,211
73. lightgreen	#90ee90	144,238,144
74. lightgrey	#d3d3d3	211,211,211
75. lightpink	#ffb6c1	255,182,193
76. lightsalmon	#ffa07a	255,160,122
77. lightseagreen	#20b2aa	32,178,170
78. lightskyblue	#87cefa	135,206,250
79. lightslategray	#778899	119,136,153
80. lightslategrey	#778899	119,136,153
81. lightsteelblue	#b0c4de	176,196,222
82. lightyellow	#ffffe0	255,255,224
83. lime	#00ff00	0,255,0
84. limegreen	#32cd32	50,205,50
85. linen	#faf0e6	250,240,230
86. magenta	#ff00ff	255,0,255
87. maroon	#800000	128,0,0
88. mediumaquamarine	#66cdaa	102,205,170
89. mediumblue	#0000cd	0,0,205
90. mediumorchid	#ba55d3	186,85,211
91. mediumpurple	#9370db	147,112,219
92. mediumseagreen	#3cb371	60,179,113
93. mediumslateblue	#7b68ee	123,104,238
94. mediumspringgreen	#00fa9a	0,250,154
95. mediumturquoise	#48d1cc	72,209,204
96. mediumvioletred	#c71585	199,21,133
97. midnightblue	#191970	25,25,112
98. mintcream	#f5fffa	245,255,250
99. mistyrose	#ffe4e1	255,228,225
100. moccasin	#ffe4b5	255,228,181
101. navajowhite	#ffdead	255,222,173
102. navy	#000080	0,0,128
103. oldlace	#fdf5e6	253,245,230
104. olive	#808000	128,128,0
105. olivedrab	#6b8e23	107,142,35
106. orange	#ffa500	255,165,0
107. orangered	#ff4500	255,69,0
108. orchid	#da70d6	218,112,214
109. palegoldenrod	#eee8aa	238,232,170
110. palegreen	#98fb98	152,251,152
111. paleturquoise	#afeeee	175,238,238
112. palevioletred	#db7093	219,112,147
113. papayawhip	#ffefd5	255,239,213
114. peachpuff	#ffdab9	255,218,185
115. peru	#cd853f	205,133,63
116. pink	#ffc0cb	255,192,203
117. plum	#dda0dd	221,160,221
118. powderblue	#b0e0e6	176,224,230
119. purple	#800080	128,0,128
120. red	#ff0000	255,0,0
121. rosybrown	#bc8f8f	188,143,143
122. royalblue	#4169e1	65,105,225
123. saddlebrown	#8b4513	139,69,19
124. salmon	#fa8072	250,128,114
125. sandybrown	#f4a460	244,164,96
126. seagreen	#2e8b57	46,139,87
127. seashell	#fff5ee	255,245,238
128. sienna	#a0522d	160,82,45
129. transparent	#c0c0c0	192,192,192
130. skyblue	#87ceeb	135,206,235
131. slateblue	#6a5acd	106,90,205
132. slategray	#708090	112,128,144
133. slategrey	#708090	112,128,144
134. snow	#fffafa	255,250,250
135. springgreen	#00ff7f	0,255,127
136. steelblue	#4682b4	70,130,180
137. tan	#d2b48c	210,180,140
138. teal	#008080	0,128,128
139. thistle	#d8bfd8	216,191,216
140. tomato	#ff6347	255,99,71
141. turquoise	#40e0d0	64,224,208
142. violet	#ee82ee	238,130,238
143. wheat	#f5deb3	245,222,179
144.white	#ffffff	255,255,255
145. whitesmoke	#f5f5f5	245,245,245
146. yellow	#ffff00	255,255,0
147. yellowgreen	#9acd32	154,205,50

Cara midamel tabel Warna sarta KODE Kelir/Warna :

xHTML Tabel Nama & Kode Warna :

<table cellpadding="5" style="border:10px ridge #996633;">
<tbody style="font-size:16px; font-family:cursive; font-weight:bolder;">
<tr>
<th style=background:#242020>Warna/Color</th>
<th>Nama Warna</th>
<th>Hex</th>
<th>Desimal</th>
<tr>
<td style=background:aliceblue>
<td>01. aliceblue
<td style=background:transparent>#f0f8ff
<td style=background:transparent>240,248,255
<tr>
<td style=background:antiquewhite>
<td>02. antiquewhite
<td style=background:transparent>#faebd7
<td style=background:transparent>250,235,215<tr>
<td style=background:aqua>
<td>03  aqua
<td style=background:transparent>#00ffff
<td style=background:transparent>0,255,255
<tr>
<td style=background:aquamarine>
<td>04. aquamarine
<td style=background:transparent>#7fffd4
<td style=background:transparent>127,255,212
<tr>
<td style=background:azure>
<td>05. azure
<td style=background:transparent>#f0ffff
<td style=background:transparent>240,255,255 
</tbody>
</table>

Mangga oge buka Anu sejen nu narik pisan sarta pantes di turutan kabeh. Akses ngaliwatan link handap ieu :

» BEWARA SUNDA - mitrabewarasunda «

Jumat, 07 Februari 2014

Cara Midamel Daptar Posting di Halaman Statis Blogger

Sagala rupa perkawis tiasa urang tuliskeun minangka posting di halaman statis blogger anu berjumlah 20 halaman (maksimal). Judul (title) posting dihalaman statis engkena dipidangkeun minangka link menu anu tempatna tiasa urang pilih antawis sidebar sarta di luhur halaman posting (handap header). Margi kawates na rubak,sae handap header ataupun sidebar,sasaena title halaman statis didamel sependek manawi. Title anu pondok engkena tiasa diperjelas ngaliwatan deskripsi di halaman statis.

Ngeusian halaman statis blogger kalawan daptar sagala rupa posting anu atos urang kanggo oge barobah kaayaan salah sahiji perkawis anu bade mere mangpaat pisan. Halaman statis midamel urang tiasa langkung memaksimalkeun tampilan daptar posting kasebat margi halaman anu cekap lega. Sababaraha kode CSS sarta xhtml manawi bakalan ngabantuan dugi daptar posting tiasa didamel langkung tertata rapih. handap ieu atos sadia kode CSS sarta xhtml anu manawi sampeyan butuhkan. Kanggo langkung memaksimalkeun hasilna atawa manawi oge kanggo penyesuaian kalawan halaman blog mangga pigawe sababaraha modisikasi ngaliwatan parobahan dina kode CSS atu xhtml. O ... nya ... urang atos diakeun dina dua wangun box. Box ageung dipake apababila daptar posting didamel dina ukuran selebar halaman posting sarta kode css sarta xhtml ka-2 ngabagi halaman posting barobah kaayaan 2 lajur dugi sanggem memuat 2 box daptar posting di katuhu sarta kenca.

Kode CSS Daftar Posting Box Badag

.wadah-menu-posting-1{
     width:95%; /* by: http://mitrabewarasunda.blogspot.com */ 
     background:#fff;
     border:2px solid #555;
     margin:20px auto;
     padding:20px 15px;
     border-radius:6px;
}
.wadah-menu-posting-1 h3{
     font-size:18px;
     text-align:left;
     margin:10px 0 10px 20px;
}
.daftar-posting-1{
     max-height:500px;
     overflow:auto;
     border:1px solid #888;
     box-shadow:0 0 10px #333;
     border-radius:4px;
}
.daftar-posting-1 ul{
     display:inline-block;
     list-style:none;
     margin:20px 0;
     padding:0 25px;
}
.daftar-posting-1 li{
     list-style:circle;
     width:1000px;
     line-height:18px;
}
.daftar-posting-1 li a{
     font-size:12px;
     font-weight:bold;
     font-family:Tahoma, Arial, Helvetica;
     color:#111;
     text-decoration:none;
     transition:1s;
     -o-transition:1s;
     -moz-transition:1s;
     -webki-transition:1s;
}
.daftar-posting-1 li a:hover{
     color:red; /* by: http://mitrabewarasunda.blogspot.com */ 
     text-shadow:1px 1px 1px #000;
}
.clear{clear:both;margin:0;padding:0;width:0;}

xHTML Daftar Posting Wadah Badag

         <div class="wadah-menu-posting-1">
<h3>Diajar blogger</h3>
    <div class="daftar-posting-1">
        <ul>
            <li><a href="diajar-blogger-1.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-1</a></li>
            <li><a href="diajar-blogger-2.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-2</a></li>
            <li><a href="diajar-blogger-3.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-3</a></li>
            <li><a href="diajar-blogger-4.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-4</a></li>
            <li><a href="diajar-blogger-5.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-5</a></li>
            <li><a href="diajar-blogger-javascript-jQuery-kode-CSS-dan-kode-html-1.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger Javascript, jQuery, kode CSS dan kode HTML-1</a></li>
            <li><a href="diajar-blogger-6.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-6</a></li>
            <li><a href="diajar-blogger-7.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-7</a></li>
            <li><a href="diajar-blogger-8.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-8</a></li>
            <li><a href="diajar-blogger-9.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-9</a></li>
            <li><a href="diajar-blogger-10.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-10</a></li>
            <li><a href="diajar-blogger-11.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-11</a></li>
            <li><a href="diajar-blogger-12.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-12</a></li>
            <li><a href="diajar-blogger-13.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-13</a></li>
            <li><a href="diajar-blogger-14.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-14</a></li>
            <li><a href="diajar-blogger-15.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-15</a></li>
            <li><a href="diajar-blogger-javascript-jQuery-kode-CSS-dan-kode-html-2.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger Javascript, jQuery, kode CSS dan kode HTML-2</a></li>
            <li><a href="diajar-blogger-16.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-16</a></li>
            <li><a href="diajar-blogger-17.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-17</a></li>
            <li><a href="diajar-blogger-18.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-18</a></li>
            <li><a href="diajar-blogger-19.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-19</a></li>
            <li><a href="diajar-blogger-20.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-20</a></li>
            <li><a href="diajar-blogger-21.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-21</a></li>
            <li><a href="diajar-blogger-22.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-22</a></li>
            <li><a href="diajar-blogger-23.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-23</a></li>
            <li><a href="diajar-blogger-24.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-24</a></li>
            <li><a href="diajar-blogger-25.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-25</a></li>
         </ul>
    </div>
</div>

Kode CSS Daftar posting Wadah Kecil

.wadah-menu-posting-2{
     width:45%; /* by: http://mitrabewarasunda.blogspot.com */ 
     background:#fff;
     border:2px solid #555;
     padding:10px;
     border-radius:6px;
}
.wadah-menu-posting-2 h3{
     font-size:18px;
     text-align:left;
     margin:10px 0 15px 10px;
}
.daftar-posting-2{
     max-height:500px;
     overflow:auto;
     border:1px solid #888;
     box-shadow:0 0 10px #333;
     border-radius:4px;
}
.daftar-posting-2 ul{
     display:inline-block;
     list-style:none;
     margin:20px 0;
     padding:0 25px;
}
.daftar-posting-2 li{
     list-style:circle;
     width:1000px;
     line-height:18px;
}
.daftar-posting-2 li a{
     font-size:12px;
     font-weight:bold;
     font-family:Tahoma, Arial, Helvetica;
     color:#111; /* by: http://mitrabewarasunda.blogspot.com*/ 
     text-decoration:none;
     transition:1s;
     -o-transition:1s;
     -moz-transition:1s;
     -webki-transition:1s;
}
.daftar-posting-2 li a:hover{
     color:red;
     text-shadow:1px 1px 1px #000;
}
.clear{clear:both;margin:0;padding:0;width:0;}

xHTML Daftar posting Wadah Leutik

<div class="wadah-menu-posting-2" style="float:left;">
            <h3>Diajar blogger</h3>
    <div class="daftar-posting-2">
        <ul>
            <li><a href="diajar-blogger-1.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-1</a></li>
            <li><a href="diajar-blogger-2.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-2</a></li>
            <li><a href="diajar-blogger-3.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-3</a></li>
            <li><a href="diajar-blogger-4.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-4</a></li>
            <li><a href="diajar-blogger-5.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-5</a></li>
            <li><a href="diajar-blogger-javascript-jQuery-kode-CSS-dan-kode-html.html" target="_blank">Diajar blogger Javascript, jQuery, kode CSS dan kode HTML</a></li>
            <li><a href="diajar-blogger-6.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-6</a></li>
            <li><a href="diajar-blogger-7.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-7</a></li>
            <li><a href="diajar-blogger-8.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-8</a></li>
            <li><a href="diajar-blogger-9.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-9</a></li>
            <li><a href="diajar-blogger-10.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-10</a></li>
            <li><a href="diajar-blogger-11.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-11</a></li>
            <li><a href="diajar-blogger-12.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-12</a></li>
            <li><a href="diajar-blogger-13.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-13</a></li>
            <li><a href="diajar-blogger-14.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-14</a></li>
            <li><a href="diajar-blogger-15.html" title="Tuliskeun teks didiyeu!" target="_blank">Diajar blogger-15</a></li>
        </ul>
    </div>
</div>


<div class="wadah-menu-posting-2" style="float:right;">
            <h3>Tutorial Blogger</h3>
    <div class="daftar-posting-2">
        <ul>
            <li><a href="tutorial-blogger-1.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-1</a></li>
            <li><a href="tutorial-blogger-2.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-2</a></li>
            <li><a href="tutorial-blogger-3.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-3</a></li>
            <li><a href="tutorial-blogger-4.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-4</a></li>
            <li><a href="tutorial-blogger-5.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-5</a></li>
            <li><a href="tutorial-blogger-6.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-6</a></li>
            <li><a href="tutorial-blogger-7.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-7</a></li>
            <li><a href="tutorial-blogger-8.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-8</a></li>
            <li><a href="tutorial-blogger-9.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-9</a></li>
            <li><a href="tutorial-blogger-10.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-10</a></li>
            <li><a href="tutorial-blogger-11.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-11</a></li>
            <li><a href="tutorial-blogger-12.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-12</a></li>
            <li><a href="tutorial-blogger-13.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-13</a></li>
            <li><a href="tutorial-blogger-14.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-14</a></li>
            <li><a href="tutorial-blogger-15.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-15</a></li>
            <li><a href="tutorial-blogger-16.html" title="Tuliskeun teks didiyeu!" target="_blank">Tutorial Blogger-16</a></li>
        </ul>
    </div>
</div>

<div class="clear"></div>

Cara Ngagunakeun Kode Daptar Posting

Catetan/Katerangan

Ka dua kode CSS sarta xhtml tiasa dipake sacara terpisah (ngan box ageung atawa box alit).
Ka dua kode (box) tiasa dipake sacara babarengan.
max-height:500px; boga fungsi kanggo ngabatesan luhur box. Robih nilaina lamun dipikaresep , beuki ageung nilaina mangka beuki luhur.
Iyeu anu penting: Lamun anjeun ngagunakeun kode anu ka-2 (box alit),perhatikan dina ahir xhtml box kahiji (warnana beureum) jeung awal xHTML box kadua (warnana beureum). Supados kadua box di kenca sarta katuhu dina posisi sajajar mangka kode xhtml ahir box kahiji sarta xhtml box kadua kedah disusun rapet!

Mangga oge buka Anu Lucu sejen nu narik pisan sarta pantes di turutan kabeh. Akses ngaliwatan link handap ieu :

» Happy Blogging - mitrabewarasunda «

Mitra - Bewara Sunda

Blogger - Blogspot

Biro Jodoh Internasional

Bule Cantik Menunggu Lamaran

Hi panda-mom! I just recently started a blog about speaking Chinese at home with my kids. I wanted to link to this Halloween post, but not really sure what the correct etiquette is. Would it be okay for me to link to this post? In general, do people ask before linking? You have so much content here, I feel like I could ", be linking here a lot!..

I would love it if you shared the links here with others. Please, just make sure that you let your audience know where you found the content, particularly the activities that were made by me such as this!

Javascript - jQuery

Earthquake Effects on No Right Click

Mungkin ini jadi pilihan yang cukup tepat untuk sampeyan. Sebuah javascript No Right Click yang disertai semacam efek gempa bumi dan ditanggung akan membuat bingung dan mengacaukan konsentrasi pengunjung blog..

Beberapa sobat blogger telah memanfaatkan, akan tetapi yang satu ini telah aku modifikasi sehingga efek yang muncul menjadi semakin parah. Javascript "Earthquake Effects on No Right Click" sudah ter-upload di file hosting sehingga sampeyan hanya perlu menyimpan link-nya di bagian head.

Daftar Posting

Javascript

JavaScript is a programming language that makes it possible for you to add programming language to a website for added user functionality. With JavaScript you can detect the browser the user is using, add buttons and make pop-up boxes.

Silahkan gunakan setiap box sesuai dengan yang sampeyan inginkan. Bisa sebagai tempat untuk menu blog atau mo digunakan untuk memuat bagian dari blog yang lain.

Mitra Bewara Sunda

H O M E

My Blog

Kab/Kota di Sulawesi

Kab/Kota di Bali

Sumatera

Kab/Kota di Kalimantan