mitrabaraya : Online & Tutorial: 2014

Minggu, 13 Juli 2014

Comment gambar emoticon

Hiji gambar dina wangun emoticon , anu diikut sertakan dina hiji komentar , sanaos ngan mangrupi hiji gambar anu tak sabaraha ageung (icon) , nanging malahan tiasa barobah kaayaan " babasan kanggo hiji ekspresi jiwa/perasaan " anu lamun dituliskeun peryogi kitu seueur sanggem atawa kalimah.

Katilu elemen kode HTML ieu bade nyieun hiji kadudukan anu masihan layanan mangrupi gampangna keur nu cment nambahan emoticon dina hiji komentar. Tur nuliskeun kode anu atos dipastikeun,hiji gambar emoticon bade dipidangkeun babarengan kalawan diterbitkeunnana komentar.

Kode CSS :

img.myMBemo{width:24px;height:18px;padding:2px;border:1px solid #666;background:#ddd;float:left;box-shadow:2px 2px 2px #000;margin:2px;}
#MBemobox{border:2px solid #777;background:#aaa;padding:2px;float:left;width:760px;height:104px;}
.comments{position:relative;}
.comments #MBfloatico{position:fixed;bottom:10px;left:-820px;}
.comments:hover #MBfloatico{left:20%;z-index:999;}
.MBemokode{display:inline-block;width:36px;height:50px;font-size:12px;font-weight:bold;color:#000;line-height:20px;text-align:center;border:1px solid #555;float:left;}

Javascript-1 :

<script src='http://mitrabaraya-javascript.googlecode.com/svn/MBrecomment.js' type='text/javascript'></script>

Javascript-2 :

<script src='http://mitrabaraya-javascript.googlecode.com/svn/MBrecomment-thumb.js' type='text/javascript'></script>

Cara menggunakan kode :

Login ka Blogger.
- Tuliskeun "User Name" (gmail) atawa tuliskeun "Email Address" (non gmail).
- Tuliskeun Password.
- Klik "Sign in"
Sanggeus kitu klik sign in "Dasbor (Dasboard)".
Klik "Rancangan (Design)". Tungguan nepika halaman anyar.
Teangan jeung klik "Edit HTML". Halaman anyar anu esina halaman box "Edit Template" tuh pan katempo.
Sok lakukeunn backup template.
- Klik "Download Template Lengkep (Download Full Template)".
- Simpen file template dio folder PC.
- Terus balik deui ka box "Edit Template".
Cari kode ]]></b:skin>.
Copy jeung paste kode CSS di atas ]]></b:skin>.
Teangan kode </body>.
Copy jeung paste javascript-1 di luhur </body>.
Klik "Simpen Template/Save Template".
Klik "Expand Widget Template".
Teangan kode :
<div class='comment-form'>. Kode seperti iyeu teh aya 2 .
Copy jeung paste javascript-2 di handap <div class='comment-form'> (kadua-duana!).
Klik "Simpen Template/Save Template".
Buka blog jeung coba hasilna ku ngajieun komentar bari dibarengan emoticon.
REbbbessssssssssss euyyy

Jumat, 11 Juli 2014

Cara ngajieun halaman 404 Error Page

Klik gambar dihandap ieu keur ningali dina ukuran normal!

Hiji hal anu jarang pisan katempo,malah sok kapopohokeun. Lamun eta ngait blog,salah sahiji diantarana nyaeta halaman error 404 (jarang manggihan) atawa anu langkung kkoncara " 404 Error Page " atawa " page not Found " . Halaman Error 404 kaluar tina hiji URL anu hanteu kapanggih alatan permalink. Ieu loba pisan lumangsung margi posting anu atos dihapus. Perkawis anu sami oge tiasa lumangsung alatan nuditeangan kalawan tulisanana URL anu henteu pas. Keur ngajieun halaman error 404 anu langkung someah,blogger iyeu tos nyadiakeun hiji fitur anu tiasa alo akses ngaliwatan halaman dasbor.

D E M O :

Demo Error 404

Kode CSS :

