[iklan]

Membuat Image Center Vertical dan Center Horizontal

Kali ini menyimpan catatan untuk membuat image menjadi center secara vertikal dan juga horizontal. Masih dalam seri css dan html. Teman-teman yang kebetulan sedang mencari cara membuat gambar berada ditengah secara vertikal dan sekaligus secara horizonal, bisa copas code yang disematkan dibawah. Tinggal copas, kemudian, edit ukuran dan link gambarnya.


Tinggi dan lebar image lebih kecil dari frame


Tinggi image lebih besar dari frame


Lebar image lebih besar dari frame




Berikut code css dan htmlnya, bisa dicopas, lalu diedit.
<style>
    .kotak-luar{
        display: inline-block;
        margin: 20px;
      padding:0;
    }
    .frame{  
        width: 250px;
        height: 250px;
        border: 1px solid black;
        vertical-align: middle;
        text-align: center;
        display: table-cell;
    }    
    .frame img{
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: 0 auto;
    }
</style>


    <div class="kotak-luar">
        <div class="frame">
            <img src="https://1.bp.blogspot.com/-P_KVg0LqXYQ/YQZBniqaJzI/AAAAAAAAUkk/OxMh6oU9_toEQe0SMDH1Z1PpUH1zN2Z2ACLcBGAsYHQ/s90/Brosur%2BAhsana%2BPro%2BMojokerto%2BKota.webp"/>
        </div>
    </div>
    <br>

    <div class="kotak-luar">
        <div class="frame">
            <img src="https://1.bp.blogspot.com/-P_KVg0LqXYQ/YQZBniqaJzI/AAAAAAAAUkk/OxMh6oU9_toEQe0SMDH1Z1PpUH1zN2Z2ACLcBGAsYHQ/s200/Brosur%2BAhsana%2BPro%2BMojokerto%2BKota.webp"/>
        </div>
    </div>
    <br>

    <div class="kotak-luar">
        <div class="frame">
            <img src="https://1.bp.blogspot.com/-P_KVg0LqXYQ/YQZBniqaJzI/AAAAAAAAUkk/OxMh6oU9_toEQe0SMDH1Z1PpUH1zN2Z2ACLcBGAsYHQ/s320/Brosur%2BAhsana%2BPro%2BMojokerto%2BKota.webp"/>
        </div>
    </div>



Demikian cara membuat gambar atau image menjadi center atau ditengah-tengah pada bagian secara vertikal dan juga secara horizontal. Semoga berguna bagi teman-teman semua, dan juga saat kami membutuhkan lagi di kemudian hari, tinggal copas codenya.


Untuk tampilan layar yang lebar, saya tambahkan code flex agar tampilan kotak-luar frame image yang ditampilkan ini bisa berjajar secara horizontal dengan jarak yang flesibel, dan jika tampilan layar lebih kecil, maka otomatis kotak-luar akan tampil di baris berikutnya.

Berikut adalah codenya

display:flex;justify-content:space-around;align-items:center;gap:6px;flex-wrap:wrap;


Kode atau syntax css tersebut dipasang didalam syntax html berikut:
<style> ... </style>

Trigger a CSS Animation on Scroll

Cara membuat animasi yang akan dijalankan setiap kali bagian halaman atau obyek terbuka atau tampil di screen. Untuk membuat animasinya, sederhana menggunakan @keyframes. Dan untuk menjalankannya pada setiap kali tampil di layar, animasi tersebut dipanggil menggunakan code javascript. Dengan cara ini, dalam satu halaman, animasi hanya bisa diterapkan dalam satu obyek. Obyek tersebut bisa berupa image atau dalam div. Untuk animasi yang bisa diterapkan pada banyak obyek per halaman, telah bagikan Animasi Viewport Scroll


Script yang digunakan adalah sebagai berikut:
<script>
const ob = document.querySelector('.ob');
ob.classList.remove('st');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      ob.classList.add('st');
      return;
    }

    ob.classList.remove('st');
  });
});

observer.observe(document.querySelector('.ani'));
</script>



CSS yang digunakan adalah sebagai berikut:
<style>
.st{animation: bin 2s ease}
@keyframes bin{
0%{opacity: 0.1;transform: scale(.3)}
50%{opacity: 1;transform: scale(1.05)}
70%{transform:scale(.9)}
100%{transform:scale(1)}}
</style>



