Tampilkan postingan dengan label Blogging. 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 :

Mengatasi Pesan Komentar Blog Yang Pindah Ke Bawah

Pesan komentar adalah sebuah pesan khusus yang di tuliskan oleh si pemilik blog yang ditujukan untuk pengunjung. Pesan ini biasanya berisi tentang ketentuan bagaimana cara berkomentar yang baik sesuai dengan aturan atau persyaratan dalam berkomentar di blog tersebut. Selain itu ada juga para blogger yang membuatnya untuk ucapan terima kasih, atau juga sebagai pemanis agar para pengunjung ingin berkomentar di blog-nya.

Pesan komentar ini umumnya terletak di atas dari kotak komentar, tetapi dalam keadaan tertentu biasanya akan turun ke bawah dengan tiba-tiba. Pada pengalaman pribadi saya di blog ini, pesan komentar akan muncul di atas pada postingan yang belum ada komentarnya atau yang jumlah komentarnya masih sedikit, tetapi pada posting yang jumlah komentarnya diatas empat, pesan komentar ini akan pindah ke bawah.

Saya yakin banyak para blogger akan mengalami masalah seperti gambar di atas. Karena masalah tersebut, pesan komentar yang di buat oleh pemilik akan sulit terbaca oleh pengunjung, pesan tersebut jadi terlihat seperti tidak berguna. Untuk itu saya akan memberikan solusi bagamana cara mengatasi pesan komentar yang jatuh ke bawah formulir komentar.

Perhatikan langkah-langkah berikut.

Login >> Template >> Edit HTML.

Cari kode di bawah,

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>

tips: gunakan CTRL+F lalu ketikan threaded-comment-form untuk mempermudah pencarian.

Jika sudah ketemu, silakan anda hapus semua kode di atas dan ganti dengan kode berikut,

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<div id='form-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
<b:else/>
<div id='form-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>

Selanjutnya cari kode document.getElementById(domId).insertBefore(replybox, null);

Ganti kode tersebut dengan kode document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

Klik "Simpan Template".

Sekarang masalah pesan komentar yang pindah ke bawah, sudah berhasil anda atasi. Sekian artikel saya kali ini kurang lebihnya mohon maaf. Semoga bermanfaat.

Sumber: http://istiawanblog.blogspot.com.

By : Ciel

On :

Membuat Menu Tab View Untuk Widget Blog

Untuk membuat tampilan blog agar terlihat lebih rapi dan ringkas "Multi Tab View" mungkin menjadi salah satu pilihan untuk di pasang pada blog.

Tab sendiri merupakan suatu komponen yang memungkinkan pengguna dapat beralih dari satu layar/widget ke layar/widget lain dalam satu tampilan hanya dengan mengklik judul Sub Tab. Biasanya, Tab berjumlah lebih dari satu, tapi dalam satu waktu hanya dapat mengaktifkan satu layar/widget. Kini penggunaan komponen Tab semakin populer karena Selain membuat tampilan blog menjadi rapi dan rinkas, Multi Tab View ini juga menjadikan banyaknya menu yang ingin di tampilkan hanya membutuhkan tempat yang relatif sedikit.

Ada banyak cara yang dapat digunakan untuk membuat Tab View di blog, namun cara yang akan saya gunakan yaitu dengan menggunakan jquery. kenapa? karena ada banyak kelebihan dan keunggulan tersendiri dari tampilan tab yang akan saya buat, selain cara pembuatannya yang lebih sederhana tentunya, berikut kelebihan dari Tab View menggunakan Jquery:

Tampilanya akan mengikuti gaya dari header widget template anda, yaitu bentuk dan warnanya, jadi jika tidak di kostumasi terkait warna dan bentuknya pun sudah bisa sesuai dan serasi dengan blog anda.
Mempunyai efek jquery, atau efek smooth saat anda mengalihkan menu tab, yang tentu menambah nilai keindahan untuk blog anda.
Cara instalasi atau pemasanganya yang sangat mudah karena hanya perlu menambahkan satu widget "HTML/JavaScript" dan menyisipkan kodenya.
Tidak Memerlukan embel embel atau tambahan CSS atau script untuk dimasukkan di Edit HTML.
Anda tidak perlu susah dalam meletakan widget kedalam menu Tab View ini, anda hanya perlu meletakan beberapa widget tepat dibawah widget kode "HTML/JavaScript" yang anda sudah tambahkan.

