Diberdayakan oleh Blogger.

What's Awesome

About Me

JS

Home » Posts filed under Widget Blogger
Tampilkan postingan dengan label Widget Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Widget Blogger. Tampilkan semua postingan

2 Macam Kotak Search Untuk Blog


Cara Membuat Kotak Search Di Blog, bagi anda yang pingin memasang kotak search atau pencarian agar pengunjung blog anda dapat dengan mudah mencari artikel, disini saya telah siapkan 2 jenis kotak search untuk blog anda, jadi pilih salah satu saja.

DEMO 2 JENIS KOTAK SEACRH :
KODE 1

KODE 2

Cara Membuat
1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Cari kode </head>
3. Letakan Kode 1 CSS atau Kode 2 CSS tepat di atas kode </head>
4. Pilih salah satu saja.

Kode 1 CSS :
<style type='text/css'>
#search {
height:34px;
width:auto;
margin-top:10px;
padding:17px 5px 10px 15px;
width:311px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiauWdHVt2TzTof48XXzDbd8c0pakAt-HmwwTieb41HVQl9amlsTfjWWGUkNOnjujQHOjhSsERNosZc6ENV0lO0YkxZXyEPBHnfYiNc7COYLx-9lLmYmgu6Bk6GCUMI-CqiqwCi_VzcXcj3/);
}
#search form {
margin: 0;
padding: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size: 85%;
}
#s {
margin-left:0px;
float: left;
width:231px;
padding: 6px 2px 6px 5px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXnsj3dc63yiEPPqO-mPqZS69eY6jTO7HqNVJBF8QzpkLonPkNAD7_PV_JtwxUMURP7tThDHvGpXEDhIO_6oqKDy8nVeNjGLkUhbLvtwvPU9bEjtHRO5JAA6nXiZnloCvRpwmGJBzjaX7X/s1600/sform.png) no-repeat;
border:none;
font: normal 100% &quot;Tahoma&quot;, Arial, Helvetica, sans-serif;
color:#C6C6C6;
}
#searchsubmit {
width:57px;
float: left;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg40WduWb5ZTFToNZVrYSDPkBwwAfW-uSBVzhMi5CYUGa2Bz3ie7UL8KKkDRlU3-1DiI6gSHeH4zdap350w1_HaxUSRUn8RTKJ7YhJXeNOkGRGoSr6ETM8uxBhrnXI7sluW2nekrH0c_IFg/);
border:none;
font: bold 100% &quot;century gothic&quot;, Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:28px;
margin-left:5px;
}
</style>
Kode 2 CSS
<style type='text/css'>
div#search { background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFXWJyepBi3LRuj5qSJ494nkcdlrSeBhIASAOfNCItQKWLXdwwTQmXr62P2Zt7dO1-_JZJ5oyvcFQL4nxEejKN34SSOL253H75A-_BYFCRxvxIbioXJcNea6vTBMebnIC9md4CS5N4P1i8/") no-repeat scroll left top;margin: 0; width: 320px; height: 44px; }
div#search form { height: 44px; }
div#search form p { display: block; margin: 0; padding: 14px 0 0 30px; }
div#search form p input { width: 285px; border: 0; background: transparent none; color: #ffffff; }
</style>
Setelah dipilih salah satu kode di atas, simpan template, kembali kemenu awal, pilih ADD GADGET lalu PilihHTML JavaScript. Pilih salah satu dari kode HTML di bawah ini.

