Breaking News
Loading...
Showing posts with label TUTORIAL BLOG. Show all posts
Showing posts with label TUTORIAL BLOG. Show all posts

Wednesday, August 28, 2013

Membuat show kode html saat posting blog


membuat spoiler dalam bentuk html atau tombol untuk show content berikut caranya copy script dibawah dan paste pada penulisan html sobat
Judul Spoiler
ISI SPOILER
berikut diatas adalah hasilnya.

dan skripnya dibawah ini

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Spoiler</span><input value="Open!!!" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39; Close..&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39; Clik Here&#39;; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER ketik dibagian ini http://tomboldiva.blogspot.com
</div></div></div>


MEMBUAT TABEL DENGAN HTML BLOG POST

Nama Tanggal Lahir
EVA AROMA F 05/061987
berikut diatas adalah contoh dasar penulisan tabel dengan menggunakan 2 kolom 1 2 isian untuk mencontoh klik show dibawah kemudian copy paste script ke halaman html dan lihat hasilnya

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Tanggal Lahir</th>
  </tr>
  <tr>
    <td>Ahmad Ridwan</td>
    <td>21-03-2013</td>
  </tr>
</table>

kemudian untuk membuat tabel dengan warna warni dikolom seperti ini :
Rowspan 3 Nama Alamat Telp. Colspan 2
Ayanti Jl. Ijo 113242232
Ulum yanti Jl. Rencong 232343232

copy paste kode dibawah dan liat hasilnya
<table border="1" cellpadding="3" cellspacing="0" style="width: 510px;">
<tbody>
<tr>
<th bgcolor="#00CCCC" rowspan="3" width="58">Rowspan 3</th>
<th bgcolor="#00CCCC" height="41" width="79">Nama</th>
<th bgcolor="#33FF33" width="83">Alamat</th>
<th bgcolor="#FF9900" width="92">Telp.</th>
<th bgcolor="#FF9900" colspan="2">Colspan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">Ayanti</td>
<td align="center" bgcolor="#99CC66">Jl. Ijo</td>
<td bgcolor="#9966FF">113242232</td>
<td bgcolor="#9966FF" width="92"></td>
<td bgcolor="#9966FF" width="92"></td>
</tr>
<tr>
<td bgcolor="#FFFF00">Ulum yanti</td>
<td align="center" bgcolor="#FFFF00">Jl. Rencong</td>
<td bgcolor="#FFFF00">232343232</td>
<td bgcolor="#FFFF00"></td>
<td bgcolor="#FFFF00"></td>
</tr>
</tbody></table>

kode pendukung untuk tabel diatas :
  • align : untuk mengatur posisi horizontal
  • valign : untuk mengatur posisi vertikal
  • width : untuk mengatur lebar
  • height : untuk mengatur tinggi
  • border : untuk mengatur tebal garis
  • border-color : untuk memberi tebal garis dengan warna
  • cellpadding : untuk mengatur jarak garis dengan objek didalamnya
  • cellspacing : untuk mengatur jarak tiap cell
  • bgcolor : untuk mengatur warna
  • background : untuk mengatur latar gambar
  • rowspan : jumlah baris yang memotong beberapa baris
  • colspan : jumlah kolom yang memotong beberapa kolom

Saturday, August 24, 2013

Membuat pesan berjalan di blogspot

kali ini sobat pasti pernah mendengar dengan istilah "marquee" y inilah kode html untuk membuat teks bisa berjalan sehingga saya ingin menunjukkan cara penggunaannya dan membuatnya dalam bentuk teks pesan disebuah blog, sebenarnya kode ini bisa diletakkan di dalam postingan juga, namun kali ini saya menempatkannya dalam kolom footer-wrapper template html blog saya, dan saya share kan keteman teman semua. caranya mudah kok. sebelumnya lihat dulu hasilnya jika sobat meletakkannya dengan benar sesuai contoh.

berikut hasil nya
Selamat datang di http://tomboldiva.blogspot.com entri yang anda kunjungi sebagai berikut silahkan klik pada laman yang disediakan, besar harapan bisa bermanfaat bagi anda. silahkan masukkan komentar pada laman komentar sebagai pemberian donasi atas blog saya, terimakasih dan sampai berjumpa kembali