Bagi anda yang tertarik untuk membuat menu Tab View ini langsung saja ikuti langkah-langkahnya di bawah:

Pilih menu "Tata Letak" >> "Tambahkan Gadget" >> HTML/JavaScirpt.

Isi konten widget dengan kode yang ada di bawah,

<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #0000FF;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #000000;
border-bottom: 1px solid #fff;
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none; {
</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script><div id='codeholder'>
<a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>

Seperti yang sebelumnya saya beritahukan, untuk menentukan widget apa saja yang ingin anda letakan pada Tab View ini, anda hanya tinggal meletakkan widgetnya dibawahnya. (lihat gambar di bawah)

Sekian artikel mengenai cara membuat menu Tab View pada blog.
Semoga bermanfaat.

By : Ciel

On :

Mendaftar Dan Memasang Widget Histats Pada Blog

Histats adalah sebuah situs yang memberikan informasi mengenai data statistik dari sebuah website atau blog setiap harinya. Dengan mendaftar dan memasang widget Histats di blog kita akan tahu statistik serta perkembangan blog secara periodik dan terukur. Informasi yang dapat diperoleh dari Histats di antaranya:

User Online yaitu banyaknya pengunjung yang sedang online di website atau blog anda.
Visitor Today yaitu jumlah seluruh pengunjung yang memasuki website atau blog anda dalam kurun waktu satu hari.
Page Views Today yaitu jumlah seluruh halaman yang dibuka oleh pengunjung dalam kurun waktu satu hari.
Total Visitor yaitu keseluruhan jumlah total pengunjung website atau blog anda, mulai dari anda mendaftar di Histats.
Total Page Views yaitu akumulasi jumlah halaman yang dibuka oleh pengunjung, mulai dari anda mendaftar di Histats.

Jika anda tertarik, maka saya coba berbagi info tentang cara mendaftar dan memasang widget Histats di blog atau web.

Tutorial yang pertama ini adalah untuk mendaftar pada histats.com.
Ikuti langkah-langkahnya dibawah:
Kunjungi situs histats.com.
Klik “REGISTER” yang tertera pada menu.

Pada Create new account isikan data-data yang di pelukan, jangan sampai ada yang ketinggalan. Jika sudah beri tanda centang pada I have read and agree Publisher Agreement Terms dan tuliskan captcha.

Dan klik "Register".

Jika berhasil maka akan ada pesan seperti ini.

Buka email yang tadi anda daftarkan dalam Create new account dan KLIK tautan yang di berikan Histats untuk mangaktifkan akun anda.

"your account is now active, please login now and start using histats.com!"

Jika ada pesan tersebut maka akun anda telah aktif, silahkan masuk lagi ke histats.com dan login dengan email dan password yang anda buat sebelumnya.

Mendaftar website pada histats.com
Langkah selanjutnya adalah mendaftarkan website atau blog anda. Blog yang di daftarkan bisa lebih dari satu, jadi dengan manfaatkan satu akun histats, anda bisa mendaftarkan banyak blog atau website anda dengan gratis.
Oke langsung saja,
Klik "+ Add a Website".

Sekarang isikan sesuai dengan data-data dari website atau blog anda.

Keterangan:

Site url : url situs anda contoh : http://bocah-alus.blogspot.com/
Pilih bahasa : Indonesian - Bahasa Indonesia
Time zone : Pilih 11 - 04:38 am Asia/Jakarta
Category : Website anda termasuk kategori apa, silahkan di pilih. Misalnya Visual Art & Design --- Design.
Title : Judul web atau blog anda.
Description : Penjelasan singkat tentang blog anda.
Stats visibility : artinya pengaturan provasi siapa saja yang dapat melihat Stats atau data dari pengunjung Blog anda.
ada dua pilihan visible to everyone atau visible only to me, silahkan di pilih.
Jangan lupa kode captcha.

Dan klik "Continue".

Beres sekarang website/blog anda sudah berhasil anda daftarkan.

Memasang widget Histats pada blog
Untuk yang selanjutnya yaitu mengenai cara memasang widget Histats pada blog.
Ikuti totorialnya dibawah,
Pertama klik nama blog anda.

Selanjutnya klik "Counter CODE" yang ada di pojok kanan atas.

Klik "+ add new counter".

Sekarang anda tinggal memilih tampilan yang sesuai dengan selera anda dengan mengklik gambarnya.

Berikan tanda centang apa saja informasi yang ingin anda peroleh dari widget ini.

Jika sudah klik "Save".

Untuk mendapatkan script-nya klik counter yang sebelumnya telah anda buat.

Silakan anda copy script-nya.

Berikutnya login ke blog anda >> Tata Letak >> Tambahkan Gadget >> HTML/JavaScript.
Isikan konten dengan script yang sebelumnya anda copy lalu klik "Simpan".

Selesai.
Sekian artikel mengenai cara mendaftar dan memasang widget Histats pada blog.
Semoga bermanfaat.

By : Ciel

On :

Membuat Privacy Policy Pada Blog

Privacy Policy adalah sebuah halaman khusus yang dibuat oleh sipemilik situs dimana didalamnya berisi sebuah kebijakan privasi tentang website atau blog itu sendiri. Privacy Policy biasa dibuat oleh orang-orang yang ingin serius dalam menggeluti dunia internet, sehingga situs yang mereka buat nampak seperti situs yang professional. Privacy Policy juga sangat penting untuk para blogger yang mau menggeluti iklan PPC seperti Google Adsense atau lainnya, tidak hanya itu Privacy Policy juga menunjukkan siapa admin yang bisa dihubungi jika ingin menanyakan hal tentang situs tersebut, mengatur penggunaan artikel dan masih banyak lagi.

Diatas merupakan sedikit penjelasan mengenai Privacy Policy, bagi anda yang tertarik untuk membuat halaman Privacy Policy untuk situs anda sendiri, sekarang saya akan memberikan tutorial yang mudah untuk membuat Privacy Policy. Kenapa mudah? Karena saya akan menggunakan bantuan dari pihak ketiga, yaitu situs yang menggunakan layanan dalam pembuatan Privacy Policy ini, sehingga anda tidak perlu pusing menentukan apa saja yang harus anda tulis. Ada banyak situs yang menawarkan jasa untuk membuat Privacy Policy ini, dan semua tanpa mengeluarkan biaya apapun (free).

Berikut ini adalah cara untuk membuat Privacy Policy untuk situs anda:

Kunjungi situs Serprank.com
Kemudian pilih menu "Privacy Policy Generator".
Sekarang isikan data-data dari situs anda.
Jika semua data suda anda isikan, sekarang klik "Create my Privacy Policy".
Privacy Policy telah selesai dibuat, sekarang anda tinggal meng-copy dan meletakkannya dihalaman situs anda.

Bagaimana, mudah kan?

Untuk anda yang ingin melihat Privacy Policy di blog ini bisa lihat di halaman ini.

oke sekian dulu artikel mengenai cara membuat Privacy Policy pada blog, semoga bermanfaat.

By : Ciel

On :

Membuat Menu Navigasi Utama Pada Blog

Pengertian
Menu navigasi adalah sebuah fasilitas yang diberikan oleh si pemilik situs dimana didalamnya berisi sekumpulan link-link penting. Menu navigasi juga berfungsi sebagai pemandu kepada pengunjung agar dapat lebih mudah dalam menentukan kategori yang diinginkan tanpa harus bersusah payah mencarinya.

Menu navigasi dapat berbentuk mendatar (horizontal) atau menurun (vertical) juga dapat dibuat bercabang dengan sub menu (dropdown) atau tidak, tergantung kebutuhan dari situs tersebut.

Link yang biasa dipasang dalam menu navigasi utama ini, yang paling umum misalnya:
* Home
* Profile
* Sitemap
* Contact
* Buku Tamu
* Dll. Tergantung selera pemilik situs.

Manfaat
Menu navigasi yang terlihat menarik membuat situs terlihat lebih profesional walaupun dengan konten yang biasa-biasa saja. Bukan hanya itu, menu navigasi memiliki banyak manfaat diantaranya:

Lebih mudah mendapatkan backlink.
Mendapatkan nilai tambah dari google karena telah memanjakan pengunjung.

Karakteristik Menu Navigasi Situs Yang Baik

Kata yang terdapat pada menu harus mampu memberikan petunjuk yang jelas dan singkat.
Nama menu mewakili isi konten.
Gunakan istilah-istilah yang umum, singkat, dan mudah dipahami.
Gunakan warna, ketebalan, atau bentuk yang berbeda dengan konten, sehingga bisa dengan mudah dibedakan.
Pisahkan letak navigasi atau berikan pembatas dengan konten, sehingga bisa dengan mudah dibedakan.
Jangan terlalu banyak memberikan navigasi yang tidak penting, karena bisa membingungkan.
Jika navigasi memang diharuskan banyak, maka gunakan menu bercabang (dropdown), supaya lebih sederhana dan tidak terlalu ramai.
Pelajari estetika, dan estetika-kan website ataupun blog kita, supaya terlihat cantik, anggun, dan nyaman untuk dikunjungi.

Beberapa tips pendukung menu navigasi situs yang baik:

Mengatur Link menurut urutan pentingnya.
Navigasi harus jelas dan Konsisten.
Pastikan link Anda dapat dimengerti.
Membuat Site Map untuk mempermudah navigasi.
Cobalah untuk menggunakan kata-kata pendek & Jelas untuk link Anda.
Sentralisasi menu navigasi.
Link internal halaman dengan baik & menyediakan link ke homepage dari setiap halaman.
Buatlah Top navigasi menu & footer.

Cara Membuat Menu Navigasi

Dari semua penjelasan diatas, mungkin bagian ini yang paling ditunggu. Ok langsung saja, kali ini saya akan menggunakan bantuan dari pihak ketiga. Ada beberapa website yang menyediakan fasilitas untuk membuat menu navigasi sendiri secara online. Salah satu website yang menyediakan fasilitas gratis untuk membuat menu navigasi horisontal, vertikal, dropdown menu adalah menggunakan Css Menu Maker. Di website tersebut telah tersedia beberapa macam menu navigasi yang bisa dimodifikasi sekaligus bisa download source / script menu-nya.

Css Menu Maker sangat cocok buat pemula yang ingin belajar membuat menu navigasi sendiri tanpa perlu dipusingkan dengan script css, karena script css tersebut sudah tersedia dan kita hanya perlu menyisipkan css script ke template blogspot agar berfungsi dengan baik.

Secara pribadi saya lebih senang menggunakan menu navigasi yang dibuat menggunakan script css jika dibandingkan dengan menu navigasi yang dibuat menggunakan javascript, karena menurut beberapa sumber robot search engine lebih mudah menelusuri link pada menu css, jadi menu css lebih seo friendly dibanding menu javascript.

Langkah-langkah membuat menu navigasi utama pada blog menggunakan Css Menu Maker:

Kunjungi http://cssmenumaker.com/
Disana kita akan langsung disugukan beberapa pilihan menu yang keren-keren.
Pilih salah satu menu yang sesuai dengan selera anda.

Jika anda sudah menentukan pilihan, klik menu tersebut.
Dibawah menu gambar ada beberapa pilihan menu, pilih Customize untuk mengedit link yang ada langsung secara online, atau anda juga dapat mendownload source code-nya dengan memilih menu Download Source.

Setelah anda memilih menu Customize, disini anda dapat mengedit tampilan atau link sesuai dengan kebutuhan situs anda. Ada beberapa menu tab, diantaranya Preview, HTML, CSS, Image. Pilihlah menu Image, copy alamat url dari image tersebut. jika sudah sekarang pilih menu tab CSS, sekarang anda cari kode dari background misalnya dari menu yang saya pilih kodenya seperti ini "background: #d9d9d9 url(grad_light.png) repeat-x left bottom;", ganti tulisan yang ada didalam kurung dengan alamat url image yang sebelumnya telah anda copy.

Jika semua telah anda lakukan, biarkan situs Css Menu Maker tetap terbuka, sekarang silakan login ke blog anda.
Lalu pilih menu Template > Edit HTLM.
Cari kode ]]></b:skin>, sudah ketemu? sekarang buka kembali Css Menu Makernya, copy kode yang ada dibagian CSS, kemudian anda letakan diatas dari kode ]]></b:skin>.
Masih pada Template > Edit HTLM. sekarang anda cari kode </header>, jika sudah ketemu, buka kembali Css Menu Makernya, dan copy kode yang ada dibagian HTML, kemudian letakan kode tersebut dibawah kode </header>.
Jika semua langkah sudah anda lakukan, sekarang klik Simpan Template.
Nah sekarang lihat perubahan yang terjadi pada blog anda.
Selesai.