.status-msg-wrap{
      position:fixed;
      z-index:9999;
      top:0;
      left:0;
      width:100%;
      height:100%;
      padding:0;
      margin:0;
      background: #7d7e7d;
      background: -o-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: -moz-linear-gradient(-45deg, #7d7e7d 1%, #6d6d6d 17%, #303030 17%, #6d6d6d 21%, #444444 28%, #6d6d6d 28%, #2b2b2b 30%, #6d6d6d 31%, #333333 35%, #828282 35%, #828282 91%, #333333 91%, #828282 92%);
      background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#7d7e7d), color-stop(17%,#6d6d6d), color-stop(17%,#303030), color-stop(21%,#6d6d6d), color-stop(28%,#444444), color-stop(28%,#6d6d6d), color-stop(30%,#2b2b2b), color-stop(31%,#6d6d6d), color-stop(35%,#333333), color-stop(35%,#828282), color-stop(91%,#828282), color-stop(91%,#333333), color-stop(92%,#828282));
      background: -webkit-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: -ms-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#828282',GradientType=1);}
.status-msg-body{
      font-size:24px;
      color:#eee;
      text-shadow:2px 2px 2px #000;
      margin:0 auto;
      padding:40px 100px;
      height:550px;
      width:800px;
}
.status-msg-body a{
      color:#FC0;
      text-decoration:none;
}
.status-msg-body a:hover{
      color:#6FF;
      text-decoration:none;
}
.status-msg-body img{
      display:block;
      margin:20px auto;
      text-align:center;
      opacity:0.7;
      filter:alpha(opacity=70);
      width:80%;
      height:400px;
      border-top-left-radius:45%;
      border-top-right-radius:45%;
      border-bottom-right-radius:90%;
      border-bottom-left-radius:90%;
      border:10px solid rgba(255,255,255,0.6);
      box-shadow:-2px -2px 2px #333,5px 5px 5px #000;
}
.status-msg-bg{
      background:transparent;
}
.status-msg-wrap:after{
      position:absolute;
      right:40px;
      top:92%;
      font-size:12px;
      font-family:arial;
      transform:rotate(-45deg);
      -o-transform:rotate(-45deg);
      -moz-transform:rotate(-45deg);
      -webkit-transform:rotate(-45deg);
      -ms-transform:rotate(-45deg);
      color:#000;
      content:"mitrabarayaonline";
      text-shadow:0 0 0 #fff;
}

Cara ngajieun halaman 404 Error Page :

Simpen kode css di luhur ]]></b:skin>
Login ka Blogger.
Dasbor (Dasboard).
Keur anu masih ngagunakeun Antar Muka Blogger Lila (Old Blogger Interface) lakukeun Upgrade (Tingkatkeun Versi Anu Anyar.) jeung gunakeun New Blogger Interface (Try the updated Blogger interface).
Sanggeus upgrade beres, klik "Settings/Setelan".
Klik "Search preferences/Preferensi Penelusuran".
Klik "Edit" dina "Kesalahan jeung Pengalihan | Pesen Ubahsuaian keur Laman Anu hante bisa kapanggih" atawa "Errors jeung redirections | Custom Page Not Found".
Copy jeung pastekeunn xHTML di handap jerona box anu disadiakeun (sanggeusna klik Edit).
Klik "Simpen perubahan eta (Save Changes)".
terus keur nyimpen kode CSS teruskeun Klik "Template".
Klik "Edit HTML".
Klik "Proceed"
Cari kode ]]></b:skin>
Letakkan kode CSS di atas ]]></b:skin>.
Klik Save Template".
Beres lah!

xHTML :

Punteeen... EUy....naha kamarana urang sunda teh! Kecian, deh... Hu ... makana ari ulin teh kudu mawa awewe ulah sorangan, EUYYY! <a href="http://mitrabarayaonline.blogspot.com" title="Tuh ... liat ... si sono tuh jalannya. Hih... , dasar!">mitrabaraya : online & tutorials</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_113W2PSxdm9VWS30JIXVR8c9eAJ9gNENE00RG46lEZN9RdCyJGleAT1kpvjUToeihQOBYwUXB5nZpPn6A4i5zGwR9dzmAYOx-QLfymhXCOkjPQ8D7EUi_5d_rYCZoH3a4qNpVoK_TwN/s400/mitrabaraya_banyolansunda.jpg" />

Catetan/Kateranganana :

Ganti "Punteeen... EUy....naha kamarana urang sunda teh! Kecian, deh... Hu ... makana ari ulin teh kudu mawa awewe ulah sorangan, EUYYY!"
Ganti http://mitrabarayaonline.blogspot.com make URL blog maraneh.
Ganti demos & tutorials make wae teks anu lian anu saluyu jeung materi postingna.

Cara mencoba :

Pilih salah sahiji posting jeung copy URL posting eta.
Rubah URL supa henteu sarua/robah tina alamat sabenerna.
contoh
http://mitrabarayaonline.blogspot.com/2014/07/css3-effects-jquery-ngagulung-to-top.html
menjadi :
http://mitrabarayaonline.blogspot.com/2014/07/palsu-css3-effects-jquery-ngagulung-to-top.html
Sok teangan ngagunakeun alamat (URL) paslsu eta teanya cu.

Senin, 07 Juli 2014

Matematika jokowi+jk

Matematika jokowi+jk
Jokowi lahir thn 61 (6+1) = 7.
Usia Jokowi 52th (5+2)=7.
Gub DKI ke-16 (1+6)=7.
Rmhnya di jln Suropati no.7#:-s
Pemilu bulan 7 Tahun 2 + 0 + 1 + 4 = 7.;;)
Jadi kalau Jokowi menjadi Presiden ke-7,\=D/ <=-P
kita semua Se-7. Iyaaa kan ??? ♥♥ ({})
Dan pemilu dilaksanakan tanggal 9 bulan 7 jadi 9-7 = 2 (oke)(y) , demi indonesia tercinta* salam 2 jari* dari sabang sampai merauke pilih JOKOWI-JK

Minggu, 06 Juli 2014

URLs found in the page: URL - Times Found

CSS3 Effects jQuery Ngagulung to top plus

CSS3 Effects jQuery Ngagulung to top plus ieu hanteu benten jeung nusanesna anu sami sadayana diblog liana. Ampir sakabehna bersumber ti dinamicdrive.com. Anu ngabedakeun dina sakabeh posting ieu jeung nusejena ngeunaan "jQuery Ngagulung to top plus" nyaeta dina pamakean css3 anu boga fungsi keur mintonkeun sababaraha effek anyar supados katempona langkung dinamis. Lamun scroll to top anu sanes ngagunakeun wangun " tips/tooltips " default browser,anu inipun benten oge margi melibatkeun css2 anu dipadu kalawan css3. Supados langkung tangtos kumaha " wangun penampilan benten " ti Effects jQuery Ngagulung to top plus anu tos dihijikeun dina css3 ieu mangga alo cobian tur pencet sakaligus klik Effects jQuery Ngagulung to top plus di tungtung handap palih katuhu halaman. Anjeun oge tiasa mecakan na dina controll back to top anu mangrupi teks link handap kode css.