Pilih Kode 1 HTML (jika kamu memasang Kode 1 CSS)
<div id='search'>
<form id="searchform" action="http://YOURBLOG.blogspot.com/search" style="display:inline;" method="get">
<input id="s" name="q" type="text" value=""/>
<input id="searchsubmit" value="" type="submit"/>
</form>
</div>
Pilih Kode 2 HTML (jika kamu memasang Kode 2 CSS)
<div id='search'>
<form action="http://YOURBLOG.blogspot.com/search" id='search form' method='get'>
<p><input id='searchform' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type your search here...&quot;;}' onfocus='if (this.value == &quot;Type your search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Type your search here...'/></p>
</form>
</div>
Perhatian : Jika kamu memilih Kode 1 CSS , maka kamu harus Pilih Kode 1 HTML, begitupun sebaliknya. Dan ganti kata yang berwarna merah dengan URL blog anda.

Cara Membuat Multi Menu Horizontal Drop Down Di Blog


Menu Drop Down - Kali ini saya akan membahas Cara Membuat Multi Menu Horizontal Drop Down Di Blog, menu yang satu ini berbeda dengan menu drop down lainnya, yang satu ini menu drop down nya bisa bercabang lagi lebih banyak, menu ini lumayan bermanfaat bagi anda yang ingin menyimpan link yang cukup banyak.


Cara Membuat Multi Menu Drop Down :
1. Login ke Blog kamu.
2. Pilih Menu Edit HTML, cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 3.
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
4. Selanjutnya cari kode </head>,setelah ketemu letakan script di bawah ini tepat di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt' type='text/javascript'/>
5. Selanjutnya cari kode yang mirip dengan kode di bawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Banten-Xp(Header)' type='Header'/>
</b:section>
</div>
Kode di atas merupakan kode bagian Header dan untuk yang berwarna merah biasanya itu adalah judul header blog anda, jadi cari saja kode yang mirip kayak di atas. Dan setelah ketemu letakan kode di bawah ini tepat di bawah kode bagian akhir kode header di atas (letakan tepat di bawah kode yang berwarna biru).
<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='http://banten-xp.blogspot.com/'>Item 1</a></li>
<li><a href='#'>Folder 0</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Folder 1</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
<li><a href='#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=http://banten-xp.blogspot.com/'>Item 4</a></li>
</ul>
<br style='clear: left'/>
</div>
Klik dulu PERTINJAUAN sebelum di SAVE untuk menentukan berhasil atau gagal.

Cara Membuat Menu Facebook, Twitter, RSS dan Google Plus Melayang Dengan Efek 3D

CSS - Menu ini berfungsi untuk menghemat tempat di ruang blog Anda, tentunya dengan efek melayang, dan disini icon dari Facebook, twitter, RSS dan Google plus berbentuk 3D. Saat pointer menyentuh icon tersebut secara otomatis akan muncul efek 3D dan hovernya.


1. Login ke blog kamu.
2. Pilih Tata Letak > Add Gadget > HTML/JavaScript.
3. Copy kode dibawah ini.
<style> .TNT-flt-wdt { position:fixed; right:10px; top:36% ; } .TNT-flt-wdt img { float:right; clear:right; margin:1px; -webkit-transition: all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .TNT-flt-wdt img:hover { -moz-transform: scale(1.2) rotate(6deg); -webkit-transform: scale(1.2) rotate(6deg); -o-transform: scale(1.2) rotate(6deg); -ms-transform: scale(1.2) rotate(6deg); transform: scale(1.2) rotate(6deg); } </style> <div class="TNT-flt-wdt"> <style> .TNT1 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTNCLVDEayrS-kJPxNphBRnQGwN3tPbWPkzuuRtFsiKpgAKW1T-FF8D_jEISV9WnUwrt-zEn42jyq8Or79azx7guJdZ_GVDYw1SFQ37PqgXJKn9PnqNI2qZIMhhZejmcrWPjXM2Y8rR6S/s1600/Facebook+Icon.png') bottom; text-indent: -99999px; } .TNT1:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-bnMmlHLef3eDcIHoTk3hK_fjdg_AIF20ELPGQlttOkXqWNLYVQbF1U2U2juv5l8fnNwCESSQ8Uw3OFMmCiHtnj8Onf-BtA5cjWLeHad7jIlV7Mhe-uQxVV4_eyxDiac1lTrCkv2kLR4l/s1600/Facebook+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT1" href="www.facebook.com/Josendro.B"></a> <style> .TNT2 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBwBF0nfm0nPRl1yX5AVcQTJmX-s1JiYCBAp85aPtFQYp3Dp-ilcTo7yPxWZL-DPs_RLUH6p6cGLfsB9mOUU2A_p8XcrzkfH7Fo2iNE-Hc1lJ98f78aT0SDFJ6mgQ4YoCwMv5n4ONya0Pn/s1600/Twitter+Icon.png') bottom; text-indent: -99999px; } .TNT2:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbZQ1HQX1ZOUaB0D-1f7oqB_myhFI_yNYgrkv_U7OTKvSlUhiAntP6bfHjVvCAhk2CruJgoBG6WKSXAhLvbhM1T3yghh8UxoYnpk8i0fyfT4WjB8wwugIqfY45E4D79x4AIU3pK_preXy2/s1600/Twitter+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT2" href="https://twitter.com/Dickys_"></a> <style> .TNT3 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0vWgHzmsFBaDMkhjUl2ab5edGUI_6eZ1Mulx1qKPxeI-RJ64x559ALFGE6FAqcFMLJyiaLLyo1UzqkKfRbJGCcIZnAlmMFXvKUntJQ-zEWhvw5JXkwA1p12yEkv0IBqTH7Y9-b1wn0yMf/s1600/Feedburner+Icon.png') bottom; text-indent: -99999px; } .TNT3:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfezZ1ewVK_uubudY5QwbxsusD6KhirPBZWo-fKfEZlY3AB5thb6l7byWQX0vOl6CFryiHyY5s5eGYnDgZaBY-JQWgcD6_sEPHlIwU9p4f26l6UNEEmEFePOIziVPgSB9EMzEwWgHNNwMi/s1600/Feedburner+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT3" href="http://feedburner.google.com/fb/a/dashboard?id=t890p5s3sb7cv09peq7omi1ld0"></a> <style> .TNT4 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCcV0diJWzXTP9tKger1S_JFQPqWTpaCr8f_mY_Yz6e67ibi2N_ma2k6cnIqL1W0LCS-ZbxC1o9dOXNybmcHacemM0u4j2lSqWWzEJUKIG57CypkBcuPBzitNtjWY0Fau06o9cW8I9gaEm/s1600/Google+Icon.png') bottom; text-indent: -99999px; } .TNT4:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJzYAyN56CiQTOyPFdup6hVjosQHGXg01EQr-fOOMjXUclhNblKWPVIzdFNf_j8LxSaznORUFjWexmnlAzYRDShqdWSjLRNSdA9i31nAewahFNUFFSRxnMR-O-yRjlGWYiy2fz-b8mCHsm/s1600/Google+Rollout+Image.png') bottom; height: 64px; } </style> <a class="TNT4" href="https://plus.google.com/116786422006141312941"></a>
Ganti kode yang berwarna merah dengan username masing-masing dari Anda.