Gimana simple kan? Ok sekian dulu tulisan saya kali ini, semoga dapat bermanfaat. Kurang lebihnya mohon maaf.

Terima kasih.

By : Ciel

On :

Memasukan File PDF Ke Dalam Postingan Blog

Mungkin sesekali anda pernah berfikir untuk menampilkan atau memasukkan sebuah file PDF atau sejenisnya kedalam sebuah posting blog anda, tetapi anda belum mengetahui bagaimana caranya. Untuk itu dengan saya tulisnya artikel ini adalah untuk membantu anda dalam memecahkan solusinya, sehingga anda dapat dengan bebas membagikan dokumen apapun yang anda inginkan.

Ok langsung saja, berikut ini adalah langkah-langkah yang harus anda gunakan untuk memasukan sebuah file PDF ke dalam blog anda.

Kunjungi https://docs.google.com/
Jika sudah, login menggunakan akun google anda, apabila anda belum memilikinya anda bisa registrasi terlebih dahulu.
Setelah anda login, unggah file yang akan anda tampilkan dengan meng-klik simbol unggah.
Tunggulah beberapa saat sampai proses unggah selesai.

Setelah selesai, maka file yang anda unggah barusan akan muncul dalam daftar "Driver Saya".

Klik file tersebut, maka akan muncul tampilan dari isi dokumen yang anda unggah barusan.
Sekarang anda klik "Buka".