0











..





..





..





.. 1


!





..





..





..!





..





.
Labels: ,



CSS efek Bounce-in Animation CSS saja

Menyenangkan, melihat efek animasi lucu seperti ini. Dalam website atau blog, kita bisa membuatnya dengan mudah. Tinggal copas code yang dibagikan di halaman ini, teman-teman bisa memodifikasi sesuai kreativitas. Selamat mencoba. Jika ada kesulian atau pesan, silakan menuliskan di kolom komentar.

CSS Animation

loader

gelatine

spin

elastic spin

pulse

flash

hi there!

grow

fade in

fade out

bounce

bounce 2

shake

flip

swing

wobble

fade in down

fade in left

fade out down

fade out right

bounce in

bounce in right

bounce out

bounce out down

rotate in down left

rotate in up left

roll in

roll out

hinge

...
Read more »
Labels: , ,



Animasi Javascrip Sederhana Ringan Viewport Scroll

Yang dibagikan dihalaman ini adalah cara membuat animasi viewport scroll menggunakan javascript yang ringan dan sederhana, namun sudah cukup bagus dan lengkap untuk kreaifitas animasi yang ingin dibuat. Obyek yang diinginkan bisa diberikan efek animasi dan akan dijalankan setiap kali obyek tersebut terbuka di viewort saat layar discroll. Silakan coba scroll ke bawah utk melihat efek animasi yang ada di halaman ini.





..





..





.. 0
1
2
3
3a
4
5
6
7







..





..





..

.. 0 1 2 3 4 5 6 7
....

 

<div class="ani vis"></div>
<div class="ani vis" ef="FIR"></div>
<div class="ani" ef="SU"></div>
<div class="ani" ef="SD"></div>
<div class="ani" ef="FID"></div>
<div class="ani" ef="FIU"></div>
<div class="ani vis" ef="FI"></div>

|||
|||
|||
|||
|||
|||
|||



Untuk mencoba efek animasi tersebut, teman-teman bisa copas kode berikut ini. Silakan modifikasi sesuai kreatifitas.

 <style>
.ani{opacity:0.1;transform:translateX(6rem);transform-origin:0 0;transition:opacity 1.2s cubic-bezier(.5,1,.89,1) .4s,transform 1s cubic-bezier(.5,1,.89,1) .4s;will-change:opacity,transform}
.ani.vis{opacity:1;transform:translateX(0)}
.ani[ef=FI],.ani[ef=FI].vis{transform:none}
.ani[ef=FIL]{transform:translateX(-6rem)}
.ani[ef=FIL].vis{transform:translateX(0)}
.ani[ef=SIL]{transform:translateX(-8rem) scale(.2) translateY(-8rem)}
.ani[ef=SIL].vis{transform:translateX(0) scale(1) translateY(0)}
.ani[ef=SIR]{transform:translateX(16rem) scale(.2) translateY(26rem)}
.ani[ef=SIR].vis{transform:translateX(0) scale(1) translateY(0)}
.ani[ef=FID]{transform:translateY(-6rem)}
.ani[ef=FID].vis{transform:translateY(0)}
.ani[ef=FIU]{transform:translateY(10rem)}
.ani[ef=FIU].vis{transform:translateY(0)}
.ani[ef=SIU]{transform:translateY(16rem) translateX(13rem) scale(.2)}
.ani[ef=SIU].vis{transform:translateY(0) translateX(0) scale(1)}
.ani[ef=SU]{transform:scale(.2)}
.ani[ef=SU].vis{transform:scale(1)}
.ani[ef=SD]{transform:scale(2)}
.ani[ef=SD].vis{transform:scale(1)}
</style>

<script>
var anion=function(t){"use strict";var e=new IntersectionObserver((function(t){t.forEach((function(t){var e=t.target,n=parseInt(e.getAttribute("data-delay"))||0,i=e.getAttribute("data-duration")||null;t.intersectionRatio>0?setTimeout((function(){i&&(e.style.transitionDuration="".concat(i,", ").concat(i)),e.classList.add("vis")}),n):(e.classList.remove("vis"),e.style.removeProperty("transition-duration"))}))}));return t.anion=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".ani",n=document.querySelectorAll(t);"IntersectionObserver"in window?n.forEach((function(t){e.observe(t)})):n.forEach((function(t){return t.classList.add("vis")}))},Object.defineProperty(t,"__esModule",{value:!0}),t}({});
</script>
<script>
anion.anion();
</script>




