Tampilkan postingan dengan label Design. Tampilkan semua postingan
Tampilkan postingan dengan label Design. Tampilkan semua postingan

Background Image Generator Gratis

Gambar latar belakang adalah salah satu faktor yang paling penting dalam desain besar. Saya menggunakan Photoshop untuk membuat desain latar belakang yang menakjubkan untuk klien saya, yang membutuhkan waktu dan energi. Kadang saya perlu beberapa solusi sederhana untuk gambar latar belakang dan mengubah saya untuk latar belakang online ini gambar generator.

Memasang Slide Show di template Anda


Memasang Slide Show di template Anda
1. Masuk ke Akun/dashboard Anda
2. Pilih Template, lalu Edit HTML.
3. Backup dulu untuk menjaga kemungkinan buruk.
4. Temukan kode seperti ini: ]]> </skin>
    5. Copy dan paste-kan code berikut sebelum kode ]]> </skin>

Memasang Slide show di blog.

Background di Indesign

Buat Background di InDesign Banyak dokumen cetak manfaat dari penggunaan latar belakang untuk menambahkan dampak visual atau menekankan unsur-unsur desain individu.
Latar belakang dapat ditambahkan ke frame grafis grafis atau dibuat dengan menggambar bentuk atau menyesuaikan opacity dari foto.

Membuat banner

Anda dapat membuat banner Like This

duniamemangmaya.blogspot.com
Jika Anda ingin membuat banner flash dengan efek animasi dan pada saat yang sama dengan kerning yang normal - Selamat Datang! Di sini Anda dapat membuat banner SWF kurang dari 5 menit dengan gelombang efek teks kilat shock. Anda tidak perlu keahlian untuk membuat animasi flash dengan SWF-generator penyihir. Semua flash banner dengan efek teks dapat membuat sangat mudah dalam beberapa langkah mudah, dan tidak memerlukan perangkat lunak yang diinstal pada laptop atau tablet PC.

Anda dapat membuat banner dengan ukuran 728x90 spanduk penuh atau coose klasik ukuran banner 468x60 piksel. Jika Anda perlu membuat custom sundulan ukuran atau banner flash ponsel, Anda dapat mengatur ukuran yang dibutuhkan dengan ukuran Custom pembuat banner. Untuk Lebih Jelas Lagi Bisa Kunjungi Disini

Memasang Picture Slideshow

Memasang Picture Slideshow

