Mitra Bewara Sunda: 2014

Senin, 27 Oktober 2014

DEMO TOOLTIP

Sabtu, 30 Agustus 2014

Membuat date header/tanggal posting ala Tampilan Dinamis/Dynamic View Blogger Templates.

Berbagai macam bentuk tanggal posting dpat kita buat dan tampilkan didalam blog. Jika dibeberapa waktu sebelumnya kita sudah banyak jumpai tutorial blogger tentang "cara membuat tanggal posting dalam bentuk icon calender", maka kali ini kita akan membuat "tanggal posting atau date header ala template blogger Tampilan Dinamis/Dynamic View" seperti yang terlihat pada image/gambar disamping.

Tanggal posting seperti yang ditampilkan Dynamic View Blogger Template mempunyai bentuk yang terlihat berbeda dari bentuk tanggal posting yang lain. Jika kita arahkan cursor di atas tannggal Tanggal posting akan terjadi perubahan warna background (efek hover). Hal seperti ini bisa terjadi karena icon calendar tersebut tidak menggunakan background image namun memanfaatkan border property. Hover efek pada borderlah yang kemudian menciptakan perubahan warna background.

D E M O

Cara membuat:

Login ke Blogger
Halaman Dasbor/Dasboard
Tata Letak/Layout
Klik "Edit" pada elemen/box "Posting blog/Blog Post".
Mengonfigurasi Posting Blog
- Setting date-header: Lakukan perubahan setting tanggal posting bila belum berbentuk seperti gambar disebelah. Rubah seperti yang anda lihat!
- Simpan/SAVE
Cadangkan/Pulihkan (Backup/Restore)
Template
Edit HTML

Template › Edit HTML

Lanjutkan/Procced
Cari kode ]]></b:skin>, kemudian letakkan kode css di atasnya. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode.
Simpan Template/Save Template
Copy dan pastekan javascript di bawah kode ]]></b:skin>
Simpan Template/Save Template
Expand Template Widget
Cari Kode <b:if cond='data:post.isDateStart'>

Anda akan temukan kode yang seperti ini:

Kode yng harus diganti:

<b:if cond='data:post.isDateStart'>
  <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
  &lt;/div&gt;&lt;/div&gt;
  </b:if>
  </b:if>
  <b:if cond='data:post.isDateStart'>
  &lt;div class=&quot;date-outer&quot;&gt;
  </b:if>
  <b:if cond='data:post.dateHeader'>
  <h2 class='date-header'>
  <span><data:post.dateHeader/></span>
  </h2>
  </b:if>
  <b:if cond='data:post.isDateStart'>

Buat kode menjadi seperti berikut:

Kode Baru

<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == &quot;false&quot;'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<script type='text/javascript'>
date_replace(&#39;<data:post.dateHeader/>&#39;);
</script>
</h2>
</b:if>
<b:if cond='data:post.isDateStart'>

Simpan Template/Save Template.

Buka blog dan lihat hasilnya!

Kode CSS

.date-outer h2.date-header{
      float:left;
      width:30px;
      height:50px;
      padding:0;
     margin:65px 0 -200px -32px;
      background:none;
}
#myMITRABARAYAdate{
      text-shadow:1px 0px 1px #000;
      background:red;
      height:30px;
      width:30px;
}
#myMITRABARAYAdate .MITRABARAYAmonth{
      font-family:arial;
      margin:0 auto 2px;
      width:30px;
      height:20px;
      background:#666;
      color:#fff;
      text-align:center;
      font-size:13px;
      font-weight:bold;
      padding-top:2px;
}
#myMITRABARAYAdate .MITRABARAYAdate{
      position:relative;
      width:0;
      margin:0 auto;
      height:0;
      border-top:35px solid #666;
      border-left:15px solid #666;
      border-right:15px solid #666;
      border-bottom:10px solid transparent;
}
span.ohdate{
      position:absolute;
      width:40px;
      height:20px;
      text-align:center;
      font-family:Arial,Sans-serif,Tahoma,Verdana;
      font-weight:bold;
      left:-20px;
      top:-32px;
      color:yellow;
      font-size:2em;
}
#myMITRABARAYAdate .MITRABARAYAmonth,#myMITRABARAYAdate .MITRABARAYAdate{
      transition:border-color 2s,background-color 2s;
      -o-transition:border-color 2s,background-color 2s;
      -ms-transition:border-color 2s,background-color 2s;
      -moz-transition:border-color 2s,background-color 2s;
      -webkit-transition:border-color 2s,background-color 2s;
}
#myMITRABARAYAdate:hover .MITRABARAYAmonth{
      background:#ad3a2b;
}
#myMITRABARAYAdate:hover .MITRABARAYAdate{
      border-color:#ad3a2b;
      border-bottom-color:transparent;
}