Cara Membuat 3 Tab Menu Dengan JQuery Dan CSS


Cara Membuat 3 Tab Menu Dengan JQuery Dan CSS - Kali ini saya akan menjelaskan mengenai Tips Blog yaitu Cara Membuat 3 Tab Menu Dengan JQuery Dan CSS, 3 Tab Menu ini sama dengan Menu Tab View yang pernah saya bahas pada posting Cara Mudah Membuat Menu Tab View kali ini 3 Tab Menu ini lebih mudah cara membuat nya dengan menggunakan JQuery Dan CSS, bahkan lebih keren, fungsi 3 Tab Menu ini bisa kamu gunakan untuk menghemat ruang di sidebar blog kamu, jadi krsimpulan nya saat 3 Tab Menu ini di klik maka akan langsung muncul widget yang kamu pasang pada Tab Menu ini contoh nya Recent Post, Random Post, Popular Post kamu bisa menyatukan nya dalam Tab Menu.
Bagi kamu yang tertarik membuat 3 Tab Menu ini silahkan perhatikan baik-baik contoh yang akan saya berikan.

Berikut Cara Membuat 3 Tab Menu Dengan JQuery Dan CSS :

Pilih Add Gadget > HTML JavaScript dan Copy kode di bawah ini.

<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9bPBGyZFvg3eqHbeg5LFlGVsCDwbihwRiF3lQ9Qa-_M5WReqVl8MqbyFzWoa8LFOt6YxywHMofmGmNB9chm_x471HEU2KwsYfO8595mYrwIj9c1tHbJipC4EPe2i9t0lMrDHURGYBmIY/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-LjERlD0HJFLxbX4xGOgDPfzgGe0vkrH_IA05CdIo5aQwctmopkTiaGDG9srFcaaCG2voQIYmb4p0gbAuuYTSoYfMX0BdX0EakKOATlcfABcbuZ5bqgXbfk_-S6ZVYNgELLW4aGxgQZ0/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZdhPJ5IdA5kcSUbMxliBazC-CF1HEHf8MtXHxFZDVcLtN7GDe5HHBYbmKCIW-O62DCfbRpoi3jKbqbdAsD3IGc_9d_kTmNbjmN03phyb0KiUwygxEcrdTBKLeQ9ZHIirQzr1ptQMGE8g/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active">Judul Tab 1</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Judul Tab 2</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Judul Tab 3</a></li>
</ul>
<div id="content_1" class="content">
TAB 1 : ISI DENGAN KODE SCRIPT ATAU YANG LAINNYA.
</div>
<div id="content_2" class="content">
TAB 2 : ISI DENGAN KODE SCRIPT ATAU YANG LAINNYA.
</div>
<div id="content_3" class="content">
TAB 3 : ISI DENGAN KODE SCRIPT ATAU YANG LAINNYA.
</div>
</div>

