Archive for February 2013

  • Notifikasi Sederhana dengan CSS3

    Read More
    0
    Hello Minna-san~ saya mau berbagi trik CSS lagi nih,Yaitu Notifikasi sederhana dengan css3,sebenarnya apasih fungsinya? awalnya juga notif ini saya gunakan untuk memberitahukan bahwa template hatsune miku sudah dapat didownload dan juga pemberitahuan bahwa template" saya sudah diupload semua ke hosting mediafire.nah karena saya cari" di google trik notifikasi yang cocok tidak ada,jadi saya membuat sendiri notifikasi ini yang merupakan hasil modifikasi dari trik "loading page dengan css3 animasi"
    .nah,apasih yang berbeda dengan trik loading page? bedanya,html dan css notifikasi ini pastinya lebih sederhana dan lebih minim penggunaanya,contohnya yang saya kurangi yaitu background rgba yang tadinya secara menyeluruh secara fullscreen,animasi loader/loading yang saya hapus.jadi yang tersisa hanyalah text dan background,serta css3 animasi agar setelah 10 detik,nofif ini akan menghilang secara otomatis.Oia,cssnya juga sudah saya rapihkan dari versi sebelumnya,jadi tidak akan bentrok dengan banner slider,loading page,dan content slider(karena dasar html dan cssnya sama 100%).
    Setting CSS'nyapun cukup flexibel,kamu bisa rubah ukuran notif,warna background,dll.untuk pengaturan posisinya akan saya jelaskan nanti dibawah.

    Screenshot



    CSS

    Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>


    #notifjo {
    right: 10px; /* posisi di paling kanan */
    top: 10px; /* posisi di paling atas */
    width: 320px; /* lebar notif */
    height: auto; /* tinggi notif otomatis */
    overflow: hidden;
    background: rgba(255,255,255,0.9); /* warna background */
    border-radius: 5px; /* nilai sudut bundar */
    border: 1px solid #ddd; /* garis batas luar */
    z-index: 999999;
    position: fixed; /* posisi melayang */
    -webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
    -moz-animation: fadeOutnotif 10s linear forwards;
    -o-animation: fadeOutnotif 10s linear forwards;
    -ms-animation: fadeOutnotif 10s linear forwards;
    animation: fadeOutnotif 10s linear forwards;
    }
    #notifjo a {
    display:block;
    text-decoration:none;}
    #notifjo span {
    display: block;
    padding: 15px 15px;
    pointer-events: none;
    text-align: left;
    float: left;
    }
    #notifjo span h2 {
    font-size: 12px; /* Ukuran text */
    line-height: 21px;
    color: #222; /* Warna text */
    font-weight: normal;
    letter-spacing: 0px;
    }
    /* Blog johanes djogzs.blogspot.com */
    @-webkit-keyframes fadeOutnotif {
    0% { opacity: 1;}
    10% { opacity: 1;}
    90% { opacity: 1; -webkit-transform: translateY(0px);}
    99% { opacity: 0; -webkit-transform: translateY(-30px);}
    100% { opacity: 0;}
    }
    @-moz-keyframes fadeOutnotif {
    0% { opacity: 1;}
    10% { opacity: 1;}
    90% { opacity: 1; -moz-transform: translateY(0px);}
    99% { opacity: 0; -moz-transform: translateY(-30px);}
    100% { opacity: 0;}
    }
    @-o-keyframes fadeOutnotif {
    0% { opacity: 1;}
    10% { opacity: 1;}
    90% { opacity: 1; -moz-transform: translateY(0px);}
    99% { opacity: 0; -moz-transform: translateY(-30px);}
    100% { opacity: 0;}
    }
    @-ms-keyframes fadeOutnotif {
    0% { opacity: 1;}
    10% { opacity: 1;}
    90% { opacity: 1; -moz-transform: translateY(0px);}
    99% { opacity: 0; -moz-transform: translateY(-30px);}
    100% { opacity: 0;}
    }
    @keyframes fadeOutnotif {
    0% { opacity: 1;}
    10% { opacity: 1;}
    90% { opacity: 1; -moz-transform: translateY(0px);}
    99% { opacity: 0; -moz-transform: translateY(-30px);}
    100% { opacity: 0;}
    }




    HTML

    Sedangkan untuk Kode Html ini diletakan dibawah kode <body>

    *jangan pernah katakan tidak ada <body>,karena setiap template blog/website pasti ada.
    kemungkinan template body anda menggunakan class,misal <body class='home blog'>

    <div id='notifjo'>
    <span>
    <h2><b>Notifikasi :</b>
    <p>1. Text Kamu.</p>
    <p>2. Naruto shippuden tamat.</p>
    <p>3. Gintama ceritanya mulai ngawur xD.</p>
    <p>4. Hello world.</p>
    </h2>
    </span>
    </div>


    Untuk menambah baris notif baru,tambahkan:

    <p>text kamu</p>

    di antara:

    <h2> .... </h2>







    1. Pengaturan posisi notifikasi.

    Untuk pengaturan Posisi notifikasi,kalian perhatikan css dibawah ini.

    Posisi top:10px berarti posisi notifikasi berada di paling atas dan right:10px yang berarti posisi notifikasi berada di paling kanan.jadi jika kamu ingin merubah posisinya,kamu juga harus merubah cssnya secara manual.misal (bottom,top dan right,left)

    #notifjo {
    ...
    ...
    right: 10px; /* posisi di paling kanan */
    top: 10px; /* posisi di paling atas */
    ...
    ...
    }

    Contoh :

    Atas,kanan.
    right: 10px;
    top: 10px;


    Bawah,kanan.
    right: 10px;
    bottom: 10px;


    Dan begitu juga seterusnya,tergantung anda ingin memposisikan dimana.
    top:atas
    bottom:bawah
    right:kanan
    left:kiri


    Sedangkan untuk nilanya yang saya berikan 10 px,yaitu jarak batas notifikasi terhadap browser anda,semakin besar nilai yang anda berikan,maka semakin besar pula notifikasi akan bergeser dari arah yang anda tentukan(left,right,bottom,top)




    Untuk setting lainya seperti background(menggunakan rgba color) baca disini, border-radius baca disini dan contohnya disini ,dan selebihnya dapat anda lihat pada comment css yang saya sertakan diatas.





    Baiklah,Sekian penjelasan saya mengenai Notifikasi sederhana dengan CSS3 yang saya buat sendiri,semoga bermanfaat minna-san~ arigatou gozaimasu~ :v


    Sebelum mencoba Trik ini,ada baiknya anda membaca kebijakan .

    http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html
    By : Unknown

    On :

  • Hatsune Miku Blogger Template

    Read More
    0
    Apa kabar sobat,tetap semangat membuat template, tidak tanggung" saya membuat video preview-nya juga saking niatnya~xD



    Video Preview
    HD: http://youtu.be/Bm-rNC9of-E
    DL: Download Video
    #Biar greget~xD


    Template kali ini bertema Hatsune Miku(Favorit saya~xD)(Karena saya rasa template yang dahulu kurang rapih),yang merupakan Hasil Redesign dan perkembangan dari template Metrominimalist .Dengan Design Warna Dasar Hijau cerah dan soft,dilengkapi dengan kotak search,rss,twitter dan facebook.style Post thumbnail yang sederhana,tetapi menggunakan hover efek,sehingga posting yang tadinya simple,menjadi unik dengan efek hover css3 animasinya yang soft juga.pada halaman postingnya,tidak jauh beda dengan template sebelumnya,tetapi yang berbeda yaitu related post pada template ini,menggunakan thumbnail yang sebenarnya saya temukan dari hasil browsing di google.dan ujung" sumbernya yaitu dte.web.id.Jadi Tolong jangan menanyakan ke saya ini itu tentang widget ini,tanyakan ke pembuatnya =__=" .related post yang ada di template ini sebelumnya juga sudah saya edit,sehingga mungkin akan sedikit berbeda dengan dte.web.id.

    Dan ternyata template ini tidak jauh beda dengan Template blog yui-indo,hampir mirip,tapi berbeda.kenapa mirip?
    ini juga dimaksudkan untuk menghindari dan mencegah beberapa oknum/pelaku kejahatan (lol) yang ingin melakukan aksi penjiplakan dan pencurian design template, entah kenapa template yui-indo menjadi most wanted =___="


    Contohnya:

    Jadi Oleh karena itu saya jawab saja disini :
    #Template yui-indo tidak untuk dibagikan / not for share. So,please don't be plagiarism.


    ScreenShot


    1. Pengaturan menu
    Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
    setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.


    Contoh:
    <li><a href='http://www.facebook.com'>Facebook</a></li>



    <ul class='dark_menu'>
    <li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
    <li data-role='dropdown'><a href='#'>About</a><ul>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    </ul></li><li data-role='dropdown'><a href='#'>Contact</a><ul>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    </ul></li>
    <li data-role='dropdown'><a href='#'>Download</a><ul>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    </ul></li>
    <li><a href='#'>Report</a></li>
    <li><a href='#'>Miku</a></li>
    </ul>

    2. Setting SEO/Meta tag

    setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
    *ganti text yang berwarna merah
    <meta content='deskripsi blog kamu' name='DESCRIPTION'/>
    <meta content='keyword blog kamu' name='KEYWORDS'/>


    3. Setting tanggal posting / mengatasi undefined.

    buka setting=> language and formating pada blog kamu seperti gambar dibawah ini.
    Lalu ikuti format tanggal posting seperti contoh gambar dibawah ini :



    Date header format:





    Timestamp Format





    Comment Timestamp Format





    4. Setting Social media : facebook, Twitter, Rss.
    *ganti url linknya
    <a href='http://feeds.feedburner.com/alamat feed rss'><div class='rssjo'/></a>
    <a href='http://twitter.com/username'><div class='twitterjo'/></a>
    <a href='http://www.facebook.com/halaman fan page facebook'><div class='facebookjo'/></a>


    Oia,berkaitan dengan Video Preview diatas,Template ini menggunakan 2 Sidebar,tetapi dijadikan menjadi 1 kolom.berdasarkan gambar layout dibawah ini,sidebar bagian atas tidak menggunakan Fitur Accordion/tutup-buka,sedangkan sidebar bagian bawah menggunaan fitur accordion/tutup buka widget.


    Tertarik dengan Template hatsune Miku Versi 2013 ini? silakan unduh template ini dan diterapkan pada blog anda,tapi ada baiknya untuk selalu membackup template anda sebelum menggunakan template ini.terima kasih.



    *Jika ada masalah pada sidebar yang tidak berfungsi accordion'a/tutup-bukanya,masalah umum selalu terletak pada javascriptnya.
    Solusi:
    download/ganti Js dibawah ini,lalu upload sendiri pada hostingan js kalian,misal di code.google.com atau https://sites.google.com

    https://sites.google.com/site/djogzs/js/accordion-menu.js






    update template 12-02-2013
    fix :
    -fix sidebar
    -add no image thumbnail
    -related post no image

    update template 16-05-2013
    -fix bullet and numbering post

    *Jika anda sudah menggunakan template ini,silakan download kembali,dan update template anda.terima kasih.

    Semoga bermanfaat untuk semuanya ^^ ,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyu minna-san~


    Note:
    -Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

    Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

    http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html


    By : Unknown

    On :

    • Popular Posts

    Blogger templates

    Copyright © - Dian's File

    Dian's File - Powered by Blogger - Designed by Johanes Djogan