Javascript :

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

Kode CSS :

.jqMBngagulung{
        position:relative;
        font-weight:bold;
        padding:2px 4px;
        text-decoration:blink;
        color:#eee;
        background:#900;
        margin:20px;
        display:inline-block;
        opacity:0.5;
        filter:alpha(opacity=50);      
}
.jqMBngagulung:hover{
        opacity:1.0;
        filter:alpha(opacity=100); 
}
.jqMBngagulung:after{
        font-size:16px;
        font-weight:bold;
        font-family:Courier, monospace;
        text-align:center;
        position:absolute;
        right:-200px;
        top:-50px;
        content:"Scroll Back to Top";
        line-height:30px;
        width:30px;overflow:hidden;
        height:30px;
        background:#888;
        border-radius:4px;
        border:3px double #aaa;
        color:#eee;
        text-shadow:1px 1px 1px #000;
        opacity:0;
        filter:alpha(opacity=0);
        z-index:-10;
}
.MBngagulung,.jqMBngagulung:after{
        transition:0.6s linear;
        -o-transition:0.6s linear;
        -moz-transition:0.6s linear;
        -webkit-transition:0.6s linear;
        -ms-transition:0.6s linear;
}
.jqMBngagulung:hover:after{
        width:190px;
        right:0;
        z-index:12;
        opacity:1.0;
        filter:alpha(opacity=100);
        box-shadow:2px 2px 4px #000;
}
.MBngagulung{
        width:37px;
        height:40px;
        opacity:0.4;
        background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVtbK1uJ9gORlx-HLHK7rGa4UzqYAqmz9XXNVyj7-3BACi4W_PMTfbPY1lhyphenhyphenFSUE1ecZWm4bQD4lto6z1_cFvMkz4u39_plwzYSaH3uBRQyEchqo16gD7_Tvwmf2NxwXyDrrz5EKDJChtx/s120/MBngagulung.png) center no-repeat;
        background-size:35px 38px;
        filter:alpha(opacity=40);
        border:3px double transparent;
        padding:5px;
        border-radius:10%; 
} 
.MBngagulung:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        background:rgba(0,0,0,.4) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVtbK1uJ9gORlx-HLHK7rGa4UzqYAqmz9XXNVyj7-3BACi4W_PMTfbPY1lhyphenhyphenFSUE1ecZWm4bQD4lto6z1_cFvMkz4u39_plwzYSaH3uBRQyEchqo16gD7_Tvwmf2NxwXyDrrz5EKDJChtx/s120/MBngagulung.png) center no-repeat;
        background-size:35px 38px;
        border:3px double #930;
        border-radius:50%;
}

Login ke Blogger.
Halaman Dasbor/Dasboard :
Klik "Rancangan/Design".
Klik "Edit HTML".
Sok di Backup Template heula.
Cari Kode ]]></b:skin>
Copy javascript dan tempelkeun di handapna ]]></b:skin>
Copy kode CSS jeung tempelkeun di luhurna ]]></b:skin>
Klik "Simpen Template/Save Template".

Lamun Alo hayang ngagunakeun hiji linK controll kanggo back to top sepertos anu di luhur kode css,gunakeun wae xhtml di handap iyeu:

xHTML link jQuery Ngagulung to top plus :

<a class="jqMBngagulung" href="#MBtop">Back to TOP</a>

Catetan/Kateranganana :

Keur ngagantian gabar atawa image anu dipake conto,gantiwae 2 background ku alamat:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVtbK1uJ9gORlx-HLHK7rGa4UzqYAqmz9XXNVyj7-3BACi4W_PMTfbPY1lhyphenhyphenFSUE1ecZWm4bQD4lto6z1_cFvMkz4u39_plwzYSaH3uBRQyEchqo16gD7_Tvwmf2NxwXyDrrz5EKDJChtx/s120/MBngagulung.png.
Tah lamun hayang ngarobah ukuran gambar atawa image conto,sok atuh rubah deui dina :
background-size:35px 38px;
Panduan langkung pepek tur kumplit kode css anu langkung beda tiasa Alo buka didieu!

Sabtu, 05 Juli 2014

Slider Ngagunakeun Fade Effect Transition

Image-1 Image-2 Image-3

Slider Ngagunakeun fade effect transition ieu ngagunakeun hiji javascript anu basajan pisan. Slider memuat 3 buah image kalawan hiji background image anu bade katembong ngan di wanci gallery dibuka. Background image dipidangkeun dina wangun transparan ngaliwatan opacity effect. Dibalik background image diajak oge hiji background animasi gif anu boga fungsi midamel efek caang-poek dugi kawas anu ngabogaan effek caang poek nyaeta image dina slider.

Javascript :

<script type="text/javascript">
//<![CDATA[
function MBS_MB_kicp(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    if (opacStart > opacEnd) {
        for (i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    } else if (opacStart < opacEnd) {
        for (i = opacStart; i <= opacEnd; i++) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    }
}
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}
function MBS_MB_kicp(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    changeOpac(0, imageid);
    document.getElementById(imageid).src = imagefile;
    for (i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "')", (timer * speed));
        timer++;
    }
}
//]]>
</script>

Kode CSS :