Isi kode yang berwarna biru dengan kode Script atau Gadget bawaan dari Blogger, dan masih banyak lainnya,
Ganti kode yang berwarna merah dengan Judul.

Jika sobat kurang paham saya akan memberikan contoh nya.
<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9bPBGyZFvg3eqHbeg5LFlGVsCDwbihwRiF3lQ9Qa-_M5WReqVl8MqbyFzWoa8LFOt6YxywHMofmGmNB9chm_x471HEU2KwsYfO8595mYrwIj9c1tHbJipC4EPe2i9t0lMrDHURGYBmIY/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-LjERlD0HJFLxbX4xGOgDPfzgGe0vkrH_IA05CdIo5aQwctmopkTiaGDG9srFcaaCG2voQIYmb4p0gbAuuYTSoYfMX0BdX0EakKOATlcfABcbuZ5bqgXbfk_-S6ZVYNgELLW4aGxgQZ0/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZdhPJ5IdA5kcSUbMxliBazC-CF1HEHf8MtXHxFZDVcLtN7GDe5HHBYbmKCIW-O62DCfbRpoi3jKbqbdAsD3IGc_9d_kTmNbjmN03phyb0KiUwygxEcrdTBKLeQ9ZHIirQzr1ptQMGE8g/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active">Tutorial Blog</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Lifestyle</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Anime</a></li>
</ul>
<div id="content_1" class="content">
<script style="text/javascript"> var numposts = 15; var standardstyling = true; </script> <script type="text/javascript" src="http://kodecode.googlecode.com/files/judullabel_tertentu.js"></script> <ul> <script src="http://blazerracing.blogspot.com/feeds/posts/default/-/Tutorial%20Blog?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
</div>
<div id="content_2" class="content">
<script style="text/javascript"> var numposts = 15; var standardstyling = true; </script> <script type="text/javascript" src="http://kodecode.googlecode.com/files/judullabel_tertentu.js"></script> <ul> <script src="http://blazerracing.blogspot.com/feeds/posts/default/-/lifestyle?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
</div>
<div id="content_3" class="content">
<script style="text/javascript"> var numposts = 15; var standardstyling = true; </script> <script type="text/javascript" src="http://kodecode.googlecode.com/files/judullabel_tertentu.js"></script> <ul> <script src="http://blazerracing.blogspot.com/feeds/posts/default/-/anime?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
</div>
</div>
Contoh diatas saya menggunakan Cara Menampilkan Posting Berdasarkan Label, jika sobat mau menggunakan cara diatas sobat tinggal ganti kode yang berwarna biru dengan URL blog kamu dan yang merah dengan Label kamu (Gunakan kode %20 untuk label yang mempunyai dua kata)

