Desain Blog
Showing posts with label Desain Blog. Show all posts
Showing posts with label Desain Blog. Show all posts
Tulisan Membesar Ketika Disentuh

Tulisan Membesar Ketika Disentuh

12:52 AM 0
Ok kali ini saya akan memberikan sedikit tambahan pilihan desain yang bisa anda gunakan di blog, agar tidak bosan dengan tampilan dan menu yang itu-itu saja. Artikel kali ini tentang cara membuat tulisan link membesar ketika di sentuh. Disini saya ambil contoh link dari widget Label/Kategori.
Contohnya: Silahkan arahkan Mouse anda ke Tulisan di bawah ini.


Cara Membuatnya di blog :
  1. Silakan login ke blogger, dari halaman dasbor piih pengaturan tata letak.
  2. Lalu klik desainer template > tingkat lanjut > Tambakan Css.
  3. Lalu masukan kode berikut ini kedalamnya. Atau cari kode ]]></b:skin> dan masukan kode ini didalamnya.
    4. #Label2 a{
     font-weight:bold;
    Color:black;
    position:relative;
    display:inline-block;
    -o-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease}
    #Label2 a:hover{
    -o-transform:scale(1.4) translate(0px);
    -moz-transform:scale(1.4) translate(0px);
    -webkit-transform:scale(1.4) translate(0px);
    -o-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease}
  4. Terakir Terapkan ke blog, selesai.
 Keterangan:
#Label2 adalah kode widget yang saya gunakan, silahkan diganti dengan kode widget yang ingin anda gunakan agar tulisan link didalamnya bisa membesar ketika di sentuh.

Artikel diatas merupakan hasil utak-atik kode yang sudah berjalan, contohnya bisa dilihat di blog ini pada widget artikel tentang blog(jika masih saya gunakan). Silahkan arahkan mouse ke salah satu tulisan link yang ada di widget tersebut, maka link tulisan tersebut akan membesar.