Maka file akan terbuka keseluruhan dalam sebuah tab baru.
Pilih menu File >> Sematkan file PDF ini.

Jika sudah maka akan keluar sebuah tampilan dengan menyertakan kode dari file tersebut, silakan anda copy kode tersebut.

Langkah terakhir anda letakkan kode yang sebelumnya anda copy kepostingan HTML blog anda.
Selesai :D

Sekarang anda dapat membagikan sebuah file PDF pada blog anda.

Semoga bermanfaat

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 Daftar Isi Otomatis Di Blog

Daftar isi pada blog adalah sebuah halaman yang menjadi pedoman utama blog dengan menampilkan seluruh judul posting yang ada di blog tersebut. Dengan adanya daftar isi akan mempermudah pengunjung dalam mengetahui seluruh konten yang tersedia di blog dalam sebuah halaman khusus. Tentunya ini juga akan menguntungkan pengunjung dan juga pemilik blog dalam meningkatkan jumlah pageview.
Pada kesempatan kali ini saya akan membagikan kepada anda bagaimana cara membuat sebuah daftar isi otomatis pada blog anda. Daftar isi ini akan ditampilkan berdasarkan label yang telah anda berikan pada setiap posting yang anda tulis. Sehingga perlu kalian ketahui bahwa sebuah artikel yang belum anda berikan label, maka artikel ini tidak akan masuk ke daftar isi ini.

