29 Juni 2014

Cara Membuat Widget Slideshow Efek 3D Gallery

Cara Membuat Widget Slideshow Efek 3D Gallery - Membuat widget slideshow atau yang kita kenal dengan slider widget tidak begitu sulit jika kita mendesain sebuah tampilan gambar dengan efek slideshow, seperti cara membuat Efek Gambar 3D Dengan CSS Box Shadow pada artikel sebelumnya, saya menggunakan perintah onMouse hover untuk merotasi gambar slide, akan tetapi saat kita klik gambar tersebut, maka windows open akan mengakses URL gambar itu sendiri.

Bersumber dari sana, saya berpikir bagaimana jika saat gambar di KLIK yang terbuka adalah URL halaman posting, itu berarti Anda harus mengubah URL gambar dengan URL halaman posting, tetapi hal yang paling sulit adalah tentang bagaimana caranya menyisipkan URL posting ke dalam ImageFlow? (mohon bantuannya karena untuk membuat tutorial ini, saya 2 hari belum makan, hehe..!!).  Berpikir sejenak dengan setengguk jus alpokat kesukaan, saya terinspirasi pada tampilan widget headline news, yang menampilkan updatetan postingan secara berkala dengan efek MARQUEE, sehingga untuk Cara Membuat Widget Slideshow Efek 3D Gallery kali ini saya menggunakan perintah JQuery untuk menyimpan URL posting ke dalam atribut rel pada gambar, sehingga Saya bisa mengakses URL tersebut dan menyisipkannya ke dalam perintah window.open() seperti ini:

onClick = function() {
    window.open($(this).attr('rel'));
}

Dan berhasil, seperti:



DEMO SHOW



Beberapa kekecewaan saat berbicara tentang kecepatan muat halaman, butuh 10 detik untuk membuka 1 gambar, itu berarti kecepatan loading blog akan dipertaruhkan untuk membuat widget slideshow ini, terlebih efek yang saya gunakan dengan tampilan 3D desain gallery gambar, karena bagaimana jika kita menyisipkan sampai 100 posting, bisa dibayangkan Anda akan menunggu begitu lama. Memang, menggunakan JQuery pada ImageFlow merupakan sebuah pemborosan besar, terlebih jika kita berbicara tentang loading blog, jadi saya menyisipkan elemen <a> kedalam atribut alt gambar dengan mengganti jQuery diatas dengan perintah ini:

//mengambil elemen <a> yang diproduksi dari alt gambar
getElementId += '<img src="' + image + '" alt="&lt;a href=&#39;' + link + '&#39;&gt;' + title + '&lt;/a&gt;">';


Pada tombol DEMO SHOW diatas, saya menampilkan 30 URL posting sebagai contoh, dan saya sudah mencoba menampilkan 100 posting, dan kecepatan muat gambar tidak begitu berat (saatnya kita bilang "sempurna"). Beres sudah kekecewaan Anda tentang loading blog, kini saatnya menerapkan widget berikut pada blog Anda dengan tahapan sebagai berikut:

image gallery 3D


Baca juga - Widget Profil Penulis Dengan Background Blur Efek


TAHAP I
Edit Template, temukan kode ]]></b:skin>
Copy CSS berikut, selanjutnya letakkan di atasnya


.dg-container {width:100%;height:450px;position:relative}
.dg-wrapper {
  width:481px;height:316px;
  margin:0 auto;position:relative;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-perspective:1000px;
  -moz-perspective:1000px;
  -ms-perspective:1000px;
  -o-perspective:1000px;
  perspective:1000px;}

.dg-wrapper a {
  display:block;
  position:absolute;left:0;top:0;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcqmx3wETny7erSPCv5QOpK_c0QcbpdjcZjg1SyRQtDU9PbG73R8saJ9EvnzlpgaebsOE8sjVsqHlqa7vhTHZJOrjQVLc-YSdZ1uQ9fDkL3JmswurdukRaKIqmVF1NjvIc4MzTLw_pFBw/s1600/01gambar.jpg') no-repeat 0 0;
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;
  -webkit-box-shadow:0 5px 10px rgba(225,225,225,.5);
  -moz-box-shadow:0 5px 10px rgba(225,225,225,.5);
  box-shadow:0 5px 10px rgba(225,225,225,.5);
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;}

.dg-wrapper a.dg-transition {
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -ms-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;}

.dg-wrapper a img {
  display:block;margin:0;
  padding:41px 0 0 1px;
  border:none;outline:none;}

.dg-wrapper a .dg-caption {
  font:italic normal 16px/45px Helvetia;
  text-align:center;width:100%;
  height:45px;white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;display:none;
  position:absolute;bottom:-60px;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  box-shadow: inset 0 4px 0 0 rgba(225,225,225, 0.6);
  -webkit-border-radius:45px;
  -moz-border-radius:45px
  border-radius:45px;}

.dg-wrapper a.dg-center .dg-caption {display:block}
.dg-container .dg-nav {
  width:58px;position:absolute;
  z-index:1000;bottom:40px;
  left:50%;margin-left:-29px;}

