Tampilkan postingan dengan label Tampilan. Tampilkan semua postingan

Modifikasi Tampilan Pesan Komentar Blog

Beberapa waktu lalu saya pernah menuliskan cara memperbaiki pesan komentar yang pindah ke bawah, saya juga sudah memberikan tutorial untuk merubah tampilan kotak komentar, maka kali ini saya akan membagikan lagi sebuah tutorial sederhana untuk merubah tampilan pesan komentar.

Seperti yang pernah saya bagikan sebelumnya, pesan komentar merupakan sebuah aturan yang di tulis oleh si pemilik blog, tentang bagaimana berkomentar yang baik dengan sopan di blog tersebut, pesan komentar juga dapat berisi ucapan terima kasih ataupun hanya sebagai pemanis tampilan komentar dari sebuah blog.

Pesan komentar dengan tampilan yang tidak biasa akan lebih mendapat perhatian dari si penggunjung, dengan begitu maksud dari pesan komentar tersebut dapat tersampaikan.

Bagi anda yang tertarik untuk merubah tampilan pesan komentar blog anda menjadi sedikit lebih keren dan unik, perhatikan langkah-langkah berikut:

Login >> Template >> Edit HTML.
Cari kode,

<p><data:blogCommentMessage/></p>

Kemudian ganti kode di atas dengan kode,

<div id='pra-comment'><data:blogCommentMessage/></div>

Keterangan: Biasanya terdapat lebih dari satu kode <p><data:blogCommentMessage/></p>, silakan anda ganti semua.

Berikutnya cari kode

]]></b:skin>

Letakkan kode di bawah tepat sebelum kode ]]></b:skin>.

/* Pesan Komentar
---------------------------------------------- */
#pra-comment{
position: relative;
background:#0070B0;
color:#fff;
padding:10px;
font:normal 12px trebuchet ms;
text-align:justify;
border:3px solid #333;
margin:15px 0 15px 0;
line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#pra-comment::before {
border-top-color: #333;
border-width: 15px;
left: 82%;
margin-left: -36px
}
#pra-comment::after {
border-top-color: #0070B0;
border-width: 9px;
left: 82%;
margin-left: -30px
}

Terakhir klik Simpan Template, kemudian lihat hasilnya.

Demikian tutorial sederhana tentang bagaimana cara memodifikasi tampilan pesan komentar blog. Kurang lebihnya mohon maaf. Semoga bermanfaat.

Sumber : junedalbughisy.blogspot.com

By : Ciel

On :

Mempercantik Tampilan Komentar Blog

Kotak komentar blog adalah sebuah fasilitas yang di sediakan untuk melakukan interaksi antara pengunjung dengan pemilik blog tentang sebuah posting. Dari komentar, pengunjung dapat mengeluarkan unek-unek, memberikan pujian, saran atau bahkan mengkritik artikel yang di tulis oleh si pemilik blog. Untuk saya pribadi komentar dari pengunjung dapat memberikan semangat tersendiri, karena artikel yang sudah saya tulis di berikan komentar, walaupun komentarnya berupa kritik yang pedas.

Oleh karena begitu pentingnya sebuah kotak komentar, banyak dari para blogger memodifikasi tampilannya sehingga terlihat lebih keren, unik, juga cantik. Tampilan komentar yang indah akan memberi daya tarik tersendiri kepada pengunjung agar mau meluangkan sedikit waktunya untuk mengomentari artikel yang baru di bacanya.

Pada kesempatan kali ini saya akan coba berbagi sebuah tutorial sederhana, yaitu untuk merubah tampilan kotak komentar.

Langkah-langkah yang perlu di lakukan:

Cari kode ]]></b:skin>

Copy kode yang ada di bawah, kemudian letakkan di atas kode ]]></b:skin>