Cara membuat daftar isi otomatis pada blog:

Login ke akun Blog anda.
Pilih menu "Laman".
Klik "Laman baru", dan pilih "Laman kosong".

Anda diberi dua pilihan cara saat menulis, yaitu Compose dan HTML. silakan anda pilih yang "HTML".

Setelah itu anda isi artikel dengan kode yang ada dibawah,

<script src="https://pesan-bocah-alus.googlecode.com/files/daftarisi.js">
</script>
<script src="http://bocah-alus.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

Keterangan: ganti kode berwarna biru dengan URL blog anda.

Jika sudah klik "Publikasikan".
Klik "Lihat" untuk mengetahui URL dari daftar isi tersebut.

Jika anda sudah mendapatkan URL-nya, anda bisa meletakkannya di Menu blog anda.

Ok hanya itu yang bisa saya bagikan.

Semoga bermanfaat.

By : Ciel

On :

Membuat Share Button Keren Pada Blog

Lagi asik-asik googling eh dapet tutorial keren dari trickstipsblog.blogspot.com. Tutorial-nya tentang memasang tombol share keren pada blog. Memang tidak dapat dipungkiri tombol share pada blog merupakan hal yang wajib digunakan oleh seorang blogger. Cara ini merupakan salah satu teknik SEO yang telah banyak dilakukan oleh para blogger pada umumnya.
Dengan semakin banyaknya pengguna internet yang menghabiskan waktunya di berbagai akun social media yang mereka miliki, tak hanya Facebook dan Twitter saja, keberadaan tombol share ke akun social media yang ada di blog, saya pikir sangat diperlukan sebagai salah satu strategi pemasaran sebuah blog. Pengunjung akan dengan senang hati membagikan tulisan kita jika memang dirasa bagus dan berguna bagi mereka.
Apa keuntungannya bagi kita pemilik blog? Tentunya blog dan tulisan kita akan semakin mudah tersebar dan dikenal oleh orang lain, bahkan tanpa kita menyadarinya. Dengan di share-nya tulisan kita ke akun social media pembaca, memungkinkan orang yang terhubung dengan mereka dapat berkomentar pada tulisan kita tersebut. Jangkauan tulisan kita menjadi lebih luas, meskipun kita tidak bisa mengontrol dan selalu mengetahui apa yang mereka perbincangkan atas tulisan tersebut, karena memang posisinya bukan berada pada blog kita, melainkan di dinding pelaku sharing tersebut.

