blog capoenk

Membuat readmore atau baca selanjutnya pada postingan blog maka tampilan blog bisa terlihat rapi suatu kepuasan bagi sitiap orang yang melihatnya, oia sob, kenapa saya disini kasih judul 'Ver.1', karena sebenarnya masih ada lagi readmore animasi yang lain yg belum saya post, mkanya saya sengaja kasih ver.1, dan mungkin lain kali baru saya post. ditunggu ajj yah all.heheee...

Baiklah langsung saja Jika Sobat Tertarik ingin mencobanya, silahkan ikuti langkah berikut :
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode CSS Berikut tepat diatasnya.

/* Readmore Animasi akaUTta */
.UTreadmore a {
font-family:monospace, sans-serif !important;
color:#CFDBEC !important;text-shadow:1px -1px 1px #000;
font-size:14px;
text-decoration:none;
}
.UTreadmore a:hover {
font-size:19px;color:#fff;text-shadow:0px 0px 2px rgb(0,86,224);}
.circlewrapper {
width:98px;
height:98px;
float:right;
text-align:center;
}
.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgb(0,86,224);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px rgb(0,86,224);
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgb(0,86,224);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px rgb(0,86,224);
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}
.circle2 {
background-color: transparent;
border: 5px solid rgb(0,86,224);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px rgb(0,86,224);
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}
@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(0,86,224);}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(0,86,224); }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}

4. Selanjutnya cari kode </head> , Tekan Ctrl+F (mozzilla) untuk mempermudah pencarian. Kemudian letakkan kode berikut diatasnya.

<script type='text/javascript'>
var summary_noimg    = 300,
    summary_img      = 300,
    img_thumb_height = 80,
    img_thumb_width = 90;
</script>
<script type='text/javascript'>
//<![CDATA[
/**
* ========================================================================
* Auto-readmore link script, version 2.0 (for blogspot) (C)2012 by arieadie
* visit http://ut2a-4down.blogspot.com to get more cool hacks
* ========================================================================
*/
function removeHtmlTag(strx, chop) {
    if (strx.indexOf("<") != -1) {
        var s = strx.split("<");
        for (var i = 0; i < s.length; i++) {
            if (s[i].indexOf(">") != -1) {
                s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
            }
        }
        strx = s.join(" ");
    }
    chop = (chop < strx.length - 1) ? chop : strx.length - 2;
    while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
    strx = strx.substring(0, chop - 1);
    return strx + '...';
}