/* Comments
----------------------------------------------- */
#comments h4 {
font-weight:bold;
color:#000;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcu-2aqNVGOvuZZEj-lkIssBVjMVdAnxV3G0Gm2nY1WLHTFiwEMfoVSPLSE33jr5FHK4RBQtA0u28uI46sqGydgGrZVVnKp-ceAgAVzoLS3kwsaCxzdAE80ksYqo8cD80Oiu-fuRrHLMdL/) repeat-x;
height: 35px;
line-height: 35px;
width: 100%;
margin:-5px 0 -7px -10px;
text-align:center;
border-top:1px solid #ddd;
display:block;
padding-bottom:6px ;
line-height:30px;
}
h4#comment-post-message {
display:none;
}
.comments .comments-content {
font-size:12px;
text-align:left;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em
}
#comments-block .comment-author {
margin:.5em 0
}
#comments-block .comment-body {
margin:.25em 0 0
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
letter-spacing:.1em
}
#comments-block .comment-body p {
margin:0 0 .75em
}
.deleted-comment {
font-style:italic;
color:gray
}
.comments {
font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif!important
}
.comments .comments-content .comment,.comments .comments-content .comment:first-child,.comments .comments-content .comment:last-child {
padding:0;
margin:0;
position:relative
}
.comments .avatar-image-container {
width:45px;
height:45px;
max-width:45px;
max-height:45px;
padding:2px;
border-radius:2px;
margin-right:5px;
margin-top:8px;
margin-left:8px;
position:relative;
background-color:white;
z-index: 2;
}
.comments .avatar-image-container img {
max-width:100%;
height:100%
}
.comments .inline-thread .avatar-image-container {
width:38px;
height:38px;
position:relative;
margin:0
}
.comments .comment-block {
margin-left:0;
padding:0 8px;
min-height:90px;
border:1px solid #4173af;
border-radius:2px
}
.comments .inline-thread .comment-block {
margin-left:45px;
padding:0;
border:0;
min-height:initial
}
.comments .comments-content .comment:hover .comment-block {
border:1px solid 4173af;
-moz-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21);
-webkit-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21);
box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21)
}
.comments .comments-content .comment:hover .inline-thread .comment-block {
border:0;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none
}
.comments .comments-content .comment-replies {
margin-left:20px;
margin-top:5px
}
.comments .comments-content .comment-header,.comments .comments-content .comment-content {
margin:0 0 8px;
padding-left:58px;
text-align:left;
line-height:1.6em;
}
.comments .comments-content .comment-header {
margin-top:8px;
height:14px
}
.comments .comments-content .inline-thread .comment-header,.comments .comments-content .inline-thread .comment-content {
padding-left:8px;
margin-top:0;
text-align:left;
line-height:1.6em;
}
.comment-actions {
position:absolute;
top:64px;
left:10px;
z-index:2
}
.comments .comment .comment-actions a {
background:#0671A1;
border-radius:4px;
position:relative;
display:block;
padding:2px 7px;
color:white;
top:-1px;
font-family:Arial,Sans-serif;
font-weight:bold;
box-shadow:0 1px 1px rgba(0,0,0,0.4);
text-shadow:0 1px 0 rgba(0,0,0,0.3);
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
-ms-transition:none;
transition:none
}
.comments .comment .comment-actions a:hover {
text-decoration:none;
background-color:#0057ae;
}
.comments .comment .comment-actions a:active {
top:0;
background-color:#0057ae;
}
.comments .comments-content .inline-thread li.comment,.comments .comments-content .inline-thread li.comment:first-child,.comments .comments-content .inline-thread li.comment:last-child {
padding:5px;
border:1px solid #4173af;
margin-bottom:5px;
}
.comments .comments-content .inline-thread {
padding:0
}
.comments .comments-content .comment-thread.inline-thread ol {
padding-top:8px
}
.comments .comments-content .comment-thread.inline-thread ol > div:first-child {
border-left:1px solid #4173af;
padding:10px
}
.comments .comments-content .inline-thread li.comment::before {
content:"";
position:absolute;
width:11px;
height:1px;
background-color:#4173af;
display:block;
left:-12px;
top:12px
}
.comments .comments-content .inline-thread li.comment:last-child {
margin-bottom:0
}
.comments .comments-content .inline-thread li.comment:last-child::after {
content:"";
height:100%;
width:5px;
display:block;
background-color:#FCFCFC;
position:absolute;
top:13px;
left:-13px
}
.comments .thread-toggle.thread-expanded {
position:relative
}
.comments .thread-toggle.thread-expanded::after {
content:"";
display:block;
width:1px;
height:32px;
position:absolute;
background:#4173af;
top:-8px;
left:0
}
.comments .comment .comment-actions .item-control a {
display:none;
background-color:#FCFCFC;
background-position:2px 50%;
background-repeat:no-repeat;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZhvCvUlkoBvZOQ-UbVf95Hbe5PEz2wK74IX32vM0G2uraBy2hM4qAXzK9W6C4tQL6beS6LGFRcPMvAEKtHayQEVGXzW-dRfu0ezdBsEUuPMxV6hX1bwyrraN35L4iGEUIjJKNwtAHSQA/s14/Trash.png);
border:1px solid #4173af;
position:absolute;
left:-10px;
text-indent:-9999px;
padding:0;
width:19px;
height:20px;
top:-42px;
border-radius:2px
}
.comments .comments-content .comment:hover .comment-actions .item-control a {
display:block
}
.comments .comments-content .comment:hover .inline-thread .comment-actions .item-control a {
display:none
}
.comments .comments-content .inline-thread li.comment:hover .comment-actions .item-control a {
display:block
}
.comments .inline-thread .comment .comment-actions .item-control a {
left:-61px;top:-35px
}
#comments h4#comment-post-message {
border-bottom:0;
background-color:transparent;
font-size:130%
}
.comment-form {
max-width:100%
}
.comments .comments-content .icon.blog-author {
display: block;
width: 0;
height: 0;
border: 6px solid transparent;
border-color:transparent #0671A1 #0671A1 transparent;
position: absolute;
right: 0;bottom: 4px;
}
.comments .comments-content .inline-thread .icon.blog-author {
bottom:-9px;
right:-5px;
}
.comments .comments-content .user,.comments .comments-content .datetime {
display:inline-block;
float:left
}
.comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7uK5me4hznTL1OlJuZqVUzHALlSHw2LuPSO-nfLnxhCoirFnPdNMPfqhXUeG9hmWUkXSb6aRAhlFfJDyxcmt4JiaDsFAUMOU9If-08TL9A7EQ93mxoAjbDzhh3EFExU1iw28Pi5-VpRZ/s70/user-anonymous-icon.png);
}

Terakhir klik "Simpan Template".

Kemudian lihat hasilnya.

Sekian dulu artikel mengenai cara merubah tampilan komentar blog, Semoga bermanfaat.