Waw banyak sekali manfaatnya kan? Jadi anda gak perlu berpikir dua kali untuk memasang widget share ini. Untuk memasangnya ikuti langkah-langkah dibawah ini,

Login ke akun blog anda.
Pilih menu "Tata Letak".
Klik "Tambahkan Gadget".
Pilih widget "HTML/JavaScript".
Kemudian isi konten dengan kode yang ada dibawah,

<div class='shr_ss shr_publisher'>
</div>
<script type='text/javascript'>
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

Langkah terakhir klik "Simpan".

Simple kan? Selamat sekarang anda sudah memasang widget share keren pada blog anda.

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 :

Memasang widget Twitter FollowerBox pada Blog

Diwaktu yang lampau saya sudah membagikan sebuah tutorial mengenai cara memasang Likebox Facebook. yaa sudah terbukti dengan jejaring sosial ini dapat menambah popularitas sebuah Blog. Pada postingan kali ini saya mencoba membuat widget yang berhubungan dengan jejaring sosial lainnya, yaitu twitter. Selain facebook, twitter memang tengah menjadi jejaring sosial yang sangat banyak digunakan orang saat ini. Dengan widget ini pengunjung dapat mengetahui jumlah follower dari akun twitter anda. Semakin banyak jumlah Follower yang ada maka keinginan pengunjung lain untuk ikut menjadi Follower semakin besar.
Ok untuk anda yang tertarik memasangnya pada Blog anda, silakan ikuti tutorialnya dibawah ini,