bagaimana tertarik? ya sudah kalo sobat semua tertarik mari kita menaruhnya dalam template kita/ halaman blog kita caranya cukup mudah
  1. sobat siapkan salinan html templat sobat semua dengan menaruh scriptnya di notepad atau sobat bisa download htmlnya dengan menu yang ada didashbor blogspot atau blog sobat semua.
  2. kemudian pilih templat > edit html>
  3. kemudian cari kode <div id='footer1-wrapper'> cari dengan menekan ctr+f supaya biar cepat.
  4. kemudian pastekan kode dibawah ini tepat diatas kode diatas

  5. <div dir='ltr' style='text-align: left;' trbidi='on'>
    <div dir='ltr' style='text-align: left;' trbidi='on'>
    <div style='border: 0px solid#ffffff; padding: 0px;'>
    <div style='border: 0px solid#ffffff; padding: 0px;'>
    <table border='3' style='width: 100%px;'><tbody>
    <tr><td bgcolor='black'><div style='text-align: center;'>
    <span style='color: white; font-size: large;'><span style='color: red;'><marquee behavior='scroll' direction='left'><b>Selamat datang di http://tomboldiva.blogspot.com entri yang anda kunjungi sebagai berikut silahkan klik pada laman yang disediakan, besar harapan bisa bermanfaat bagi anda. silahkan masukkan komentar pada laman komentar sebagai pemberian donasi atas blog saya, terimakasih dan sampai berjumpa kembali</b><b/></marquee></span></span>
    </div>
    </td></tr>
    </tbody></table>
    </div>
    </div>
  6. gantilah tulisan yang berwarna biru dengan tulisan sobat sendiri gunakan kata kata yang bijaksana heee
  7. lihat hasilnya, sebelumnya kalo kode ini ditaruh sebagai widget atau dalam post maka kode ini tidak akan nampak hasilnya dulu atau tidak bergerak namun setelah sobat view blog baru akan nampak, mudah bukan semoga tetap semangat sobat semua.  
  8. berikut yang tampak di footer wrapper halaman blog sobat

Selamat datang di http://tomboldiva.blogspot.com entri yang anda kunjungi sebagai berikut silahkan klik pada laman yang disediakan, besar harapan bisa bermanfaat bagi anda. silahkan masukkan komentar pada laman komentar sebagai pemberian donasi atas blog saya, terimakasih dan sampai berjumpa kembali

Menambah relate post acak dibawah postingan dan halaman blog

salam berbagi buat sobat semua.
kali ini saya mau berbagi tips trik blogspot
Menambah Relate Pos Acak Dibawah Postingan Dan Halaman Blog

caranya gampang
  • buka dashbor 
  • tata letak
  • add widget 
  • pilih html/javascript
  • copy paste code dibawah 

  •  <style scoped="" type="text/css">
    ul.rdmrcpostag{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
    ul.rdmrcpostag,ul.rdmrcpostag li{margin:0;padding:0;list-style:none;overflow:hidden}
    ul.rdmrcpostag{background:aliceBlue}
    ul.rdmrcpostag li{padding:5px}
    ul.rdmrcpostag b a{color:#00699B}
    ul.rdmrcpostag .thumbp{float:left;margin:0 5px 3px 0}
    ul.rdmrcpostag img{padding:3px;border:1px solid #B1B1B1;background:#F3F3F3}
    ul.rdmrcpostag .datex{font-size:12px;margin:3px 0 0}
    ul.rdmrcpostag .dt{margin:0 5px 0 0;padding:0 5px 0 0;border-right:1px solid #7A7A7A}
    ul.rdmrcpostag p{margin:5px 0 0}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://ivyth.googlecode.com/svn/js/rdmrecpostajax.js" type="text/javascript"></script>
    <div id="randomcecent_posts_id"></div>
    <script type="text/javascript">
    //<![CDATA[
    $(window).load(function(){
    RandomRecenTag({
    blogURL: "",
    MaxPost: 5,
    RandompostActive: true,
    thumbSize:55,
    jumlahhuruf:100,
    cmtext:"Komentar",
    NoCmtext:"No Comment",
    tagName:false,
    idcontaint: "#randomcecent_posts_id"
    });
    });
    //]]>
    </script>
  • save
  • letakkan widget dibawah halaman postingan
  • semoga bermanfaat

Membuat entri populer slide show pada blog

oke sobat kali ini saya ingin share tentang blogspot,
sebuah widget memang sangat penting bagi seorang publisher untuk itu bagaimana agar tampilan blog kita semakin memudahkan orang untuk mencari dan menulusuri entri entri pada blog kita, untuk itu saya rekomendasikan satu dari sekian banyak cara menghias blog di postingan para blogger, yaitu membuat slide show pada kolom entri populer

caranya cukup mudah sobat,
sobat tinggal copas aja script dibawah ini
<style type="text/css" media="screen">
    #PopularPosts1 {
    overflow:hidden;
    margin-top:2px;
    padding:0px 0px;
    height:400px;
    }
    #PopularPosts1 ul {
    width:280px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #PopularPosts1 li {
    width:280px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:80px;
    overflow: hidden;
    background:none;
    border:1px solid #ddd;
    }
    #PopularPosts1 li .item-title {
        color:#A5A9AB;
        font-size:12px;
        margin-bottom:2px;
    }
    #PopularPosts1 li .item-title a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #PopularPosts1 li img {
     float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    #PopularPosts1 li .item-snippet {
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:12px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }
    #PopularPosts1 .item-snippet a,
    #PopularPosts1 .item-snippet a:visited {
        color:#3E4548;
        text-decoration: none;
    }
    #PopularPosts1 .spyWrapper {
        height: 100%;
        overflow: hidden;
        position: relative;  
    }
    #PopularPosts1 {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
    }
    .tags span,
    .tags a {
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
    }
    a img {
        border: 0;
    }
    </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8">
    $(function () {
        $('.popular-posts ul').simpleSpy();
    });
    </script> <script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></scrip ></scrip