function createSummaryAndThumb(pID) {
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if (img.length >= 1) {
        imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
        summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>

5. Selanjutnya cari kode <data:post.body/> , jika sudah ketemu. silahkan ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='circlewrapper'>
<div class='circle'/>
<div class='circle1'/>
<div class='circle2'>
<span class='UTreadmore'><a expr:href='data:post.url'>More√</a></span>
</div></div>
</b:if>
</b:if>

6. Langkah Terakhir Simpan Template, dan lihat hasilnya. ;)

NB::>>>
- Teks yang saya beri warna biru, silahkan Sobat rubah sesuka hati, dan saya tidak warna biru harap tidak mengutak atiknya, karna bisa berantakan,hehee,..

Cara Membuat Energy Saving Mode di Blog Tanpa Javascript

noreply@blogger.com (Yuga irgi) — Sat, 03 Aug 2013 11:29:00 +0000

capoenk-blog.blogspot.com

Energy Saving Mode di Blog Tanpa Javascript PART 1,

Energy Saving Mode Part I

/* Opening Element By ZTO
Creation by ZTO.blogspot.com
ESM by tutorialbelajarblogger.blogspot.com
*/
body::before, body::after {
position: absolute;position:fixed;
content: "";
background: #000;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: 9999
}
body::before {border: 10px solid #ccc;border-left:none;
top: 0;
left: 50%;
right: 0;
bottom: 0;
}
body::after {
top: 0;
left: 0;border: 10px solid #ccc;border-right:none;
right: 50%;
bottom: 0;
}
body:hover::before {
left: 100%
}
body span.oktri {
position: absolute;position:fixed;right:0;
left: 0;
top: 48%;
border: 5px solid #ccc;
margin: 0 0 0 -1px;
z-index: 99999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body span.oktriblog {
position: absolute;position:fixed;
right:0;
left: 0;
top: 48%;
border: 5px solid #ccc;
margin: 0 0 0 0px;
z-index: 99999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body:hover::after {
right: 100%
}
body:hover::before, body:hover::after {
visibility: hidden
}
body:hover span.oktri {
visibility: hidden;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
top: 0;
}
body:hover span.oktriblog {
visibility: hidden;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
top: 100%;
}
body span.ok3 {width:35%;border-bottom: 5px solid #ccc;
border-top: 5px solid #ccc;padding:10px;background:#000;
font-size:25px;color:#fff;
text-align:center;
position: absolute;position:fixed;
left: 32%;right:45%;
top: 40%;
bottom: 45%;
margin: 0 0 0 0px;
z-index: 123455543123445556888;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body:hover span.ok3 {
visibility: hidden;
-moz-transition: all .7s ease-out;
-o-transition: all .7s ease-out;
-webkit-transition: all .7s ease-out;
transition: all .7s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
right: 0;z-index:99999999
}

Masukkan css diatas diatas kode ]]><b:skin>

 <span class='oktri'></span>
<span class='ok3'>Energy Saving Mode<br/><span style='font-size:12px;color:#fff'>Gunakan keyboard untuk menscroll halaman</span></span>
<span class='oktriblog'></span>

Masukkan kode html diatas tepat dibawah kode <body>. Simpan template dan lihat hasilnya

Energy Saving Mode di Blog Tanpa Javascript PART 2,

Energy Saving Mode Part II

/* By ZTO 
ESM by Mas Oktri
*/
body::before, body::after {
position: absolute;position:fixed;
content: "";
background: #000;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: 9999
}
body::before {border: 10px solid #ccc;border-left:none;
top: 0;
left: 50%;
right: 0;
bottom: 0;
}
body::after {
top: 0;
left: 0;border: 10px solid #ccc;border-right:none;
right: 50%;
bottom: 0;
}
body:hover::before {
left: 100%
}
body span.belajarblog {
position: absolute;position:fixed;
left: 50%;
top: 0;

bottom: 65%;
border: 5px solid #ccc;
margin: 0 0 0 -1px;
z-index: 99999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body span.mas-oktri {
position: absolute;position:fixed;
left: 50%;
top: 62%;
bottom: 0;
border: 5px solid #ccc;
margin: 0 0 0 0px;
z-index: 99999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body:hover::after {
right: 100%
}
body:hover::before, body:hover::after {
visibility: hidden
}
body:hover span.belajarblog {
visibility: hidden;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
bottom: 100%;
}
body:hover span.mas-oktri {
visibility: hidden;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
top: 100%;
}
body span.masoktri {width:30%;border-bottom: 5px solid #ccc;
border-top: 5px solid #ccc;padding:10px;
font-size:25px;color:#fff;
text-align:center;
position: absolute;position:fixed;
left: 35%;right:45%;
top: 40%;
bottom: 45%;
margin: 0 0 0 0px;
z-index: 99999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body:hover span.masoktri {
visibility: hidden;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
left: 0;right:0;
}

Masukkan css diatas diatas kode ]]><b:skin>

 <span class='belajarblog'></span>
<span class='masoktri'>Energy Saving Mode<br/><span style='font-size:12px;color:#fff'>Untuk Scroll Gunakanlah Keyboard </span></span>
<span class='mas-oktri'></span>

Masukkan kode html diatas tepat dibawah kode <body>. Simpan template dan lihat hasilnya Demikian Tutorial Belajar Tentang Cara Membuat Energy Saving Mode di Blog Tanpa Javascript Semoga Bermanfaat

Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 07:39:00 +0000

Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi – bisa dikatakan kurang lebih agak mirip dengan efek peel back pada gambar di blog yang sudah pernah saya posting pada sebelumnya. Efek pull out gambar dengan css3 keyframe animasi ini merupakan perpaduan dari dua gambar yang terdapat palam satu posisi yang tepatnya pada gambar utama masih terdapat backing gambar yang terletak dibelakangnya dan apabila pada gambar utama tersebut tersentuh oleh mouse maka akan hover dan pada backing gambar akan berjalan secara halus dari sisi belakang kemudian ke arah samping kanan lalu menggantikan posisi gambar utama pada posting blog. Untuk lebih jelas dan detailnya maka bisa dilihat pada halaman demo dan berikut adalah tutorial untuk cara membuat Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi di blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

.pulloutimage{
position: relative;
}

.pulloutimage img{
position: absolute;
left: 0;
}

.pulloutimage img.ondemand{
opacity: 0;
visibility: hidden;
}

.pulloutimage img.original{
z-index: 1;
}

@-webkit-keyframes revealfromright{
0%{
z-index: -1;
opacity: 0;
}
50%{
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{
z-index: 2;
}
100%{
left: 0;
box-shadow: 8px 8px 15px gray;
}
}

@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

.pulloutimage:hover img.ondemand{
-webkit-animation-name:revealfromright;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;

-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;

-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;

animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;

visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;
z-index:2;
}

.pulloutimage:hover img.original{
opacity:0.5;
}

3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:

<div class="pulloutimage" style="height:250px">
<a href="http://digratisan.blogspot.com/" target="_blank"><img class="original" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqnw4y0VmsH3i6RREnyRwvA3x4bBrp4AjFZPdQ-BfXxCH75EAHHQNiFPz1d76gpyTvcIxSZw7JGN33aOvZvFrTnhShlibVWzfPCfIgYEWvmHqhzPHSO8zpryo8gbOnlDm668mOEpX6EVzQ/s320/cecilia-cheung-11.jpg" width="320" /></a>
</div>

Keterangan:
Ganti "http://digratisan.blogspot.com/" dengan URL halaman yang di inginkan.
Ganti URL gambar dengan yang di inginkan.
Untuk width dan height silahkan sesuaikan selera.

Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 07:14:00 +0000

Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions – Efek gambar menggunakan CSS3 transitions ini adalah menunjukkan bagaimana untuk menambahkan panel deskripsi animasi gambar yang dapat bergesar secara otomatis dapat terbuka ketika mouse diarahkan ke gambar. Dengan menambahkan deskripsi singkat atau bisa juga dengan memasukan link didalamnya maka panel deskripsi gambar ini dapat memberikan efek zoom sekaligus hover deskripsi yang muncul secara halus bergeser secara otomatis.

Panel deskripsi dapat dengan mudah diarahkan saat bergesar sesuai dengan keinginan atau yang sesuai tata letak gambar. Terdapat empat arah pilihan untuk membuat panel deskripsi gambar tersebut bergeser, antara lain gambar dapat bergeser ke arah atas, bawah, kanan, dan kiri. Permulaan saat hover animasi deskripsi gambar saat bergeser tertunda 0,5 detik setiap kali menggunakan properti transisi-delay, sehingga efek ini terjadi setelah dari gambar memunculkan efek bayangan menggunakan CSS3 yang ditambahkan ke gambar untuk menciptakan efek gambar yang mengangkat atau sedikit memunculkan efek zoom. Hasilnya yang akan terjadi adalah gambar keren dengan panel deskripsi bergeser yang menggunakan tidak lebih dari HTML / CSS untuk membuat efek. Untuk pemasangannya kedalam blog maka berikut adalah penyajiannya tentang cara membuat Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions:

1. Login ke akun blogger.
2. Klik Template > Edit HTML > Lanjutkan > Centang Expands Widget Template.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

/* Sliding Description Panel For Images */

.imagepluscontainer {
/* main image container */
    position: relative;
    z-index: 1;
    font-family: verdana;
    font-size: 13px;
}

.imagepluscontainer img {
/* CSS for image within container */
    position: relative;
    z-index: 2;
    -moz-transition: all 0.5s ease;
/* Enable CSS3 transition on all props */
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img {
/* CSS for image when mouse hovers over main container */
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc {
/* CSS for desc div of each image. */
    position: absolute;
    width: 90%;
    z-index: 1;
/* Set z-index to that less than image's, so it's hidden beneath it */
    bottom: 0;
/* Default position of desc div is bottom of container, setting it up to slide down */
    left: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.8);
/* black bg with 80% opacity */
    color: white;
    -moz-border-radius: 0 0 8px 8px;
/* CSS3 rounded borders */
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
/* Set initial opacity to 0 */
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
/* CSS3 shadows */
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -moz-transition: all 0.5s ease 0.5s;
/* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
    -webkit-transition: all 0.5s ease 0.5s;
    -o-transition: all 0.5s ease 0.5s;
    -ms-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a {
    color: white;
}

.imagepluscontainer:hover div.desc {
/* CSS for desc div when mouse hovers over main container */
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity: 1;
/* Reveal desc DIV fully */
}

/* Below CSS when applied to desc DIV slides the desc div from the right edge of the image */

.imagepluscontainer div.rightslide {
    width: 150px;
/* reset from default */
    top: 15px;
    right: 0;
    left: auto;
/* reset from default */
    bottom: auto;
/* reset from default */
    padding-left: 15px;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide {
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

/* Below CSS when applied to desc DIV slides the desc div from the left edge of the image */

.imagepluscontainer div.leftslide {
    width: 150px;
/* reset from default */
    top: 15px;
    left: 0;
    bottom: auto;
/* reset from default */
    padding-left: 15px;
    -moz-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.leftslide {
    -moz-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

/* Below CSS when applied to desc DIV slides the desc div from the top edge of the image */

.imagepluscontainer div.upslide {
    top: 0;
    bottom: auto;
/* reset from default */
    padding-bottom: 10px;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide {
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}
/* Sliding Description Panel For Images */

5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting atau bisa juga di sidebar blog.

<div class="imagepluscontainer" style="width:263px;">
<img src="URL GAMBAR">
<div class="desc downslide">
DESKRIPSI GAMBAR
</div>
</div>

Keterangan:

Kode berwarna biru adalah URL Gambar, silahkan ganti sesuai keinginan.
Kode berwarna merah adalah arah panel deskripsi bergeser, silahkan sesuaikan dengan menggantinya menjadi: rightslide, leftslide, atau upslide.
Kode berwarna ungu adalah teks deskripsi gambar, silahkan ganti sesuai keinginan.

Sebagai contoh seperti dibawah ini:

<div class="imagepluscontainer" style="width:263px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhF6LMv9pgCNDwORZ4i-CPS9Lm3ZDQL8vRWwo9GF9jQ5Q07l2lwWo67kKF9xi9iUe692D80skLojVrq3006htB7BfMm4Pul2C434c1iT7BgpEtexsvhYKZxSoZh2z6wzrBgOcMNH_jXuyz/s1600/elisha_cuthbert_face_wallpaper-2013-02.jpg">
<div class="desc downslide">
<a href=”http://mas-andes.blogspot.com/2013/03/jquery-widget-recent-post-automatic.html” target=”_blank”><b>Jquery Widget Recent Post Automatic Slider</b></a> – ini adalah widget yang berguna untuk menampilkan artikel terbaru menggunakan mode slide show
</div>
</div>

Dari kode tersebut maka hasilnya akan tampak sama persis seperti pada gambar dibagian atas

Efek Gambar 3D Flip Dengan CSS

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 07:10:00 +0000

Efek Gambar 3D Flip Dengan CSS – sebuah gambar tanpa CSS mungkin bisa dibilang seperti wanita tanpa make up. Sebuah gambar pada posting blog tanpa adanya tambahan kode CSS maka gambar tersebut akan terkesan murni dan tidak memiliki efek yang ditampilkan saat disentuh mouse atau yang biasa disebut onmouseover. Membuat efek hover pada gambar dipostingan blog sangat banyak dan bahkan beragam bentuk yang ditampilkan hanya dengan menggunakan tambahan kode CSS, dan salah satunya pada tutorial membuat Efek Gambar 3D Flip Dengan CSS ini. Salah satu fitur inovatif di CSS3 adalah kemampuan untuk memutar elemen HTML dalam ruang 3D. Kode CSS yang terdapat dibawah adalah menunjukkan bagaimana untuk memutar 2 sisi elemen, baik di X atau Y axis untuk mengungkapkan isi di sisi belakang gambar. Hanya dengan menyentuhkan mouse ke arah gambar maka melihat efek flip pada gambar akan terlihat dan ini tidak memerlukan banyak cara untuk proses menerapkannya. Supaya lebih mudah, maka berikut adalah tutorial untuk membuat Efek Gambar 3D Flip Dengan CSS di postingan blog:

1. Login ke akun blogger.
2. Klik Template > Edit HTML.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

div.flip{
position:relative;
width: 300px;
height: 250px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s;
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}
div.flip div.rotate > *{
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
div.flip div.rotate > div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}
div.rotate.x *:nth-child(2){
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.flip:hover > div.rotate.x{
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.rotate.y *:nth-child(2){
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.flip:hover > div.rotate.y{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting blog.

<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate x">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Lz-Aay2L8_2HKXbCfplVMemWJP-qfpnPFf25ItkFBl-sc-MEFE-8RWnXYLfbKjLiuGGbLVRkcr7aRw0sqn9FWXSQo-b_jzTXGHpsby6mRIthNAWPDvbX9eyiyke5krDpHFU6cVpsP5S2/s320/mujeres-munecas-23132-13.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrH_3w55o005IB72Rg1nT9sARg_bV91_Sw4duss2mm06VK0JH_TQpy6rkNpgUKd_YL7dVrkqe5fbDQGqPURARoscKHqcmQsuG4qwYvhEQP1ChB0Jq2y00findQWdSFCfpV6gub97wzsPk3/s320/mujeres-munecas-23132-23.jpg">
</div>
</div>
</br></br>
<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate y">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB-VM7wt9K7jx02Kq1Uk26K73otmePyT7QS97UO91PQAhUS8t_qALfLL-DfZbOyxdzxrl4eMqlfnpFxJs4CJPkTHng-8HOIblKxUAzeElQo6QQTxRxbO-OS_0eW9a5D7ttxE3JK06orl9c/s320/mujeres-munecas-23132-19.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIL8J_hoyrF0bx_rW_Ijry6koC0txVAmnUquuj69AIhb2kgwTDcCakY3lMpT14uSXxPnUraiZpc79nhuDlvifV4NAIMYRU1aKAj0Wj-DqY158zBp-VxmglpV7zoIA1LCpFUmI-T9m9TvZ8/s320/mujeres-munecas-23132-12.jpg">
</div>
</div>

Keterangan: Untuk width dan hight maupun URL gambar silahkan sesuaikan sendiri.

cara membuat Efek Animasi Background

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 07:07:00 +0000

Efek Animasi Background Tag <ul> di Postingan Blog – ini merupakan efek background yang ditambahkan ketika suatu paragraf atau kalimat saat tersentuh mouse maka akan menampilkan efek animasi berupa background yang akan muncul secara otomatis.

Efek Animasi Background Tag <ul> di Postingan Blog ini saat hover akan tampil background berwarna hitam dan terdapat border atau garis tepi yang berwarna merah disebelah kiri kolom background. Ini adalah langkah sederhana yang tidak perlu membutuhkan waktu lama untuk membuatnya, cukup dengan menambahkan sedikit kode CSS kedalam template blog maka secara otomatis setelah kode tersebut terpasang kedalam template blog hanya dengan memanggil ID dari tag <ul> kedalam postingan maka yang timbul adalah Efek Animasi Background Tag <ul> di Postingan Blog yang cantik dan silahkan untuk cara menerapkannya ikuti tips yang ada dibawah. Berikut ini adalah cara pemasangan Efek Animasi Background Tag <ul> di Postingan Blog:

ul.animatedbgul{
   margin: 0;
   padding: 0;
   list-style: none;
}

ul.animatedbgul li{
   width: 100%;
   clear:left;
   overflow: hidden;
}

ul.animatedbgul li span{
   display: block;
   float: left;
   min-width: 0px;
   margin-bottom: 5px;
   padding: 8px;
   color: #5d5d5d;
}

ul.animatedbgul li:hover span{
   color: #fff;
   background: #000;
   border-left: 8px solid red;
   min-width: 450px;
   -webkit-box-shadow: 0 0 5px gray;
   -moz-box-shadow: 0 0 5px gray;
   box-shadow: 0 0 5px gray;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}

Keterangan:

Tulisan berwarna merah adalah kode warna font saat hover, silahkan sesuaikan.
Tulisan berwarna biru adalah kode warna background saat hover, silahkan sesuaikan.
Tulisan berwarna orange adalah lebar dan kode warna border saat hover, silahkan sesuaikan.

5. Simpan Template.
6. Selanjutnya untuk memanggil kode tersebut kedalam posting blog berikut adalah caranya:

<ul class="animatedbgul">
<li><span>Silahkan isi teks disini</span></li>
<li><span>Silahkan isi teks disini</span></li>
<li><span>Silahkan isi teks disini</span></li>
<li><span>Silahkan isi teks disini</span></li>
</ul>

Keterangan:
Ganti tulisan berwarna biru dengan teks/kalimat yang anda inginkan.

Cara Membuat Efek Zoom Pada Teks di Blog

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 07:01:00 +0000

Cara Membuat Efek Zoom Pada Teks di Blog – jika biasanya efek zoom itu diterapkan pada gambar yang terdapat pada posting blog maka sekarang akan membahas tutorial untuk cara membuat efek zoom pada teks di blog.

Efek zoom ini bisa diterapkan pada kalimat kecil maupun paragraf panjang sekalipun. Namun sebenarnya bukan hanya efek zoom saja, tapi melainkan efek rotate atau berputar juga terjadi pada efek ini pada saat hover atau tersentuh mouse. Teks dapat dengan mudah di atur dengan menggunakan kode CSS yang ada dibawah. Apabila ingin merubah background maupun yang lainnya maka tinggal ubah saja kode warna pada bagian background color. Cara membuatnyapun cukup mudah dan tidak banyak menggunakan kode sehingga tidak memberatkan loading blog. Sedangkan jika mungkin berminat untuk membuat efek zoom ini dan menerapkan kedalam blognya, maka berikut adalah tutorial Cara Membuat Efek Zoom Pada Teks di Blog menggunakan kode CSS dan cara penerapannya:

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

#tekszoom {
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#tekszoom:hover { background-color: #fc3;
-webkit-transform: rotate(360deg) scale(2);
-moz-transform: rotate(360deg) scale(2);
-o-transform: rotate(360deg) scale(2);
-ms-transform: rotate(360deg) scale(2);
transform: rotate(360deg) scale(2);
}

Keterangan:
Tulisan berwarna merah adalah warna background font default, silahkan sesuaikan.
Tulisan berwarna biru adalah warna background font hover, silahkan sesuaikan.

3. Klik Terapkan ke Blog.
4. Selanjutnya pada saat posting maka menggunakan mode HTML dan untuk membuat efek zoom pada teks di postingan blog maka caranya copy kode berikut kemudian paste di kolom posting blog anda:

<div id="tekszoom">
Silahkan di isi dengan teks/paragraf yang di inginkan
</div>

Cara Membuat Widget Search Box Alexa di Blog

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 06:58:00 +0000

Cara Membuat Widget Search Box Alexa di Blog – mungkin sudah banyak blogger yang tahu akan hal ini. untuk membuat widget search box di blog untuk dipasang pada sidebar blog maupun bagian lainnya tidak terlalu sulit untuk dilakukan. Memang sepertinya jarang dari para blogger yang menggunakan widget search box alexa di blognya sebagai kotak pencarian utama pada blog tersebut, namun jika anda mungkin berminat untuk memasangnya kedalam blog tentu langkah ini sangat mudah. Tampilan dari widget search box alexa ini juga cukup menarik dan tentu tidak kalah dengan tampilan widget search box lainnya. Bentuk widget yang ramping dan minimalis tentu terkesan cantik untuk melengkapi desain blog menjadi lebih berwarna. Seperti apa tampilan dari widget search box alexa ini, bisa terlebih dahulu bisa dilihat seperti yang tertera pada demo. Selanjutnya untuk memasang widget search box ini ke blog, maka berikut adalah tutorial Cara Membuat Widget Search Box Alexa di Blog.

1. Login ke akun blogger.
2. Lalu copy kode dibawah ini.

<style>
.balexa {
font: bold 12px Tahoma, Geneva, sans-serif,"times new roman";
color: #fff;
background: #0361d2;
border-radius: 5px 5px 5px 5px;
padding: 7px 15px;
cursor:pointer;
margin: 5px 0 0 3px auto;
}
.balexa:active {
cursor:wait;
position: relative;
top: 2px;
}
.balexa::-moz-focus-inner {
border: none;
padding: 0;
margin: 0;
}
.blsbox {
border: 1px solid #D3D3D3;
border-radius: 4px;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.blsbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<form method="get" action="http://www.alexa.com/data/details/traffic_details" target="_blank">
<input class="blsbox" name="url" maxlength="255" size="40" type="text" onblur='if (this.value == "") {this.value = "Enter the Url...";}'
onfocus='if (this.value == "Enter the Url...") {this.value = ""}'
type="text" value="Enter the Url..." />
<input value="Alexa" type="submit" class="balexa" /></form>

3. Selanjutnya klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode disitu kemudian klik Simpan dan selesai. Cukup sudah sampai disini untuk Cara Membuat Widget Search Box Alexa di Blog.

Membuat Recent Comment (Komentar Terbaru)

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 05:07:00 +0000

Fungsi dari widget recent comment atau komentar terbaru ini, agar kita dapat mengetahui siapa yang baru saja berkomentar dan dipostingan kita yang mana pengunjung meninggalkan komentarnya.

Nah berikut tutorial untuk membuat recent comment atau komentar terbaru:

1. Login ke blogger lalu pilih menu "Layout"

2. Kemudian copy script berikut ini :

<script style="text/javascript" src=”http://tipstrikblogging.googlecode.com/files/RecentComment-ListFeed.js”></script>
<script style="text/javascript">
var numcomments = 8;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://pengembarabiru.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

- Angka 8 merupakan jumlah komentar yang mau ditampilkan.
- Ganti http://pengembarabiru.blogspot.com dengan URL blog anda!

3. Untuk menampilkanya di sidebar maka pilih "Add a Gadget --> HTML/Javascript" Lalu masukkan script diatas kedalam kotak yg disediakan.

5.Simpan! Selesai, lihat hasilnya diblog anda!

Membuat Text Area

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 04:57:00 +0000

Apa itu text area? Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung. Untuk lebih memahamkan lagi contohnya lihat disini atau image dibawah ini:

Sudah lihat? Nah untuk membuat text area, silahkan sobat Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> Letakkan code HTML atau text yang anda inginkan berada dalam kotak areanya disini</textarea></p>

Sedikit penjelasan tambahan: rows= menunjukkan tinggi text area, cols menunjukkan lebar dari text area. Silahkan sesuaikan sendiri angka-angka tersebut dengan keinginan anda!
Selain cara diatas ada cara lain lagi untuk membuat text area, yaitu text area dengan memakai hightlight Maksudnya text area yang kita buat dilengkapi tombol highlight, yang sekali klik semua text area terblok jadi memudahkan pengunjung untuk mengcopynya. Cara membuat text area dengan hightlight?

Copy code berikut:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Hightlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Letakkan code HTML atau text yang anda inginkan berada dalam kotak areanya disin</textarea></p></div></form>

Keterangan:
<div align="center"> : kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> : kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.
Value="Highlight All" : kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.
<p align="center"> : ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
<text style="WIDTH: 300px">: kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"
HEIGHT: 144px : angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.
Selesai!

Merubah Background Postingan

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 04:54:00 +0000

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu. Optimislah walaupun engkau berada dalam terpaan bencana. Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma. Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu. Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia? Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah. Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

Suatu waktu mungkin kita bosan dengan background postingan kita yang warnanya putih atau hitam polos, atau mungkin sekedar ingin mencoba bereksperimen kecil maka kita boleh mencoba merubah backgroun postingan dengan cara-cara berikut ini, karena pengetahuaan yang baru pasti sangat menyenangkan. Nah cara membuat backgroun postingan yang saya tahu saat ini baru dua cara...

Yang Pertama untuk membuat background warna, caranya...

Letakkan kode berikut pada awal postingan

Dan diakhir postingan, harus di tutup dengan kode seperti ini :
</div>
Tulisan kode warnanya disini anda ganti dengan kode warna yang anda inginkan. Bisa lihat macam-macam kode warnanya disini. Yang perlu diperhatikan saat anda meletakkan kode tersebut, anda harus memilih tab edit HTML, jangan Compose.
Sebagai contoh backgroun dengan warna pink...
<div style="background:#FFCCFF">

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

</div>
Hasilnya akan seperti ini :

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

Yang kedua Membuat background dengan Gambar

Jika anda memiliki gambar khusus untuk dijadikan backgroud uploud dulu ke website hosting seperti photobucket atau tempat hosting lainnya untuk memperoleh URL addresnya.
Yang harus diperhatikan anda harus berada pada posisi edit HTML, berikut kode diawal postingan:
<div style="background:url(alamat gambarnya disini) no-repeat;">
Diakhir postingan tutup dengan kode berikut:
</div>
Ganti tulisan alamat gambarnya disini dengan alamat gambar yang ingin anda tampilkan.
Seperti halnya pada background dengan warna, kode inipun bisa anda tambah-tambahin sesuai dengan keinginan.
Contoh, saya ingin membuat posting dengan background yang beralamat di http://i685.photobucket.com/albums/vv220/amatullah_sy/713599gidcqc66ex.gif, background ingin di simpan di sebelah kanan atas posting tanpa repeat, padding sebesar 10 pixel, besar hurup 90% :
<div style="background:url(http://i685.photobucket.com/albums/vv220/amatullah_sy/713599gidcqc66ex.gif) no-repeat center top; text-align:justify; font-size:90%; padding:10px">

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

</div>
Maka hasilnya seperti ini:

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

Nah jika kita ingin mempatenkan background tersebut sebagai backgroud pada setiap postingan kita agar tak capek mengeditnya, caranya masuk menu pengaturan/ settinf =>klik tab format=>pada bagian akhir kolom format letakkan kode diatas

Nah selamat mencoba, semoga bermanfaat! Untuk melihat postingan saya lainnya yang memiliki background

Membuat BlogRool

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 04:44:00 +0000

Blogroll adalah tempat menyimpan link address milik orang lain pada blog atau website kita.
BlogRool ini gunanya untuk menghemat tempat pada blog pada saat daftar link kita sudah banyak dan menyesakkan body template blog. Ada beberapa cara yang saya tahu untuk membuat blogrool.
Yang pertama seperti ini: Blogroll dengan menu dropdown:

<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option> - Blogroll - </option>
<option value="#">Amatullah's Page</option>
<option value="#">Islamic Animation</option>
<option value="#">Free Blogger Templates</option>
<option value="#">Tutorial Blogger</option>
</select>
</form>
Alamat URL dan titelnya tinggal anda sesuaikan sendiri!
Yang kedua: Membuat blogroll dengan perintah marquee :
Contohnya seperti ini:

Amatullah's Page

Islamic Animation

Free Blog Template

Tutorial Blogger

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >
<a href="#" target="_blank">Amatullah's Page</a>
<br/><br/>
<a href="#" target="_blank">Islamic Animation</a>
<br/><br/>
<a href="#" target="_blank">Free Blog Template</a>
<br/><br/>
<a href="#" target="_blank">Tutorial Blogger</a>
<br/><br/>
</marquee>
Maka hasilnya

Cara Membuat Recent Post (Postingan Terbaru)

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 04:37:00 +0000

Setelah pada postingan sebelumnya saya menjelaskan cara membuat recent comment maka postingan kali ini adalah bagaimana cara membuat recent post atau postingan terbaru. Ya langsung saja:

Login pada blogger.
Klik Layout pada Dashboard ,lalu Page Element.
Klik Add a Gadget.
Pilih HTML/Javascript
Masukkan kode dibawah ini dengan cara copy dan paste dan beri judul pada kolom Title.

<script style="text/javascript" src="https://sites.google.com/site/tipstrikblogging/js-amatullah/RecentPost-List.js"></script>
<script style="text/javascript">
var numposts = 5;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src=http://blogcapoenk.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts></script>

Gantilah Url Fedd blog saya

http://blogcapoenk.blogspot.com/feeds/posts/default

dengan dengan alamat blog anda.

Kode numpost = 5 adalah jumlah Recent Post yang akan muncul.Gantilah angka 5 tersebut dengan jumlah post yang anda ingin tampilkan.

Setelah itu Save.

Cara Membuat Related Post (Tulisan Terkait)

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 04:34:00 +0000

Related posts adalah tulisan terkait atau artikel yang bersangkutan. Jadi saat kita menampilkan suatu artikel dengan adanya widget related posts ini, pembaca atau pengunjung blog anda akan mudah mendapatkan informasi tentang artikel anda yang masih memiliki keterkaitan atau masih dalam categori yang sama karena related posts ini letaknya tepat dibawah postingan. Selain memudahkan pembaca, juga sebagai satu sarana promosi tulisan anda juga kali ya?!
nah berikut tutorial untuk Membuat Related Post atau Artikel Yang Berhubungan

Seperti biasa Login dulu di Blogger

Pada menu Dashboard klik tab Layout --> edit HTML.

Beri tanda tanda checklist/ centang pada kolom kecil Expand Template Widget.

Selanjutnya cari kode HTML berikut : <data:post.body/>

Copy kode berikut dan paste persis dibawah kode diatas

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

6. Lebih jelasnya seperti ini

<data:post.body/>            
(Simpan kode berwarna merah disini)

7. Save Templates! Selesai...
Semoga bermanfaat! Selamat mencoba!

Membuat Read More Atau Baca Selengkapnya

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 04:12:00 +0000

*** Membuat Read More atau Baca Selengkapnya Pada Template Blogger baru...
1. Sig in dulu ke blogger
2. Masuk pada menu setting atau pengaturan
3. Klik formatting/ format
4. Pada bagian post Template, isi kotak kosong tersebut dengan kode seperti ini:

<span class="fullpost">
</span>

5. Save setting
Guna setting kode ini agar pada saat postingan kode tersebut muncul secara otomatis pada bagian edit HTML untuk membantu kita agar tidak lupa dengan kode tersebut.
langkah selanjutnya...
6. Kembali ke dasboard
7. Masuk pada menu Layout atau Tata Letak
8. Klik menu Edit HTML
9. Untuk mengantisipsi hal yang tidak kita inginkan terjadi pada template kita baiknya klik tombol Download Full Template dulu, kemudian save di folder, jadi bisa back up data kembali kalau tak berhasil.
10. Jangan lupa centang kotak kecil disamping tulisan Expand Widget Template Tunggu beberapa saat sampai proses selesai.
11. Cari kode berikut ]]></b:skin> kemudian letakkan tepat dibawahnya kode warna merah berikut:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Jadi kodenya berada antara kode ]]></b:skin> dan </head>
12. Selanjutnya cari kode <p><data:post.body/></p>
letakkan kode warna merah berikut tepat dibawahnya

<b:if cond='data:blog.pagetype != "item"'>
<a expr:href='data:post.url'> Read More...</a>
</b:if>

Read more...bisa anda ganti dengan baca selengkapnya atau kalimat lain yang anda sukai
13. Jangan lupa save/ simpan template.
14. Terakhir, setiap kali membuat postingan, pada tempat yang anda inginkan diletakkan Read More letakkan kode ini <span class="fullpost"> dan diakhir postingan letakkan kode </span> yang perlu diingat anda meletakkan kode tersebut pada bagian edit HTML bukan bagian compose/ Tulis.
*** Memasang read more pada template yang disediakan blogger sama dengan langkah-langkah diatas dari point 1 sampai 10. Untuk selanjutnya cari kode:
<p><data:post.body/></p> atau <data:post.body/> karena kode itu sama saja, p hanya kode spasi
Kalau sudah dapat ganti kode tersebut dengan kode berikut:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore.....</a>
</b:if>

Langkah selanjutnya sama dengan point 13 dan 14 diatas
Selamat mencoba! Semoga bermanfaat! Jangan lupa komentarnya ! Alhamdulillah selesai.

Cara Membuat Menu Scrolling

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 03:13:00 +0000

Contoh Menu Scrolling Daftar Link

Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja liat contoh dibawah ini!

Cara buat menu scroll seperti diatas:
Copi code berikut:

<div style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; overflow: auto; width: 255px; padding-top: 10px; height: 141px" 1px="1px" solid="solid"> <ul>
    <p><a href="#">Cara membuat related post</a> </p>
    <p><a href="#">ngeblog offline tanpa terhubung keinternet</a> </p>
    <p><a href="#">Mengganti Read More Dengan Image</a> </p>
    <p><a href="#">Cara membuat Recent Post</a> </p>

</ul>
</div>

Setelah itu paste pada tempat yang sobat inginkan di blog sobat , apakah pada postingan, sidebar dll. Untuk alamat URLnya sobat ganti dan sesuaikan sendiri!
Untuk memasangnya pada postingan sobat harus berada dalam tab edit HTML, sedangkan untuk memasangnya pada sidebar saran saya untuk sobat agar tak bingung menyesuaikan dengan lebar sidebar ganti lebarnya menjadi 100% kodenya widht: 100% cara memasangnya (untuk yang belum tahu ni):

Login ke blogger
Pada bagian dasbor pilih menu layout/ tata letak
Klik elemen halaman
Tambah gadget pada sidebar yang anda ingin tampilkan menu scroolnya!
Pilih tambah HTML/JavaScript
Beri titel, simpan codenya dalam konten
Save, lihat hasilnya diblog sobat !

Semoga bermanfaat!

Merubah Read More Dengan Icon Image

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 03:11:00 +0000

Setelah pada postingan sebelumnya kita membahas Cara membuat read more atau baca selengkapnya. Kali ini berbagi lagi dengan pengunjung, kali ini cara merubah atau mengganti read more dengan image agar tampilannya lebih menarik.
Yang pertama harus disiapkan tentu adalah sebuah icon image seperti ini: atau seperti ini:
atau seperti ini kemudian uploadlah image tersebut ke situs tempat penyimpanan image seperti photobucket. Setelah proses upload selesai, copylah URL image tersebut, seperti contoh dibawah ini :
http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif
Tambahkan kode agar image tersebut dapat ditampilakn seoperti dibawah ini :
<img src="http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif"/>
Image akan terlihat seperti ini gambar kedua diatas, tentu kreasi imagenya anda bisa sesuaikan sdengan selera anda (ini hanya contoh).
Selanjutnya ikuti tutorial berikut:

Seperti biasa anda harus dalam keadaan sig ini pada blogger
Masuk menu Tata Letak/ Layout=>klik Edit HTML=>Centang kotak kecil disamping Expand Template Widget
Untuk menjaga yang tidak anda inginkan bisa Back up terlebih dahulu template anda!
Kemudian cari kode seperti ini:

Gantilah kalimat Read More dengan URL image yang telah disiapkan diatas, sehingga menjadi seperti ini :

Terakhir, save template anda! Lihat hasilnya!

Cara Memasang Tabel Kode Warna Pada Blog

noreply@blogger.com (Yuga irgi) — Tue, 30 Jul 2013 03:06:00 +0000

Nah berikut rahasianya eh tutorial cara memasang tabel kode warna pada blog.

Seperti biasa sobat harus dalam keadaan login keblogger
Masuk menu Tata Letak=> klik Edit HTML (Sebelumnya baiknya sobat backup dulu templatenya dengan mengklik tulisan download template lengkap dengan begitu jika ada kesalahan sobat bisa mengembalikkan kembali template seperti semula!)
Copy code JS berikut dan paste tepat diatas kode </head>

<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>
<script type='text/javascript'>
var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;
function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}
// Picker ---------------------------------------------------------
function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
hueUpdate();
dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}
executeonload(init);
function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}
function hueUpdate(newVal) {
var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
pickerSwatchUpdate();
}
function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);
h = h / 180;
var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);
var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}
</script>

Sebelum save/ simpan template bisa klik tab pratinjau dulu, kalau blognya tampilannya seperti semula berarti langkah-langkahnya udah benar.

Nah untuk menampilkan kode warna pada postingan lengkap dengan label, copy kode warna berikut dan paste di tab Edit HTML, sedang untuk menambahkannya pada elemen halaman blog

masuk pada menu Tata Letak
Klik Elemen halaman klik tambah gadget pada tempat/sidebar yang sobat inginkan ditampilkan kode warna tersebut.
Tambah HTML/JavaScript
Copy kode warna dan paste pada kolom entry

Berikut kode warnanya :

<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="10"><td>
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form></center>

Semoga bermanfaat! Terimakasih atas waktu dan perhatiaan yang telah sobat sisihkan untuk membaca postingan ini!
Budayakan komentar setelah membaca dan tunggu komentar balik anaa diblog sobat.
Salam...

Menambah Elemen Halaman Di Bawah Header

noreply@blogger.com (Yuga irgi) — Mon, 29 Jul 2013 23:09:00 +0000

Anda mesti dalam keadaan log in ke blogger.

Masuk menu tata letak=>Edit HTML. Untuk mengantisipasi hal yang tidak anda inginkan, baiknya download lengkap dulu (backup) dulu template anda. Kalau saya langsung aja, he2.

Jangan lupa untuk mencentang kotak kecil Expand Template Widget.

Copi kode warna merah berikut, paste diatas kode ]]></b:skin>

#under_header{
margin:10px 0;
padding:1%;
width:100%;
}

Cari kode seperti ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

Paste kode warna merah berikut dibawah kode tadi

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

Langkah terakhir tinggal save template.

Membuat Link Berwarna Pelangi

noreply@blogger.com (Yuga irgi) — Mon, 29 Jul 2013 23:07:00 +0000

Ingin membuat link pada blog anda berkedip dan berwarna pelangi ketika tersentuh pointer? Caranya sangat mudah

Dalam keadaan loggin,

Masuk pada menu template,

Klik Edit HTML,

Cari kode <head>,

Kemudian copy code berikut dan paste tepat dibawah code tadi

<script language='javascript' src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/LinkPelangi.js'/>.

Terakhir simpan template.

Selamat mencoba!