Keterangan: cari kode /* comments, jika sebelumnya masih terdapat kode CSS yang berkaitan dengan komentar, sebaiknya anda hapus.

By : Ciel

On :

Membuat Screensaver Pada Blog

Screensaver atau yang biasa disebut energy saving mode merupakan sebuah tampilan stanby dari layar dimana seluruh aktivitas dihentikan sementara. Screensaver akan tampil ketika blog dalam keadaan diam tanpa aktivitas dengan memunculkan sebuah halaman baru yang menutupi seluruh layar. Namun tampilan layar akan kembali normal ketika mouse digerakan. Selain untuk memperindah tampilan blog, screensaver juga digunakan untuk menghemat energy.
Itu tadi merupakan sedikit penjelasan mengenai screensaver. Sekarang saya akan membagikan cara untuk memasangnya pada blog anda.

Langkah-langkah membuat screensaver pada blog:

Login.
Pilih menu "Tata Letak".
Klik "Tambahkan Gadget".
Pilih widget "HTML/JavaScript".
Isi konten dengan kode yang ada dibawah,

<style type="text/css">
body .saving{
position: fixed;
width: 100%;
top: 0;
left:0;
height: 100%;
opacity: 0.98;
filter: alpha(opacity=98);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";
background: #000;
border-bottom: 3px solid transparent;
z-index: 999999;
-o-transition: all 3s ease-in-out 10s;
-moz-transition: all 3s ease-in-out 10s;
-webkit-transition: all 3s ease-in-out 10s;
}
body:hover .saving {
opacity: 0.0;
height:0.001%;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
background: #0a7f01;
border-bottom: 5px solid #333;
-o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s;
-moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;
-webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;
}
body .saving p.esm1{
margin: 0;
padding: 0;
width: 92%;
background: transparent;
font-size: 100px;
font-family: "Serif", Times New Roman;
color: #FF0000;
text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;
position: relative;
margin-top: 200px;
line-height: 20px;
font-weight: bold;
text-align: center;
border: 30px solid transparent;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s;
-moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;
-webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s;
}
body:hover .saving p.esm1{
font-size: 10px;
color: red;
width: 25%;
margin: 340px 0 0 300px;
padding: 25px;
background: #aaa;
border: 20px solid #888;
border-radius: 170px;
-moz-border-radius: 170px;
-webkit-border-radius: 170px;
-o-transform:translate(600px,-500px) rotate(360deg) scale(0.2);
-moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2);
-webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2);
-o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;
-moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;
-webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in;
}
.saving p span.esm2{
font-size: 18px;
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
display: block;
text-align: center;
width: 300px;
margin: -10px auto;
font-weight: normal;
padding: 2px 8px;
background: #000;
border: 1px solid #333;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
color: #0000FF;
text-shadow: none;
font-family: Arial, Helvetica, sans-serif;
-o-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-webkit-transition: 1s ease-out;
}
.saving:hover p span.esm2{
font-size: 10px;
width: 200px;
padding: 0;
}
.saving p span.esm3{
color: #ccc;font-family: "Tahoma", Arial, Helvetica;
display: block;
margin:10px auto;
background: url http://i964.photobucket.com/albums/ae124...) left center repeat-x;
background: -moz-linear-gradient(top,#666,#111);
background: -webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666));
opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
width: 250px;
text-shadow: 1px 1px 1px #000;
border: 1px solid #333;
border-radius: 4px;
padding:2px 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-size: 12px;
font-weight: normal;
line-height: 16px;
}
.saving .by_kucopas {
margin-left: 30px;
text-align: center;
color: #015828;
font-size: 12px;
font-weight: normal;
position: absolute;
bottom: 30px;
width: 100%;
height: 20px;
left: 0;
}
.saving .by_kucopas span.esm4 {
color: #aaa;
font-style:italic;
font-size:14px;
font-weight:bold;
text-transform:uppercase;
}
#recpost {
width:210px;
overflow: hidden;
height: 327px;
float: right;
margin-top: 10px;
padding: 4px 2px;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-transition: all 1.5s ease-out;
-moz-transition: all 1.5s ease-out;
-webkit-transition: all 1.5s ease-out;}
</style>
<div class='saving'>
<p class='esm1'>KUCOPAS<br/>
<span class='esm2'>Energy Saving Mode using CSS3</span><br/><br/>
<span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan baca kembali posting kami!</span></p>
<div class='by_kucopas'>Support design by: <span class='esm4'>KUCOPAS</span> - September 2012</div>
</div>

Keterangan: sumber script, kuc0pas.blogspot.com. ganti kode berwarna merah sesuai dengan keinginan anda.

Klik "Simpan".

Scrensaver diatas hanya memunculkan sebuah text/tulisan. Jika anda ingin menggunakan gambar pada screensaver diblog anda, caranya sama saja, hanya pada bagian "HTML/JavaScript" isikan konten-nya dengan kode dibawah,

<script type="text/javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/screensavervikry.js">
</script>
<style type='text/css'>
div#energysaving, div#energysaving * {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0XgToCLx6m4uqR8XTc5rBNWLMht-8SDpph_VN9yxrC2mW_rQrb11sQt-6iw6UJvsgJEEZ08RsFh-quNopcyxR3UAdVh7FeFDCuc9ukrjP4wC2EHjynI5JmsNPxAHfD1Tw8ZoSv9kO69W/) no-repeat center center fixed black;
}
div#energysaving p span {
display:none;
visibility:hidden;
}
</style>

Keterangan : sumber script, www.vikrymadz.web.id. ganti kode berwarna merah dengan URL gambar anda.

Klik "Simpan".

Sekarang anda hanya perlu memilih ingin menggunakan script yang mana.
Hanya itu penjelasan yang bisa saya berikan tentang membuat screensaver pada blog.
Kurang lebihnya mohon maaf.
Semoga bermanfaat.

By : Ciel

On :

Membuat Pesan Tunggu (Loading) Pada Blog

Loading yang saya maksud disini merupakan waktu yang diperlukan oleh browser untuk menampilkan website anda secara keseluruhan. Pasti keren kan kalo Blog anda menampilkan loading sambil menunggu seluruh halaman terbuka. Sekedar informasi bahwa tutorial ini saya dapat dari eltelu.blogspot.com. Untuk membuatnya anda bisa mengikuti langkah-langkahnya dibawah ini,

Login.
Pilih menu "Template".
Klik "Edit HTML".
Centang "Expand Template Widget".
Cari kode ]]></b:skin>.
Kemudian copy kode dibawah ini, dan letakkan diatas kode ]]></b:skin>.

.loading-frame {
height: auto;
overflow: hidden;
width: 250px;
padding: 5px;
border: 1px solid #666666;
color: #000000 !important;
text-align: center;
font: bold 13px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #f3f3f3;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f3f3f3), color-stop(1, #ffffff) );
background: -moz-linear-gradient( center top, #f3f3f3 30%, #ffffff 70% );
}

Selanjutnya anda cari kode </head>.
Lalu copy kode yang ada dibawah ini, dan letakkan diatas kode </head>.

<script type="text/javascript" language="javascript">
function tampilkanpesanpembuka() {
if (document.getElementById){
document.getElementById('pesanpembuka').style.visibility='hidden';
}
else {
if (document.layers){
document.pesanpembuka.visibility = 'hidden';
}
else {
document.all.pesanpembuka.style.visibility = 'hidden';
}
}
}
</script>

Berikutnya cari kode <body>. Jika pada template Blog standar kode lengkapnya <body expr:class='"loading" + data:blog.mobileClass'>
Sisipkan kode onLoad='tampilkanpesanpembuka();' didalam kode <body>, sehingga kodenya seperti pada dibawah,

<body expr:class='"loading" + data:blog.mobileClass' onLoad='tampilkanpesanpembuka();'>

Jika sebelumnya anda sisipkan diantara rangkaian kode <body>, sekarang anda letakkan kode berikut dibawah kode <body>.

<b:if cond='data:blog.isMobile'>
<b:else/>
<div id='pesanpembuka' align='center' style='width: 100%; top:300px; white-space: nowrap; position: fixed; z-index: 100;'>
<div class='loading-frame'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGIUXfsca6qxshChKBWCMEa5vsj5GBBLb8SKIrnCRyUGaWpegqgTskHVj0KPxbKt2oHl6dS7q3PQsItjaKlt9KPIneFV7_vkQXZ39ZDE8plVjRarWinHgYQ__hkXDO1WNeb6__pTjnExk/s800/Proses%2520Loading.gif'/><br/>
SEDANG MEMUAT KONTEN HALAMAN<br />
SILAKAN TUNGGU
</div>
</div>
</b:if>

Jika semua kode telah anda letakkan ditempat yang tepat, sekarang klik "Simpan template".

Dengan mengikuti langkah-langkah diatas, sekarang Blog anda akan melakukan penayangan loading-nya.

Sekian dari saya, kurang lebihnya mohon maaf.

Semoga bermanfaat.

By : Ciel

On :

Membuat ucapan selamat datang di Blog

Kali ini saya akan membagikan sebuah tutorial sederhana yang sebenarnya kurang saya sukai. Yaa walaupun dengan memberikan ucapan selamat datang pengunjung akan merasa lebih dihargai, tetapi pengunjung juga akan merasa direpotkan karena diharuskan untuk meng-klik tombol "Ok" untuk menutup ucapan ini, supaya bisa melanjutkan ke konten yang dituju. Tetapi setiap orang pasti memiliki pemikiran yang berbeda-beda, jadi bagi anda yang ingin memasang ucapan selamat datang pada Blog anda, bisa ikuti tutorialnya dibawah.

Login.
Pilih menu "Template".
Klik "Edit HTML".
Centang "Expand Template Widget".
Cari kode </head>.
Sekarang silakan anda copy kode yang ada dibawah, kemudian anda letakkan diatas kode </head>.

<script type='text/javascript'>
alert("Welcome To My Blog")
</script>

Keterangan: kode berwarna biru merupakan ucapan yang akan anda tampilkan, anda bisa merubahnya sesuai keinginan anda.

Terakhir klik "Simpan".

Mudah kan?

Semoga bermanfaat.

By : Ciel

On :

Merubah tampilan Scrollbar di Blog

Ada banyak cara yang dapat anda lakukan untuk mempercantik tampilan Blog anda, mungkin salah satu cara yang harus anda coba adalah dengan merubah tampilan scroll bar pada Blog anda menjadi warna-warna yang menarik.
Ok langsung saja, langkah-langkah merubah tampilan scrollbar pada Blog:

Login.
Pilih menu "Template".
Klik "Edit/HTML".
Centang "Expand Template Widget".
Cari kode ]]></b:skin>.
Sekarang copy kode yang ada dibawah, dan letakkan diatas kode ]]></b:skin>.

/* Scrollbar
----------------------------------------------- */
::-webkit-scrollbar {
height:15px;
width: 15px;
}
::-webkit-scrollbar-track {
background: gray;
}
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:window-inactive {
background: gray;
border: 2px solid blue;
}

