You need to upgrade your Flash Player to version 10 or newer.

Selasa, 11 Januari 2011

Make Tabbed Sidebar by Abu Farhan



Who is not familiar with Abu Farhan , he is a master blog from Indonesia which are well known by people within and outside the country. Now he is one of the main tutorial that I've applied on this blog is " Easiest Way to Make Tabbed Sidebar for Blogger ". I will repost.
1. Log in to edit the HTML. Then input the code the CSS follows.


/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}

.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}

.widget-tab ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab ul li:last-child {
border-bottom:none;
}
.widget-tab ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab 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;
}
.tab-content ul li a:hover {
color:#a59c83;
}
.tab-content ul li a:hover small {
color:#baae8e;
}

.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;

}

ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}


2. Please enter the code JavaScript follows.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script>


note:
- Examine the code below, exactly on the code JavaScript earlier.


var starttab= 0 ; var endtab= 2 ; var sidebarname=" sidebar1 ";


- The above code consists of 3 tabs. To adjust the number of tabs to your liking, please change the number 2 with number of tabs you want, start the tab starting with the number 0. While sidebarname is the sidebar id.
- To know the sidebar id in your template, then look for the following HTML code:

<div id='sidebar-wrapper'> <b:section class='sidebar' id=' sidebar ' preferred='yes'>


- Now change the red text with tabbed sidebar id of the tab, namely sidebar1 with sidebar id exist in your template.

DEMO
read more

Creating a slide show effects Smooth Gallery




Previously these special requests from Dodi Retro and Nanang and many other friends that I can not mention one by one.

1. Copy Paste the following script:


<!-- begin Smooth Gallery scripts -->
<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/andidwih/javascript/jd.gallery.css" />

<script src='http://sites.google.com/site/andidwih/javascript/mootools.v1.11.js' type='text/javascript'/>

<script src='http://sites.google.com/site/andidwih/javascript/jd.gallery.js' type='text/javascript'/>
<!-- end Smooth Gallery scripts -->


+ Log in to Blogger and then select "Layout"
+ Click on the "Edit HTML" and paste the above code below <head>
2. Still on the "Edit HTML", copy the code below:


<div id='isismoothgallery'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 500px;
height: 400px;
z-index:5;
border: 1px solid #000;
margin: 0px 0px 0px 30px;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($ ('myGallery'), {
timed: true
});
}
window.addEvent('domready', startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<h2>Featured Article #1</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #2</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #3</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
</div>

</div>
</b:if>
</div>


Paste the code above, just above this code:


<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


+ Change the Featured Article # 1, Featured Article # 2, Featured Article # 3 are in bold letters with the title of your article.

3. Save and View Results. ' Trust Me It's Work '

4. The position of all codes:


<html>
<head>

<!-- begin Smooth Gallery scripts -->
<link rel="stylesheet" type="text/css" href="http://www.geocities.com/adeha_182/jd2.gallery.css" />

<script src='http://www.geocities.com/adeha_182/mootools2.v1.11.js' type='text/javascript'/>

<script src='http://www.geocities.com/adeha_182/jd2.gallery.js' type='text/javascript'/>
<!-- end Smooth Gallery scripts -->


<b:skin><![CDATA[/*

DISINI TEMPAT KODE2 CSS


]]></b:skin>
</head>

<body>
<div id='main-wrapper'>
<div id='isismoothgallery'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 400px;
height: 300px;
z-index:5;
border: 1px solid #000;
margin: 0 0 30px;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($ ('myGallery'), {
timed: true
});
}
window.addEvent('domready', startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<h2>Featured Article #1</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #2</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #3</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
</div>

</div>
</b:if>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

</body>
</html>


5. Finish
read more

Selasa, 30 November 2010

Membuat Show Hide Buku Tamu


Nih cara buat buku tamu Show Hide.. langsung aj Tretan, gk usah trlalu banyak CapCus.. ;)

1. Pertama login dulu ke Blogger

2. Pilih Tab Rancangan yang ada di Dashboard

3. Pilih Tambah Gadget pada elemen laman

4. Kemudian tambahkan HTML/JavaScript

5. Copy Paste kode berikut ini



<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i365.photobucket.com/albums/oo98/gondrezt/Green%20Blog/tabs2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}


</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->

CODE CBOX ATO SHOUTMIX TARUH DISINI

<!-- END CBOX -->
<br />
<a href="http://tukang-coding.blogspot.com">Tukang Coding
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


6. Keterangan begin end cbox diganti dengan kode javascript buku tamu milikmu.

7. Kode di atas mohon jangan diutak-atik karena kode tersebut sudah fix
read more

Rabu, 13 Oktober 2010

Blogshop dan Mini Pesta Blogger Madura


Acara Blogshop dan Mini Pesta Blogger ini merupakan rangkaian acara roadshow Pesta Blogger 2010 (http://pestablogger.com) di 10 kota di Indonesia. Madura dipilih menjadi salah satu penyelenggaranya. Seperti di daerah-daerah lain, penyelenggaraannya bekerja sama dengan komunitas blogger yang berada di daerah tersebut. Plat-M (http://Plat-M.com)sebagai komunitas menaungi para blogger di Madura diberikan kepercayaan untuk menyelenggarakan acara Blogshop dan Mini Pesta Blogger pertama di Madura ini. Berikut detail acara Blogshop dan Mini Pesta Blogger di Madura.

  • Blogshop >> Blog Workshop

    • Diadakan pada pagi hari (08.00-14.00 WIB)
    • Pelatihan Blog yang akan diadakan di Laboratorium Komputer Fakultas Ekonomi – Universitas Trunojoyo – Madura bekerja sama dengan UKMFE RATI (Research & Technology Information)
    • Peserta berasal dari beberapa sekolah dan pondok pesantren yang diundang, karena keterbatasan tempat, untuk Blogshop tidak dibuka pendaftaran
    • Peserta akan diajari bagaimana membuat blog, mengelola blog dan beberapa social networking
    • Pemateri yang hadir dari dagdigdug.com
    • Fasilitas yang akan didapat peserta: sertifikat dan snack

Mini Pesta Blogger 2010 >> Ngompol Bareng Komunitas

  • Diadakan pada malam hari (18.00 – 21.00 WIB)
  • Bertemakan “Merayakan Keragaman Madura”
  • Bertempat di Rumah Makah Tera’ Bulan yang beralamatkan di Jl. Raya Ketengan No.69 – Bangkalan
  • Acara sharing bersama guna mendeklarasikan 101 Postingan tentang Madura
  • Dihadiri beberapa komunitas Online maupun Offline di Madura yang diundang dan yang sudah mendaftar di http://Plat-M.com
  • Peserta dibatasi cuma 75 orang saja, dan pendaftarannya gratis

Copyright: Plat-M.com
read more

Senin, 11 Oktober 2010

Kontak


Jika ada kritik, saran atau masukan bisa menghubungi dibawah ini:



Facebook Tukang Coding
Twitter Tukang Coding
Koprol Tukang Coding




read more

Minggu, 10 Oktober 2010

Tentang Tukang Coding


hidupku dimulai sejak keluar dari rahim ibuku, dirawat dengan penuh kasih sayang hingga bisa seperti saat sekarang.
memulai pembelajaran dari TK, SD, SMP dan SMA dan kuteruskan dengan bekerja disalah satu kota ternama di Madura.
ditempat kerja, aku ditempatkan dibagian Operator Komputer sebagai tonggak utama lalulintas data yang telah memasuki masa modern. Nge-Blog ada saranaku untuk menyalurkan bakat sebagai "Tukang Coding", yaitu hanya bisa memakai, memodif, menyatukan coding yang diperlukan untuk memberi efek yang lebih dari sekedar web blog. Semua ini kudapat dari hasil "jalan-jalan" ke beberapa website ternama & blog terkenal untuk sekedar "mencuri" coding yang dipakai yang kemudian dishare untuk kemajuan Blogger Indonesia. Sekian tentang diriku, klo ada pertanyaan, kritik maupun saran silahkan berkomentar di bawah ini.
read more

Shout