setelah script diatas dicopy tunggu dulu!! siapkan dulu
  • buka halaman dashbor blog sobat kemudian pilih >>TATA LETAK/LAYOUT>>ADDWIDGET>>HTML/JAVASCRIPT>>PASTEKAN KODE TERSEBUT DIDALAM WIDGET>> SAVE ATAU SIMPAN.
  • setelah disimpan letakkan WIDGET HTML/JAVASCRIPT tepat diatas WIDGET ENTRI POPULER lihat seperti gambar dibawah.
  • nah gampang kan? silahkan dicoba dan lihat hasilnya.

MEMBUAT POSTINGAN LINK DOWNLOAD TIMBUL PADA BLOG

kadang sebuah halam blog harus memiliki tempat link download yang nampak strategis, pembaca postingan kita biasanya sering langsung mencari link download tanpa harus berpanjang melihat description tulisan blog kita, agak kecewa memang namun begitulah para pembrowser oleh karenanya berikut cara membuat link download dalam postingan timbul
lihat previewnya
jika kalian ingin membuat seperti diatas copy paste kode dibawah ini, dan edit melalui menu HTML pada saat membuat postingan diblog sobat :

<div style="border:1px solid#ffffff; padding:1px;"><div
style="border:1px solid#ffffff; padding:1px;"><table width="100%" border="1"><td bgcolor=black><div
style="text-align:center;"><font color="white"
size=5>LINK DOWNLOAD</font></table>

<table width="100%"
border="0"><tr><td width="50%" bgcolor="black"
align="center"><a href="http://adf.ly/ULOMK" class=""><font
color="lime">LINK 1</font></a></td><td
width="50%" bgcolor="black" align="center"><a href="http://adf.ly/ULOMK"
class=""><font color="lime">LINK
2</font></a></td><tr><td width="50%"
bgcolor="black" align="center"><a http://adf.ly/ULOMK"
class=""><font color="lime">LINK 3


</font></a></td><td width="50%" bgcolor="black"
align="center"><a href="http://adf.ly/ULOMK" class=""><font
color="lime">LINK
4</font></a></td></tr></table>


MEMBUAT TULISAN POSTINGAN BLOG DIDALAM KOTAK

berikut cara menulis postingan dalam sebuah kotak
screen hasil contohnya :

Contoh tulisan yang diletakkan dalam kotak.

pada saat membuat postingan copy script dibawah ini dan buat postingan dalam bentuk HTML dan copy paste script ini

<p style="border-right: #6c7a7d 1px inset; padding-right: 30px; border-top: #6c7a7d 1px inset; padding-left: 30px; margin-left: 20px; border-left: #6c7a7d 1px inset; margin-right: 70px; border-bottom: #6c7a7d 1px inset"><font color="#ff0000">Contoh tulisan yang diletakkan dalam kotak.</font></p>



Monday, August 19, 2013

Membuat komentar blogspot jadi keren

Salam sukses,

Assalamualaikum sobat blogger dimanapun :

kali ini saya akan membagi trik agar blog anda menjadi lebih indah dipandang. kadang sebuah tampilan mempengaruhi kenyamanan pandangan saat kita melakukan segala aktifitas. oleh karnanya banyak yang menilai penampilan yang baik menandakan orangya juga baik hati. hehehe!

oke langsung aja

