Me

Me
Rezki

Me

Me
Rezki

Me

Me
Rezki
Tampilkan postingan dengan label Script. Tampilkan semua postingan
Tampilkan postingan dengan label Script. Tampilkan semua postingan

Senin, 17 Maret 2014

Widget Social Network Metro Style




Kali ini saya akan  membagikan sebuah social share network  atau tombol share ke beberapa social Network terkenal seperti facebook,twitter,pinterest, google+, linkedin ,Youtube dan bahkan feeds burner. Jika biasanya kita hanya menjumpai tombol social media yang hanya memiliki 4 tombol maka widget ini bisa memberikan kita 7 situs social media sekaligus.


Social network button ini sangat tepat jika anda gunakan pada template yang juga menggunakan style/tema Metro seperti Metro UI yang ada di btemplates.com . Sebenarnya sudah banyak sekali social media metro style ini namun sebagian besar hanya berisikan dengan facebook,twitter,dan google+ saja ,sehingga widget ini saya sarankan pada anda yang Anti main stream
  • Step 1  Buka blogger.com lalu pilih blog  anda
  • Step 2  Pilih tata letak
  • Step 3  Pilih tambahkan widget lalu HTML/Javascript
  • Step 4  Copy kode berikut lalu pastekan di dalam kolom  HTML/Javascript tadi
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="BloggerSpiceMS">
<br />
<li><a class="BSfb" href="http://anti-fool.blogspot.com//" rel="nofollow"></a></li>
<li><a class="BStw" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSgp" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSpi" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
<li><a class="BSin" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
<li><a class="BSyt" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSfd" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
</div>
<style>
.BloggerSpiceMS{width:285px}
.BloggerSpiceMS li{position:relative;cursor:pointer;padding:0;list-style:none}
.BloggerSpiceMS .BSfb,.BStw,.BSgp,.BSpi,.BSin,.BSyt,.BSfd{z-index:7;float:left;margin:1px;position:relative;display:block}
.BloggerSpiceMS .BSfb{background:url(http://3.bp.blogspot.com/-nTAEp6SSWS8/UbF2DhkAGlI/AAAAAAAADWA/T8mLO9bYYYw/s1600/BS+MetroSocial+facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.BloggerSpiceMS .BStw{background:url(http://2.bp.blogspot.com/-wqy5YSw-Ric/UbF2I8AIlyI/AAAAAAAADXM/dDSjol0xA0g/s1600/BS+MetroSocial+twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.BloggerSpiceMS .BSgp{width:69px;height:70px;background:url(http://3.bp.blogspot.com/-GtuJS6wxxOo/UbF2H7IUrjI/AAAAAAAADWw/BjP68la1JKs/s1600/BS+MetroSocial+google+plus.png) no-repeat center center #da4a38}
.BloggerSpiceMS .BSpi{background:url(http://1.bp.blogspot.com/-bDNIScJ01bw/UbF7q1qm_CI/AAAAAAAADYA/7OWMElpcNzs/s1600/BS+MetroSocial+pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.BloggerSpiceMS .BSin{background:url(http://2.bp.blogspot.com/-Tft4_9x7IaM/UbF2HOPhJ8I/AAAAAAAADWg/c3ox5PRnG5E/s1600/BS+MetroSocial+linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.BloggerSpiceMS .BSyt{background:url(http://1.bp.blogspot.com/-vZ3HVAt-ays/UbF2J9Pel9I/AAAAAAAADXY/_8PwDzbShFU/s1600/BS+MetroSocial+youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.BloggerSpiceMS .BSfd{background:url(http://4.bp.blogspot.com/-Fct6xPEKlHE/UbF2DhesO4I/AAAAAAAADWE/eHJJH9WIKu0/s1600/BS+MetroSocial+feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.BloggerSpiceMS li:hover .BSfb{background:url(http://3.bp.blogspot.com/-QPDEABcKxPk/UbF2D8VhmaI/AAAAAAAADWI/akydVIf9sLU/s1600/BS+MetroSocial+facebookbs.png) no-repeat center center #1f69b3}
.BloggerSpiceMS li:hover .BStw{background:url(http://3.bp.blogspot.com/-EZg8bw5-h04/UbF2KNldalI/AAAAAAAADXg/3TbB08XnU8M/s1600/BS+MetroSocial+twitterbs.png) no-repeat center center #43b3e5}
.BloggerSpiceMS li:hover .BSgp{background:url(http://2.bp.blogspot.com/-GjY3RMU-370/UbF2HdPYUYI/AAAAAAAADWo/VtsNMOS8TX8/s1600/BS+MetroSocial+google+plusbs.png) no-repeat center center #da4a38}
.BloggerSpiceMS li:hover .BSpi{background:url(http://1.bp.blogspot.com/-62R8aRARoW0/UbF7q8888PI/AAAAAAAADYE/Ay5Q009WYPQ/s1600/BS+MetroSocial+pinterestbs.png) no-repeat center center #d73532}
.BloggerSpiceMS li:hover .BSin{background:url(http://1.bp.blogspot.com/-a7huIWzMNOo/UbF2H9byKBI/AAAAAAAADW0/UPUwS4PIPzo/s1600/BS+MetroSocial+linkedinbs.png) no-repeat center center #0097bd}
.BloggerSpiceMS li:hover .BSyt{background:url(http://2.bp.blogspot.com/-0oIiqtcji1w/UbF2KIyG-DI/AAAAAAAADXc/5d3jomnu2Qg/s1600/BS+MetroSocial+youtubebs.png) no-repeat center center #e64a41}
.BloggerSpiceMS li:hover .BSfd{background:url(http://4.bp.blogspot.com/-oMn-o0pLOvo/UbF2FzOxuLI/AAAAAAAADWY/AJREsXoaV0Q/s1600/BS+MetroSocial+feedbs.png) no-repeat center center #e9a01c}
</style>
</div>

  • Step 5  Ganti yang tulisan berwarna MERAH dengan alamat situs anda.
  • Step 6 Simpan lalu cek bog anda untuk melihat hasilnya.



Click ! for Informations

>

Selasa, 19 Februari 2013

Cara Membuat Widget Daftar Link Di Blog


Cara Membuat Widget Daftar Link Di Blog.

  1. Klik tambah gadget.
  2. Pilih HTML/JavaScript
  3. Lalu paste-kan kode script berikut
           


Keterangan :
Contoh.
<a href=" http://anti-fool.blogspot.com/" target="”_blank”">All About All</a><br /><br />
Ganti  http://anti-fool.blogspot.com/     Dengan link yang akan di tuju.
Ganti   All About All    Dengan Nama Anda
Dan Juga Yang Lainnya Juga Sama :





Click ! for Informations

>

Minggu, 17 Februari 2013

Kumpulan Tools Blog


 

A. Kode Javascript Untuk Kode Warna  II (Hex Color code  generator)

 








B. Kode php untuk  mengecek jumlah halaman yang terindeks google (indexed page checker)




 C. Kode untuk submit / mendaftar blog ke puluhan search engine

 






 D. One click sitemap submitter code.





Click ! for Informations

>

Senin, 28 Januari 2013

Cara Membuat Slide Show




Cara Membuat Slide Show inilah kali ini yang akan kita bahas, Mungkin ketika anda melakukan browsing pernah melihat gambar yang berubah ubah dengan keren tampak di halaman awal sebuah website atau sebuah blog. Jangan kuatir. kali ini anda juga bisa membuatnya. Caranya adalah sebagai berikut :


Masuk ke edit html blog.


1.Cari Kode </head>

2.Copy kode di bawah ini lau pastekan sebelum kode </head>
         


Langkah Kedua.
  Buat gadget baru (HTML/JavaScript) dan Pastekan kode di bawah ini..


          

Ganti Tulisan warna merah URL dengan gambar anda pilih...

Terakhir Save...





Click ! for Informations

>

Sabtu, 12 Januari 2013

Cara membuat author box dibawah postingan



1. Silahkan masuk ke dasbor blog anda.
2. Pilih "Template >> Edit HTML"
3. Cari kode ini : ]]></b:skin>
4. Pasang kode berikut tepat diatas kode ]]></b:skin> :


5. Kemudian anda cari kode <data:post.body/>
6. Selanjutnya silahkan pasang kode berikut tepat dibawahnya :




7. Setelahsemua kode terpasang silahkan disimpan dan silahkan di chek hasilnya.

NB :
  • Anda bisa ubah Nama sesuai dengan Nama sahabat
  • Anda bisa ubah link berwarna biru diatas dengan link foto sahabat yang ingin ditampilkan.
  • Anda bisa ubah ukuran texarea pada kode berwarna merah diatas.
  • Anda bisa ubah kalimat sesuai yang sahabat inginkan pada kode berwarna hijau



Click ! for Informations

>

Cara Membuat Multi Slide widgate Tanpa Edit HTML


Cara Membuat Multi Slide widgate Tanpa Edit HTML - Pada postingan yang lalu bang dadan pernah membahas Cara Membuat Button Social Slide disamping Blog, nah untuk kesempatan kali ini bang dadan akan membahas artikel tentang Cara Membuat Multi Slide widgate di Blog tanpa edit HTML. Sahabat Blogger mungkin pernah atau sering melihat tutorial ini di Blog yang lain dan bahkan dari sobat mungkin ada yang sudah menggunakan tutorial ini, namun bagi yang belum pernah memasang widgate ini dan ingin memasang nya di Blog, silahkan ikuti langkah - langkah berikut: untuk DEMO sobat bisa lihat di sidebar Blog ini. atau screen shootnya seperti gambar dibawah.



1. Login ke akun Blog
2. Menuju dasbor/rancangan pilih Tata Letak
3. Kemudian Add Gadget dan Pilih HTML/Javascript
Selanjutnya silahkan sobat copy Kode dibawah ini pada HTML/Javascript

 Berikut Kodenya:
<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Keterangan:
❞ Tulisan yang berwarna Orange adalah Judul widgate
❞ Tulisan yang berwarna merah adalah Kode widgate
Silahkan ganti sesuai keinginan anda.

4. Klik simpan, dan lihat hasilnya.

Kode HTML diatas adalah tampilan multi slide widgate berwarna Light, kalau sobat ingin berwarna Dark, silahkan copy Kode yang dibawah ini:

❞ Berikut Kodenya:

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(http://2.bp.blogspot.com/-w2rXmKKoIWw/TyAHgaAoNyI/AAAAAAAAEvo/EQb_qVUputU/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(http://3.bp.blogspot.com/-DAMBJVFbFmM/TyAHg2YnFAI/AAAAAAAAEvs/n6uvhcqO7V8/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Nah mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Multi Slide widgate diblog Tanpa Edit HTML


Click ! for Informations

>

Jumat, 04 Januari 2013

Cara Membuat Widget Daftar Menu Blog Otomatis


Cara Membuat Widget Daftar Menu Blog Otomatis  - Daftar menu blog yang biasanya ditempatkan pada sidebar blog ini ada juga yang menyebutnya dengan table of content. Cara membuat table of content ini sedikit berbeda dengan daftar isi blog otomatis yang pernah saya posting sebelumnya. Pada widget daftar menu otomatis ini sudah dilengkapi fungsi scroll dan pengunjung blog anda dapat mempercepat pencarian artikel dengan menggunakan opsi pilihan label, title, tanggal posting serta dapat juga menampilkan seluruh isi blog jika kita memilih opsi “All label”. Pada script daftar menu blog yang mau saya share ini, mampu menampilkan sampai max 500 halaman posting. Jika blog anda sudah memiliki lebih dari 500 halaman posting, tinggal diganti saja angka 500 dengan angka 1000 beres !. Dan satu lagi kelebihannya : jika anda mengklik icon panah hitam yang ada didepan judul posting, maka akan memunculkan ringkasan artikel tersebut sepanjang 250 kata. Klik kembali icon panah tersebut untuk menyembunyikan ringkasan.
Cara Membuat Daftar Menu/Isi Di Sidebar Blog :
1.       Login ke dashboard blogger anda.
2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3.       Copy script dibawah ini dan paste pada gadget.

4.       Silahkan edit pada lebar (width) dan tinggi (height) pada script ini untuk menyesuaikan dengan lebar sidebar blog anda. Dan ganti juga nama blognya dengan nama blog anda.
5.       Save / Simpan.



Click ! for Informations

>

Rabu, 02 Januari 2013

Kode warna






Kode warna ini terbilang menarik karna dibuat yang ada di Photoshop. Seperti Terlihat dibawah ini.

Get a Widget Kode Warna







Click ! for Informations

>

Selasa, 01 Januari 2013

Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog.


Kemarin ada salah satu teman blogger yang bertanya kepada saya lewat komentar spam pada salah satu blog saya yang tidak tampil diposting tentang Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog.


Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:

<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
Masukkan tulisannya Disini di sini
</div></div></div>

Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:


Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna biru dengan kata yang diinginkan.

Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.


Klik show untuk melihat
Masukkan tulisannya Disini di sini
 



Yang di atas adalah contoh sederhana tentang cara pembuatan tombol show hide di blog, selanjutnya bisa teman-teman kembangkan sendiri.



Click ! for Informations

>

Kamis, 20 Desember 2012

Membuat Text Area Keren pada Blog


Text area merupakan sebuah kolom yang dengan kontainer tulisan atau kode html dengan tombol highlight atau select all sehingga memudahkan visitor meng-copy kode html atau tulisan pada blog. Oh ya pada kesempatan sebelumnya saya juga sudah menjelaskan tentang bagaimana membuat tombol buka tutup atau tombol spoiler di dalam postingan blog. Jika sobat berminat, silahkan baca DISINI.
Nah pada kesempatan kali ini, lostsector akan menjelaskan 2 (dua) macam text area yakni text area dengan tombol select all atau highlight all dan text area auto select. Untuk penjelasannya, perhatikan langkah-langkahnya di bawah ini :
1. Text area dengan tombol select all
Contoh  Text area dengan tombol select all »

Berikut Kode yang dibuthkan untuk membuat text area seperti di atas :
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /> </div>
<div align="center">
<textarea cols="30" name="txt" rows="5" wrap="virtual">ganti tulisan ini dengan tulisan atau kode html yang sobat inginkan</textarea></div>
</form>
</div>

2. Text area auto select
Contoh text area auto select.


Kodenya :
<div style="text-align: center;">
<textarea cols="30" onmouseover="this.focus(); this.select();" rows="2">Contoh text area auto select jika cursor di sorot ke dalamnya</textarea></div>

Keterangan :
  • Warna Merah : Merupakan pengaturan text align (center : rata tengah, justify : rata kiri kanan, left : rata kiri, right : rata kanan)
  • Warna Biru : Merupakan tombol untuk memblok semua text area
  • Warna Orange : Merupakan lebar dan tinggi form text area
  • Warna Hijau : Merupakan isi dari text area, silahkan ganti seusuai dengan keinginan sobat.




Click ! for Informations

>