.dg-container .dg-nav span {
  text-indent:-9000px;
  float:left;cursor:pointer;
  width:24px;height:25px;opacity:0.8;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgruVKwqGjWmcr_uHsCfhKUEJjbB1ZeFXgXiJ55w_SoBLXL5_CJ52qeK8-1LNE93QJFnBwUoqeQ1FJfjx2tnhgkyoeYVaYowBapu-6OZCP0AkrbaTzWmD17QNT81TxJXqRLqw1B7FIFXrE/s1600/arrows.png') no-repeat 0 0;}
.dg-container .dg-nav span:hover {opacity:1}
.dg-container .dg-nav span.dg-nav-next {
  background-position:100% 0;margin-left:10px;}

.dg-caption-date:before,
.dg-caption-comment:before {content:" - "}
.dg-caption-comment {display:none}


TAHAP II
Perhatikan kode yang saya beri tanda, jika pada Template Anda sudah menggunakan perintah jQuery yang sama, abaikan kode tersebut atau hapus saja. Selanjutnya Ke tata letak, pilih gadget diatas halaman posting, copy kode berikut, letakkan pada halaman.

<section id="dg-container" class="dg-container">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var gallery_config = {
    url: 'http://URL-Anda.blogspot.com',
    numPost: 3,
    labelName: null,
    monthArray: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: false,
    containerId: 'dg-container',
    slider: {
        itemWidth: 480,
        itemHeight: 260,
        prevText: '&lt;',
        nextText: '&gt;',
        current: 0,
        autoplay: false,
        interval: 2000
    }
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-3d-gallery.js"></script>


Kesuksesan itu bukan milik seseorang, orang yang diam dan kurang mengerti akan hal sekalipun akan dapat meraih kesuksesan jika mau berbagi dan belajar.
Semoga tutorial kali ini dapat memberikan manfaat buat sahabat semua, dan akhir kata saya ucapkan Terimakasih.

25 Juni 2014

Tampilan Daftar Menu Terbaru Model Rolling Top

Gambar menu navigasi

Tampilan Daftar Menu Terbaru Model Rolling Top - Untuk menyimpan beberapa file artikel penting, akan lebih efektif jika kita menyusunnya serta meletakkannya dalam tataan daftar menu navigasi yang terdapat pada blog tersebut, dengan begitu semua informasi yang sudah Anda rangkum pada sebuah artikel dapat dengan mudah ditemukan, baik oleh Anda maupun oleh pengunjung setia Anda. Tidak jauh berbeda dengan tampilan menu navigasi pada umumnya, tampilan daftar menu kali ini terinspirasi saat Membuat Link Hover Efek Rolling Right, sehingga terpikir ingin mencoba bagaimana jika efek rolling tersebut di desain ulang untuk membuat tampilan Daftar Menu Navigasi Model Rolling Top seperti ini:




DEMO SHOW



Umumnya untuk mendapatkan efek seperti ini, biasanya menggunakan perintah javaScript, tetapi untuk tutorial kali ini Anda tidak memerlukannya, karena saya sendiri tidak dapat menjamin apakah load speed akan berpengaruh saat halaman terbuka jika Anda melibatkan penggunaan javaScript. Untuk membuat Daftar Menu Terbaru kali ini, saya menggunakan pengaturan hanya pada elemen CSS saja tanpa Script seperti ini:


#rolling-nav {
  background:#660000;height:54px;
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;text-transform:uppercase;}

#rolling-nav ul {
  height:50px;margin:-1.3em 0px;
  padding:0px 0px;overflow:hidden;}

#rolling-nav li {
  float:left;display:inline;
  list-style:none;margin:0px 0px;
  padding:0px 0px;}

#rolling-nav a,
#rolling-nav a:before {
  display:block;margin:0px 0px;
  padding:0px 30px;line-height:50px;
  color:white;text-decoration:none;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  -webkit-transition:all 0.3s rollingmenu ease-in-out;
  -moz-transition:all 0.3s rollingmenu ease-in-out;
  -ms-transition:all 0.3s rollingmenu ease-in-out;
  -o-transition:all 0.3s rollingmenu ease-in-out;
  transition:all 0.3s rollingmenu ease-in-out;}