jika ingin tampilan komentar blog sobat y gak jadul jadul amat silahkan ikuti trik saya kali ini :


  1. sobat masuk ke halaman settingan blospot sobat semuanya.
  2. kemudian pilih setelan
  3. kemudian pilih post dan komentar
  4. pada kolom LOKASI KOMENTAR sobat pilih TERSEMAT kemudian
  5. kalau cara diatas sudah benar dilakukan kemudian sobat masuk lagi ke halaman settingan 
  6. pilih menu TEMPLATE>EDIT>EDITHTML
  7. kemudian copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>


  8. .comments {
      padding: 4px;
      background: #eeeeee;
      border: 1px solid #999999;
      -moz-border-radius: 5px 5px 5px 5px;
    }
    
    .comments-content .comment-thread {
      padding: 4px;
      background: #ffffff;
      border: 1px solid #cccccc;
    }
    
    .comments .comments-content .comment {
      margin-bottom: 0px; padding-bottom: 0px;
    }
    
    .comments .comments-content .comment:first-child {
      padding-top: 0px;
    }
    
    .comments .avatar-image-container {
      height: 36px;
      padding-left: 4px;
      background: #ffffff;
      border: 1px solid #cccccc; 
      -moz-border-radius: 3px 3px 3px 3px;
    }
    
    .comments .comment-block {
      padding-top: 4px;
      padding-bottom: 8px;
      padding-left: 4px;
      padding-right: 4px;
      background: #fcfcfc;
      border: 1px solid #cccccc;
      -moz-border-radius: 3px 3px 3px 3px;
    }
    
    .comments .comments-content .inline-thread {
      border: 1px solid #cccccc;
      -moz-border-radius: 3px 3px 3px 3px;
    }
    
    .comments .comments-content .comment-replies {
      margin-left: 48px;
    }
    
    .comments .comment .comment-actions a {
      margin-right: 4px;
      padding: 2px;
      background: #f3f3f3;
      border: 1px solid #cccccc;
      -moz-border-radius: 3px 3px 3px 3px;
    }
    
    .comments .continue a {
      padding: 2px;
      background: #f3f3f3;
      border: 1px solid #cccccc;
    }
    
    .comments .comments-content .datetime {
      float: right;
      margin-right: 4px;
    }
    
    .comments .comments-content .icon.blog-author {
      float: right;
      margin-right: 3px;
    }
    
    .comment-form {
      max-width: 100%;
      width: 100%;
    }



     
  9. lihat hasilnya ?
  10. demikian dan terima kasih

Cara menampilkan komentar blogspot yang tidak muncul karna google+ setting

Salam Blog,

Buat yang newbie coret blog seperti saya, kadang sebuah comment sangat berarti untuk membuat kita bersemangat menulis dan melihat hasil blog atau coretan postingan kita, nah kejadian yang baru saya alami saya menambahkan settingan google + ke blog saya dan apa yang terjadi? ternyata saya mendapat masalah kolom komentar saya tidak bisa dibuka ? (dasar gaptek) emang sih! hahahaha.... karna saya uda lama gak buat postingan hampir 1 tahun blog saya vacum, nah kembali ke masalah tadi. saya mencoba mencari tau penyebabnya di mbah google, banyak yang posting cara memunculkan koment blogspot tapi itu yang buat settingan standartnya saja, lama mencari akhirnya saya putuskan untuk mengatasi masalah saya sendiri, dengan sedikit berfikir dan merenung saya putuskan untuk kembali masuk ke akun settingan blog saya dan sedikit lama mengoprak aprik akhirnya saya menemukan kejanggalan apa itu? ya tadi masalahnya ada yang lengah saat saya mensetting pendaftaran google+ 

berikut saya jelaskan kesalahan saya 
  • untuk yang sudah daftar menambahkan settingan google+ kalian masuk lagi ke settingan google + klik halaman setting blogspot sobat sekalian.
  • masuk ke baris settingan google +
  •  kemudian sobat lihat
  •  Periksa apakah kolom gunakan google+komentar di blog ini? sobat centang? dan jika iya itulah masalahnya. jika ingin blog sobat dimunculkan komentarnya hilangkan tanda centang pada kolom tersebut.
  • dan selesai , masalah sepele kadang membuat kita jadi pusing ???
  • salam sukses buat sobat semua. 
  • dan bila ingin merenovasi tampilan komentar blog sobat agar lebih bagus dan lebih terkini sobat tinggal klik tutorialnya berikut  

Sunday, August 18, 2013

KODE WARNA HTML