span.sakadaekwe{width:60px;display:inline-block;padding:4px 6px;background:#333 url(https://sites.google.com/site/mitrabarayaonline/bg/textbg.png);color:#f00;margin:0 0 6px 1px;border:2px solid #777;border-right:2px solid #888;text-align:center;}
span.sakadaekwe:hover{background:#900;color:#fff;}

xHTML :

<div style="float:left;background:#333;padding:4px;margin:5px 15px 5px 0;border-radius:4px;">
<a href="javascript:MBS_MB_kicp('pics','MBS_MB_kicp', 'https://lh3.googleusercontent.com/-1pzYmCc0ls4/UorGoj9p70I/AAAAAAAADOk/AOXdBz2IEPw/h340/2.jpg',500)"><span class="sakadaekwe">Image-1</span></a><a href="javascript:MBS_MB_kicp('pics','MBS_MB_kicp', 'https://lh5.googleusercontent.com/-Df3wSPwd60I/UnqaJ0OmTaI/AAAAAAAADNU/vOGsZ9hLz4I/h340/bo.jpg',500)"><span class="sakadaekwe">Image-2</span></a><a href="javascript:MBS_MB_kicp('pics','MBS_MB_kicp', 'https://lh6.googleusercontent.com/-jMswE0E2s9Q/U1hUWzLDLrI/AAAAAAAADcE/CZ9k-st_cjY/h420/kaos+distro+Bandung.jpg',500)"><span class="sakadaekwe">Image-3</span></a>
<div id="pics" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguszoq5e63ZAgMF88cP0V-SMQZTmyLWsg8qNlDSTSDNp7gxswD84dI5UHBkWnsAlnVKQJpx3WxY-Mwfw9F1MrroO3dhuMCVtyGD6loH7UkUWoNnL-vUuMtud6qZT2PatLgkYuf7FlF5guO/h340/poek_caang-80x10.gif);border:4px ridge orange;width:224px;">
<img style="filter:alpha(opacity=70);opacity:0.7;" id="MBS_MB_kicp" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl4qWNrMWKWG0KPs5CG3gi_rr62WeAOr5vVrW1QvfxHBEDcGqLM6txVx1RevfIf758OC7P0bdWWicc7frlk56LKv51JI3heQhAxvFeG3EYH1c2bgNnHHczkQbKWekS6NXhyphenhyphenqkGx_5FGRjK/h340/nonxx.jpg"/>
</div>
</div>

Carana ngajieun :

Login ke Blogger.
- Tuliskeun "User Name" (gmail) atawa tuliskeun " Email Address " (non gmail).
- Tuliskeun Password.
- Klik "Sign in"
Sanggeus klik sign in Alo-alo pasti manggihan halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Balikdeui ka halaman anyar pasti kabuka, klik "Edit HTML".
Aya hiji halaman anu anyar anu dibuka tadi. Halaman ieu eusina 3 (tilu) bagian:
- Backup/Restore Template » eusina fitur keur ngalakukeun backup template.
  Sok wae backup template tiap bade ngalakukeun tambahan atawa kurangan kode (xhtml,kode CSS sarta javascript) ngagunakeun "Box Edit Template".
- Edit Template » eusina hiji box gede anu di dijero eusina kode html susunan blog.
- Old Templates » eusina template lila blogger (Template Tata Letak & Template Klasik.
Cari kode ]]></b:skin> pada "Box Edit Template".
Copy javascript jeun tempelkeun di handap ]]></b:skin>
Copy kode CSS jeung tempelkeun di luhur ]]></b:skin>
Klik "Simpen Template (Save Template)".
Gunakeun xHTML di box posting atawa "Add a Gadget | HTML/Javascript".

Katerangan/Catetan :

Gunakeun image ukuran anu sarua. Lebar image 224px.
Lamun arek ngarobah image, robah oge lebar image dina xHTML:
width:224px;
Posisina gambar atawa image slider bisa diatur ngan saukur ngarobah nilaina margin dina xHTML :
margin:5px 15px 5px 0;

Cara ngajieun gambar geser slideshow

* MitraBarayA - MBrayaonline-1 *

prev next

Kaos Sunda: Édisi Angklung (Hideung)
Bahan: Combed Cotton 20s Sablon: Plastisol Harga: Rp. 80.000,- (teu acan kalebet ongkos kintun) Gerai: Warung Rancabanyol, Pasar Modern Batununggal Blok D18-03, Bandung (buka tabuh 10.00 - 16.00 WIB). Kontak pesenan online: Tlp./SMS/WhatsApp: 0896 7110 2034 PIN BBM: 76B0DB73 (Kaos dikintun nganggo ekspedisi JNE)
Readmore
Kaos Baraya Banyolan Sunda
Bahan: Combed Cotton 24s Sablon: Plastisol Harga: Rp. 80.000,- (teu acan kalebet ongkos kintun) Gerai: Warung Rancabanyol, Pasar Modern Batununggal Blok D18-03, Bandung (buka tabuh 10.00 - 16.00 WIB). Kontak pesenan online: Tlp./SMS/WhatsApp: 0896 7110 2034 PIN BBM: 76B0DB73 (Kaos dikintun nganggo ekspedisi JNE)
Readmore
Kaos Baraya Banyolan Sunda
Bahan: Combed Cotton 24s Sablon: Plastisol Harga: Rp. 80.000,- (teu acan kalebet ongkos kintun) Gerai: Warung Rancabanyol, Pasar Modern Batununggal Blok D18-03, Bandung (buka tabuh 10.00 - 16.00 WIB). Kontak pesenan online: Tlp./SMS/WhatsApp: 0896 7110 2034 PIN BBM: 76B0DB73 (Kaos dikintun nganggo ekspedisi JNE)
Readmore
Kaos Édisi Bandung (Hideung)
Bahan: Combed Cotton 20s Sablon: Plastisol Harga: Rp. 80.000,- (teu acan kalebet ongkos kintun) Gerai: Warung Rancabanyol, Pasar Modern Batununggal Blok D18-03, Bandung (buka tabuh 10.00 - 16.00 WIB). Kontak pesenan online: Tlp./SMS/WhatsApp: 0896 7110 2034 PIN BBM: 76B0DB73 (Kaos dikintun nganggo ekspedisi JNE)
Readmore
Kaos Édisi Baju Lebaran (Biru Kolot).
Bahan: Combed Cotton 20s Sablon: Plastisol Harga: Rp. 80.000,- (teu acan kalebet ongkos kintun) Gerai: Warung Rancabanyol, Pasar Modern Batununggal Blok D18-03, Bandung (buka tabuh 10.00 - 16.00 WIB). Kontak pesenan online: Tlp./SMS/WhatsApp: 0896 7110 2034 PIN BBM: 76B0DB73 (Kaos dikintun nganggo ekspedisi JNE)
Readmore