#rolling-nav a:hover {margin-top:-50px;margin-bottom:1px;}
#rolling-nav a:before {
  content:attr(data-clone);
  position:absolute;
  top:100%;left:0px;display:block;
  background-color:#38f;
  background-image:-webkit-linear-gradient(top, #ddd, #38f);
  background-image:-moz-linear-gradient(top, #ddd, #38f);
  background-image:-ms-linear-gradient(top, #ddd, #38f);
  background-image:-o-linear-gradient(top, #ddd, #38f);
  background-image:linear-gradient(top, #ddd, #38f);
  font-weight:bold;color:#111;}



Dimana Anda meletakkan kode CSS diatas.?
Jika Blog Anda sudah terdapat daftar menu navigasi, sudah pasti elemen CSS diletakkan pada kode ]]></b:skin> atau <style> yang terdapat pada pengaturan HTML Template Anda. Disini kita menggunakan satu daftar menu saja yang aktif, jadi jika Anda ingin mencoba merubah tampilan daftar menu yang ada dengan model rolling top seperti ini, hapus CSS sebelumnya lalu gantikan dengan kode CSS diatas. Selanjutnya tahap akhir penggunaan HTML sebagai berikut:


<nav id="rolling-nav">
<ul>
<li><a href="/" data-clone="Home">Home</a></li>
<li><a href="/" data-clone="Daftar&nbsp;Isi">Daftar Isi</a></li>
<li><a href="/" data-clone="Profile">Profile</a></li>
<li><a href="/" data-clone="Comments">Comments</a></li>
<li><a href="/" data-clone="Contact">Contact</a></li>
</ul>
</nav>


Agar daftar menu yang sudah ada pada blog Anda tidak hilang, cukup ganti id navigasi sebelumnya dengan id="rolling-nav" seperti diatas, agar lebih jelasnya Anda boleh pelajari artikel sebelumnya tentang Peletakan Serta Cara Mendesain Menu Navigasi Blog.

Jika Ada yang kurang dimengerti, jangan tanyakan pada diri sendiri, karena saya tidak tahu apa yang Anda pikirkan, hehe..!!
Terimakasih.

23 Juni 2014

Perpindahan Slide Gambar Tanpa Lompatan

Perpindahan Slide Gambar Tanpa Lompatan - Gambar pada blog hakikatnya untuk menerangkan sebuah karya tulisan yang Anda ceritakan dalam sebuah artikel, setelah sekian lama tidak menyapa sahabat semua pecinta SAHABAT BLOGGER 77, dipertemuan kali ini saya ingin memberikan sedikit pembahasan tentang cara mendesain Perpindahan Slide Gambar Tanpa Lompatan. Tutorial kali ini, merupakan hasil pembaharuan dari artikel saya sebelumnya tentang Efek According Pada Gambar Dengan Perintah Hover, yang mana untuk perpindahan gambar saya menggunakan perintah hover, cukup Anda lintasi gambar dengan panah mouse Anda, maka gambar akan berpindah dari gambar satu dan seterusnya.

Untuk slide gambar kali ini, saya akan coba menjawab request mas +Ibrahim M.Pd.I  yang ingin dibuatkan tutorial tentang cara mengubah perpindahan slide gambar dengan perintah KLIK, sehingga untuk melihat gambar berikutnya saya menggunakan perintah pointer mouse dengan sistem klik, karena beliau ingin tampilannya seperti slider efek, saya menggabungkan tombol pemicu untuk pengaturan perpindahan gambar yang saya letakkan tepat dibawah tampilan gambar seperti ini:


Image Slide Effect


Baca juga - Membuat Profil Google Plus Di Sidebar Blog


Jika kita menumpuk banyak gambar, maka akan terjadi lompatan untuk melihat gambar berikutnya, katakanlah seperti pada Handphone misalnya, pada file gambar di komputer Anda, maka akan terjadi jumping slide untuk melihat gambar selanjutnya saat Anda menekan tombol next. Agar hal itu tidak terjadi, disini saya menggunakan CSS transisi dengan efek berputar, sehingga saat gambar akan berpindah efeknya akan terasa halus (tanpa lompatan) seperti ini:




DEMO SHOW




Untuk membuatnya, pertama-tama kita rangkai dahulu pembangun selector CSS-nya seperti berikut, lalu temukan kode ]></b:skin> pada Template Anda, back-up template Anda terlebih dahulu untuk menghindari kesalahan, selanjutnya letakkan CSS berikut tepat diatasnya


//* no jumping image slide with css3
css design: inputcode="slider-sb77","sahabat blogger 77"
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*//
#sb77-slider {
  margin:30px auto;padding:0px 0px;
  width:448px;height:286px;
  position:relative;}

#sb77-slider li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;}

#sb77-slider li input + label {
  position:absolute;bottom:5px;
  left:10px;z-index:999;
  font:bold 11px/16px Arial,Sans-Serif;
  background-color:black;
  color:white;padding:0px 0px;
  width:16px;text-align:center;
  cursor:pointer;}

//peletakan gambar dengan durasi tampil
#sb77-slider li:nth-child(2) label {left:28px;}
#sb77-slider li:nth-child(3) label {left:46px;}
#sb77-slider li:nth-child(4) label {left:64px;}
#sb77-slider li:nth-child(5) label {left:82px;}

#sb77-slider li img {
  border:none;outline:none;
  position:absolute;
  top:50%;left:50%;width:0px;
  height:0px;visibility:hidden;
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:rotate(0deg) scale(0);
  -moz-transform:rotate(0deg) scale(0);
  -ms-transform:rotate(0deg) scale(0);
  -o-transform:rotate(0deg) scale(0);
  transform:rotate(0deg) scale(0);}

#sb77-slider a {text-decoration:none !important;}
#sb77-slider li a span {
  display:block;position:absolute;
  right:0px;bottom:0px;left:0px;
  background-color:rgba(0,0,0,0.8);
  font:normal 11px/26px Arial,Sans-Serif;
  color:white;padding:0px 10px;
  text-align:right;opacity:0;
  viibility:hidden;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;}

#sb77-slider li input:checked + label {
  background-color:red;
  color:#fff;
  -webkit-border-radius:50%;
  border-radius:50%;}