Cara diatas hanya sebagai cotoh sobat boleh letakan kode script lainnya seperti Facebook Fan Page, dan yang lainnya

Widget Share Egg Yang Bisa Buka Tutup Untuk Blog

Widget Share Egg Yang Bisa Buka Tutup Untuk Blog - Kali ini saya akan membahas mengenai Tips Blog yaitu cara membuat Widget Share Egg Yang Bisa Buka Tutup untuk blog. Mungkin untuk beberapa orang tidak terlalu mengenal widget ini, nah disini saya akan menjelaskan nya terlebih dahulu apa itu Widget Share Egg Buka Tutup. Widget ini berfungsi untuk mengirim artikel atau blog ke berbagai macam jejaring sosial, yang mana widget ini ditutupi sebuah telur, jika kursor menyentuh telur tersebut maka telur tersebut akan terbuka, penasaran silahkan ikuti langkah-langkah di bawah ini untuk membuat widget tersebut.

1. Login ke Blog kamu.
2. Pilih Edit HTML > Cari kode </head>
3. Letakan kode di bawah ini tepat di atas kode </head>
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

4. Selanjut nya cari kode </body>
5. Letakan kode di bawah ini teapt di atas kode </body>
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://www.ravisaive.in/">Technology Blog</a>
6. Klik dulu Pertinjauan dan lihat apa yang terjadi, setelah itu baru simpan.

Tutorial Letak Button Follow dan Dashboard Dalam Blog


Dalam template asal blogger, sudah diletakkan untuk widget follower dan juga dashboard. Walau bagaimanapun, anda boleh melakukan sedikit pengubahsuaian. Tutorial kali ini akan tunjukkan cara untuk letak button follow dan dashboard dalam blog seperti gambar di bawah.

Anda juga boleh tengok demo button follow dan dashboard ini di test blog ini.

Tutorial adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang dibuka.
[tidak faham.?]

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-N61PPu_1haE/TtOSBZgZikI/AAAAAAAAHvc/vIEC_dYpIVo/dashboard.png" /></a></div>

Nota: Gantikan 'ID BLOG ANDA'

Bagaimana untuk cari ID Blog.?
> Anda klik pada 'new post' dari dashboard, dan akan ada paparan seperti gambar di bawah. Noombor yang admin highlight adalah contoh NO ID BLOG


3. Setelah anda selesai letakkan ID blog anda, save dan lihat hasilnya.:)

Tutorial Letak Facebook Like Badge Masa Blog Dibuka


Facebook dan blogger adalah kombinasi yang agak bagus. Dengan adanya facebook page, blogger dapat berinteraksi dengan pengunjung. Salah satu penggunaan yang cool adalah dengan meletakkan facebook like badge semasa blog anda dibuka.

Secara tidak langsung dapat menggalakkan pengunjung blog anda untuk pada masa yang sama 'like' pada page anda.

Contoh seperti dibawah

Anda juga boleh melihat demo di test blog ini.

Tutorial letak facebook like badge semasa blog dibuka seperti dibawah.

1. Dari dashboard > design > edit HTML

2. Backup template blog sebagai langkah berjaga²

3. Dengan menggunakan fungsi find (ctrl + F), cari kod <body>
3.1 Jika anda tidak jumpa code <body>, cari kod ini
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

4. Copy dan paste code di bawah selepas kod yang anda jumpa di langkah 3 atau 3.1
<!-- KakiNetwork.Com Likebox Pro FBFan Code Start -->
<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='fanspage anda'
//]]>
</script>
<link href='http://kakinetwork.com/sources/fbfans-pro/kakinetwork.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/unwanted86/javascript/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://sites.google.com/site/unwanted86/javascript/kakinetwork.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 15,
wait: 0,
url: 'http://www.facebook.com/fanspage anda',
closeable: true,
});
});
//]]>
</script>
<div id='fbtpdiv'/>
<!-- KakiNetwork.Com Likebox Pro FBFan Code End -->