Lamun alo kaasup salah sahiji blogger anu tos ngagunakeun jQuery kanggo sababaraha blog,nambahan gambar geser slideshow ieu moal nambahan beurat teuing loading margi javascript anu dipake hanteu loba. Sababaraha kode css saleresna diperlukeun nanging iyeu oge moal seueur teuing boga pangaruh ka blog. Makena ti eta tangtos bade ngajieun blog nambahan alus tur merenah di tingalina.

Keur Alo-alo anu tacan ngagunakeun jQuery,lamun mimiti ayeuna Alo mecakan make ngagunakeun,Kuring jamin yen Alo moal hanjakal saetikeutik acan.. margi seueur keneh perkawis anu sanes masihan pangrojong ka tampilan blog tiasa didamel kalawan ngamangpaatkeun jquery. Nya ... sarta ieu anu peryogi! Dina hiji blog/web ngan diperlukeun 1 jquery (jquery v.1.3.2 s/ v.1.7.1),samentara keur ngajieun sagala rupi desain anu matak pikabitaeun script anu hante loba (jquery plugns).

Cara ngajieun gambar geser slideshow ieu Alo ngan saukur perlu noel ka mitrabarayaonline margi sadaya tutorial cara ngajieunna aya diditu. Sok wae atuh klik link di handap ieu keur balik ka tutorial atawa ngajieun gambar geser slideshow.

Tutorial :

Back to tutorial: Carousel Slideshow

Kamis, 03 Juli 2014

CSS Ngaleutikeun Image di blog

CSS Ngaleutikeun Image di blog nyaera kanggo midamel pamakean image dina blog tiasa langkung dileutikeun ku kituna penataan posting oge barobah kaayaan langkung gampil. Kalawan hover image with effect mangka image ngan bade dipidangkeun dina wangun thumbnail kalawan luhur 100px sarta rubak sacara otomatis menyesuaikeun diri sabanding kalawan ukuran image saestuna. Image dina ukuran langkung ageung ngan bade dipidangkeun sabot cursor diarahkeun di luhur thumbnail. Kalawan ngamangpaatkeun properti css3 transition,penampakan image bade mapan ngaliwatan transisi wanci anu dibarung effek opacity. Wanci transisi ieu tiasa digedean atawa dileutikeun kalawan tiasa ngatur nilaina (value) css3 transition property.

CSS Ngaleutikeun Image di blog tiasa diterapkeun kanggo nyieun hiji image gallery sakaligus tiasa oge dipake gambar tunggal sepertos anu dawam dipake kanggo posting. Kanggo midamel kadudukan sepertos di luhur,pengaturan/setting dipigawe ngaliwatan pamakean floating position dina kode css.

D E M O :

Arahkeun cursor di luhur thumbnail kanggo mintonkeun gambar foto anu ukuranana langkung ageung.

Kode CSS :