Keterangan :

Atur posisi tanggal posting dengan merubah nilai pada kode yang berwarna merah.

kode Pengatur Posisi Tanggal Posting

.date-outer h2.date-header{
      float:left;
      width:30px;
      height:50px;
      padding:0;
     margin:65px 0 -200px -32px;
      background:none;
}

Javascript

<script type="text/javascript">
//<![CDATA[
  function date_replace(c) {
var b = c.split(".");
var a = b[1],
e = b[0],
d = b[2];
var f = ["0", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
document.write("<div id='myMITRABARAYAdate'><div class='MITRABARAYAmonth'>" + f[e] + "</div><div class='MITRABARAYAdate'><span class='ohdate'>" + a + "</span></div></div>")
};
//]]>
</script>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Jemuah PON, August, 17, 2012

» Happy Blogging - mitrabarayaonline «

Selasa, 04 Maret 2014

jQuery Simple Image Zoomer

Yang ini sangat praktis membuatnya. Jquery simple image zoomer hanya menggunakan jQuery-1.3.2.js atau jQuery lain yang fungsinya setara dengan jQuery-1.3.2.js. Jika misalnya ada yang selama ini seudah menggunakan jQuery-1.3.2.js, jQuery-1.3.2.min.js atau bahkan mungkin jQuery-1.4.2.js hingga jQuery-1.7.2.js, maka tinggal tambahkan saja simple-image-zoomer.js kemudian gunakan untuk menampilkan gambar/image di halaman posting.

Sekalipun sebenarnya tanpa bantuan kode CSS simple image zoomer sudah bisa bekerja secara maksimal, namun kita akan coba seddikit menambahkan kode CSS yang digabungkan dengan css3 agar image terlihat lebih cantik.

D E M O

D E M O

D E M O

Javascript Simple Image Zoomer

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://mitrabaraya.googlecode.com/svn/mitrabaraya-simple-zoomer.pack.js" type="text/javascript"></script>

xHTML Simple Image Zoomer

<img class="mBjdbadag" src="https://sites.google.com/site/mitrabarayasunda/image/duamojang_001.jpg" width="150" height="225" />

<img class="mBjdbadag" src="https://sites.google.com/site/mitrabarayasunda/image/duamojang_002.jpg" style="width:200px;height:auto;" />   

<img class="mBjdbadag" data-mBjdbadagto="700"    src="https://sites.google.com/site/mitrabarayasunda/image/duamojang_003.jpg" width="150" height="130" />

Cara menggunakan Simple Image Zoomer

Login ke blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
Cari kode <head>. Gunakan Ctrl + F untuk memudahkan pencarian kode. Jika menginginkan panduan cara cepat cari kode html dalam template buka Special Tutorials yang terletak di menu vertikal sebelah kiri.
Copy dan pastekan javascript di bawah kode <head>.
Jika ingin menggunakan tambahan kode CSS agar image terlihat seperti dalam DEMO, Cari kode ]]></b:skin>.
Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
Klik Simpan Template (Save Template).
Gunakan xHTML untuk melakukan posting.
Buka halaman posting untuk melihat hasilnya.

Kode CSS Simple Image Zoomer

.mBjdbadag{
        border:2px solid #eee;
        margin:6px;
        background:#aaa;
        border-radius:10px;
        padding:10px;
        box-shadow:0 0 8px #000;
}

Keterangan/Catatan

Gunakan image dengan ukuran width dan/atau height lebih dari 300px agar efek zoom lebih terlihat.
Width dan height yang disertakan pada kode html posting sebaiknya berukuran di bawah 250px agar tidak terlalu memenuhi halaman posting.
Ukuran width dan height pada kode HTML menggunakan perbandingan sesuai dengan image sesungguhnya. Jika image berukuran width=800, height=400 maka pada kode html bisa menggunakan ukuran width=200 dan height=100
Jika dalam kode html ditambahkan tag style (seperti contoh kode ke-3), maka bisa dituliskan width="..px; height:auto;
Besaran zoom bisa diatur dengan menambahkan kode data-mBjdbadagto="700". Nilai 700 dalam satuan pixel (width).
Kode CSS hanya dimaksudkan untuk memperindah image bebas untuk digunakan ataupun tidak.

Senin, 03 Maret 2014