Contoh code penggunaan di html, adalah sebagai berikut:
0 <div ef="ani" ef="SIR"><img alt="" src="https://1.bp.blogspot.com/-8lipPaP2SfY/YQHZpZhYCJI/AAAAAAAAUjU/V67j83I5NNYiqrPd62lF1CLXKXZ5nKzYQCLcBGAsYHQ/s0/EasyFind_31070.png" /></div>
1 <div ><img class="ani" ef="SIL" alt="" src="https://1.bp.blogspot.com/-8lipPaP2SfY/YQHZpZhYCJI/AAAAAAAAUjU/V67j83I5NNYiqrPd62lF1CLXKXZ5nKzYQCLcBGAsYHQ/s0/EasyFind_31070.png" /></div>
2 <div class="ani" ><img alt="" src="https://1.bp.blogspot.com/-8lipPaP2SfY/YQHZpZhYCJI/AAAAAAAAUjU/V67j83I5NNYiqrPd62lF1CLXKXZ5nKzYQCLcBGAsYHQ/s0/EasyFind_31070.png" /></div>
3 <div class="ani" ef="FID"><img alt="" src="https://1.bp.blogspot.com/-8lipPaP2SfY/YQHZpZhYCJI/AAAAAAAAUjU/V67j83I5NNYiqrPd62lF1CLXKXZ5nKzYQCLcBGAsYHQ/s0/EasyFind_31070.png" /></div>





Semoga berguna.

Labels: ,



CSS Jalankan Animasi saat Scroll


SCROLL

|
|
|
V

FadeIn

F00

FadeInUP

F00

FromRight

F00

FromRight

F00
Labels:



Animasi saat di scroll dibuka

Untuk catatan. Contoh script efek animasi. Dengan js program. Cukup panjang. Bisa dicoba diterapkan di blog. Saya sudah sudah mencoba dengan program javascript yang jauh lebih sederhana, efeknya sama juga. Jadi yang ini untuk di jadikan sebagai caatan dan pelajaran saja.

Trigger a CSS animation on scroll

Read the tutorial about 'reveal animations on scroll'

...scroll down...











































Other animation

Block 1

Block 2

Block 3

Read the tutorial
Read more »
Labels:



Membuat Formulir Order dengan Kirim Menuju Whatsapp

Kirim ke Whatsapp 
 

Labels:



Membuat Related Post di Blogspot

Kode berikut sebagai catatan saja, karena saya sudah membuat dengan script yang lebih sederhana. Tentu saja dari inspirasi salah satunya adalah kode seperti ini. Contoh-contoh code seperti ini, banyak beredar di internet. Kita bisa mengambil dan mencobanya di blog yang kita buat. Kita juga bisa mengambil code dari website dimana saja, selama website itu terbuka, kita bisa melihat script-script yang dipasang di halaman yang sedang kita buka. Kemudian bisa dicopy, diedit dan dikembangkan untuk blog kita.


 <style>
