Tampilkan postingan dengan label widget. Tampilkan semua postingan
Tampilkan postingan dengan label widget. Tampilkan semua postingan

Cara Menambahkan Widget NRelate

nRelate adalah Related Post widget. Fungsinya memang sama dengan LinkWithin, jadi saya tidak perlu jelaskan lagi. Tapi, tahukan anda, widget ini telah mengatasi semua kelemahan LinkWithin.
Widget Nrelate Blogger

Nah... Coba pikirkan dulu apa saja kelemahan LinkWithin. Penampilan LinkWithin terlalu sederhana dan tidak menarik, sedangkan widget ini dapat kita ubah penampilannya (coba lihat widget nRelate saya di bawah halaman ini). Karena itulah nrelate telah menjadi widget favorit saya.

Nrelate Linkwithin blogger
sumber foto: rIZ

Bila sobat ingin mencoba widget ini boleh ikuti langkah-langkah di bawah ini. Dan, Kabar baik untuk sobat... Saya juga menambahkan cara menghapus link nrelate yang muncul bersamaan dengan widget ini. Kalau bisa, tolong sobat sebarkan artikel ini ya!

Cara menambahkan nRelate:

1. Pertama, bikin dulu sebuah akun di nRelate, bila sobat tidak bisa membuatnya bleh saja meminta seorang teman membuatnya. Setelah akun berhasil dibuat, Login ke nRelate.
nRelate partner login

2. Setelah Login. Geser mouse ke menu "Install", dan pilih "Blogger".
halaman nrelate

3. Halaman berikutnya akan muncul kotak tulisan seperti foto di bawah ini. Masukkan alamat blog sobat di dalam kotak dan klik tombol "Submit".
nrelate blogger install

4. Halaman berikutnya akan muncul 2 kotak berisi kode di bawah halaman. Copy kode dari kotak pertama dan ikuti langkah selanjutnya...
install nrelate blogger

5. Masuk ke Blogger.com -> Tata Letak -> Tambah gadget, pada menu pop-up yang muncul pilih "Html/Javascript".

6. Paste kode yang telah dicopy dan klik "Simpan".

Cara menghapus link nRelate

Sekarang blogmu sudah muncul widgetnya. Tapi, kalau dilihat, dibawah widget ini ada linknya nRelate. Cara menghapusnya mudah, coba ikuti langkah-langkah di bawah ini.

1. Geser mouse ke menu "Manage settings" kemudian klik pada "Blogger".
nrelate manage settings di blogger

2. Scroll ke bawah dan hilangkan tanda centang dari "Would you like to support nrelate by displaying our logo"
layout settings pada nrelate

3. Scroll ke bawah halaman dan klik tombol "Save".
Baca Selengkapnya

9 komentar:
Label: ,

Widget Kotak Pengikut Google+ Dengan Efek Hover

Google+ sedang berkembang. Sejak Oktober 2011, Google+ telah mencapai lebih dari 40 juta pengguna dan menjadi media sosial yang paling cepat perkembangannya.

Blogger barusan meluncurkan widget baru yang bernama Pengikut Google+. Kamu dapat menambahkan widget tersebut dengan menuju ke Tata Letak blogger dan Tambah widget. Tapi, widget itu sudah lewat masa.

Sekarang saya akan memperkenalkan widget pengikut google+ yang bisa bergeser keluar dari sisi kanan blog bila mouse kita berada di atasnya yang disebut dengan Slide Out Google+ Follower Box. Widget ini memang dibuat seperti widget Facebook/Twitter/Pinterest slide out. Widget yang berasal dari Lord Html ini telah saya sempurnakan.


Menambahkan widget ini ke Blogger

Langkah 1. Pergi ke Dasbor Blogger > Tata Letak > Tambah gadget.

Langkah 2. Pada pop-up window yang muncul, pilih "Html/Javascript".

Langkah 3. Masukkan kode di bawah ini:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguEofpK-5JgtOwkMAEwDkhyphenhyphengMIWk1aSc1XOKFEy5NuBy0uuHMRnQxGRotxIBGiqEje8Nml0bM8z1dI6LwT58BAf-Se7o8KeR_Dn13yqEPzWNgH7UWgxLcwPX2Br3iJlGLQ6uwnogYl6NU/s1600/google+plus+gemar+html.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 330px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 16px;
background: white;
border: 1px solid #ff4747;
border-right: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/101302748771237127442" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div></div>​