.MBlgodor_gallery{
        margin:20px auto;
        width:98%;
        padding:1%;
        background:#fff;
        text-align:center;
}
a.MBlgodor,.MBlgodor_knca,.MBlgodor_kathu{
        position:relative;
        cursor:pointer;
}
a.MBlgodor,a.MBlgodor span,a.MBlgodor_knca,a.MBlgodor_knca span,a.MBlgodor_kathu,a.MBlgodor_kathu span{
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.8s;
        -webkit-transition:0.8s;
        -ms-transition:0.8s;
}
a.MBlgodor img,a.MBlgodor_knca img,a.MBlgodor_kathu img{
        height:100px;
        width:auto;
        margin:2px;
        padding:4px;
        background:#666;
        border:2px solid #eee;
        border-radius:5px;
        box-shadow:0 0 6px #999;
        opacity:0.7;
        filter:alpha(opacity=70);
}
a.MBlgodor_knca{margin:5px 12px 5px 0;float:left;}
a.MBlgodor_kathu{margin:5px 0 5px 12px;float:right;}
a.MBlgodor:hover img,a.MBlgodor_knca:hover img,a.MBlgodor_kathu:hover img{
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.MBlgodor span,a.MBlgodor_knca span,a.MBlgodor_kathu span{
        display:block;
        position:absolute;
        top:-400px;
        z-index:-10;
        opacity:0;
        filter:alpha(opacity=0);
}
a.MBlgodor_knca span,a.MBlgodor_kathu span{top:-300px;}
a.MBlgodor span{left:-90%;}
a.MBlgodor_knca span{left:0;}
a.MBlgodor_kathu span{right:0;}
a.MBlgodor:hover span,a.MBlgodor_knca:hover span,a.MBlgodor_kathu:hover span{
        z-index:999;
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.MBlgodor span img,a.MBlgodor_knca span img,a.MBlgodor_kathu span img{
        background:rgba(0,0,0,0.4);
}
a.MBlgodor:hover span img,a.MBlgodor_knca:hover span img,a.MBlgodor_kathu:hover span img{
        width:auto;
        height:300px;
        box-shadow:4px 4px 4px #999;
        border-radius:12px;
}

Kode CSS image di palebah kenca:

<a class="MBlgodor_knca" href="URL"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

Kode CSS image di palebah katuhu:

<a class="MBlgodor_kathu" href="URL"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

Kode CSS Image Gallery:

<div class="MBlgodor_gallery">
<a class="MBlgodor" href="URL-1"><img src="thumb-1.jpg" /><span><img src="image-1.jpg" /></span></a>
<a class="MBlgodor" href="URL-2"><img src="thumb-2.jpg" /><span><img src="image-2.jpg" /></span></a>
<a class="MBlgodor" href="URL-3"><img src="thumb-3.jpg" /><span><img src="image-3.jpg" /></span></a>
<a class="MBlgodor" href="URL-4"><img src="thumb-4.jpg" /><span><img src="image-4.jpg" /></span></a>
</div>

Rabu, 02 Juli 2014

Ngajieun Image Edun Sadayana

Image Edun Sadayana nyaeta hiji gallery anu didamel ngan ngagunakeun kode css. Aya 2 versi ti Image Edun Sadayana:

Ngan saukur ngagunakeun kode CSS.
Ngagunakeun kode css sarta kode css3.

Dina demo pintonan bade ku kuring di tampilkaeunn dua macem versi Image Edun Sadayana sarta mangga alo bandingkeun diantara duanana.

IMAGE EDUN SADAYANA KU KODE CSS :

IMAGE EDUN SADAYANA KU KODE CSS3 :

Kanggo midamel Image Edun Sadayana anu ngan ngagunakeun kode css (versi kahiji),mangga anggo wae ku alo kode anu aya di mitrabarayaonline, Eukeur midamel versi kadua (kalawan kode css3) alo tiasa copy kode cssna di handap ieu.

Kode CSS Image Edun Sadayana CSS3 :

#MBedun_sadayana { 
        border:3px solid #333;
        position:relative;
        padding:0;
        margin:20px auto;
        width:412px;
        height:285px;
        background:#ccc url(https://lh5.googleusercontent.com/-zkgC9SP8HFc/U1wFLy8rdcI/AAAAAAAAF2o/EE04ZXqKFh4/h400/Kaos-Angklung-Merah.png) 6px 83% no-repeat;
        background-size:400px 230px;
        border-radius:3px;
        border-bottom-left-radius:9px;
        border-bottom-right-radius:9px;
        box-shadow:0 0 6px #000;
}
#MBedun_sadayana li{
        margin:0; /* original code by : mitrabarayaonline */
        float:left;
        margin-left:1px;
        text-align:center;
        list-style: none; 
        padding:0;
}
#MBedun_sadayana li a{
        display:inline-block;
        padding:9px 0;
        width:78px; /* original code by : http://mitrabarayaonline.blogspot.com  */
        background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Fbhsms01qaekFv32MmqLjZEVXYHpjIxxHl5WYsemdcJR0i94Ia6WfSez-HieGeiy3xZKdPmbd6eaE3KR0Yxr7UwcD1Nr5lxF5lAjKvBgB5BD4YoYePVl-tuxinra-hfEYaTxroC9KZ7A/s128/MB_hideung-beureum-8x41.gif) 0 100%  repeat-x;
        border:1px solid #666;
        color: #33CCFF;
        margin:2px 0 2px 1px;
        font-size:11px;
        font-family:Arial;
        font-weight:700;
        text-decoration:none;
}
#MBedun_sadayana li a,#MBedun_sadayana li a img{
        transition:1.8s ease;
        -o-transition:1.8s ease;
        -moz-transition:1.8s ease;
        -webkit-transition:1.8s ease;
        -ms-transition:1.8s ease;
}
#MBedun_sadayana li a:hover {
        background:#fff  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Fbhsms01qaekFv32MmqLjZEVXYHpjIxxHl5WYsemdcJR0i94Ia6WfSez-HieGeiy3xZKdPmbd6eaE3KR0Yxr7UwcD1Nr5lxF5lAjKvBgB5BD4YoYePVl-tuxinra-hfEYaTxroC9KZ7A/s128/MB_hideung-beureum-8x41.gif) 0 -35px  repeat-x;text-shadow:2px 2px 2px #888;
        color:red;  /* original code by : http://mitrabarayaonline.blogdetik.com  */
        border-bottom:5px solid red;
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:9px 0 4px;
}
li#MBedun_img a, li#MBedun_img a:hover {
        background:#aaa;
        color: #FF9900; 
}
#MBedun_sadayana li a img{
        position:absolute;
        left:3px;
        top:38px;
        width:400px;
        height:230px;
        clear:left;
        padding:2px;
        border:1px solid #444; 
        border-bottom:5px solid #444;
        border-top:5px solid #222;
        border-bottom-left-radius:8px;
        border-bottom-right-radius:8px;
        opacity:0.0;
}
li#MBedun_img1 a img, #MBedun_sadayana li a:hover img {
        display:block; 
        opacity:0.35;
        filter:alpha(opacity=35);
}
li#MBedun_img1 a:hover img, li#MBedun_img2 a:hover img, li#MBedun_img3 a:hover img, li#MBedun_img4 a:hover img, li#MBedun_img5 a:hover img {
        border-color:#888; 
        opacity:1.0;
        filter:alpha(opacity=100);
}