WARNA HTML
CAMEX WAP
KODE WARNA HTML Contoh:Putih =>#ffffff;
#FOF8FF
Aliceblue
#FAEBD7
Antiquewhite
#00FFFF
Aqua
#7FFFD4
Aquamarine
#F0FFFF
Azure
#F5F5DC
Beige
#FFE4C4
Bisque
#000000
Black
#FFEBCD
Blanchedalmond
#0000FF
Blue
#8A2BE2
Blueviolet
#A52A2A
Brown
#DEB887
Burlywood
#5F9EAD
Cadetblue
#7FFF00
Chartreuse
#D2691E
Chocolate
#FF7F50
Coral
#64950
Cornflowerblue
#FFF8DC
Cornsilk
#DC143C
Crimson
#00FFFF
Cyan
#00008B
Darkblue
#008B8B
Darkcyan
#B8860B
Darkgoldenrod
#A9A9A9
Darkgray
#006400
Darkgreen
#8B008B
Darkmagenta
#BDB76B
Darkkhaki
#556B2F
Darkolivegreen
#FF8C00
Darkorange
#9932CC
Darkorchid
#8B0000
Darkred
#E9967A
Darksalmon
#8FBC8B
Darkseagreen
#483D8B
Darkslateblue
#2F4F4F
Darkslategray
#00CED1
Darkturquoise
#9400D3
Darkviolet
#FF1493
Deeppink
#00BFFF
Deepskyblue
#696969
Dimgray
#1E90FF
Dodgerblue
#B22222
Firebrick
#FFFAF0
Floralwhite
#228B22
Forestgreen
#FF00FF
Fuchsia
#DCDCDC
Gainsboro
#F8F8FF
Ghostwhite
#FFD700
Gold
#DAA520
Goldenrod
#808080
Gray
#008000
Green
#ADFF2F
Greenyellow
#F0FFF0
Honeydew
#FF69B4
Hotpink
#CD5C5C
Indianred
#4B0082
Indigo
#FFFFF0
Ivory
#F0E68C
Khaki
#E6E6FA
Lavender
#FFF0F5
Lavenderblush
#7CFC00
Lawngreen
#FFFACD
Lemonchiffon
#ADE8E6
Lightblue
#F08080
Lightcoral
#E0FFFF
Lightcyan
#FAFAD2
Lightgoldenrodyellow
#90EE90
Lightgreen
#D3D3D3
Lightgray
#FFB6C1
Lightpink
#FFA072
Lightsalmon
#20B2AA
Lightseagreen
#87CEFA
Lightskyblue
#778899
Lightslategray
#B0C4DE
Lightsteelblue
#FFFFE0
Lightyellow
#00FF00
Lime
#32CD32
Limegreen
#FAF0E6
Linen
#FF00FF
Magenta
#800000
Maroon
#66CDAA
Mediumaquamarine
#0000CD
Mediumblue
#BA55D3
Mediumorchid
#9370DB
Mediumpurple
#3CB371
Mediumseagreen
#7B68EE
Mediumslateblue
#00FA9A
Mediumspringgreen
#48D1CC
Mediumturquoise
#C71585
Mediumvioletred
#191970
Midnightblue
#F5FFFA
Mintcream
#FFE4E1
Mistyrose
#FFE4E1
Moccasin
#FFDEAD
Navajowhite
#000080
Navy
#FDF5E6
Oldlace
#808000
Olive
#6B8E23
Olivedrab
#FFA500
Orange
#FF100%0
Orangered
#DA70D6
Orchid
#EEE8AA
Palegoldenrod
#98FB98
Palgreen
#AFEEEE
Paleturquoise
#DB7093
Palevioletred
#FFEFD5
Papayawhip
#FFDAB9
Peachpuff
#CD853F
Peru
#FFC0CB
Pink
#DDA0DD
Plum
#B0E0E6
Powderblue
#800080
Purple
#FF0000
Red
#BC8F8F
Rosybrown
#4169E1
Royalblue
#8B4513
Saddlebrown
#FA8072
Salmon
#F4A460
Sandybrown
#2E8B57
Seagreen
#FFF5EE
Seashell
#A0522D
Sienna
#C0C0C0
Silver
#87CEEB
Skyblue
#708090
Slategray
#FFFAFA
Snow
#00FF7F
Springgreen
#4682B4
Steelblue
#D2B48C
Tan
#008080
Teal
#D8BFD8
Thistle
#FF6347
Tomato
#40E0D0
Turquoise
#EE82EE
Violet
#F5DEB3
Wheat
#FFFFFF
White
#F5F5F5
Whitesmoke
#FFFF00
Yellow
#9ACD32
Yellowgreen


CAMEX 2010