Langkah 4. Ganti https://plus.google.com/101302748771237127442 menjadi alamat profil Google+mu.

Alamat profil Google+ bisa kamu dapatkan dengan pergi ke plus.google.com, lalu klik kanan pada gambar "profile" di bagian kiri halaman, kemudian copy linknya.

Langkah 5. Simpan widget ini dan kamu akan melihatnya di blog anda ;)
Baca Selengkapnya

8 komentar:
Label: ,

Bagaimana Menambahkan Menu Opera.com

Pernah mengunjungi Opera.com? Kalau sekarang kita mengunjunginya pasti kita dapat melihat menu navigasi opera yang keren terdiri dari panduan hitam dan merah. Dan tentu saja, pos kali ini akan mengajar kamu bagaimana cara menambahkannya. Terima kasih untuk Lord Html yang menyebarkan widget ini.

menu css3 opera



Fitur dari menu Opera

  • Desain yang simpel
  • Menggunakan CSS3
  • Tidak menggunakan gambar
  • Tidak menggunakan javascript
  • 10 warna
  • 2 gaya (terang & gelap)
  • Dapat bekerja dengan IE 8+

Menambahkannya ke dalam blogger

Langkah 1. Pergi ke Dasbor blogger > Tata letak > Tambahkan gadget.

Langkah 2. Pada pop-up window yang muncul pilih widget "Html/Javascript".

Langkah 3. Masukkan kode di bawah ini:
<link href="http://gemar-html.googlecode.com/svn/svn/trunk/css/menu-opera.css" rel="stylesheet" type="text/css">
<div id='cssmenu'>
<ul>
<li><a href='#Link 1'><span>Menu 1</span></a></li>
<li class='has-sub'><a href='#Link 2'><span>Menu 2</span></a>
<ul>
<li class='has-sub'><a href='#Link 2.1'><span>Menu 2.1</span></a>
<ul>
<li><a href='#Link 2.1.1'><span>Menu 2.1.1</span></a></li>
<li><a href='#Link 2.1.2'><span>Menu 2.1.2</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#Link 2.2'><span>Menu 2.2</span></a>
<ul>
<li><a href='#Link 2.2.1'><span>Menu 2.2.1</span></a></li>
<li><a href='#Link 2.2.2'><span>Menu 2.2.2</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#Link 3'><span>Menu 3</span></a></li>
<li><a href='#Link 4'><span>Menu 4</span></a></li>
</ul>
</div>​

Langkah 4. Sebelum menyimpan widget, ubah dulu:
  • Kode berwarna Hijau menjadi alamat link,
  • Kode berwarna Biru menjadi judul link.

Langkah 4: Nah, setelah selesai klik "Simpan".

Jangan lupa like Facebook kami untuk update berikutnya.
Baca Selengkapnya

5 komentar:
Label:

Cara Menambahkan Galeri Pos Terpopuler Di Blog

Baru-baru ini, widget yang paling populer adalah widget Galeri Posting Terpopuler ini yang terkenal dengan sebutan Sliders atau Carousels. Widget ini menampilkan 10 foto dari posting terpopuler di blogmu secara horizontal. Sangat berguna untuk membuat pengunjung tetap tinggal di blog.

galeri pos terpopuler

Sebelum menambahkan widget ini, kamu harus tahu bahwa widget ini tidak sepenuhnya cocok untuk semua template. Maka, buatlah sebuah backup terlebih dahulu sebelum menambahkannya.

galeri post terpopuler

Cara Menambahkan:

Langkah 1. Masuk ke Dasbor Blogger - Template (buat dulu sebuah back-up) - Edit HTML - Lanjutkan - Expand Template Widget.

Langkah 2. Cari kode ]]></b:skin>

Langkah 3. Di atas/Sebelum kode ]]></b:skin>, masukkan kode di bawah ini:
#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxc4cPiI5zVYCGyNWSbACq_wgH38If2HyJ53LGiSe2B5bqme5X6gTysroX1JrgpJkg-1LjX1hCpL_ryyEQC7ATpN7EIM9t8HQbHgFgl_vLLL3C5tw9r45qOml_Wu6sASB3_Tutd_Tx1rsP/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
...Kamu bisa mengubah ukuran widget ini dengan mengubah nilai dari 590 (panjang) dan 126 (lebar). Disarankan untuk tidak mengubah ukuran bagi yang tidak berpengalaman.