#rp h4{border-top:1px solid #333;border-bottom:1px solid #333;color:#333;font-size:14px;letter-spacing:0;line-height:20px;margin:0 0 5px;padding:5px 10px}
#rs{margin:0;padding:0px;line-height:16px}
#rs:hover{background:none}
#rs ul{list-style-type:none;margin:0;padding:0}
#rs li{width:48%;float:left;margin:10px 1%;padding:0;height:106px;list-style:none;overflow:hidden}
#rs .news-title{display:block;font-weight:bold!important;font-size:80%}
#rs .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size:90%}
#rs img{float:left;margin:6px;border-radius:5px}
@media (max-width:600px){
#rp h4{font-size:12px;line-height:15px}
#rs li{width:100%;float:none;margin:3px 0;height:67px}
#rs .news-text{font-size:80%;text-align:left;}
#rs img{margin:3px 6px 0 0;width:60px}}
</style>
 
<script type='text/javascript'>//<![CDATA[
var maxposts = 6;
var numchars = 150;
var rnum = 0;
var morelink = "..";
var judul=new Array();
var urls=new Array();
var cuplikan=new Array();
var gambar=new Array();
function saringtags(a,b)
    {
    var c=a.split("<");
    for(var i=0;
    i<c.length;
    i++)
        {
        if(c[i].indexOf(">")!=-1)
            {
            c[i]=c[i].substring(c[i].indexOf(">")+1,c[i].length)
        }
    }
    c=c.join("");
    c=c.substring(0,b-1);
    return c
}
function relposth(a)
    {
    for(var i=0;
    i<a.feed.entry.length;
    i++)
        {
        var b=a.feed.entry[i];
        judul[rnum]=b.title.$t;
        postcontent="";
        if("content"in b)
            {
            postcontent=b.content.$t
        }
        else if("summary"in b)
            {
            postcontent=b.summary.$t
        }
        cuplikan[rnum]=saringtags(postcontent,numchars);
        if("media$thumbnail"in b)
            {
            postimg=b.media$thumbnail.url
        }
        else
            {
            postimg="https://2.bp.blogspot.com/-G8DAbYIvyEU/UczszOe3BAI/AAAAAAAAFMw/560vD3-PAyc/s18/ayosenyum.gif"
        }
        gambar[rnum]=postimg;
        for(var k=0;
        k<b.link.length;
        k++)
            {
            if(b.link[k].rel=='alternate')
                {
                urls[rnum]=b.link[k].href;
                break
            }
        }
        rnum++
    }
}
function contains(a,e)
    {
    for(var j=0;
    j<a.length;
    j++)if(a[j]==e)return true;
    return false
}
function relatpost()
    {
    var a=new Array(0);
    var b=new Array(0);
    var c=new Array(0);
    var d=new Array(0);
    for(var i=0;
    i<urls.length;
    i++)
        {
        if(!contains(a,urls[i]))
            {
            a.length+=1;
            a[a.length-1]=urls[i];
            b.length+=1;
            b[b.length-1]=judul[i];
            c.length+=1;
            c[c.length-1]=cuplikan[i];
            d.length+=1;
            d[d.length-1]=gambar[i]
        }
    }
    judul=b;
    urls=a;
    cuplikan=c;
    gambar=d;
    for(var i=0;
    i<judul.length;
    i++)
        {
        var e=Math.floor((judul.length-1)*Math.random());
        var f=judul[i];
        var g=urls[i];
        var h=cuplikan[i];
        var j=gambar[i];
        judul[i]=judul[e];
        urls[i]=urls[e];
        cuplikan[i]=cuplikan[e];
        gambar[i]=gambar[e];
        judul[e]=f;
        urls[e]=g;
        cuplikan[e]=h;
        gambar[e]=j
    }
    var k=0;
    var r=Math.floor((judul.length-1)*Math.random());
    var l=r;
    var m;
    var n=document.URL;
    while(k<maxposts)
        {
        if(urls[r]!=n)
            {
            m="<li class='news-title clearfix'>";
            m+="<a target='_blank' href='"+urls[r]+"' rel='nofollow' target='_top' title='"+judul[r]+"'><img src='"+gambar[r]+"' />";
            m+=""+judul[r]+"";
            m+="<span class='news-text'>"+cuplikan[r]+".."+morelink+"</a><span class='news-text'>";
            m+="</li>";
            document.write(m);
            k++;
            if(k==maxposts)
                {
                break
            }
        }
        if(r<judul.length-1)
            {
            r++
        }
        else
            {
            r=0
        }
        if(r==l)
            {
            break
        }
    }
}
//]]></script>

<div id='rp' style='margin-top:23px;'>
<h4 style='color:#000; text-shadow:none; border-radius:12px; border:0px solid #ddd; border-top-width: 3px;'>Proyek Perumahan Syariah: </h4>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relposth&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>
<b:else/>
<script expr:src='&quot;/feeds/posts/default/-/Ahsana%20Mojokerto?alt=json-in-script&amp;callback=relposth&amp;max-results=6&quot;' type='text/javascript'/>
</b:if>
<ul id='rs'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>


Labels:



Menu khusus untuk Mobile Navigasi

Vertical Mobile Navbar

This example demonstrates how a navigation menu on a mobile/smart phone could look like.

Click on the hamburger menu (three bars) in the top right corner, to toggle the menu. 


Labels: ,



Membuat Mobile Navigation Menu

Logo | | |

Vertical Mobile Navbar

This example demonstrates how a navigation menu on a mobile/smart phone could look like.

Click on the hamburger menu (three bars) in the top right corner, to toggle the menu. 


Labels:



Menyisipkan div ke dalam div

Berikut kodenya :

document.getElementById("lebar").insertAdjacentHTML("afterend","Teks yang disisipkan");



Berikut hasil contoh penerapannya:

#player

GeeksforGeeks

This is the text which has already been typed into the div





DepoAir

  • Pupuler
    • Labels: ,



    Membuat Link Popup Video Youtube

    Tinggal copas kode html, css, dan javascript berikut ini. Sesuaikan yang diberi tanda warna merah. Semoga berguna. dan sebagai catatan saat diperlukan dikemudian hari. Jika ada kesulitan, silakan menulis di komentar.


     <style>
    #myBtn{cursor:pointer;border-width:0;font-weight:bold;background-color:transparent;color: #6fa5b8}
    #myBtn:hover{color: #2fa5a8}
    .modal{display:none;position:fixed;z-index:1;padding-top:calc(50vh - 305px);left:0;top: 0;
      width: 100%;height: 100%;overflow: auto; background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
    .modal-content{margin:auto;width:720px;max-width:100%;}
    .close {color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;}
    .close:hover,.close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer}
    </style>


    Saksikan mereka yang telah sukses membangun masa depan bersama Ahsana Property: <a title="klik untuk membuka Video"><button id="myBtn"> Selebrasi Akbar STB 300++ </button></a>
    <div id="myModal" class="modal">
    <div class="modal-content">
    <span class="close">&times;</span>
    <p><iframe width="720" height="405" src="https://www.youtube.com/embed/videoseries?list=PLORQNvDdGpeHvr2g12XjCbpy8FrU20Ult" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
    </div>
    </div>


    <script>
    var modal = document.getElementById("myModal");
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];
    btn.onclick = function() {
      modal.style.display = "block";
    }
    span.onclick = function() {
      modal.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
    </script>

    Contoh hasil script di atas, bisa dengan mencoba link sebagai berikut:


    Contoh link video youtube dengan menampilkan popup saat diklik:



    .... diklik: Contoh Youtube popup
    Labels: ,



    Membuat Hide Menu on Scroll

    Langsung saja, berikut kodenya, 


    HTML :

    <div id="hi1">
      <a href="#">Top</a>
      <a href="#blog-pager">Video</a>
      <a href="#footer">Footer</a>
      <a href="#PopularPosts1">Popular</a>
    </div>


    Script :
    <script>
    var prevS = window.pageYOffset;
    window.onscroll = function() {
    var currentS = window.pageYOffset;
      if (prevS > currentS) {
        document.getElementById("hi1").style.opacity = "0.99";
      } else {
        document.getElementById("hi1").style.opacity = "0.02px";
      }
      prevS = currentS;
    }
    </script>



    CSS :

    <style>
      body{margin-top:56px}
      html{scroll-behavior:smooth}
    #hi1 {
      background-color: #333;
      position: fixed;
    bottom:0;left:0;
      width: 100%;
      display: block;
      transition: top 0.3s;
    }

    #hi1 a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 15px;
      text-decoration: none;
      font-size: 17px;
    }

    #hi1 a:hover {
      background-color: #ddd;
      color: black;
    }
    </style>



    Dan ini contoh hasilnya:

    .

    !

    .

    .

    .

    Read more »
    Labels: ,



    Tab Produk Perumahan Syariah

    Read more »



    Membuat TAB menggunakan CSS dan JavaScript

    Tabs 

    Click on the buttons inside the tabbed menu:



    Tipe Property
    Rumah Masjid Besar
    Rumah ibadah warga muslim di perumahan

    Rumah Tahfidz
    Terintegrasi Rumah Tahfidz Al-Qur'an

    Taman Hijau
    4 Letak Taman

    One Gate System
    One Gate System (Akses keluar masuk perumahan 1 jalur)

    Security
    Safety Security 24 Jam

    CCTV
    Full CCTV



    Lokasi Strategis Lokasi dekat dengan pusat perekonomian, pendidikan, perkantoran dan bernilai investasi yang terus tumbuh.

    Bangunan Berkualitas dan Bergaransi
    Anda berhak mendapatkan garansi siap huni untuk struktur bangunan, garansi umum bangunan, dan garansi kebocoran

    Harga Terjangkau
    Selain harga yang terjangkau, Ahsana menawarkam skema pembayaran yang fleksibel.

    Garansi Struktur Konstruksi (Selama 15 TAHUN)
    Garansi kerusakan pondasi yang menyebabkan rumah roboh. Kerusakan kolom yang menyebabkan rumah roboh. Kerusakan sloof yang menyebabkan rumah roboh. Kerusakan pada struktur atap yang menyebabkan atap roboh

    Garansi Dinding & Lantai (Selama 1 Tahun)
    Kerusakan dinding yang menyebabkan dinding retak dan kerusakan lantai yang menyebabkan lantai retak.

    Garansi Atap (Selama 1 tahun)
    Kerusakan pada konstruksi atap yang menyebabkan atap bocor

    Garansi Umum (Selama 6 Bulan)
    Cat mengelupas, Sanitasi macet, Lampu tidak menyala/konslet, dan Pintu mengembang/menyusut sehingga tidak bisa ditutup.

    Garansi 100% Uang Kembali
    Ketika Anda tidak jadi beli

    Hunian Syar’i
    Lingkungannya Islami, Pilihan Keluarga-Keluarga yang Peduli dengan Masa Depan Generasi Terbaik.

    7 Tipe Rumah, yaitu
    Tipe 100/102
    Tipe 75/102
    Tipe 65/75
    Tipe 60/78
    Tipe 45/78
    Tipe 45/72 (1 Lantai)
    Tipe 36/66 (1 Lantai)


    Lokasi Perumahan berada di Jl. Sidodadi VII No.5 Nambangan Kidul, Manguharjo, Kota Madiun, Jawa Timur 63161. Lokasi yang sangat strategis di Kawasan Kota Madiun dengan sarana sosial yang lengkap seperti: Perbelanjaan, Pendidikan, Kesehatan, Hiburan, Kawasan Industri, juga selain memberikan kemudahan-kemudahan fasilitas umum sekaligus menjadi tempat tinggal favorit.
    Labels: ,



    Mencarikan order pekerjaan

     BANTU ORDER

    Oleh:Joko Intarto 

    Sahabat saya tiba-tiba mengirim pesan pendek. Ia mengajak ngobrol menggunakan video whatsapp. Tak biasanya ia begitu. Ada apa?

    Rupanya ia hanya ingin memberi tahu penampilan barunya, ia memperlihatkan sebuah botol plastik dengan selang yang masuk ke dalam perutnya.

    Katanya, itu alat cuci ginjal yang murah. Bisa dipakai di rumah. "Saya sakit gagal ginjal," kata Anityo Pertiwanggono.

    Terus terang saya prihatin dengan kondisi Anityo. Dua tahun lalu ia masih menyetir mobil sendiri ke studio Jagaters di Tebet. Seharian ia di sana. Kok sekarang kondisinya jauh berbeda?

    Sore itu, Anityo ingin berdiskusi dengan saya, bagaimana cara menolong perekonomian keluarga penderita gagal ginjal. "Mereka ibarat pepatah sudah jatuh tertimpa tangga kecebur got pula,"

    Setelah mengalami gagal ginjal, yang kerja swasta umumnya tidak diperpanjang kontrak. Hal itu menimbulkan ekses yang panjang. Sampai ke masalah perawatan kesehatan dan periuk dapur. Bahkan hingga nasib pendidikan anak-anaknya. Padahal kebutuhan mereka justru meningkat karena harus membeli obat dan perawatan. 

    Bagaimana solusinya? "Bisakah Lazismu memberikan bantuan modal kerja untuk keluarga penderita gagal ginjal?" tanya Anityo.

    Saya tidak segera menjawab. Prinsipnya bisa saja. Tapi eksekusinya perlu waktu. Sebab kemampuan Lazismu terbatas. Sebagian besar program distribusi juga sudah direncanakan tahun lalu.

    Akhirnya saya menawarkan usul agar bisa ketemu penderita lain secara online. Saya hanya ingin tahu lebih banyak potensi apa yang masih bisa diangkat untuk membantu mereka. 

    Seminggu kemudian pertemuan virtual itu berlangsung selama dua jam. Sekitar 30 orang hadir.

    Dari pertemuan itu saya menangkap sebuah potensi: Membantu para penderita gagal ginjal bisa dilakukan melalui program pemberdayaan ekonomi dengan sasaran keluarga yang sehat.

    Pertanyaan selanjutnya, bidang usaha apa yang mereka kuasai? Minimal diminati? Kuliner ternyata paling banyak peminat.

    Oke. Bidang usaha sudah ditemukan. Bagaimana model bisnis yang akan dijalankan? Dari diskusi, model bisnis menjurus pada jasa penyediaan makanan atau katering.

    Katering? Siapa segmen pasarnya? Usaha katering begitu banyak. Harus bisa menemukan ceruk pasar yang persaingannya tidak terlalu berat.

    Ketemulah segmen pasar para donatur panti asuhan. Anityo dan kawan-kawan siap melayani order semua donatur untuk menyediakan makanan siap santap bagi semua penghuni panti asuhan di seluruh Jakarta.

    Gagasan saya tampung dulu.

    Muncul lagi ide lain. Menggarap pasar qiqah. Pasar ini spesifik. Hanya keluarga muslim. Setiap anak laki-laki aqiqahnya 2 ekor kambing. Kalau perempuan 1 ekor kambing.

    Lagi-lagi ide itu saya tampung.

    Tiba-tiba ada peserta yang nyeletuk, "Memotong kambing qurban dan memasaknya untuk anak-anak panti asuhan kami juga bisa," katanya.

    Tuing! Otak saya yang beku mendadak encer. "Oke, saya carilah bandarnya," jawab saya.

    Seminggu berlalu. Kabar baik belum kunjung ada. Beberapa kali Anityo menelepon. Saya tidak berani mengangkat. 

    Pekan lalu Mas Eddy Muktiono, direktur Lazismu tiba-tiba menelepon. Ia mengajak diskusi soal eksekusi qurban. "Kami kesulitan mendapatkan vendor yang bisa memotong kambing, memasak dan mengirimkan ke panti asuhan di Jakarta," kata Mas Eddy.

    Pucuk dicintai ulam pun tiba. Begitu kata pepatah. Inilah yang saya tunggu-tunggu. Peluang itu datang sendiri. Lazismu setuju memberikan pekerjaan qurban 21 ekor kambing kepada komunitas keluarga penderita gagal ginjal.

    Proses selanjutnya berjalan mulus. Begitu dana ditransfer Lazismu, Anityo cs bergerak cepat. Hari ini sudah mendapat kambing. Bahkan sudah ujicoba resep daging kambing.

    Pada hari qurban dan tasyrikh, Anityo Cs akan menyiapkan paket masakan daging kambing ke berbagai panti asuhan di Jakarta.

    Dari rumah ibu saya di Grobogan, Jawa Tengah, saya bisa merasakan kebahagiaan keluarga penderita gagal ginjal yang akan memulai proyek kateringnya. 

    Tidak harus punya uang untuk membantu sesama. Mencarikan order pekerjaan pun bisa.(jto) 


    Labels:



    Goals PENTING & Jangan Gagal & cara Berhasil

     Kenapa Goals (Tujuan) Penting?

    Untuk mengendalikan hidup

    agar mendapatkan hasil maksimum

    Supaya fokus 

    Menjadikan sebagai pertanggungjawaban

    Untuk memotivasi


    Agar Goals berhasil, jangan sampai:



    Formula GOALS 



    saya ingin ..... dgn tolok ukur ....
















    Labels:



    Catatan Sementara

     
    © - Catatan Afandi Kusuma | Buku.suwur | Furniture.Omasae | JayaSteel | OmaSae | Alat Pesta + Wedding | Galvalum | DepoAirIsiUlang | Seluruh Arsip