Contoh:




NOTA:
i) Gantikan ''Fanspage Anda' pada row KNFBFansPRO='OhBest' dengan nama yang anda mahu.
ii)Gantikan '15' pada row 'timeout: 15,' dengan masa paparan yang anda mahu semasa blog dibuka
iii) Gantikan dengan url page anda pada row url: 'http://www.facebook.com/OhBest',

5. Save dah lihat hasilnya.:)

Cara pasang butang share melayang

Butang share ini adalah seperti butang share yang lain yang mana kebiasaannya diletakkan dibawah atau pun diatas posting . Butang melayang ini  ikut bergerak jika kita melakukan scroll pada blog.Oleh kerana ia bergerak keberangkalian pengunjung untuk klik butang tersebut adalah lebih besar kerana lebih mudah untuk mencapainya .Mengandungi butang untuk google plus,facebook dan juga twitter.
Berikut adalah cara cara bagi pemasangannya:


1.Masuk ke dashboard-Klik design--- Page elements





2.Pilih ---Add a gadget




3.HTML/ Javascript







4.Masukkan kod dibawah ini:
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id="pageshare" title="Share to Your Friends">
<div style="clear: both; font-size: 16px; text-align: center;">
</div>
<div class="sbutton" id="gplusone">
<script src="https://apis.google.com/js/plusone.js" type="text/javascript">
</script>
<g:plusone size="tall"></g:plusone></div>
<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script></div>
<div class="sbutton" id="rt">
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script></div>
</div>

5.Klik pada butang save

Memasang Komentar Facebook Di Blog



Kebanyakan orang-orang lebih suka berkomentar dengan akun facebook di blog, oleh karena itu saya akan kasih tutorial membuat komentar di blog.



Untuk pemasangan Komentar Facebook Di Blog, berikut tutorialnya:


  • Pertama masuk ke Tab Template dan Klik Edit HTML
  • Setelah itu kamu centang Expand Widget
  • Cari dengan F3 dengan kata kunci <div class='post-footer'>
  • Jika ada 2 , pilih post-footer yang pertama.
  • Setelah itu paste Element ini diatasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div style='text-align:center;width:100%;height:auto;'><fb:comments data-colorscheme='dark' expr:href='data:post.url' num_posts='7' width='620'/></div>
</b:if>
  • Setelah itu simpan, dan coba tes koment di posting sobat.
Gampang juga ya pasang Komentar Facebook Di Blog. Kalau Blog sobat di blokir sama Facebook dengan terpaksa tidak bisa memasang komentar ini seperti blog saya :D

Cara Membuat Tabel Keren Seperti Tabel Google



Cara Membuat Tabel Seperti Tabel Google
Kali ini saya akan share tentang cara membuat tabel saat posting di Blogger seperti tabel yang dimiliki oleh Google Support. Membuat tabel keren ini menggunakan dua source kode, yaitu CSS dan HTML. Dimana kode CSS akan disisipkan pada template blogger, sedangkan kode HTML yang akan disisipkan pada postingan Blog kita. Kode CSS dan HTML ini murni saya dapatkan dari halaman Google Support. So, tanpa panjang lebar mari kita simak cara membuat tabel mirip tabel yang dimiliki oleh Google.com.

Tahap Pertama:

1. Login ke Blogger > Template > Edit HTML
2. Jangan lupa centang "Expand Template Widget"
3. Cari kode ]]></b:skin> lalu sisipkan kode CSS berikut ini tepat di atas ]]></b:skin>
<!-- Nice Table Mainbom.com-->
table th {
    padding-top: 7px;
    text-align: left;
}
.nice-table {
    border-collapse: collapse;
    border-spacing: 0;
}
.nice-table tr:first-child th {
    border-top: 0 none;
}
.nice-table th:first-child {
    border-left: 0 none;
}
.nice-table tr:first-child th:last-child {
    border-right-color: #5C6785;
}
.nice-table th {
    background-color: #5C6785;
    color: white;
    font-weight: bold;
}
.nice-table th, .nice-table td {
    border: 1px solid #EBEBEB;
    padding: 3px 10px;
}
.nice-table td {
    background-color: #E6E6E6;
    border-color: #E5E5E5 #CCCCCC #E5E5E5 #E5E5E5;
    color: #444444;
}
.nice-table td:last-child {
    border-right-color: #E5E5E5;
}
.nice-table tr:nth-of-type(2n) td {
    background-color: #FFFFFF;
    border-right-color: #E5E5E5;
}
.nice-table.spaced-table td, .nice-table.spaced-table th {
    padding: 10px;
}
.nice-table.wide {
    width: 95%;
}
.nice-table.narrow {
    width: 75%;
}
.nice-table.narrower {
    width: 50%;
}
.nice-table.narrowest {
    width: 35%;
}
<!-- Nice Table Mainbom.com-->
4. Klik Simpan template

Tahap Kedua:

Tahap kedua adalah saat anda membuat postingan Blogger yang akan menggunakan tabel, pastikan edit entri pada mode HTML bukan "Compose". Untuk membuat tabelnya silahkan ikuti contoh kode di bawah ini
<table class="nice-table" width="100%" ><tbody>
<tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr>
<tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris 1</td> <td>kolom 3 baris 1</td> </tr>
<tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> <td>kolom 3 baris 2</td> </tr>
<tr> <td>kolom 1 baris 3</td> <td>kolom 2 baris 3</td> <td>kolom 3 baris 3</td> </tr>
<tr> <td>kolom 1 baris 4</td> <td>kolom 2 baris 4</td> <td>kolom 3 baris 4</td> </tr>
</tbody> </table>
Ini adalah contoh tabel dengan 3 kolom dan 4 baris
Header 1Header 2Header 3
kolom 1 baris 1kolom 2 baris 1kolom 3 baris 1
kolom 1 baris 2kolom 2 baris 2kolom 3 baris 2
kolom 1 baris 3kolom 2 baris 3kolom 3 baris 3
kolom 1 baris 4kolom 2 baris 4kolom 3 baris 4

Catatan:
  • Jika ingin menambah atau mengurangi jumlah kolom dan baris, silahkan mengedit dengan memperhatikan kode <td> dan <tr>
  • Disetiap kolom akan ada kode <td> dan </td>
  • Disetiap baris akan ada kode <tr> dan </tr>
  • "Tahap Pertama" cukup dilakukan sekali saja, dan "Tahap Kedua" dilakukan setiap membuat tabel
  • Ada pertanyaan silahkan komentar.
Untuk yang ingin Copas, mohon link sumbernya :D

Cara Membuat Gambar Berjalan di Bawah Blog

BantenXp - Cara mudah membuat gambar berjalan di bawah blog adalah tutorial kali ini. Setelah membahas tentang cara membuat teks berjalan sekarang kita akan membuat gambar berjalan di bawah blog. Untuk contoh gambar-gambarnya saya sudah menyiapkan di bawah. Jika ingin lebih kreatif silahkan membuat atau mencari gambar sendiri.

Cara Membuat Gambar Berjalan di Bawah Blog:
1. Login ke Blogger -> Template -> Edit HTML
2. Cari kode ]]></b:skin>
3. Simpan kode berikut ini di atas kode ]]></b:skin>
#running_img {
position:fixed; bottom:0px; right:0px; clip:inherit; width:100%;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth); } 
4.Kemudian cari kode </body> dan pasang kode di bawah ini tepat di atas kode </body>
<div id='running_img' width='100%'><marquee onmouseover='this.stop()' onmouseout='this.start()' align='center' direction='left' scrollamount='5'><img src='URL GAMBAR'/></marquee></div>
Ganti URL GAMBAR dengan link gambar anda misalnya https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy3xcHmXvdUcTTouYM2SZk8Ss8iGa4djoUG82YPzzVVL85ZHfNEu1LJeGOuI0gSOthrw_KSwUFEuzD1XrKar6jq2Ac4ZZx1ralpVnUY9rMqOd1KU1mwiBPW6wZnz39PttB9iueqLylGULI/s1600/Walk1.gif
5. Simpan Template dan lihat hasilnya.