#sb77-slider li input:checked ~ img,
#sb77-slider li input:checked ~ a img {
  top:0%;left:0%;
  width:448px;height:286px;
  visibility:visible;
  -webkit-transform:rotate(720deg) scale(1);
  -moz-transform:rotate(720deg) scale(1);
  -ms-transform:rotate(720deg) scale(1);
  -o-transform:rotate(720deg) scale(1);
  transform:rotate(720deg) scale(1);
  opacity:1;z-index:99;}

#sb77-slider input {display:none;}
#sb77-slider li input:checked ~ a span {
  opacity:1;
  z-index:100;}


Perhatikan kode yang saya beri warna berbeda, pada tahapan ini saya hanya menggunakan 5 buah gambar sebagai contoh dengan durasi jarak per 18px, tambahkan nilai pada gambar akhir sebanyak 18px jika Anda ingin menambahkan beberapa gambar lagi, dan seterusnya. Selanjutnya letakkan kode HTML berikut dimana Anda ingin menampilkannya.


<ul id='sb77-slider'>
    <li>
        <input type='radio' id='s1' name='sahabatblogger77' checked='true' />
        <label for='s1'>1</label>
        <a href='/'>
            <img src='Gambar-1.jpg' />
            <span>SAHABAT BLOGGER 77</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s2' name='sahabatblogger77' />
        <label for='s2'>2</label>
        <a href='/'>
            <img src='Gambar-2.jpg' />
            <span>SAHABAT BLOGGER 77</span>
        </a>
    </li>
    <li>
        <..!! lanjutkan Untuk gambar ke-3 !!..>
    </li>
    <li>
        <..!! lanjutkan Untuk gambar ke-4 !!..>
    </li>
    <li>
    ...dan seterusnya !!
    </li>
</ul>



Pekerjaan sudah selesai, kini saatnya kita membahas hasil tampilannya pada kolom komentar dibawah, jika suka Katakan Cinta Dengan Tampilan Gambar Efek Rotate seperti pada tutorial sebelumnya.

Terimaksih dan semoga dapat meng-inspirasi sahabat semua

14 Juni 2014

Mengubah Variasi Tooltip Dengan Efek Transisi

Mengubah Variasi Tooltip Dengan Efek Transisi - Bahasa Tooltip sudah sering kita dengar dan kita kenal dalam dunia blogger, karena untuk menciptakan tooltip, seharusnya penggunaan title tag sudah terpasang dengan baik dan benar pada blog Anda. Terlebih jika Anda sudah memahami apa itu title tag, maka Anda juga akan paham apa itu tooltip, serta akan bisa menciptakan variasi tooltip berbeda versi. Tooltip sangat erat hubungannya jika Anda sudah paham tentang Pentingnya Atribut Dan Title Tag Untuk Optimasi SEO, dipertemuan kali ini SAHABAT BLOGGER 77 akan berbagi tutorial sederhana tentang pembahasan bagaimana cara Mengubah Variasi Tooltip Dengan Efek Transisi.

Tooltip image

Baca juga - 8 Hal Yang Perlu Dihindari Tentang Optimasi SEO



.sb77-tooltip:hover {position:relative;}
.sb77-tooltip:hover:before {display:block;}
.sb77-tooltip,.title {
   content: attr(title); // atau attr(href);
   font: normal normal 11px/normal Helvetia;
   padding: 5px 10px;
   background: #ccc;
   color: #333;
   position: absolute;
   margin: 2px auto 13px;
   display: none;
   text-trasform: uppercase;}

Variasi tooltip default jika pada setiap link terdapat atribut title, CSS diatas merupakan salah satu elemen HTML penghasil model variasi tooltip dari elemen [attr] yang mengandung title, yang akan ditampilkan saat pointer mouse melintas pada sebuah link yang sudah terpasang atribut title. Sehingga TOOLTIP dapat saya simpulkan sebagai sekumpulan teks pada sebuah URL aktif yang akan tampil sebagai descripsi pemberitahuan sebelum link tersebut di-Klik.

<a href="http://sahabatblogger77.blogspot.com" title="SAHABAT BLOGGER 77">Blog Tentang Tutorial</a>

Dengan tampilan link URL seperti diatas, maka variasi tooltip sudah tercipta, namun tampilan default (no variasi style) dengan title teks "SAHABAT BLOGGER 77", sebagai alternatif kita ambil contoh CSS diatas, saya akan coba mengubah tampilannya untuk menciptakan bentuk variasi tooltip yang berbeda, namun elemen CSS diatas akan saya ganti perintahnya dengan kode script seperti ini


Default Tooltip Style With Background

(function() {
    /*   
    design by =  "http://sahabatblogger77.blogspot.com" */
    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "sb77";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#93c47d";
        t.style.borderTop = "2px solid red";
        t.style.borderBottom = "2px solid red";
        t.style.borderLeft = "1px solid red";
        t.style.borderRight = "1px solid red";
        t.style.borderRadius = "10px 0 10px 0";
        t.style.font = "bold italic 11px Helvetia";
        t.style.padding = "5px 8px";
        t.style.color = "#000";
        t.style.width = "auto";
        t.style.wordWrap = "break-word";
        t.style.visibility = "hidden";
        t.style.opacity = 0;
    document.body.appendChild(t);
  var tooltip = document.getElementById('sb77','sahabatblogger77');

    function over(e) {
        tooltip.style.visibility = "visible";
        tooltip.style.opacity = 1;
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";}

    function out() {
        tooltip.innerHTML = "";
        tooltip.style.visibility = "hidden";
        tooltip.style.opacity = 0;
        this.title = this.getAttribute('original');
        this.removeAttribute('original');}

    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }

})();