Keterangan: silakan anda ganti kode yang berwarna merah sesuai dengan kode warna yang ingin anda gunakan.

Jika sudah klik "Simpan".

Gimana mudah kan?

Sekian tutorial dari saya mengenai cara merubah tampilan scrollbar pada Blog.

Semoga bermanfaat.

Keterangan: kode ini hanya berlaku untuk google chrome.

By : Ciel

On :

Menampilkan atau Menyembunyikan Kotak Komentar pada Blog

Sebenarnya fungsi dari show/hidden ini ditujukan untuk blogger yang sering kebanjiran komentar, karna dengan begitu tampilannya akan terlihat lebih minimalis. Tapi untuk anda yang Blog-nya jarang dikomentari tidak perlu berkecil hati, anda harus tetap optimis suatu hari nanti nasib Blog anda akan berubah, dan memiliki komentar yang membludak :D untuk itu ada baiknya anda mempersiapkan diri dari sekarang.
Sesuai dengan judulnya pada postingan kali ini saya akan membagikan cara membuat tombol Show/Hidden pada komentar Blog, dengan begitu pengunjung akan dapat menentukan sendiri jika ingin berkomentar ria, atau hanya sekedar melihat komentar yang sudah ditulis pengunjung lain sebelumnya, hanya dengan meng-klik tombol yang telah disediakan.
Anda tertarik untuk menggunakannya pada Blog anda? Silakan ikuti tutorialnya dibawah,

Langkah-langkah:

Login (tentunya :D)
Pilih menu "Template".
Klik "Edit HTML".
Centang "Expand Template Widget".
Cari kode ]]></b:skin> (gunakan CTRL+F untuk mempermudah pencarian).
Jika sudah, sekarang copy kode yang ada dibawah ini, kemudian anda letakkan diatas kode ]]></b:skin>.

a.openpanel {
display:block;
width:100%;
height:30px;
padding:0px 0px;
text-align:center;
font-weight:bold;
line-height:30px;
background:#1F9EE5; url()repeat-x;
-webkit-transition: all .15s ease-in-out;
-webkit-transform-origin: 50% 1px;
position:relative;
}

Masih pada Edit HTML >> dengan mencentang "Expand Template Widget", sekarang anda cari kode </head>.
Sudah ketemu? Sekarang copy kode yanga ada dibawah, kemudian letakkan diatas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Sembunyikan Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='https://pesan-bocah-alus.googlecode.com/files/showhidden.js' type='text/javascript'/>

Keterangan: perhatikan kode berwarna biru, dalam sebuah template blog, anda hanya diperbolehkan untuk menggunakan satu kode jquery. Jika sebelumnya anda telah menggunakan kode jquery pada template blog anda, maka anda harus menghapus kode berwarna biru tersebut. Untuk memeriksa apakah anda telah menggunakannya, Edit HTML >> dengan mencentang "Expand Template Widget" >> cari kode jquery (letaknya diantara <head> .... </head>).

Jika anda sudah meletakkan kode-kodenya, sekarang anda klik "Simpan template".
Selesai dah, untuk pembahasaan kali ini.

Sekian dari saya, Semoga bermanfaat :)

Keterangan : trik ini akan bekerja, tentu jika sobat mengaktifkan komentar di blogger.

By : Ciel

On :

Memberikan Efek-efek Unik Pada Kursor Mouse

Memberikan efek keren pada cursor mouse.

Memberikan efek-efek unik pada kursor mouse, yaa itulah tema kita malam ini. Karena sebelumnya saya memberikan cara merubah tampilan kursor mouse, jadi postingan kali ini ga usah jauh-jauh dari kursor dah :D. dari membaca judulnya pasti anda sudah bisa menerawang apa yang akan saya berikan di postingan ini, ok langsung saja beberapa efek yang saya punya untuk menghiasi kursor mouse yang ada di Blog anda.

Efek yang pertama adalah salju/bintang yang berjatuhan ketika kursor mouse anda bergerak.

Untuk memberikan efek ini pada Blog anda, langkah-langkahnya:

Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
Isi konten dengan kode yang ada dibawah