Keterangan:
  • Direction='left' adalah arah gambar berjalan ke kiri. Jika ingin gambar berjalan ke kanan, ganti left dengan right
  • Scrollamount adalah tingkat kecepatan gambar berjalan, semakin besar nilai scrollamount maka semakin laju gambar berjalan
Berikut saya sertakan contoh gambar

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSE3i0PefB6TOI_nqA4jp7NWeJOEAvNAsKvM5_6sN_RR2D1DhPuDUh6jQZnwnazJRdxhGQDsumqr5lFSXWTx04qDm82xsBadEpEOdBY_xrrmpYCswu5HjggiVNi41RanNAN604CUr-mBQ/s1600/cooltext799652167.png

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiHDDx2Ta0W10z5kibmZuQlRp4lnGpSMMLgXvJmFwQVgmvmVRdNBZqED7kkDO_V2oWjyDkNMRIdpalOU-pMbI4eSacIDc3SH0xN_qr3jtgBTjFZISOWCMo_M0EPlQkbAR-tSUY2brCOPPw/s1600/Run.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJkORN3-pDBtzPNJqFLsmO5CdK_rpQNDhxk4dND7xeMxTptnem1wuZMZadNlo8vIb5-dJv2WwtFAguQ1qQKa63OzPEHDQrp6dRuJjLrm7Sh-EFewf3iMXILtS2FFfLhBIv6DnGhszbEIe/s1600/Run2.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy3xcHmXvdUcTTouYM2SZk8Ss8iGa4djoUG82YPzzVVL85ZHfNEu1LJeGOuI0gSOthrw_KSwUFEuzD1XrKar6jq2Ac4ZZx1ralpVnUY9rMqOd1KU1mwiBPW6wZnz39PttB9iueqLylGULI/s1600/Walk1.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK6ViQHmHudi0KWxRc7mE7KycM9VTvdEggowe8Gt2nbfSNbnRBI11joBuZ5aa_O_98KN5SisH6wCipGiMGWqZGuxupPSMMlWVIYiY9UiNZtdB0ijhIwvYZAfVWO1j3DmVvHDeSXtsvEqn_/s1600/Walk2.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuaBBErLUnqG4oB6EL_0ETlo3BnMp2ptDY8NtFyKtT2dzfCSc4TXyA8p3gBvZq4MxY3Ax7k-ao1jOO1qO2sLz7n7ge4Uj4PKb-LrHaxXXI_5GC8IXo0z5MqCT3bh7nuNnKLVXKcWTujJ6I/s1600/Walk3.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEDRR1TbjBCQheMvU_f87iQ9sgp5aWi6CZs8MycafW9ehPWK5KsvsgFyLYMiPSzXkip_8cnWcFY34gNX77H_Io_vgaI3_w3xLf6gaHjo1N908WY26UD4YhS3jgA0fpsSf7IiDYxnbJ5DXv/s1600/Fly.gif

Icon-icon buat BLogger

Icon-icon buat BLogger

Ini Merupakan beberapa icon gratis yang saya dapat berikan kepada teman-teman semuanya disni semuanya dapat kalian download gratis tanpa bayar sedikit pun. Icon ini berguna untuk mempercantik tampilan dari blog kalian.

Selamat mencoba

A set of sweet Irish Icons



Several wild RSS feed icon sets




From DefiantArt


Free Vector Icon PSD Set


Simplistica (has a nice calendar icon!)


Stickers Icons


Sketchy Paper Icons (I LOVE this set)


Valentine Love


Glossy Blogging Icons


Function Icon Set


Bottle Icon Set (cute, cute, cute!)



Coquette Icon Set


Vector Icon Set