xHTML :

<ul id="MBedun_sadayana">
<li id="MBedun_img1"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_qn-R4GfB2Yrtp369WRwwU1tcn5PDoLicUlBUKf83MjQoDx8munhLIVZTvBv0OdAUc5k_krLE2guiw4Rjyax8wDKrHPAMepmv1pRiA0UU7evm_C-DS8f3L69PkZeXhR4ElhCR6ilL6dF/s500/banyolan.jpg">Image-1<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje3yc4SMPdP-Ytb1cNeJV9H3aMTLD1M7CiJeZ51cLugJmH19FTd1P160PP7LArcH11_iZAFXuAnMoJdH0Al-no1qn9Kaqunvzrkh0uXd0zc_B1QkJQk8Wrj0j8Dp866YFkB8FbQcFhmD5f/h300/Persib4.jpg" /></a></li>
<li id="MBedun_img2"><a href="http://mitrabarayaonline.blogspot.com">Image-2<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCBl4BL-oTfWeGO521-HUXn3YqIR5e-WxX10Ru4RlJze8B5w4b9zE8yBZaZ2X-m3Z4hHZ17kNbp49qgZqaClV0SxD1_wxcnRLlWCYqYugS3EoHL9fov-8t6Q74c7cAkC-FIeLM96U4_Os/h300/Majalah+Cakakak+edisi+III.jpg"/></a></li>
<li id="MBedun_img3"><a href="https://lh5.googleusercontent.com/-zkgC9SP8HFc/U1wFLy8rdcI/AAAAAAAAF2o/EE04ZXqKFh4/h400/Kaos-Angklung-Merah.png">Image-3<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfdaa5eRTIcbAJN7coQjdRpY4lIL2TlBGFOIwBXLvnm2x-yzx_pM1ovPHiEYjV_pkzJrWEwGzVgurUGqu12obqehksNhWT4aAXMuroH5Q2S84jI65WzRoHXAzJh_6XtT8AjwFEKz8f7AXH/h300/rancamaya-a.jpg"/></a></li>
<li id="MBedun_img4"><a href="URL-4">Image-4<img src="https://lh4.googleusercontent.com/-7Fzb-m8xyvA/T2JvMlvXX7I/AAAAAAAAAZ0/vkGaArh4kME/h300/th_suryokontho.jpg"/></a></li>
<li id="MBedun_img5"><a href="http://mitrabarayaonline.blogdetik.com/">Image-5<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7gMzK6qFY8_a3V15VSFuR6G4EM0yT1BfOwF79B1S5Ip5r15FXWfb5EdxRT1fQFm3Gyz8DAERfvY_vEwGesnHu1Gg4JlmiRlJ00PViXFtINCyvIMHiTecYYpzR9L7mnq3nMQoaMLcLRQo/h300/21brides600.1.jpg"/></a></li>
</ul>

Login ka Blogger.
Sanggeus halaman "Dasbor (Dasboard)" kabuka, teangan jeung klik "Rancangan (Design)".
Lajengkeun klik "Edit HTML".
Alo pasti ningali hiji box edit template anu pinuh ku kode html.
Lakukan "Backup Template" saencana mimitian alo kudu nyimpen heula kode CSS.
Teangan kode ]]></b:skin> jeung teuneun kode CSS di luhurna.
Klik "Simpen Template (Save Template)".
Gunakeun xHTML di halaman posting atawa dina Add a Gadget.

Catetan Atanapi Katerangan :

Ukuran anu ditetepkeun dina image atawa gambar anu dipake dina Image Edun Sadayana ukuranana 400px (width) sarta 230px (height),nanging kitu alo-alo tiasa oge ngagunakeun ukuran anu benten,ngan wae angger dipidangkeun sapertos ukuran kasebat di luhur tea.
Link dina xHTML (conto: URL-4) ganti wae ku alamat image, alamat blog atawa alamat posting.
Parobahan ukuran Image Edun Sadayana kedah dibarengan ku sababaraha parobahan width,padding,sae dina box,tab controll atawa tab gambar.

Daptar menu ngaleungit

Daptar menu ngaleungit anu didamel kalawan kode css ieu ngagaduhan sababaraha efek berkat pamakean kode css3. Menu ditempatkeun si sisi kiwa halaman blog sarta ngan nempokeun " hiji sensor " anu dipake " minangka pentriger " menu supados sabot disentuh cursor sakumna haturan menu katembong. Margi ngagunakeun css3 mangka ngan kompatibel di browser anu atos ngarojong css3.

D E M O

Tingali menu palebah kenca sarta arahkeun cursor di luhurna.

Cara midamel katut kode na tiasa anjeun buka di mitrabarayaonline.

Tutorial :
Back to tutorial : CSS Floating menu

Hover tabs css3

