Kamis, 21 Juni 2012

Cara Membuat Kotak Scroll di Postingan Blog

Berikut ini langkah-langkah Membuat Kotak Scroll di Postingan Blog:

1.
<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 100px; width: 400px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;"> Masukan tulisan atau gambar disini </div>

2.Copy dan paste code diatas.

-Tulisan Berwarna Hijau -- 16px/26px Adalah besar ukuruan Font,dan bisa anda ganti dengan ukurun yang anda mau.

-Tulisan Berwarna Biru -- Masukan tulisan atau gambar disini Adalah tulisan yang anda ingin posting.

Memasang Google Translate pada Blog



Google translate ini dikembangkan oleh Google untuk mentranslet bahasa pada blog blogger ke berbagai bahasa lainnya. Dengan membuat Google Translate penggunjung dari luar negeri dapat membaca artikel anda apabila ia menggunakan widget ini. Cara pemasangan widget ini sangat mudah, untuk itu langsung saja ikuti langkahnya berikut ini:

1.Pada Dashboard Pilih Design >> Page Elements >> Add a Gadget(Tambah Gadget) >> HTML/Java Script

2.Lalu Copy dan paste code dibawah.
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>


3.Save.
4.Selesai.

Senin, 18 Juni 2012

Cara membuat fitur Threaded Comments (reply to comment) pada BLOG



-GAMBAR DIATAS ADALAH CONTOH.

-BERIKIUT INI ADALAH LANGKAH-LANGKAH (membuat fitur Threaded Comments (reply to comment) pada BLOG)
1. Pada Dashboard pilih Design > Edit Html, lalu Backup Template (untuk menghindari hal-hal yang tidak di inginkan.

2. Klik Expand Widget Templates

3. Cari Kode di bawah ini:
<b:include data='post' name='comments'/>
4. Ganti kode di atas dengan kode bawah ini:
<b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if>

5. Letakkan kode di bawah ini, di atas kode ]]></b:skin>
Klik show untuk melihat
.comments {

clear: both;

margin-top: 10px;

margin-bottom: 0px;

line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099FF', endColorstr='#009999');
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#0099FF');
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF', endColorstr='#0099CC');
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px;
}
.comments .comments-content .comment {
padding-bottom:8px;
margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .user a {
color: #444;
}
.comments .comments-content .user a:hover {
text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

Minggu, 20 Mei 2012

Cara Membuat Animasi Jam,dll pada BLOG

1. Masuk ke situs FLASHVORTEX.COM









2. Pada bagian Menu Di atas,,, silahkan anda pilih animasi yang ingin anda buat... Baik itu Menus, Texts, Banners, Button, dll.









3. Dalam hal ini saya akan mencontohkan Banners... Silahkan Pilih banner yang anda suka... klik CLICK HERE TO EDIT THIS
4. Edit kata kata sesuai dengan yang anda inginkan.. Lalu klik Generate Animation..

5. setelah itu anda akan di berikan sebuah kode... nah,... copy paste kode tersebut ke blog anda... baik itu di edit html, postingan, atau pada gadget baru... terserah anda...
SELAMAT MENCOBA..

Sabtu, 19 Mei 2012

Cara Menambahkan Tanda tangan keren pada blog

1.      Langsung saja meluncur ke alamat http://mylivesignature.com/ dan klik tulisan Click Here To Start.
2.      Pada halaman berikutnya pilih Using the signature creation wizard.
3.      Di halaman wizard (1-6 step) ini masukkan data yang diminta kemudian klik Next Step.
wizard 1: Masukkan name atau nama tanda tangan.
wizard 2: Pilih jenis huruf/font yang digunakan.
wizard 3: Tentukan ukuran besar/kecilnya tanda tangan.
wizard 4: Tentukan warna background serta warna teks tanda tangan.
wizard 5: Aturlah slope/kemiringan tanda tangan.
wizard 6: Tanda tangan sudah selesai tinggal ambil kodenya.
4.     Langkah selanjutnya tinggal mengambil kode tanda tangan yang sudah selesai dibuat dengan mengklik tulisan Want to use this signature ?.
5.     Nah disini 2 pilihan kode yang bisa di generate, pilih saja Generate HTML code karena kita akan menggunakannya untuk tanda tangan di bawah postingan blog.
6.      Klik lagi Generate a code for my handwritten signature.
7.      Copy kode HTML tanda tangan yang diberikan dan simpan di notepad.

Nah sekarang sobat sudah memiliki kode tanda tangan yang siap untuk dipasang dibawah postingan blog setiap kali anda membuat artikel baru. Cara pasang tanda tangan dibawah posting pasti sobat sudah paham lah, tinggal pilih Edit HTML pada panel posting blogger kemudian paste-kan kode tanda tangan tadi dibagian bawah artikel maka selesai deh !!