DEMO SHOW



Tampilan tooltip dengan bentuk yang sama, perintah script diatas hanya untuk mengubah warna background default tooltip dengan warna yang kita inginkan, sementara untuk menambahkan sedikit efek transisi, pada kodenya sudah saya tambahkan perintah CSS elemen id="sb77","sahabatblogger77". Cukup salin kode CSS berikut, lalu letakkan diatas atau sebelum kode ]]></b:skin>

Design Tooltip Style With Transisi Effect
#sb77 {
  -webkit-transition:all 0.4s ease-out;
  -moz-transition:all 0.4s ease-out;
  -ms-transition:all 0.4s ease-out;
  -o-transition:all 0.4s ease-out;
  transition:all 0.4s ease-out;
}


Kemudian cari dan temukan kode </body> pada template Anda, letakkan script berikut tepat diatasnya.

(function() {
    /* idCSS = input-cssTransisi:"sb77"
    design = by. http://sahabatblogger77.blogspot.com */
    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "sb77";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#93c47d";
        t.style.borderTop = "2px solid red";
        t.style.borderBottom = "2px solid red";
        t.style.borderLeft = "1px solid red";
        t.style.borderRight = "1px solid red";
        t.style.borderRadius = "10px 0 10px 0";
        t.style.font = "bold italic 11px Helvetia";
        t.style.padding = "5px 8px";
        t.style.color = "#000";
        t.style.width = "auto";
        t.style.wordWrap = "break-word";
        t.style.visibility = "hidden";
        t.style.opacity = 0;
    document.body.appendChild(t);
  var tooltip = document.getElementById('sb77','sahabatblogger77');

    function over(e) {
        tooltip.style.visibility = "visible";
        tooltip.style.opacity = 1;
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";}

    function out() {
        tooltip.innerHTML = "";
        tooltip.style.visibility = "hidden";
        tooltip.style.opacity = 0;
        this.title = this.getAttribute('original');
        this.removeAttribute('original');}

    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }

})();



DEMO SHOW



Sampai pada tahap ini, Anda sudah berhasil mengubah tampilan variasi tooltip dengan warna background dengan efek transisi, namun tooltip tidak akan tampil jika Anda kurang memahami cara Pemasangan Title Tag Dan Atribut Pada Link URL.

Semoga apa yang saya sampaikan lewat tutorial kali ini dapat memberikan anda motivasi dalam berkarya. Terimakasih

10 Juni 2014

Membuat Artikel Terbaru Desain Gallery Dan Tooltip

Membuat Artikel Terbaru Desain Gallery Dan Tooltip - Layaknya semua blog yang pada umumnya sudah pasti akan terdapat widget Artikel Terbaru (Popular Post) pada sidebar. Widget Artikel Terbaru atau yang kita kenal sebagai POPULAR POST merupakan sebuah daftar sekumpulan menu blog yang menampilkan link artikel yang telah lampau maupun artikel terbaru, sehingga saat pengunjung berada pada artikel anda yang sebelumnya, mereka akan lebih mudah menemukan artikel anda yang lain dalam widget ini.

Tampilan default sudah cukup untuk melengkapi widget kosong pada sidebar blog Anda dengan title Popular Post, maka pada sidebar blog Anda akan menampilkan 10 daftar Artikel yang terdapat pada blog Anda. Untuk postingan kali ini SAHABAT BLOGGER 77 akan memberikan cara termudah membuat artikel terbaru dengan desain gallery dan tooltip seperti ilustrasi gambar dibawah ini

Post Thumbanail gallery image


Cari Artikel.? baca - Desain Tampilan Daftar Isi Model Tab


Widget popular post kali ini, bisa terbilang masih baru karena belum begitu banyak rekan-rekan blogger yang menampilkan widget seperti ini, namun desain dan fungsinya sama, dan agar lebih menarik dan terlihat keren, tampilan widget ini sudah saya modifikasi secara total, sehingga daftar artikel terbaru pada sidebar blog Anda akan bergaya Desain Gallery dengan tampilan tooltip seperti ini




DEMO SHOW



Untuk menempatkan desain tampilan widget artikel terbaru ini pada blog Anda, cukup ke-tata letak, pilih HTML/JavaScript lalu copy kode dibawah ini, namun sebelumnya perhatikan kode yang saya beri warna Merah, jika pada template Anda sudah mempunyai jQuery yang sama, maka hapus saja kode tersebut, selanjutnya pastekan pada area halaman gadget


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style popPost="mini-gallery">
/*Desain Artikel Terbaru (Popular Post) dengan gambar dan tooltip
css design: miniImage="popPost-thumbanail","sahabat blogger 77"
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani*/
#mini-gallery {
  width:300px;margin:0 auto;
  font:normal normal 11px/normal Verdana,Arial,Sans-Serif;
  color:#666;padding:8px;
  background:#222;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;}

#mini-gallery h2 {
  font:normal normal 14px/14px Impact;
  color:#fff;
  text-transform:uppercase;
  margin:2px;padding:7px 14px;
  background-color:#080;}