Untuk demo Ini gunakan template yang lebar postingannya kurang lebih 900px. Buat anda yang memiliki lebar kolom post lebih atau kurang dari 660px silahkan disesuaikan.
  1. Login dulu di blogger.
  2. Masuk ke Rancangan >> Edit HTML.
  3. Jangan lupa klik Expand Template Widget karena akan membuat anda jadi pusing dengan kode yang panjang.                                                                                                                          4.Copy paste kode berikut diatas kode ]]></b:skin>
    1. /* SLIDESHOW */   
      
    2. #slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-20pxmargin-right:10pxpadding:0#s3slider{width:660px;height:660px;position:relative;overflow:hidden}   
    3. #s3sliderContent{width:660px;position:absolute;top:0;margin-left:0}  
    4. .s3sliderImage{float:left;position:relative;display:none}   
    5. .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:660px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}   
    6. .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}   
    7. .s3sliderImage span a.featured-title:hover{color:#999}   
    8. .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}   
    9. .s3sliderImage span a:hover{color:#555}  
  4. Kemudian copas kode berikut diatas kode </head>
  5. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
    <script type='text/javascript'>
    <!--//--><![CDATA[//><!--
    (function($){
        $.fn.s3Slider = function(vars) {     
            var element     = this;
            var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
            var current     = null;
            var timeOutFn   = null;
            var faderStat   = true;
            var mOver       = false;
            var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
            var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
            items.each(function(i) {
                $(items[i]).mouseover(function() {
                   mOver = true;
                });
                $(items[i]).mouseout(function() {
                    mOver   = false;
                    fadeElement(true);
                });
            });
            var fadeElement = function(isMouseOut) {
                var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
                thisTimeOut = (faderStat) ? 10 : thisTimeOut;
                if(items.length > 0) {
                    timeOutFn = setTimeout(makeSlider, thisTimeOut);
                } else {
                    console.log("Poof..");
                }
            }
            var makeSlider = function() {
                current = (current != null) ? current : items[(items.length-1)];
                var currNo      = jQuery.inArray(current, items) + 1
                currNo = (currNo == items.length) ? 0 : (currNo - 1);
                var newMargin   = $(element).width() * currNo;
                if(faderStat == true) {
                    if(!mOver) {
                        $(items[currNo]).fadeIn((timeOut/6), function() {
                            if($(itemsSpan[currNo]).css('bottom') == 0) {
                                $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                    faderStat = false;
                                    current = items[currNo];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            } else {
                                $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                    faderStat = false;
                                    current = items[currNo];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            }
                        });
                    }
                } else {
                    if(!mOver) {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                $(items[currNo]).fadeOut((timeOut/6), function() {
                                    faderStat = true;
                                    current = items[(currNo+1)];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            });
                        } else {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                    faderStat = true;
                                    current = items[(currNo+1)];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            });
                        }
                    }
                }
            }
            makeSlider();
        };
    })(jQuery);
    //--><!]]></script>
    <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;#s3slider&#39;).s3Slider({
    timeOut: 4000
    });
    });
    </script>
  6. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan anda copas kode berikut setelah kode <div id='main-wrapper'>
  7. <div id='slider-holder'>
    <div id='s3slider'>
    <ul id='s3sliderContent'>
    <li class='s3sliderImage' style='display: list-item;'>
    <a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4Av29CxCl93Lb9hMvsjENbviQkSOOVsp94P4LNW-inrMtQVdXvkIwMFGdMXVzObRydoi4V5gvBVNeEQD_SCZi4J-eOATYWjNByKrDoHiTv8-1tnD8G1jfCjWpWqKudFXQ6a9eaMvu_s/s1600/NorahJones.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: block;'>
    <a class='featured-title block' href='LETAK LINK DISINI 1'>INI GAMBAR NORAH JONES</a><br/>
    Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb6VRxvHzaQtY5uxY9S8mhSfYL2JHHKKXGt7G2xgSLDE3XASzHRtnjE762WuvB_EOhrayKX44h6z1qbH-odxSkyRDpgbjKpVVvDegnub0nc4VW-dq5yM4vhyCb0S4mUKFyfn8KfgJQy_k/s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 2'>FOURPLAY</a><br/>
    Nggak usah dijelaskan udah ada tulisanya diatas
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKP2_bO48IllrEdDpYVGcqRTZPsw1jTSTrgMIZAXF2jxq6f6-CI1N28-_TCaiew-m706tNa-a2ZtmBcMJQgojdai4NEaCtRo0Y99oyYIla1XS2mmgReGwKKiP9FW4MMH7ZRPICrcY0thQ/s1600/andien.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 3'>MBAK ANDIEN</a><br/>
    Ini orangnya yang..............
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsii1kjkC6Nf6LB81EMMtNkpfUhJCiKCocOt43Du3gbuc-9T-aKBijCzzMDvdtDZhzGR3mTWb1BdmGxa8pVCgLgOMTsBllZ1nQtNDfjvRvOzm_hOz1cTNFEDuGioE9u9JIrOCulAeHqI/s1600/Alanis-Morissette-2.JPG' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 4'>ALANIS MORISSETTE</a><br/>
    Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcB09UBlCbg9-3zo4B6Zln3qzq6YP8pDqBSd6C2zzRY_uX03AUIhJQ8Rpc2Aj7_nSvVgAoJayHJrct6E7QYVI0p3h0YdAl2S0PkUqa2SSFOTTa_1i2Q1AkSSH_PYEr2o5-b3pch21Klk8/s1600/Anne-Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 5'>WANITA CANTIK</a><br/>
    Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya....
    </span>
    </li>
    <li class='clear s3sliderImage'/>
    </ul>
    </div>
    </div>
  8. Simpan Template
  9. Keterangan :
  10. Perhatikan lebar 660px, silahkan sesuaikan saja dengan lebar post template anda.
  11. Perhatikan juga angka -20px pada kode css-nya, saya gunakan margin-left:-20px karena menyesuaikan dengan demo template yang saya gunakan. 
  12. Tulisan yang berwarna merah ganti dengan deskripsi tentang gambar anda.
  13. Kode yang berwarna biru adalah kode url untuk gambar yang sudah anda upload sebelumnya.
Gimana teman-teman, cukup panjang kan? Jangan khawatir, saya yakin teman-teman semua bisa melakukannya, semoga berhasil ya !

Edit CSS dalam Designer Template

Template Designer Blogger memungkinkan Anda untuk menyesuaikan hampir semua aspek penampilan blog Anda melalui penggunaan cascading style sheets (CSS). Untuk menambahkan potongan CSS kustom ke template Anda, buka tab Template dan klik Customize. Kemudian, tambahkan kode Anda ke lapangan yang berlokasi di Advanced | Tambah CSS tab. Perubahan yang Anda buat akan mencerminkan langsung di live preview di bawah editor