Lepat Milih Baju Selebriti Hollywood Ieu Katempo Pinareup na Sabot Live Di Tv

Nicki Minaj saleresna dipikawanoh kana hobi mintonkeun kaendahan salira na ka umum,nanging henteu kitu kalawan aktris Tina Fey. Dina wanci henteu lami kapungkur,duanana milih baju anu kaliru ku kituna wewengkon harigu oge terekspos nonghol bebas.

Katy Perry seksi sarta rada sakedik kabuka

Berpenampilan seksi sarta rada sakedik kabuka saleresna atos barobah kaayaan gaya standard Katy Perry . Nanging rupina tilas bojo Russel Brand eta henteu menonjol teuing di penampilan pamungkas na . Manehna katempo isin kabinabina wanci nampi pangajen di acara Muchmusic Video kerana nganggo baju anu ipis pisan.

Di acara eta ,Katy narima anugrahan kanggo kategori artis antarabangsa nyongcolang . Kasinugrahan kasebat dibikeun ku pelakon Lucy Hale . Penyanyi tembang hit single \ ' Fireworks \ ' ieu katempo rada isin lamun mikeun omongan kameunang . Sumawonten Katy usaha nutupan bujurnya kalawan pangajen anu ngawangun kotak pasagi paos eta sabot mapan turun pentas.

Saleresna ,baju anu pas pisan kalawan awak sarta nyarupaan kelir kulit eta dikeunakeun Katy kanggo nyanyi di pentas . Manehna maju barobah kaayaan saurang kupu - kupu wanci ngabawakeun tembang ' Wide Awake ' . Nanging wanci nampi pangajen Katy teu sempet nukeur baju kasebat .

Baju bermasalah eta mangrupa salah sahiji ti tilu busana anu dikeunakeun Katy ngahadiran acara di Toronto ,Kanada ,ieu . Haleuang " Part of Me " kasebat berpenampilan ala superhero Marvel kalawan gaun hideung emas wanci anjog di red carpet . Sateuacan ngahaleuang manehna nganggo seluar hideung kalawan atasan heureut kelir khaki .

Kamis, 20 Februari 2014

Tah Kawas Kieu Potret Kahirupan Jalmi Nu di Handapeun Taneuh Di Monggolia

Ulan baatan nyaeta puseur dayeuh sakaligus bandar pangbadagna di Mongolia. Hiji Perbandaran,bandar ieu henteu barobah kaayaan sebahagian ti Propinsi,sarta nu nyicingan dina warsih 2008 nyaeta langkung batan 1 juta jiwa ..

Di Ulanbator,salji kanggo turun sarta wanci eta sejuk pisan,suhu nembongkeun (-) tampik 25 darjah celcius. Kanggo para tuna wisma anu henteu teurang kedah wangsul ke manten usum salji ieu teh usum anu sesah pisan,sarta teu aya pilihan kanggo maranehanana jabi lebet ka jero taneuh sarta nyampeurkeun dina paip pemanas kanggo memanaskeun diri. Sabot dinten beuki poek,sepertos sireum,maranehanana lebet ka jero taneuh,sarta kantun ditu Ieu pisan maranehanana ..

Niall Horan Personel One Direction piboga huntu anu henteu teratur,nanging pandeuri anjeunna teras merawat huntu na dugi janten rapih sarta sae.

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

» BEWARA SUNDA - mitrabewarasunda «

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 !

Sabtu, 15 Februari 2014

DAFTAR EUSI

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

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.

H O M E

My Blog

Kab/Kota di Sulawesi

Kab/Kota di Bali

Sumatera

Kab/Kota di Kalimantan

Senin, 27 Oktober 2014

Sabtu, 30 Agustus 2014

Cara membuat:

Kode yng harus diganti:

Kode Baru

Kode CSS

Keterangan :

kode Pengatur Posisi Tanggal Posting

Javascript

Selasa, 04 Maret 2014

Senin, 03 Maret 2014

Kamis, 20 Februari 2014

Senin, 17 Februari 2014

KODE CSS - JQUERY IMAGE SLIDER WITH DESCRIPTION :

JQUERY.1.3.2.MIN.JS :

JAVASCRIPT - JQUERY IMAGE SLIDER WITH DESCRIPTION :

XHTML - JQUERY IMAGE SLIDER WITH DESCRIPTION :

Minggu, 16 Februari 2014

KODE CSS IMAGE EFFECT-1

JAVASCRIPT - IMAGE EFFECT-1 :

XHTML :

Sabtu, 15 Februari 2014

Selasa, 11 Februari 2014

Senin, 10 Februari 2014