#mini-gallery .rp-item {
  float:left;display:inline;
  position:relative;
  margin:2px;padding:0;
  background:white url('data:image/gif;base64,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') no-repeat 50% 50%;
  width:72px;height:72px;}

#mini-gallery .rp-item img {
  width:72px;height:72px;
  border:none !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;display:none;}

#mini-gallery .rp-item .rp-child {
  position:absolute;margin:0 0 0 10px;
  top:95%;left:95%;z-index:1000;
  width:200px;background:#333;
  border-left:7px solid #080;
  border-top:3px double #333;
  padding:10px 15px;overflow:hidden;
  word-wrap:break-word;
  display:none;color:#fff;}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  border-bottom:3.5px dotted #ccc;
  padding-bottom:2.5px;text-align:center;
  margin:0 0 5px;color:orange;}
#mini-gallery .rp-item:hover .hidden {display:block}
</style>


Sampai tahap ini, pekerjaan Anda belum selesai. Sebagai tambahan saya sudah meringkas beberapa perintah CSS dan menggantikan fungsinya dengan perintah script variable seperti berikut

<script>
var widgetTitle = "Daftar Artikel",
numPosts = 20,
numChars = 300,
tooltipFadeSpeed = 200,
    pictureBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    blogUrl = "http://sahabatblogger77.blogspot.com";</script>


KETERANGAN
  1. var widgetTitle - Untuk menentukan judul widget
  2. numPosts - Tentukan berapa jumlah artikel yang akan Anda tampilkan
  3. numChars - Untuk menentukan jumlah kata descripsi pada tooltip
  4. tooltipFadeSpeed - Atur kecepatan saat tooltip akan tampil
  5. pictureBlank - Untuk menggantikan jika postingan Anda tidak memiliki gambar
  6. blogUrl - Hapus lalu ganti dengan URL-blog Anda


Hmmmm...!! saatnya cuci tangan karena semua pekerjaan Anda sudah selesai. Dan mudah-mudahan Artikel Terbaru Desain Gallery Dan Tooltip kali ini dapat diterima oleh mas +Aldino Sya, karena atas reques beliau yang ingin dibuatkan widget popular post yang berbeda, maaf ya permintaannya membuat mas aldino lama menunggu, hehe..!!
Dan akhir kata saya ucapkan Terimakasih...

8 Juni 2014

JavaScript Sistem Klik Dan Hover Pada Text Area

Textarea image

JavaScript Sistem Klik Dan Hover Pada Text Area - Text Area merupakan media tempat untuk menyisipkan atau menyimpan serangkaian kode-kode HTML dalam bentuk perintah teks, sehingga saat Anda hendak menuliskan serangkaian beberapa perintah kode dalam bentuk HTML pada postingan, maka jika dalam text area kode tersebut akan menjadi tulisan dalam bentuk format teks biasa.
Sebagai contoh -

<div class="sahabatblogger77">
   <div class="sb77-textarea-format" id="media-text">
       <h3>
         <p style="text-align:center;padding:10px 8px;color:#ccc;">
Tutorial cara meng-aktifkan fungsi onclick dan onfocus-hover pada textarea dengan sistem perintah javaScript
          </p>
       </h3>
    </div>
</div>


Sekarang coba Anda tuliskan bentuk serangkaian kode diatas dalam mode HTML pada postingan Anda, lalu lihat format tulisan Anda dalam mode COMPOSE, maka semua serangkaian kode HTML diatas tidak akan ditampilkan di postingan Anda. Namun jika Anda menyimpannya dalam text area, maka semua kode tersebut akan ditampilkan dalam bentuk format tulisan biasa. Untuk fungsi kode-kode perintah pada text area, dipertemuan sebelumnya saya sudah pernah membahas tentang Cara Membuat Format Tulisan Dengan Text Area. Postingan kali ini saya akan berbagi tentang perintah JavaScript Dengan Sistem Klik Dan Hover Pada Text Area.




DEMO SHOW




SISTEM KLIK
Text area dengan sistem ini untuk memudahkan pengunjung saat akan meng-copy keseluruhan teks tulisan dalam wilayah text area dengan sistem KLIK, singkatnya format block tulisan akan digantikan dengan perintah klik (klik tulisan, maka keseluruhan tulisan akan ter-block), sehingga kita tidak ragu/takut lagi jika kemingkinan ada beberapa teks yang tertinggal saat di block


<textarea rows="5" cols="35" onclick="javascript:this.focus();this.select();" readonly="readonly">

...Tulis Teks Anda Disini...

</textarea>



SISTEM HOVER
Fungsi pada sistem ini bekerja dengan perintah HOVER MOUSE, jika pada sistem yang pertama mem-block teks dengan perintah KLIK, pada sistem ini dengan perintah hover, cukup mengarahkan PANAH MOUSE pada wilayah text area, maka seluruh tulisan akan ter-block

<textarea rows="5" cols="35" onmouseover="javascript:this.focus();this.select();" readonly="readonly">

...Tulis Teks Anda Disini...

</textarea>