Transparency Effect dina hover tabs css3 ieu didamel kalawan ngamangpaatkeun rgba color anu dikadudukankeun minangka background content tab kahiji sarta tab kadua. Hiji image dipasang minangka background box ku kituna efek transparansi beuki nampak. Sababaraha background image oge ditambahkeun dina sewang-sewang tab kanggo masihan efek benten .

Tutorial :
Ke Tutorial : Rainbow Tabs

First Tab

Tuliskan teks di sini ! Ulah lunca linci luncat mulang udar tina tali gadang, omat ulah lali tina purwadaksina,Nu lain kudu dilainkeun nu enya kudu dienyakeun!!!

Kaos Baraya Sunda
Kaos Oblong Baraya Sunda
Kaos Oblong Baraya Sunda
Kaos Oblong Baraya Sunda
Lightbox
Trik Neangan Kaos Murah

Papatah Euy ! Ulah lunca linci luncat mulang udar tina tali gadang, omat ulah lali tina purwadaksina,Nu lain kudu dilainkeun nu enya kudu dienyakeun!!!

Second Tab

Ulah lunca linci luncat mulang udar tina tali gadang, omat ulah lali tina purwadaksina,Nu lain kudu dilainkeun nu enya kudu dienyakeun!!!

Nama Link2a
Nama Link2b
Nama Link2c
Nama Link2d
Nama Link2e
Nama Link2f
Nama Link2g
Nama Link2h
Nama Link2i
Nama Link2j

Ulah lunca linci luncat mulang udar tina tali gadang, omat ulah lali tina purwadaksina,Nu lain kudu dilainkeun nu enya kudu dienyakeun!!!

Box Posting kalawan Background Transparan

Anjeun tiasa ngagunakeun sagala rupa ukuran image minangka background. Pangaturan dipigawe ngaliwatan properti css background position sarta background repeat sarta background size. Kalawan dibarengan properti background size,sumawonten anjeun tiasa ememaksa hiji image kalawan ukuran anu tak luyu kalawan box tiasa barobah kaayaan selebar box.

Box Posting kalawan Background Transparan,midamelna ngagunakeun 3 buah tag DIV dina posisi relatif sarta absolute sarta menyisipkeun opacity effect kanggo meghasilkeun transparansi. Anjeun tiasa mengatur tingkat transparansi kalawan mengatur peunteun opacity. Kelir background oge tiasa anjeun robih , di manten parobahan oge kedah dibarung kalawan parobahan kelir font. Parobahan kelir font boga tujuan midamel teks tiasa terbaca kalawan gampil.

Kode CSS :

#MBboxpost{
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9QnUCYeeq1Bep6n9uucG2pA8x7jXJ-Rp2sSUQqOSmQfp5fvgCqmTSZdtJ0pPmRVecfqvuBCrLUYL4k4K05ymRHpzYCF9mFEvf4N20qatjRMY9LuwReZPsqFBQvDznkjL6hVnx1Ii2Yzoq/);
        background-position:top center; /* posisi background horizontal-vertical */
        background-repeat:repeat-y; /* berulang secara vertikal */
        background-size:100% auto; /* mengatur ukuran background */
        position:relative;
        width:100%; 
        padding:10px;
        margin:-10px;
}
.MBhoveruing{
        position:absolute;
        top:0; 
        left:0;
        height:100%;
        width:100%;
        background-color:#000; /* sesuaikan background color dengan warna teks */
        opacity:0.5;
        filter:alpha(opacity=50);
}
.MBtulisandw{
        position:relative; 
        color:#eee; /* sesuaikan warna teks dengan background-color */
}

xHTML :

<div id="MBboxpost">
<div class="MBhoveruing"></div>
<div  class="MBtulisandw">
Content here!
</div>
</div>
</div>

Cara Membuat :

Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Kembali halaman baru akan terbuka, klik "Edit HTML".
Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
- Backup/Restore Template » berisi fitur untuk melakukan backup template.
  Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
- Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
- Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
Cari kode ]]></b:skin> pada "Box Edit Template".
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Buat posting dengan xHTML di atas kemudian buka blog untuk melihat hasilnya.

Catatan/Keterangan :

Sebagian keterangan sudah tertulis dalam kode CSS.
Jika menggunakan background image dengan ukuran kecil, rubah :
- background-size:100% auto; menjadi » background-size:(image-width)px auto;
- background-repeat:repeat-y; menjadi » background-repeat:repeat;
Warna background dan warna teks dapat diganti dengan merubah :
- background-color:#000;
- color:#eee;

Minggu, 13 Juli 2014

Kode CSS :

Javascript-1 :

Javascript-2 :

Jumat, 11 Juli 2014

Kode CSS :

xHTML :

Senin, 07 Juli 2014

Minggu, 06 Juli 2014

Javascript :

Kode CSS :

xHTML link jQuery Ngagulung to top plus :

Sabtu, 05 Juli 2014

Javascript :

Kode CSS :

xHTML :

Kaos Sunda: Édisi Angklung (Hideung)

Kaos Baraya Banyolan Sunda

Kaos Baraya Banyolan Sunda

Kaos Édisi Bandung (Hideung)

Kaos Édisi Baju Lebaran (Biru Kolot).

Kamis, 03 Juli 2014

Kode CSS :

Kode CSS image di palebah kenca:

Kode CSS image di palebah katuhu:

Kode CSS Image Gallery:

Rabu, 02 Juli 2014

Kode CSS Image Edun Sadayana CSS3 :

xHTML :

Judul Menu Kahiji

Judul Menu Kadua

Judul Menu Kahiji

Judul Menu Kadua

First Tab

Second Tab

Kode CSS :

xHTML :