Langkah 4. Sekarang, carilah kode </head>

Langkah 5. Di atas/Sebelum kode </head>, masukkan kode di bawah ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://gemar-html.googlecode.com/svn/trunk/js/galeri-posting-populer-diatas-post.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgljamoM29i1JLjZF7uKGdQdYa06tz64kl4QF45zIjJIRCCWewyYK2r7jB7NlXHSp6hBLAGCaM63duQsOreo0Xq9mMRYdlRf-mi3vJLeBJfzcvpcapmtMLFgfua9kkGhLdOXSLcuiU86yS/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5y-2BzXQ1T1Lj0lqzs2GmOLYU4kIMvWItlMKo5NGBQLfMdQFcFwtjTXS1eWaMWcGU8yVi22eyJU9A9G9Xd96lAN827BygSFFGvIb6QlzHkaeH4coV-_jVbKYrjCvRdutXI4aR9supeea5/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Langkah 6. Cari kode di bawah ini:
<b:section class='main' id='main' showaddelement='yes'>
...bila kode di atas tidak ketemu, carilah kode dibawah ini:
<b:section class='main' id='main' showaddelement='no'>

Langkah 7. Tepat di bawah kode di langkah 6, masukkanlah kode di bawah ini:
<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'><div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFYwrgGDx87OnHAiHItk9Go0cj7TrxL0MJ6h45ksgeXPm57Ii-RqLoTOOjqE5MOahWvv0Ba__REtM-AanjdbJUbMZHFs61PtoW8dyEc2QnVo0u1fH0nQwVQXO2AfNMvX_usSIdxt3RyGeB/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if> </b:includable>
</b:widget>
...Hapus kode berwarna biru jika kamu mau menampilkan widget ini di halaman postingan juga.

Langkah 8. Pratinjau dulu templatemu. Bila hasilnya bagus, Simpan templatemu.
Baca Selengkapnya

18 komentar:
Label:

Widget Komentar Terbaru Dengan Avatar Bulat

Widget Komentar Terbaru adalah widget yang diperlukan agar pengunjung tetap berada di halaman blog. Widget yang saya perkenalkan ini selain menaruh link dan isi komentar juga terdapat avatar yang bulat di sampingnya.
Dan tentu saja, kamu juga dapat mengubah avatar defaultnya.

Contoh widget:

widget komentar terbaru dengan avatar

Cara Menambahkannya:

Langkah 1. Pergi ke Dasbor Blogger - Tata Letak - Tambah Gadget - Html/Javascript.

Langkah 2. Masukkan kode di bawah ini:
<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.w2b_recent_comments li {
    background: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 6px 0 !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.w2b_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}