Pada dasarnya penggunaan text area seperti ini hanya berlaku jika blog Anda membahas postingan tentang kode-kode perintah seperti HTML, CSS, JavaScript, jQuery dan lainya sebagainya, namun jika postingan di blog Anda dominan share tentang tulisan cerita atau sekedar informasi dan hal-hal menarik lainnya, Anda boleh memperindah postingan anda dengan Membuat Panel Slide Untuk Menyimpan Text.

Akhir kata saya ucapkan Terimakasih dan semoga inspirasi ini dapat memberikan ilmu tambahan buat rekan-rekan semua pecinta SAHABAT BLOGGER 77. And next time saya akan memberikan cerita-cerita menarik di lain kesempatan.

6 Juni 2014

Widget Profil Penulis Dengan Background Blur Efek

Widget Profil Penulis Dengan Background Blur Efek - Membuat tulisan pada blog sudah pasti ada pencipta, penulis atau pengarang untuk memudahkan pembaca mengenal profil orang yang membuat artikel tersebut. Ucapan kalimat pada komentar-kritik di artikel sebelumnya, tidak sedikit komentar sahabat lain yang mamanggil saya dengan kata "Terimakasih MAS tutorialnya", padahalkan saya tidak punya kumis, masa dipanggil mas, hehe...!! Karenanya Pada kesempatan kali ini, SAHABAT BLOGGER 77 akan berbagi tutorial cara mendesain tampilan widget profil dengan efek blur pada background gambar penulis.

Widget seperti ini biasanya untuk menampilkan keterangan teks yang mengarah pada tutorial artikel yang dibahas dari postingan tersebut, seperti judul artikel, penulis dan keterangan teks yang kurang lebih seperti ini -

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke-

Karena fungsi widget ini pada blog untuk menampilkan bio data sipenulis, maka daftar profil lengkap author akan tampil saat hover (sentuhan mouse) dengan efek blur pada gambar background seperti tampilan gambar berikut

Profile Box Widget Image


Baca juga - Cara Membuat Widget Author Box Dengan Blockquote


Untuk pengaturan CSS berikut saya hanya menggunakan perintah hover dengan css transform-translateY agar tampilan widget default tidak tertutup oleh background blur, detailnya saya menggantung background blur efeknya dengan value height='30px' dan akan tampil keseluruhan saat hover (sentuhan mouse).


/.............
Profile widget author with css only
css design: profilestyle="hover-sb77","sahabat blogger 77"
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
............../
.sb77_profile_hover{
   padding: 0px;position: relative;
   overflow: hidden;height: 187.5px;}

.sb77_profile_hover:hover .caption{
   opacity: 1;
   transform: translateY(-150px);
   -webkit-transform:translateY(-150px);
   -moz-transform:translateY(-150px);
   -ms-transform:translateY(-150px);
   -o-transform:translateY(-150px);}

.sb77_profile_hover .caption{
   position: absolute;top:150px;
   -webkit-transition:all 0.3s ease-in-out;
   -moz-transition:all 0.3s ease-in-out;
   -o-transition:all 0.3s ease-in-out;
   -ms-transition:all 0.3s ease-in-out;
   transition:all 0.3s ease-in-out;
   width: 100%;}

.sb77_profile_hover .blur{
   background-color: rgba(0,0,0,0.8);
   height: 300px;z-index: 5;
   position: absolute;width: 100%;}

.sb77_profile_hover .caption-text{
   z-index: 10;color: #fff;
   position: absolute;height: 30px;
   text-align: center;top:-2px;width: 100%;
   border-top:2px solid #fff;
   border-bottom:2px solid #080;
   padding:5px;height:26px;}

.sb77-profile-1 .sb77-imageprofile {
   display: block;width: 120px;
   height: 120px;border: 5px solid #2fe45D;
   background: url(URL-Gambar Anda.jpg) no-repeat center center;
   position: relative;margin:-8em 0 0 30px;
   box-shadow: inset 1px 1px 4px rgba(225,225,225,0.5),
                     0 2px 3px rgba(225,225,225,0.6);}




DEMO SHOW



Tahap selanjutnya pembentukan selector HTML pada wilayah body, tepatnya widget profil ini akan tampil dibawah postingan blog Anda.

<div class="sb77_profile_hover" style="background:url(URL-Gambar/sahabatblogger77-image2.jpg) no-repeat center center;border-top:3px solid red;">
<p style="text-align:center;font: bold 18px/5px Helvetia;">
TERIMAKASIH ATAS KUNJUNGAN SAUDARA
Judul= <span itemprop='itemreviewed'><data:post.title/></span>
Penulis= <span itemprop='reviewer'><data:post.author/></span>
...Tulis text Anda disini....
<a expr:href='data:post.url'><data:post.url/></a>
</p>
<div class="caption">
<div class="blur"></div>
      <div class="caption-text">
          <h3>
              SAHABAT BLOGGER 77
          </h3>
<p style="text-align:left;margin-left:185px;">
Name : DEVY INDRIYANI
Website : http://sahabatblogger77.blogspot.com
Google+ : http://google.com/+DevyIndriyani
<a href="https://plus.google.com/107420567168573488940">Lihat Profil Lengkapku</a>
</p>
<div class="sb77-profile-1">
<div class="sb77-imageprofile"></div>
      </div>

1 Juni 2014

Katakan Cinta Dengan Tampilan Gambar Efek Rotate