Langkah-langkah yang harus anda lakukan:

Login ke akun Blog anda.
Pilih menu "Tata Letak".
Klik "Tambahkan Gadget".
Pilih widget "HTML/Javascript".
Isikan konten dengan kode yang ada dibawah,

<script
type="text/javascript" src="https://pesan-bocah-alus.googlecode.com/files/followerbox.js">
</script>
<div id="twitterfanbox">
<script type="text/javascript">
fanbox_init("pesanbocahalus");
</script>
</div>

Keterangan: ganti kode berwarna merah dengan Id twitter anda.

Jika sudah klik "Simpan".
Selesai.

Nah itulah cara memasang twitter follower box.

Sekian dari saya. Semoga bermanfaat.

By : Ciel

On :

Memasang Widget Random Post pada Blog

Random Post atau Posting Acak merupakan sebuah daftar yang didalamnya terdapat sebuah artikel yang pernah anda tulis dan ditampilkan secara acak. Keunggulan dari random post dibanding popular dan recent post adalah semua artikel yang pernah anda tulis dapat masuk ke list ini, tidak peduli sudah berapa lama anda menulis artikel tersebut ataupun seberapa banyak view dari artikel tersebut, tetap memiliki persentase yang sama besar dengan artikel lainnya untuk dimunculkan di list ini. Memasang widget ini sebenarnya sudah sangat populer beberapa tahun lalu, hanya saja saat ini jarang ada yang menggunakannya, saya juga kurang paham mengapa jarang ada yang menggunakannya pada Blog-nya, padahal widget ini menurut saya sangat penting untuk menambah tawaran artikel yang anda berikan kepada pengunjung. Pengunjung dapat melihat sebuah daftar yang berbeda jika melakukan reload pada halaman tersebut.
Untuk anda yang ingin menambahkan widget ini pada Blog anda, caranya sangat mudah, silakan anda ikuti tutorial dibawah.

Langkah-langkah yang harus anda lakukan untuk memasang widget random post:

Login ke akun Blog anda.
Pilih menu "Tata Letak".
Klik "Tambahkan Gadget".
Pilih widget "HTML/Javascript".
Isi judul sesuai dengan keinginan anda.
Kemudian Isikan konten dengan kode yang ada dibawah,

<style type="text/css">
ul a{text-decoration:none;}
</style>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ol>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ol>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Keterangan: kode berwarna merah merupakan jumlah artikel yang ingin anda tampilkan.

Jika sudah klik "Simpan".
Selesai :)

Sekarang widget random post sudah berhasil anda pasang pada Blog anda.

Sekian dari saya, kurang lebihnya mohon maaf.
Semoga bermanfaat.

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 :

QuinBlog

SELAMAT DATANG DI BLOG KECIL SAYA

Tampilkan postingan dengan label Blogging. Tampilkan semua postingan

Modifikasi Tampilan Pesan Komentar Blog

Mempercantik Tampilan Komentar Blog

Mengatasi Pesan Komentar Blog Yang Pindah Ke Bawah

Membuat Menu Tab View Untuk Widget Blog

Mendaftar Dan Memasang Widget Histats Pada Blog

Membuat Privacy Policy Pada Blog

Membuat Menu Navigasi Utama Pada Blog

Memasukan File PDF Ke Dalam Postingan Blog

Membuat Screensaver Pada Blog

Membuat Daftar Isi Otomatis Di Blog

Membuat Share Button Keren Pada Blog

Membuat Pesan Tunggu (Loading) Pada Blog

Membuat ucapan selamat datang di Blog

Merubah tampilan Scrollbar di Blog

Memasang widget Twitter FollowerBox pada Blog

Memasang Widget Random Post pada Blog

Menampilkan atau Menyembunyikan Kotak Komentar pada Blog

Memberikan Efek-efek Unik Pada Kursor Mouse

Portal Chat QuinBlog

Popular Posts

Blogger templates

Labels

Blog Archive

Mengenai Saya

Blogroll

About

Weekly post