Silahkan mencoba dan semoga berhasil.
    Cara membuat tulisan link berputar

    Cara membuat tulisan link berputar

    2:14 PM 0
    Artikel kali ini saya akan coba bagikan artikel desain blog tentang cara membuat tulisan link berputar di blog. Maksudnya adalah tulisan yang didalamnya tertanam link url dari alamat dari blo kita, akan berputar ketika di sentuh oleh mouse. Biasanya disebut dengan link hover style. Disini link hover style nya saya buat dengan efek berputar ketika disentuh mouse.

    Contohnya: coba arahkan mouse anda ke link tulisan berputar dibawah ini.


    Seperti contoh diatas, tulisan akan berputar ketika di sentuh oleh mouse. Sekarang, saya akan coba beri contoh penerapannya di blog. Seperti yang masih/pernah saya gunakan. Efek link hover berputar itu saya terapkan di link yang ada di widget blog. Contohnya coba lihat di widget label atau ketegori yang ada disebelah kiri blog ini(jika masih saya gunakan).

    Dan untuk cara membuatnya, silakan ikuti langkah-langkah dibawah ini.
    1. Silakan login ke blogger, dari halaman dasbor piih pengaturan tata letak.
    2. Lalu klik desainer template > tingkat lanjut > Tambakan Css.
    3. Lalu masukan kode berikut ini kedalamnya. Atau cari kode ]]></b:skin> dan masukan kode ini didalamnya.
      4. #Label1 a{
      font-weight:bold;
      Color:black;
      position:relative;
      display:inline-block;

      -webkit-transform-style:preserve-3d;
      -moz-transform-style:preserve-3d;
      transform-style:preserve-3d;

      -webkit-transition:all 300ms ease;
      -moz-transition:all 300ms ease;
      transition:all 300ms ease}

      #Label1 a:hover{
      -webkit-transform:rotate(-720deg);
      -moz-transform:rotate(-720deg);
      transform:rotate(-720deg)}
      Keterangan kode:
      • 300 itu adalah waktu berputarnya tulisan ketika disentuh mouse.
      • -720 kode ini digunakan untuk membuat tulisan berputar sebanyak 720 derajat atau 2x putaran melawan arah jarum jam. Jika ingin dibuat searah jarum jam, hapus saja tanda minusnya.
    4. Terakhir, klik terapkan ke blog. Selesai.
    Penjelasan sedikit tentang kode diatas, sebenarnya hanya dengan menggunakan kode singkat seperti dibawah ini.
    #Label1 a{
    font-weight:bold;
    Color:black;
    position:relative;
    display:inline-block;
    transform-style:preserve-3d;
    transition:all 300ms ease}

    #Label1 a:hover{
    transform:rotate(-720deg)}
    Itu sudah cukup untuk membuat tulisan pada link bisa berputar. Tapi, efek berputarnya hanya bisa di browser mozilla. Sedangkan di browser yang lain efek berputar itu tidak bisa berjalan. Karena itu di tambahkanlah kode -webkit-transform dan -moz-transition, agar efek berputar juga bisa berjalan di browser lain.

    Sehingga membuat kode-kode diatas agak sedikit panjang. Tapi tidak sulit mengatur waktu putar dan jumlah putarannya. Karena hanya mengganti angaka 300 untuk waktu, dan -720 untuk jumlah putaran. Ketiga-tiganya harus sama. contohnya:
    -webkit-transition:all 600ms ease;
    -moz-transition:all 600ms ease;
    transition:all 600ms ease;
    -webkit-transform:rotate(-360deg);
    -moz-transform:rotate(-360deg);
    transform:rotate(-720deg)
    Untuk pengaturan waktu semakin besar angkanya, maka akan semakin lama waktu berputarnya, sama juga dengan jumlah putaran. 360 untuk satu putaran 720 untuk 2 putaran. Bisa juga dibuat 90, jadi tulisan berputar tapi bergerak 90derajat.
    Ada kekurangan dari cara membuat tulisan link berputar ini, yaitu ketika mouse menyentuh bagian ujung dari tulisan. Maka rotasi putarnya menjadi tidak sempurna, terkadang seperi nyangkut2. Jadi harus disentuh di bagian tengah tulisan, maka tulisan akan berputar dengan baik.
    Contoh diatas itu hanya saya terapkan di bagian tulisan link yand ada di widget label. Bisa juga digunakan pada bagian yang lain, seperti bagian judul header kita buat berputar-putar saat disentuh mouse, sidebar dan juga bagian yang lain2nya. Silakan di coba sendiri, dan baca juga artikel tentang cara membuat link terbuka di tab baru. Masih berhubungan juga dengan link, dan juga artikel2 lainya. Semoga artikel diatas bisa bermanfaat untuk anda.

      Widget blog melayang setelah di scroll

      4:26 AM 0
      Artikel kali ini tentang widget blog melayang setelah halaman blog kita di scroll ke bawah. Dan akan kembali pada posisinya semula, jika halaman blog kembali di scoll ke atas. Widget tidak akan melayang atau mengambang jika halaman blog belum di scroll ke bawah.
      Widget blog melayang setelah di scroll
      Contohnya: Bisa dilihat di halaman blog ini, coba scroll ke bawah dan lihat pada widget Artikel Populer(jika masih saya gunakan). Widget tersebut akan melayang setelah widget mendekati halaman atas blog. Dan akan kembali seperti semula setelah halaman blog kembali di scroll ke atas.
      Posisi widget pada saat melayang dapat kita atur sesuai dengan keinginan kita. Untuk lebih jelasnya tentang cara membuat widget melayang setelah di scroll, silakan ikuti langkah-langkah dibawah ini.
      1. Silakan login ke blogger, dari halaman dasbor pilih pengaturan template.
      2. Dan klik edit HTML dan cari kode </body>
      3. Selanjutnya masukan kode berikut ini di atas </body>
        4. <script type='text/javascript'>
        $(window).scroll(function(){
        if ($(window).scrollTop() &gt;= 560){
        $(&#39;#PopularPosts1&#39;).css({position:&#39;fixed&#39;,top:30});
        } else {
        $(&#39;#PopularPosts1&#39;).css({position:&#39;relative&#39;,top:0});
        }
        });
        </script>
        Keterangan kode:
        • 560 Untuk mengatur jarak widget akan melayang, makdsudnya setelah halaman blog di scroll 560px ke bawah, maka widget baru akan melayang.
        • fixed code yang digunakan untuk membuat blog melayang.
        • top:30 posisi widget setelah di scroll 30px dari halaman atas blog.
        • relative dan top:0 agar widget kembali ke posisi semula, setelah halaman blog di scroll ke atas.
        • #PopularPosts1 kode id dari widget Artikel Populer. Silakan diganti dengan kode id dari widget yang akan dibuat melayang. Cara mencari kode id widget, lihat dibawah.
      4. Setelah itu save template. Dan buka salah satu halaman artikel blog kamu, jika belum berjalan, coba masukan kode berikut ini diatas </body>
        5. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
      5. Save template, selesai.
       Cara mencari kode id widget
      1. Tentukan widget mana yang akan di buat melayang, judul widgetnya apa?contoh: Artikel Populer.
      2. Lalu ke pengaturan template, klik edit html dan cari kode Artikel Populer,  Contoh kodenya seperti dibawah ini.
        3. <b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
      3. Kode merah PopularPosts1 itu adalah kode id dari widget Artikel Populer.
      Silakan diatur sesuai dengan yang kalian inginkan, saran saya widget yang akan dibuat melayang, sebaiknya letakan dibagian paling bawah sidebar, agar tidak menutupi widget2 yang lain. Kode script pada langkah 4 itu merupakan kode script yang paling ringan menurut saya, karena sudah saya bandingkan dengan kode script yang lain. Kode script diatas itu kira2 sekitar 51.0 kb, jadi tidak terlalu memberatkan loading blog. 
      Itulah sedikit cara desain blog agar lebih menarik yaitu dengan membuat widget melayang setelah di scroll. Untuk cara widget melayang yang lebih simpel, silakan baca di artikel fungsi fixed dan cara menggunakannya dan juga artikel membuat menu menempel di dingding blog. Semoga artikel diatas bisa bermanfaat untuk anda.

          Cara membuat tombol back to top

          10:19 AM 0
          Cara membuat tombol back to top atau kembali ke atas di blog, yang akan muncul ketika halaman blog di scroll kebawah. Letaknya berada di bawah sebelah kanan dan jika tombol itu di klik, maka halaman blog akan kembali keatas dengan pelan, dan tombol itu pun akan menghilang.

          Cara membuat tombol back to top
          Seperti contoh gambar diatas, gambar cicak itu akan keluar jika halaman blog sudah di scroll ke bawah dan akan kembali menghilang ketika halaman blog yang dibuka sudah diatas lagi. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.
          1. Silakan login ke blogger, dan pilih pengaturan template.
          2. Klik edit html dan cari kode </body>
          3. Lalu masukan kode berikut ini diatas </body>
            4. <div id='ScrollToTop'>
            <img alt='Kembali Ke Atas' height='68' src='https://lh3.googleusercontent.com/-DqAYBDzBDTc/UsG2Zlef7kI/AAAAAAAABos/HM8BLePVmwI/s148/ke%2520atas.png' title='Kembali Ke Atas' width='148'/>
            <figcaption>Kembali Ke Atas</figcaption>
            </div>

            <script type='text/javascript'>
            $(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
            else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
            return false})});
            </script>
          4. Selanjutnya cari kode ]]></b:skin> dan masukan kode berikut ini ke atasnya.
            5. #ScrollToTop{
            text-align:center;
            z-index:9999;
            position:fixed;
            bottom:40px;
            right:30px;
            cursor:pointer;
            display:none;
            opacity:0.7;
            padding-top:4px}

            #ScrollToTop:hover{opacity:1;}
            figcaption {
            text-align:center;
            color:white;
            text-shadow: 5px 5px 10px #000;
            font-weight:bold;
            font-size:10px;}
          5. Save template, dan coba buka salah satu halaman blog kamu. Lalu scroll ke bawah, sudah ada atau belum tombol back to top nya. Jika sudah silakan disave template.
          6. Jika Belum, coba masukan kode berikut ini diatas </head>
            7. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
          7. Lalu save template. Selesai.
          Keterangan kode langkah 3:
          • Tulisan ini Kembali Ke Atas bisa diganti dengan kata yang kamu inginkan.
          • Nilai 500 ini, fungsinya ketika halaman blog discroll ke bawah sebanyak 500px maka tombol back to top akan muncul.
          • Dan yang ini 700 fungsinya digunakan untuk mengatur kecepatan loading scroll ke atas, ketika tombol back to top ditekan.
           Keterangan kode langkah 4:
          • #ScrollToTop{ gunanya untuk mengatur posisi dan tampilan tombol back to top
          • #ScrollToTop:hover{ ini untuk mengatur gambar ketika disentuh mouse
          • figcaption { mengatur posisi dan warna dari tulisan Kembali Ke Atas.
            Jika ingin hanya menggunakan tulisan back to top tanpa gambar, ganti kode dari langkah 3 dengan kode dibawah ini.
            <div id='ScrollToTop'>Kembali Ke Atas</div>
            <script type='text/javascript'>
            $(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
            else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
            return false})});
            </script>
            Save template, selesai. Semoga bisa bermanfaat untuk anda.

            Membuat widget hanya tampil dihalaman tertentu

            1:26 AM 0
            Tips dan trik kali ini saya akan bagikan artikel tentang cara membuat widget hanya tampilan dihalaman tertentu di blog. Ada 4 cara yang akan saya bagikan, pertama membuat widget hanya tampil dihalaman awal blog saja. Kedua, membuat widget hanya tampil dihalaman posting.

            Ketiga, menampilkan widget dihalaman awal blog dan juga dihalaman Label Blog. Dan yang keempat adalah Menampilkan widget hanya tampil pada halaman URL yang ditentukan. Sebenarnya 4 cara tersebut menggunakan cara yang sama, hanya saja kode yang digunakan yang berbeda. Berikut caranya:
            Membuat widget hanya tampil dihalaman tertentu
            Disini widget yang akan dijadikan contoh adalah widget Follow by email.
            Pertama: Membuat widget hanya tampil/terlihat dihalaman awal blog saja
            1. Silakan login ke blogger, dan pilih pengaturan Template.
            2. Klik edit HTML dan cari kode follow by email(gunakan Ctrl+f untuk memudahkan pencarian).
              3. <b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'>
            3. Setelah ketemu Tambahkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dan juga kode </b:if> Contohnya:
              4. <b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'>
              <b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>
              <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
              <div class='widget-content'>
              ...................dan kode2 panjang lainnya..........
              <span class='item-control blog-admin'>
              <b:include name='quickedit'/>
              </span></b:if>
              </b:includable>
              </b:widget>
            4. Dan kode2 panjang lainnya itu maksudnya agar lebih pendek saja tampilannya di artikel ini. Kode aslinya lebih panjang. Setelah itu save template. Selesai.
            Kedua: Nah sekarang kebalikannya, membuat widget hanya tampil dihalaman posting atau artikel blog saja. Sedangkan dihalaman awal homepage blog widget tersebut akan hilang.
            1. Sama seperti cara yang pertama, hanya mengganti kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dengan kode berikut ini.
              2. <b:if cond='data:blog.pageType == "item"'>
            2. Save template, selesai.
            Ketiga: Menampilkan widget dihalaman awal blog dan juga dihalaman Label Blog.
            1. Sama seperti cara yang pertama, hanya mengganti kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dengan kode berikut ini.
              2. <b:if cond='data:blog.pageType != &quot;item&quot;'>
            2. Save template, selesai.
            Keempat: Menampilkan widget hanya tampil pada halaman URL yang ditentukan
            1. Sama seperti cara yang pertama, hanya mengganti kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dengan kode berikut ini.
              2. <b:if cond='data:blog.url == "Ganti dengan URL Halaman disini"'>
            2. Save template, selesai.
            Silakan dicoba keempat cara diatas, dan silakan baca juga artikel saya sebelumnya tentang cara menghilangkan widget dihomepage fungsinya sama dengan cara kedua seperti artikel diatas, hanya caranya saja yang berbeda. Dan juga artikel tentang membuat background berbeda dihalaman berbeda diblog. Atau Menghilangkan sidebar pada halaman tertentu. Semoga artikel diatas bisa bermanfaat untuk anda.
            Subscribe to: Posts (Atom)