Katakan Cinta Dengan Tampilan Gambar Efek Rotate - Mengungkapkan rasa CINTA tidak harus dengan kata-kata, bisa juga kita katakan dengan perbuatan dan masih banyak lagi cara untuk katakan Cinta, bahkan Anda pernah melakukannya dengan pengorbanan mungkin, hehe..! karena hari ini, esok dan selamanya saya selalu cinta kepada semua rekan-rekan pecinta SAHABAT BLOGGER 77, ungkapan ini akan saya sampaikan dengan tampilan gambar efek rotate slide hover teks descripsi terspesial buat sahabat semua.

Efek Rotate pada tampilan gambar kali ini tidak jauh berbeda dengan tutorial sebelumnya tentang Membuat Efek Gambar 3D Dengan CSS Box Shadow. Style pada efek sama, namun tampilan gambar saya ubah pada model slide dengan CSS rotate3d, sehingga teks akan tertutup dengan gambar original default (gambar utama), sedangkan untuk menampilkan teks, saya menggunakan perintah cursor default hover dengan perpaduan transisi linear. Jika Anda Cinta SAHABAT BLOGGER 77, maka saya akan katakan Cinta melalui tombol DEMO SHOW dibawah ini




DEMO SHOW



lovely Image


Bagaimana.? romantis bukan ungkapan rasa cinta saya ini buat Anda, hehe..!!, tertarik ingin melakukan hal yang sama, berikut susunan HTML kodenya


<ul class="sb77-grid">
<li>
    <div class="sb77-item">
       <div class="sb77-info">
           <div class="sb77-info-front sb77-img-1">
       </div>
<div class="sb77-info-back">
      <h3>Teks Disini...</h3>
        <p>
Sahabat Blogger 77<a href="#">View on Website</a>
             </p>
</div>
    </div>
        </div>
</li>
</ul>


Untuk HTML diatas boleh Anda letakkan dalam selector wilayah widget sidebar blog Anda sebagai koleksi gambar, tetapi jika untuk gambar di postingan, letakkan pada mode tulis HTML bukan yang compose. Selanjutnya tambahkan CSS berikut sebelum kode ]]></b:skin> atau <style> pada Template blog Anda

.sb77-item {
   width: 100%;height: 100%;
   border-radius: 50%;
   position: relative;cursor: default;
   -webkit-perspective: 900px;
   -moz-perspective: 900px;
   -o-perspective: 900px;
   -ms-perspective: 900px;
   perspective: 900px;}

.sb77-info{
   position: absolute;
   width: 100%;height: 100%;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;}

.sb77-info > div {
   display: block;position: absolute;
   width: 100%;height: 100%;
   border-radius: 50%;
   background-position: center center;
   -webkit-transition: all 0.4s linear;
   -moz-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   -ms-transition: all 0.4s linear;
   transition: all 0.4s linear;
   -webkit-transform-origin: 50% 0%;
   -moz-transform-origin: 50% 0%;
   -o-transform-origin: 50% 0%;
   -ms-transform-origin: 50% 0%;
   transform-origin: 50% 0%;}

.sb77-info .sb77-info-back {
   -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
   -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
   -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
   -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
   transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
   background: #000;
   opacity: 0;}

.sb77-img-1 {background-image: url(URL-gambar/love-1.jpg);}
.sb77-info h3 {
   color: #fff;text-transform: uppercase;
   letter-spacing: 2px;font-size: 44px;
   margin: 0 15px;padding: 50px 0 0 0;
   height: 110px;
   font-family: 'Open Sans', Arial, sans-serif;}

.sb77-info p {
   color: #fff;padding: 10px 5px;
   font-style: italic;margin: -2em 30px;
   font-size: 12px;
   border-top: 2px dotted rgba(255,255,255,0.5);}

.sb77-info p a {
   display: block;color: #fff;color: #ccc;
   font-style: normal;font-weight: 700;
   text-transform: uppercase;
   font-size: 9px;letter-spacing: 1px;
   padding-top: 4px;font-family: Helvetia;}

.sb77-info p a:hover {color: #fff222;color: magenta;}
.sb77-item:hover .sb77-info-front {
   -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
   -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
   -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
   -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
   transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
   opacity: 0;}

.sb77-item:hover .sb77-info-back {
   -webkit-transform: rotate3d(1,0,0,0deg);
   -moz-transform: rotate3d(1,0,0,0deg);
   -o-transform: rotate3d(1,0,0,0deg);
   -ms-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
   opacity: 1;}

.sb77-grid {
   margin: 20px 0 0 0;
   padding: 0;list-style: none;
   display: block;text-align: center;width: 100%;}

.sb77-grid:after,
.sb77-item:before {content: '';display: table;}
.sb77-grid:after {clear: both;}

.sb77-grid li {
   width: 220px;height: 220px;
   display: inline-block;margin: 15px;}



KETERANGAN...

Di setiap rangkaian kode diatas, sudah saya beri tanda dengan warna yang berbeda, silahkan Anda mengantinya dengan imajinasi Anda yang lebih keren lagi, dan akhir kata saya mengucapkan terimakasih dan semoga dapat bermanfaat.
Artikel terbaru - Cara Membuat Efek Remote Link Pada Gambar