<script src="https://pesan-bocah-alus.googlecode.com/files/salju.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">var colour="blue";</script>

Keterangan : Untuk kode yang berwarna biru, merupakan kode dari warna efek, dapat anda rubah sesuai selera anda.

Klik "Simpan".

Efek yang kedua adalah Bubble/gelembung, jika pada efek yang pertama saljunya berjatuhan, maka pada efek ini buble akan melayang keatas.

Untuk menggunakan, Langkah-langkahnya persis seperti memasang efek yang pertama hanya dengan kode yang berbeda, yaitu:

Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
Isikan konten dengan kode dibawah.

<script type="text/javascript" src="https://pesan-bocah-alus.googlecode.com/files/startbubble.js"></script>
<script type="text/javascript" src="https://pesan-bocah-alus.googlecode.com/files/bubble.js"></script>

Klik "Simpan".

Efek yang ketiga berupa tulisan yang mengikuti kursor mouse, jika pada efek yang pertama saljunya akan berjatuhan dan efek yang kedua bubblenya melayang, maka pada efek ini tulisan akan terus mengikuti kursor mouse dan membentuk sebuah circle.

Untuk memasangnya pada Blog anda, Langkah-langkahnya masih sama dengan langkah efek pertama dan kedua, tentunya dengan kode yang berbeda, yaitu:

Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
Isikan konten dengan kode dibawah.

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #0000FF;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
;(function(){
var msg = "Tulisan yang ingin anda tampilkan";
var size = 14;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.2;
var speed = 0.3;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

Keterangan : kode berwarna biru, merupakan tulisan yang akan muncul nantinya.

Klik "Simpan".

Efek yang keempat, berupa jam digital yang mengikuti kursornya.
Cara pemasangannya,

Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
Isikan konten dengan kode dibawah.

<script src="https://pesan-bocah-alus.googlecode.com/files/analogkursor.js" type="text/javascript"></script>

Klik "Simpan"

Sekarang anda hanya perlu menentukan efek mana yang sesuai dengan keinginan anda.

Sekian tutorial saya kali ini.

Semoga bermanfaat.

By : Ciel

On :

Cara Mudah Merubah Tampilan Cursor Mouse di Blog

cara mudah merubah cursor mouse pada blog

Mouse pointer atau penunjuk mouse adalah tanda yang menyatakan posisi mouse pada layar. Umumnya berbentuk tanda panah akan tetapi bisa diubah sesuai keinginan. Untuk itu pada postingan kali ini saya akan membagikan cara mudah merubah pointer atau cursor mouse pada Blog anda. Cursor mouse merupakan salah satu bagian penting pada Blog, karena merupakan bagian yang paling sering mendapat perhatian dari pengunjung. Dengan merubah kursornya dengan tampilan yang lebih unik tentunya Blog anda akan terlihat lebih menarik. Jika anda tertarik untuk mengganti kursor pada Blog anda, silakan ikuti tutorialnya dibawah,

Langkah-langkah:

Kunjungi situs www.cursors-4u.com.
Disana anda akan disugukan banyak contoh dari kursornya.
Anda dapat memilih berdasarkan kategori yang ada.

Silakan anda pilih salah satu gambar yang anda ingin gunakan pada Blog anda.

Jika anda telah menentukan kursor mana yang akan anda gunakan, klik gambar tersebut untuk mendapatkan kode dari kursornya.
Sekarang copy kode yang diberikan untuk kursor yang telah anda pilih. (Option #1 - Universal CSS/HTML Code)

Nah anda sekarang telah mendapatkan kodenya.

Untuk memasangnya di Blog anda, Pilih Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
Isikan konten dengan kode yang sebelumnya telah anda copy.
Jika sudah klik "Simpan".

Sekarang anda akan menemukan perubahan yang terjadi pada cursor mouse yang ada Blog anda.

Sekian tutorial dari saya mengenai cara mudah mengganti kursor blog dengan animasi, Semoga bermanfaat.

By : Ciel

On :

Memberikan Efek Hover Keren pada Link Text di Blog

Banyak hal yang dapat dilakukan dalam memodifikasi Blog supaya terlihat menarik. Setelah sebelumnya saya membagikan cara untuk memberikan efek hover pada gambar, pembahasan kali ini masih membahas tentang efek hover, hanya saja sekarang saya akan memberikan efeknya untuk link teks atau tautan yang terdapat pada Blog anda. Jika anda tertarik, ikuti tutorial dibawah,

Langkah-langkah yang harus dilakukan,

Login ke akun Blog anda.
Pilih menu "Template".
Klik "Edit HTML".
Centang "Expand Template Widget".
Sekarang anda cari kode a:link, untuk lebih kode lengkapnya lihat dibawah,

a:link {
text-decoration:none;
color: #0000ff;
}
a:visited {
text-decoration:none;
color: #6a6a6a;
}
a:hover {
text-decoration:underline;
color: #ff2707;
}

Keterangan:

Untuk kode yang berwarna Biru, itu merupakan kode warna yang ada diblog anda, jadi kodenya pasti berbeda.

Berikut adalah beberapa efek yang bisa anda tambahkan,

Efek yang pertama,

Link anda akan berubah ukurannya. Untuk membuat link seperti ini anda hanya perlu meletakkan kode dibawah ini setelah kode a:hover {

font-size:20px;

Keterangan: untuk ukuran perubahannya dapat anda tentukan sendiri sesuai keinginan anda dengan merubah angka "20" (satuan px).

Efek yang kedua,

Pada efek ini saya memberikan sebuah background gambar dari link-nya. Untuk membuatnya letakkan kode dibawah, setelah kode a:hover {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ-fPY1th_UHyKhkI7CjQHLlAzQLQkL_H1WqRIVJ5_SfXDUcKFmr3xcUSEZhVD7yZcjsjNIHj15OMeN0HOAtXfae6EVgfTzfMLPZ7AQ2PTpXNVWH65gwfE24H6FENjkdvE3YzT9KAjumM/s1600/Bintang+Berkilauan.gif);

Keterangan: kode berwarna Biru merupakan URL dari gambar, anda dapat merubah dengan URL gambar yang anda punya.

Adapun gambar-gambar lain yang bisa anda gunakan,

Efek yang ketiga,

Efek yang saya tambahkan adalah glow (bercahaya). Untuk membuatnya letakkan kode dibawah setelah kode a:hover {

text-shadow:0 0 10px blue;

Keterangan: kode berwarna Biru merupakan warna dari cahaya yang akan muncul, silakan ubah sesuai kreasi anda.

Efek-efek diatas dapat anda tambahkan secara bersamaan.

Jika anda sudah menentukan pilihan efek yang ingin anda gunakan, klik "Simpan template".

Itulah beberapa efek yang dapat anda tambahkan pada link atau tautan anda.

Selain efek-efek yang ada diatas masih ada satu efek lagi, hanya saja cara menggunakannya sedikit berbeda dari cara diatas,
Efek yang akan muncul nanti adalah merubah warna dari link yang ada di Blog anda menjadi warna warni (pelangi).

Langkah-langkah membuat link aktif menjadi rainbow (pelangi).
Tata Letak >> Tambahkan Gadget (dimana saja) >> HTML/Javascript >> Isi konten dengan kode dibawah,

<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/kedip_rainbow.js
' type='text/javascript'/></script>

Jika sudah klik "Simpan".

Sekian postingan saya kali ini.

Semoga Bermanfaat.

By : Ciel

On :

Memberikan Efek Hover Keren pada Gambar

Hover adalah efek atau perubahan yang terjadi apabila kursor kita mengarah pada suatu object (link/gambar). nah pada kesempatan kali ini saya akan membagikan cara bagaimana memberikan efek hover tersebut pada gambar yang ada pada Blog anda. dengan memberikan efek hover ini tentunya akan membuat tampilan pada Blog anda jadi terlihat lebih menarik. Langsung aja dah, jika kalian tertarik untuk memberikan efek pada setiap gambar yang ada di Blog anda, silakan ikuti tutorial yang ada dibawah,

Langkah-langkah,

Login ke akun Blog anda.
Pilih menu "Template".
Klik "Edit HTML".
Centang "Expand Template Widget".
Cari kode ]]></b:skin>.
Pilih salah satu kode berikut lalu letakkan diatas kode ]]></b:skin>.

Silahkan arahkan kursor pada gambar untuk melihat efeknya!

Kode untuk efek diatas:

.post img {
height:auto;
transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

Kode untuk gambar diatas:

.post img {
border-radius: 30px 0 30px 0;
-moz-border-radius: 30px 0 30px 0;
-webkit-border-radius: 30px 0 30px 0;
-o-border-radius: 30px 0 30px 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.post img:hover {
box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0;
}

Kode untuk efek diatas:

.post img {
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
.post img:hover {
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1;
}

Kode untuk efek diatas:

.post img {
-webkit-transition: all 1200ms;
-moz-transition: all 1200ms;
-ms-transition: all 1200ms;
-o-transition: all 1200ms;
transition: all 1200ms;
}
.post img:hover {
-moz-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transition: all 1200ms ease-in-out;
-moz-transition: all 1200ms ease-in-out;
-ms-transition: all 1200ms ease-in-out;
-o-transition: all 1200ms ease-in-out;
transition: all 1200ms ease-in-out;
}

Kode untuk efek diatas:

.post img{
transition:all 1.2s ease-out;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}
.post img:hover {
z-index:99;
transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-moz-transform:rotate(360deg) scale(2) translate(1px,-3px);
-webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

Jika anda sudah menentukan pilihan efek yang akan anda gunakan, klik "Simpan".

Sekian tutorial kali ini, Semoga bermanfaat.

By : Ciel

On :

Mengganti tulisan "older/newer post" pada Blog dengan gambar

Pada kesempatan sebelumnya saya telah memberikan tutorial tentang merubah tulisan "posting lama" dan "posting lebih baru" menjadi sebuah page number. Tapi kayanya cara ini jarang digunakan oleh para Blogger. Biasanya sobat Blogger lebih tertarik merubahnya menjadi sebuah gambar. Oleh karena itu pada kesempatan kali ini saya akan memberikan cara bagaimana merubah tulisan older post dan newer Post yang terdapat difooter Blog menjadi sebuah gambar. Yaa cara ini ditujukan untuk lebih mempercantik tampilan template Blog anda. Jika anda tertarik untuk merubahnya silakan ikuti tutorial dibawah ini.

Langkah-langkah merubah tulisan older post dan newer post menjadi sebuah gambar.

Login ke akun Blog anda.
Pilih menu "Template".
Klik "Edit HTML".
Centang "Expand Template Widget".

Untuk merubah tampilan Newer Post (Posting Lebih Baru), anda cari kode <data:newerPageTitle/>. Jika sudah ketemu, ganti dengan kode yang ada dibawah,

mengganti tulisan posting baru dengan gambar

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB61bmD52nP7CxEpCqjJgrod_igiCTPCCDAhPpkmoHuM029iXcrxES8R7-hDTIr4gCiikt3FzzDwLVINSV3uq4erTfopptIrdG3mQmruYCAzAnrkHauWy269FFqcuJQuTqWNmTAaWehoc/s1600/Previous.png'/>

Berikutnya untuk merubah tampilan dari Home (Beranda) yang letaknya berada diantara older & newer post, anda cari kode <data:homeMsg/>. Jika sudah ketemu, ganti kode tersebut dengan kode yang ada dibawah,

mengganti tulisan beranda pada footer blog dengan gambar

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjez3C062PutlEEzQN_MwjW6taGVP1BuKpFuBaI0tTRKiVmeUGf1n-dNHZbR0CQnI35hr12ZsqjAsjJJQaKGU4QryRXx9JxDswyEtiuAQ1vFK7ZipU92PPixxYfj74VDp_2con5aIMuDU/s1600/Beranda.png'/>

Dan yang terakhir adalah untuk merubah tampilan dari Older Post (Posting Lama), anda cari kode <data:olderPageTitle/>. kemudian anda ganti dengan kode yang ada dibawah,

mengganti tulisan posting lama dengan gambar

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRArsEYR6jaV6cgulsVrVxXEh2oPaOL534RaVELs1G-8ZvogTsLWMTIELGuGGuSPccC9iLv4x_aLBUBd13JchjBcNMVcz-1q6AYvkMoXAJlWnnMRwTr39O1auiU7dSRuUn8xZ6bTTDznA/s1600/Next.png'/>

Jika anda sudah mengganti semua kodenya, lanjutkan dengan klik "Simpan template".

Keterangan:
Untuk kode yang berwarna biru bisa anda rubah dengan URL gambar lain (jika anda telah memiliki gambarnya). Sedangkan untuk kode <data:homeMsg/>, jika anda menemukan lebih dari satu kode, coba untuk memilih kode yang pertama.

Sekarang lihat perubahan yang terjadi pada Blog anda.

Sekian tutorial dari saya, Semoga bermanfaat.

By : Ciel

On :

Membuat Emoticon Lucu pada Komentar Blog

Salah satu cara untuk membuat artikel kita dikomentari oleh banyak orang adalah dengan menambahkan emoticon lucu dikomentarnya. Karena dengan adanya emoticon, pengunjung dapat lebih mengekspresikan unek-uneknya terhadap artikel tersebut. Nah kali ini saya akan beritahu cara untuk memasangnya disitus anda. emoticon yang akan saya gunakan berupa gambar "onion", pasti udah pada tau kan? emoticon ini cukup terkenal dan udah sering digunakan oleh banyak situs top. Kalo anda tertarik untuk memasangnya disitus anda, nih tampilannya kalo sudah terpasang,

Keren kan? Untuk mendapatkan kodenya pengunjung hanya perlu mengklik salah satu gambar dari emoticon yang ingin digunakan, maka disana akan muncul kode dari emoticon tersebut. Dengan begini pengunjung juga akan lebih dipermudah dalam penulisan kode emoticonnya.
Itu tadi sedikit penjelasan tentang emoticon yang akan dibuat, sekarang mari ikuti ke langkah-langkah pembuatannya.
Langkah-langkah Membuat Emoticon di Komentar Blog:

Login ke akun Blog kalian.
Pilih menu "Template".
Klik "Edit HTML".
Centang "Expand Template Widget".
Cari kode </body>.
Jika sudah ketemu, copy kode yang ada dibawah ini, lalu letakkan diatas kode </body>

<style type='text/css'>.emoWrap { background-color:#ffffff; border:2px solid #D3BA59; padding:10px 14px; color:black; font:bold 12px Tahoma,Arial,Sans-Serif; text-align:center; width=100%;}img.emo, input.emoKey { display:inline-block; /* Penting! */ *display:inline; vertical-align:middle;}input.emoKey { border:1px solid #ccc; background-color:white; font:bold 11px Arial,Sans-Serif; padding:1px 2px; margin:0px 0px 0px 2px; color:black;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[var emoRange = "#comments p, div.emoWrap", putEmoAbove = "iframe#comment-editor", emoMessage = "Berikan spasi untuk menambahkan emoticon.";//]]></script><script src='https://pesan-bocah-alus.googlecode.com/files/onionemoticon.js' type='text/javascript'/>

langkah terakhir klik "Simpan template".

Selesai dah, sekarang komentar di Blog anda telah terpasang gambar-gambar lucu dari emoticon onion.

Semoga bermanfaat.

By : Ciel

On :

Membuat Emoticon Lucu di Posting Blog

Anda pasti setuju jika sebuah posting merupakan tujuan utama para pengunjung untuk mengunjungi sebuah situs. Mao sebagus apapun template dari situs tersebut jika tidak dibarengi dengan posting yang berkualitas, maka anda tidak akan menemukan banyak pengunjung didalamnya. Oleh karena itu sebisa mungkin buatlah sebuah artikel yang mudah dipahami dan bermanfaat untuk banyak orang. Tapi kali ini saya tidak mengajarkan bagaimana cara menulis sebuah artikel yang baik, karena secara pribadi artikel yang saya tulispun masih jauh dari kata sempurna. Lalu apa yang akan saya posting kali ini? Karena sebelumnya saya katakan betapa pentingnya sebuah posting, disini saya akan membagikan cara untuk memberikan emoticon pada artikel yang akan anda buat nantinya. Jadi sebuah posting yang akan anda tulis nantinya akan terlihat lebih indah dan tidak membosankan tentunya.

Tidak usah berlama-lama lagi berikut langkah sederhananya.

Login ke akun Blog anda (yaiyalah, masa akun orang laen). :wkwk:
Pilih menu “Template”.
Klik “Edit HTML”.
Centang “Expand Template Widget”.
Copy kode dibawah dan letakkan sebelum/diatas kode </body>.

<script src='https://pesan-bocah-alus.googlecode.com/files/emoticonlucu.js' type='text/javascript'></script>

Terakhir klik “Simpan template”.

Nah untuk menerapkannya, yang perlu anda lakukan adalah dengan memberikan kode berikut saat menuliskan artikel.

:aladin: untuk emoticon seperti ini :aladin:

:angel: untuk emoticon seperti ini :angel:

:rugbi: untuk emoticon seperti ini :rugbi:

:basket: untuk emoticon seperti ini :basket:

:bola: untuk emoticon seperti ini :bola:

:boy: untuk emoticon seperti ini :boy:

:bye: untuk emoticon seperti ini :bye:

:cape: untuk emoticon seperti ini :cape:

:catat: untuk emoticon seperti ini :catat:

:ckck: untuk emoticon seperti ini :ckck:

:cukur: untuk emoticon seperti ini :cukur:

:demam: untuk emoticon seperti ini :demam:

:dingin: untuk emoticon seperti ini :dingin:

:dokter: untuk emoticon seperti ini :dokter:

:berapi: untuk emoticon seperti ini :berapi:

:love: untuk emoticon seperti ini :love:

:geleng: untuk emoticon seperti ini :geleng:

:gitar: untuk emoticon seperti ini :gitar:

:happyeartday: untuk emoticon seperti ini :happyeartday:

:huft: untuk emoticon seperti ini :huft:

:jatuhcinta: untuk emoticon seperti ini :jatuhcinta:

:pedang: untuk emoticon seperti ini :pedang:

:panas: untuk emoticon seperti ini :panas:

:keren: untuk emoticon seperti ini :keren:

:korekkuping: untuk emoticon seperti ini :korekkuping:

:makan: untuk emoticon seperti ini :makan:

:mandi: untuk emoticon seperti ini :mandi:

:master: untuk emoticon seperti ini :master:

:meled: untuk emoticon seperti ini :meled:

:lukis: untuk emoticon seperti ini :lukis:

:foto: untuk emoticon seperti ini :foto:

:nangis: untuk emoticon seperti ini :nangis:

:menari: untuk emoticon seperti ini :menari:

:mengawasi: untuk emoticon seperti ini :mengawasi:

:telepon: untuk emoticon seperti ini :telepon:

:naksir: untuk emoticon seperti ini :naksir:

:ngakak: untuk emoticon seperti ini :ngakak:

:ngeledek: untuk emoticon seperti ini :ngeledek:

:ngopi: untuk emoticon seperti ini :ngopi:

:tolak: untuk emoticon seperti ini :tolak:

:sembah: untuk emoticon seperti ini :sembah:

:payah: untuk emoticon seperti ini :payah:

:pentung: untuk emoticon seperti ini :pentung:

:ramal: untuk emoticon seperti ini :ramal:

:punk: untuk emoticon seperti ini :punk:

:sedih: untuk emoticon seperti ini :sedih:

:sikatgigi: untuk emoticon seperti ini :sikatgigi:

:sip: untuk emoticon seperti ini :sip:

:sleepy: untuk emoticon seperti ini :sleepy:

:suster: untuk emoticon seperti ini :suster:

:taxedo: untuk emoticon seperti ini :taxedo:

:tepuktangan: untuk emoticon seperti ini :tepuktangan:

:tidur: untuk emoticon seperti ini :tidur:

:tiup: untuk emoticon seperti ini :tiup:

:lupa: untuk emoticon seperti ini :lupa:

:wkwk: untuk emoticon seperti ini :wkwk:

Keterangan :
Tips ini hanya berlaku untuk template yang mempunyai kode <div class='post-body entry-content'>

Terimakasih untuk kunjungannya.

Semoga bermanfaat.

By : Ciel

On :

Mempercantik Tampilan Widget Blog

Pada tulisan kali ini saya akan membuat tampilan widget pada Blog anda menjadi sedikit menarik. yaa, berhubung saya lagi males untuk basa-basi, jadi langsung aja dah. ikuti langkah-langkah dibawah :p

Login ke akun Blog masing-masing.
Pilih menu "Template".
Klik "Edit HTML".
Centang "Expand Template Widget".
Cari kode ]]></b:skin> (gunakan CTRL+F untuk mempermudah pencarian).
Jika sudah ketemu, copy kode dibawah ini, kemudian letakkan sebelum/diatas kode ]]></b:skin>

.main-inner .sidebar .widget h2 { background: #FFFFFF; background: linear-gradient(top, #E5E5E5 0, #FFFFFF 15%, #EBEBEB 50%, #CFCFCF 50%, #E0E0E0 100%) no-repeat; background: -webkit-linear-gradient(top, #E5E5E5 0, #FFFFFF 15%, #EBEBEB 50%, #CFCFCF 50%, #E0E0E0 100%) no-repeat; background: -moz-linear-gradient(top, #E5E5E5 0, #FFFFFF 15%, #EBEBEB 50%, #CFCFCF 50%, #E0E0E0 100%) no-repeat; background: -o-linear-gradient(top, #E5E5E5 0, #FFFFFF 15%, #EBEBEB 50%, #CFCFCF 50%, #E0E0E0 100%) no-repeat; background: -ms-linear-gradient(top, #E5E5E5 0, #FFFFFF 15%, #EBEBEB 50%, #CFCFCF 50%, #E0E0E0 100%) no-repeat; background: linear-gradient(top, #E5E5E5 0, #FFFFFF 15%, #EBEBEB 50%, #CFCFCF 50%, #E0E0E0 100%) no-repeat; -svg-background: linear-gradient(top, #E5E5E5 0, #FFFFFF 15%, #EBEBEB 50%, #CFCFCF 50%, #E0E0E0 100%) no-repeat; padding:6px 3px; margin:0 auto 10px; text-align:center;}.main-inner .sidebar .widget-content { margin: 0px; text-align: justify; text-decoration: none; border: 1px solid #674ea7; border-radius: 4px; box-shadow: 1px 1px 6px 1px #3d85c6; background: #ffffff;}.main-inner .widget #ArchiveList { margin: 0px;}.main-inner .widget ul,.main-inner .widget li,.main-inner .widget ul li,.main-inner .widget #ArchiveList ul.flat li { margin: 0px; padding: 2px; list-style: none;}

Jika sudah, klik "Simpan template".

Sekarang lihat hasilnya.

Terima kasih untuk kunjungannya.

By : Ciel

On :

Membuat Nomor Halaman pada Blog

Kali ini saya akan memberikan tutorial untuk membuat Older & Newest Post yang terdapat dibawah posting menjadi lebih menarik, yaitu dengan merubahnya menjadi angka (page number). Selain untuk mempercantik tampilan Blog anda page number ini juga sangat membantu pengunjung Blog untuk dapat dengan mudah menemukan halaman yang ingin dituju.

Kayanya ga perlu basa-basi panjang lebar lagi dah, kita mulai aja langkah-langkahnya.

Login ke akun Blog anda.
Pilih menu "Template".
Klik "Edit HTML".
Centang "Expand Template Widget".
Cari kode ]]></b:skin> (tekan CTRL+F pada keyboard, untuk mempermudah pencarian).
Jika sudah ketemu, sekarang copy kode yang ada dibawah ini, kemudian letakkan sebelum/diatas kode ]]></b:skin>.