.w2b_recent_comments li span {
    margin-top: 4px;
    color: #666;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://gemar-html.googlecode.com/svn/trunk/js/widget-komentar-terbaru-dengan-avatar-bulat.js"></script>
<script type="text/javascript" src="http://blog-kamu.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Langkah 3. Sebelum menyimpan widget, ubah dulu:
  • Tulisan berwarna merah menjadi alamat blog anda.
  • Tulisan berwarna biru untuk mengatur jumlah komentar yang ditampilkan. (ingat! Ada 2 tulisan yang berwarna biru)
  • Tulisan berwarna jingga untuk mengatur besar avatar yang ditampilkan.

Langkah 4. Simpan widget dan nikmati!!
(sumber: Helplogger)
Baca Selengkapnya

25 komentar:
Label:

Widget Pos Terbaru Yang Menampilkan Judul Saja

widget pos terbaru
Widget posting terbaru adalah widget yang diperlukan oleh setiap blog. Karena membuat pengunjung lebih mudah menjelajahi halaman blognya.

Widget yang akan saya perkenalkan ini adalah widget yang menampilkan posting terbaru secara simpel dengan hanya menampilkan judul postnya. Sangat berguna bagi yang takut blognya keberatan.
widget pos terbaru dengan judul

Cara Menambahkan:

Langkah 1. Masuk ke Dasbor Blogger - Tata Letak - Tambah Gadget - Html/Javascript.

Langkah 2. Masukkan kode dibawah ini:
<div id="hlrpsb">
<script style="text/javascript" src="http://gemar-html.googlecode.com/svn/trunk/js/widget%20posting%20terbaru%20dengan%20judul%20saja.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://blog-kamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Langkah 3. Sebelum menyimpan widget, ubah dulu:
  • Tulisan berwarna merah menjadi alamat blogmu.
  • Tulisan berwarna biru menjadi jumlah post terbaru yang ditampilkan.

Langkah 4. Simpan widgetmu dan nikmati.

Komentari bila ada masalah atau kepayahan widget ini.
(sumber: Helplogger)
Baca Selengkapnya

11 komentar:
Label:

Kotak Pencarian CSS3 Bergaya Apple.com

Kamu pasti sudah mengenal kotak pencarian yang ada di Apple.com. Itu adalah kotak pencarian keren yang dapat melebar ketika diklik. Banyak orang yang ingin menambahkan kotak pencarian tersebut termasuk saya. Sekarang, akhirnya Bloggermint menyebarkan cara menambahkan kotak pencarian ini. Tersedia 3 macam warna kotak pencarian, yaitu dengan latar belakang gelap, latar belakang terang, dan latar belakang via apple.com yang merupakan campuran dari kedua latar sebelumnya.

kotak pencarian css3 via apple

Fitur

  • Menggunakan CSS3.
  • Memiliki 3 gaya/model.
  • Cepat loading.

Cara Menambahkannya:

Langkah 1: Masuk ke Dasbor Blogger > Tata Letak > Tambah gadget > Html Javascript.

Langkah 2: Masukkan kode dibawah ini dan simpan widget tersebut.
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

Langkah 3: Pergi ke Template - Edit Html - lanjutkan. masukkan hanya salah satu dari ketiga kode dibawah ini tepat di atas/sebelum kode ]]></b:skin>

Kode 1: Kotak pencarian dengan latar belakang gelap

kotak pencarian latar belakang gelap
#search {
}
#search input[type="text"] {
    background: url(search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }

Kode 2: Kotak pencarian dengan latar belakang terang

kotak pencarian latar belakang terang
#search {
}
#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }

Kode 3: Kotak pencarian via apple.com

kotak pencarian apple
#search {
}

#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

 Langkah 4: Simpan templatemu dan lihat hasilnya.

Bila muncul masalah di kotak pencarian ini silahkan dikomentari. Saya tahu kotak pencarian ini masih belum sempurna :)
Baca Selengkapnya

5 komentar:
Label:

Widget Berlangganan Dengan Background Melebar Pada Hover

Saya akan menyebarkan sebuah widget keren untuk berlangganan dengan blog kita. Widget CSS3 ini seperti sebuah daftar link berwarna dan dapat memperlebarkan background ketika mouse berada diatasnya. Widget ini tersedia untuk ditambahkan 4 social link termasuk: Facebook, Twitter, Google+, dan Pinterest serta 1 link berlangganan untuk RSS.
widget tombol berlangganan melebar

Cara menambahkan:

Langkah 1. Masuk ke Dasbor Blogger - Tata letak - Tambah gadget - Html/Javascript.

Langkah 2. Kemudian masukkan kode dibawah ini:
<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMHemICHoKWZphtj7kf_bu7nh-7dskvHlLz9ERhyphenhyphenhVGJJxsrpz8TxrLO82wNiDlTsFGYwL4GMeXueqEO93twpOHZLTw62uwGlGdzyvPFNUghE5mHIM6Jkk-JGttgqmYqhuJTWuv5es4P4/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/halaman fan page facebook/">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="http://twitter.com/username/">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/u/0/alamat profil google+/">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="Alamat profil Pinterest">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/alamat feed rss">Subscribe with RSS</a></li>
</ul>

 Langkah 3. Sebelum menyimpan widget, ubahlah warna merah menjadi url.

Langkah 4: Simpan widget ini dan nikmati...
Baca Selengkapnya

3 komentar:
Label:
Langganan: Postingan (Atom)
Diberdayakan oleh Blogger.

Followers