/* Page Numbers
----------------------------------------------- */
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Masih pada "Edit HTML", sekarang cari kode </body>
Jika sudah ketemu, copy kode dibawah dan letakkan sebelum/diatas kode </body>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>

Klik "Pratinjau" untuk memastikan hasilnya sesuai.
Jika sudah sesuai, sekarang klik "Simpan template".

Sekarang lihat hasilnya.

Semoga bermanfaat.

By : Ciel

On :

QuinBlog

SELAMAT DATANG DI BLOG KECIL SAYA

Tampilkan postingan dengan label Tampilan. Tampilkan semua postingan

Modifikasi Tampilan Pesan Komentar Blog

Mempercantik Tampilan Komentar Blog

Membuat Screensaver Pada Blog

Membuat Pesan Tunggu (Loading) Pada Blog

Membuat ucapan selamat datang di Blog

Merubah tampilan Scrollbar di Blog

Menampilkan atau Menyembunyikan Kotak Komentar pada Blog

Memberikan Efek-efek Unik Pada Kursor Mouse

Cara Mudah Merubah Tampilan Cursor Mouse di Blog

Memberikan Efek Hover Keren pada Link Text di Blog

Memberikan Efek Hover Keren pada Gambar

Mengganti tulisan "older/newer post" pada Blog dengan gambar

Membuat Emoticon Lucu pada Komentar Blog

Membuat Emoticon Lucu di Posting Blog

Mempercantik Tampilan Widget Blog

Membuat Nomor Halaman pada Blog

Portal Chat QuinBlog

Popular Posts

Blogger templates

Labels

Blog Archive

Mengenai Saya

Blogroll

About

Weekly post